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

hi,

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

20240130175909_rec_

Firefox and Safari

20240130175823_rec_

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?