Issue with Cursor Movement in Different Browsers When Using Draggable Feature in ProseMirror NodeView


I have implemented a feature in ProseMirror that allows users to drag an entire paragraph by clicking on a draggable button. This was achieved by adding a contentEditable=false draggable button to the this.dom in the NodeView. The implementation is as follows:

[Draggable Feature in ProseMirror NodeView - StackBlitz]

However, I’m encountering an issue with cursor movement across different browsers. Specifically, when the cursor is within a paragraph and I try to move it leftwards (using the left arrow key) to the previous paragraph, it fails to move up in Edge and Chrome, but works as expected in Firefox and Safari. Conversely, moving the cursor rightwards (using the right arrow key) to the next paragraph works fine in all four browsers.

Edge and Chrome


Firefox and Safari


I understand that cursor movement can vary across browsers, but I initially thought ProseMirror’s NodeView would handle the cursor movement around contentEditable=false elements by default, ensuring it skips over them appropriately. It seems, however, that there isn’t a compatibility treatment for this.

In this context, should I refer to ProseMirror’s official documentation, particularly the example of embedding CodeMirror, and implement a custom function similar to maybeEscape for handling escape logic? Or is there another recommended approach to address this browser inconsistency in cursor movement?