Mismatched transaction error

[dan-cooke]

These errors are the bane of my existence when using TipTap . I find it extremely difficult to understand the transaction flow, especially when chaining and using the command function

With a simple function like this:

      createRule:
        (attrs: RuleAttrs) =>
        ({ editor }) => {
          if (!editor) return false;
          const { from, to } = editor.state.selection;

          return editor
            .chain()
// removed previous chain commands for simplicity (still get the error)
            .command(({ tr, dispatch }) => {
              let replaced = false;
              tr.doc.nodesBetween(from, to, (node, pos) => {
                const nodeEnd = pos + node.nodeSize - 1;
                if (!node.isText) {
                  return;
                }
                if (
                  (from > pos && from < nodeEnd) ||
                  (to > pos && to < nodeEnd)
                ) {
                  const type = editor.schema.nodes.inlineRuleNode;
                  const content = tr.doc.slice(from, to);
                  const node = type.create(attrs, content.content);
                  // This is the problem transaction here
                  tr.replaceRangeWith(from, to, node);
                  
                  replaced = true;

                  return false;
                }
              });
              return replaced;
            })
            .focus()
            .run();
        },

The error

It is thrown from EditorState applyInner

  applyInner(tr) {
    if (!tr.before.eq(this.doc))
      throw new RangeError("Applying a mismatched transaction");

Inspecting the tr vs the this.doc I can see the transaction that is failing is actually empty,

ie. it has no steps, no mappings

The transaction has the "After" state ie. the doc has my newly inserted inlineRuleNode but the EditorState does not have this. So it suggests to me that the transaction is not using the same state as the editor

What I've tried

1. Manually dispatching the tr inside the command function
2. Putting evrything inside a single command block
3. Using Tip tap helpers instead of mutating the tr directly, ie. commands.deleteRange and commands.insertContentAt

Other information

This command is called from a bubble menu in my editor, which then opens a drawer. This drawer takes the users focus from the editor, and when they press the "Save" button, it runs the command.

So my theory now is that this focus shift is causing the problem, ie. when the focus returns to the editor - Tip tap/ PM is sending a selection transaction, and this transaction is out of sync with the EditorState?

Versions

    "@tiptap-pro/extension-file-handler": "^2.11.9",
    "@tiptap-pro/extension-unique-id": "^2.11.1",
    "@tiptap/core": "2.11.4",
    "@tiptap/extension-bullet-list": "^2.7.2",
    "@tiptap/extension-color": "2.11.4",
    "@tiptap/extension-dropcursor": "2.11.4",
    "@tiptap/extension-focus": "2.11.4",
    "@tiptap/extension-font-family": "2.11.4",
    "@tiptap/extension-gapcursor": "2.11.4",
    "@tiptap/extension-heading": "2.11.4",
    "@tiptap/extension-image": "2.11.4",
    "@tiptap/extension-list-item": "^2.7.2",
    "@tiptap/extension-paragraph": "2.11.4",
    "@tiptap/extension-placeholder": "2.11.4",
    "@tiptap/extension-table": "2.11.4",
    "@tiptap/extension-table-cell": "2.11.4",
    "@tiptap/extension-table-header": "2.11.4",
    "@tiptap/extension-table-row": "2.11.4",
    "@tiptap/extension-text-align": "2.11.4",
    "@tiptap/extension-text-style": "2.11.4",
    "@tiptap/extension-underline": "2.11.4",
    "@tiptap/pm": "2.11.4",
    "@tiptap/react": "2.11.4",
    "@tiptap/starter-kit": "2.11.4",
    "prosemirror-changeset": "^2.2.1",
    "prosemirror-commands": "^1.6.2",
    "prosemirror-docx": "^0.2.0",

Update:

Okay i am going to raise a bug, because this occurs with something as trivial as editor.commands.deleteRange(1, 2)

[dan-cooke]

Okay I have found the source of the issue..

You cannot use editor from the command

ie.

---   createRule:
---   (attrs: RuleAttrs) =>
---        ({ editor  }) => {
---     const { from, to } = editor.state.selection;


+++      createRule:
+++       (attrs: RuleAttrs) =>
+++        ({ chain, tr, state }) => {
+++          const { from, to } = tr.selection;

This is extremely annoying behaviour, and I have no clue why those two aren't equivalent, nor why this is not documented.