React node view loses selection when switching between block types

1

Using Portals seems to be the preferred approach for rendering custom node views in React. This works for the majority of cases, but I’m getting a weird bug where the cursor loses selection when converting from different block types.

Created a reproduction where converting from a heading block to the paragraph node view resets the selection to the start of the paragraph node view: blissful-hamilton-n7gfin - CodeSandbox

Asynchronous DOM mutation and CustomNodeView ignoreMutation makes me think that this may be an issue with async dom mutations, but I’m wondering if anyone else has been able to work around this?

2

Are you using React to render a heading? Nodes will be recreated in the DOM when their type changes. Maybe that’s what you’re seeing?

3

No, I’m using React to render the paragraph.

const view = new EditorView(
      { mount: ref.current },
      {
        state,
        nodeViews: {
          paragraph(node) {
            return new ParagraphView(node);
          }
        }
      }
    );

The heading is using the toDOM setup from prosemirror-schema-basic. And yes, I can confirm that the node is being recreated, though I’m surprised that the selection is being lost when this happens. Changing the block type on the editor from the Prosemirror homepage retains the selection, for example.

I’m also including an ignoreMutation method that returns false for selection events, to leave Prosemirror in charge of managing the selection.

ignoreMutation(mutation) {
        if (mutation.type === "selection") return false;
        return !this.contentDOM.contains(mutation.target);
      }
4

You probably don’t want to make rendering of nodes with content asynchronous—I can imagine that prevents ProseMirror from maintaining the DOM selection in them.