yjs / y-prosemirror

ProseMirror editor binding for Yjs
https://demos.yjs.dev/prosemirror/prosemirror.html
MIT License
322 stars 111 forks source link

YJS + Prosemirror Dragging Breaks User Cursor Position #105

Open marclave opened 2 years ago

marclave commented 2 years ago

Go to Yjs Shared Editing

When using prosemirror y-js, having one cursor select text then opening a new tab and dragging anything (horizontal mark, image, etc.) above where the other users cursor is bumps their position. It does not happen with quill/slate, only prosemirror.

steps to reproduce: select text in first tab

image

open another tab, create horizontal mark select it and drag it above other users cursor

image image

notice the cursor is no longer highlighting “asdasd”

marclave 15h BTW tried it on latest prosemirror, yjs and y-prosemirror packages. reproducible on every demo page too.

https://demos.yjs.dev/prosemirror/prosemirror.html

https://demos.yjs.dev/prosemirror-versions/prosemirror-versions.html

https://demos.yjs.dev/atlaskit/atlaskit.html

dmonad commented 2 years ago

Hi @marclave,

y-prosemirror currently handles drag-drop insertions poorly.

The problem is that we try to compute a minimal "simple diff". I define a simple diff as a single replace operation at a range in the document.

Usually, this approach works great for all kinds of insert behavior. However, it does not work great for drag-drop. When you drag-drop an element from one position to another, we can't find a good "simple diff". [1,2,3,4] ↦ [3, 1, 2, 4] The best simple diff is to replace 1,2,3 with 3,1,2.

An immediate solution would be to detect that only a single element was moved (the last element moved to the beginning) and perform that operation instead (delete 3, then insert 3 at position 0).

I'm not sure if I'm going to fix this issue in the current implementation. I'm planning a rewrite this year which will fix the issue and have other benefits as well.