Applying a mismatched transaction

1

Hello, guys, I create prosemirror plugin and use it in tiptap editor in Vue3. The point is that when I delete a character in view[PluginView] → update I want to set a value in the meta and then read it in appendTransaction. If I do this and call view.dispatch( tr ) at the end I get an error RangeError: Applying a mismatched transaction . Here is the code:

export const testPlugin = () =>
{
    return new Plugin(
    {
        key: new PluginKey('testPlugin'),
        state:
        {
            init: () => ({bodyHeight: 5}),
            apply: (tr, prev) =>
            {
                let next = { ...prev };

                const bodyHeight = tr.getMeta('bodyHeight');

                next.bodyHeight = bodyHeight;

                return next;
            }
        },
        view : () =>
        {
            return {
                update: ( view, prevState ) =>
                {
                    if( view.state.doc.eq( prevState.doc ) ){ return; }

                    const { selection, schema, tr } = view.state;
                    let deleting = false;

                    if(selection.$anchor.node(2) && prevState.selection.$anchor.node(2))
                    {
                        deleting = tr.doc.nodeSize < prevState.doc.nodeSize;
                    }

                    if( deleting )
                    {
                        view.dispatch( tr.setMeta('bodyHeight', 100 ) );
                    }

                }
            }
        },
        appendTransaction([newTr], _prevState, state)
        {
            const a = this.getState( state );
            const b = newTr.getMeta('bodyHeight');

            console.log({a, b} )
        }
    } );
}

Could anyone advise me how to modify it to make it work?

2

Don’t dispatch transactions from a plugin update method. Those are run as part of view updates, and shouldn’t start more updates. appendTransaction is probably the place to do what you are trying to do.

3

And how can I get information about the element’s height and width from a specific node? And to be able to use that information in appendTransaction.

4

You can’t, in that context. Why do you need the height in the editor state?

5

I’m trying to create pagination and the idea is when the text exceeds a certain height a new page is created and continues there. Or am I thinking wrong or is something like this already written?

6

I don’t really see what you are going to compare it with—to measure any kind of height you’ll need a view, so storing something like this in a view plugin seems like a better idea.

7

I will think about it and thank you for your answers.