Nested draggable editors behave differently in all browsers

#1

I try to use a nested editor instance within a draggable node view. This is useful for some kind of CMS like seen below (used in a Craft CMS plugin):

cms
cms2254×1154 261 KB

My goal is to be able to drag the node and edit the text in it.

However, Chrome seems to be the only browser that works as expected:

chrome
chrome1128×874 1.82 MB

In Safari, I’m not able to click within the nested editor at all:

safari
safari1296×938 1.9 MB

In Firefox, I’m able to click within the nested editor but the cursor always jumps to the start of the node:

firefox
firefox1296×852 2.53 MB

There are no issues in Safari and Firefox if I change draggable to false. But I would like to make them draggable :sweat_smile:

I created a glitch demo here:

#2

This got me interested in how Prosemirror implements dragging of nodes that are editable since this is similar to that in a way. PM adds a draggable attribute on demand to such nodes (compare that to the example in glitch with a permanent draggable attribute), when it deems the user might be interested in drag. This makes me feel that a draggable attribute messes with an editable element and to solve the problem we might need to do something similar to what pm-view has done src code.