State.selection is out of sync with DOM selection

I’m using TipTap but this seems like a ProseMirror-specific issue.

I have a custom extension that’s overriding the ‘Enter’ keyboard shortcut to delete some text then insert some new content. I want to move selection to be within the new content, and Prosemirror-Dev-Tools suggests that the selection indeed maps to the correct position (10) and stays at that position, but in the UI the cursor presents at the beginning of the doc, as if the selection were mapped to position 1, not 10, as seen at the very beginning of this recording: Screen Recording 2022 10 08 at 9 17 04 AM - YouTube

Also, here’s the code that runs (adapted from tiptap/extension-code-block):


return editor
          .chain()
          .command(({ tr }) => {
            tr.delete($from.pos - 2, $from.pos)
            return true
          })
          .insertContent('<page-stanza><p></p></page-stanza>')
          .run()

The selection is then in a weird state where an enter press is handled as if from position 10, while a right arrow key is handled as if from position 1.

I can’t understand why the UI selection would diverge from ProseMirror’s internal selection state, any advice would be hugely appreciated.

If this is in Chrome, take a look at the DOM selection to see if it is possibly being drawn in a different place from where it actually is. If that’s not it, see if you can reduce this to a simple ProseMirror-only script, so that I can try to reproduce it.

Thanks, it seems this is a TipTap specific bug related to using React 18: fix: move React `flushSync` to microtask by sampi · Pull Request #3188 · ueberdosis/tiptap · GitHub