Collaborator cursors can jump to the next line while they type

[TJackwood-Jasper]

Describe the bug When watching awareness updates from another user as they type at the end of a line, you can occasionally see the cursor jump down to the next line then back up to the text being written. See this YJS discussion thread on the exact issue, including a nice reproduction video: https://discuss.yjs.dev/t/cursor-jumping-to-next-line/483

When a user types a letter into the Quill editor, it triggers two events that are sent to and handled by _quillObserver, first a 'selection-change' event with source 'silent', and second a 'text-change' event with source 'user'. _quillObserver will attempt to update the cursor awareness for both events, in that order, triggering the awareness.setLocalStateField emitting an awareness event out to other users.

From here, it's a race condition for whether the first selection-change update gets to a collaborative user and updates the awareness for the cursor on their screen BEFORE of AFTER the text-change fully propogates. If it happens before, the cursor jumps forward a single index, making it twitch to the next line in the document, then the content of the document is updated to add the new character, and the selection is fixed.

To Reproduce Steps to reproduce the behavior:

1. Go to the y-quill demo in two different browsers (i.e. Chrome and Firefox).
2. Continuously type on one browser at the end of a line of text.
3. Observe the other browser's window and how the typing cursor is updated. As this is a race condition, you won't always see it, but it happens pretty often for me.

Expected behavior The cursor that is typing stays smoothly attached to the end of the text that it is typing, without jumping forward in the document

Screenshots See the YJS discussion thread linked in the description for a great example video

Environment Information The environment for my Quill editor:

• Chrome, using a Quill editor within a Vue application
• YJS Versions:
  • y-websockets: 1.4.3
  • y-quill: 0.1.4
  • y-protocols: 1.0.5
• Other versions:
  • quill: 1.3.7
  • quill-cursors: 3.1.2 Also works against the y-quill demo.

Suggested Solution There doesn't seem to be a reason for the awareness update to fire for the'selection-change' Quill event with a 'silent' source. The awareness will only need to update correctly when the actual text change is also getting propogated over to other users, i.e. on the 'text-change' event.

Not updating the awareness when the source is 'silent' should correct the issue. PR to follow.

[volser]

it looks like the same https://github.com/yjs/y-quill/issues/13

I have no idea why it was closed ( it does not look like quill-cursors package issue

[volser]

Solution above does not work for me (

[TJackwood-Jasper]

Agreed it's the same as your closed issue, #13

I found the same issues with multiple cursor awareness events for a single typed character. @volser Can you provide any additional info on why it didn't work for you? Did you pull and use the PR I have up for this issue?

[bri-shin]

Has there been any updates regarding this issue? @volser @dmonad

[bhagawatDongre]

I did some workaround to fix issue by handling cursors by my own putting out if something can be helpful

1. Create new quill module and register it.

• import QuillCursors from 'quill-cursors'; export class CustomCursor extends QuillCursors { constructor(quill, options) { super(quill, options); this.quill = quill; } }

• Quill.register('modules/customCursors', CustomCursor);

Add module in option as per quill-cursors doc

• customCursors: true,

2. Handle cursor updates Methods to look for

// check presense of people accessing doc

• provider.awareness.on('change', ({ added, removed, updated }) => {});

// you can just use them and handle cursors easiest way to copy these method // y-quill/src/y-quill.js

• updateCursor

3. Now to fix issue invoke cursor updates on text-change and selection-change editor.on('text-change', handleCursors); editor.on('selection-change', handleCursors);

handleCursors is all cusror handling code from _quillObserver

check _quillObserver method from y-quill/src/y-quill.js