facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
19.81k stars 1.68k forks source link

Bug: Cursors Still Jumping On Version 0.7.6 #3715

Open jamespantalones opened 1 year ago

jamespantalones commented 1 year ago

Hi there, I previously filed #3549 , which was marked as fixed and closed, but I am still seeing the same behavior. Especially between two PCs, but it can also occur on Mac.

Versions

"lexical": "0.7.1",
"@lexical/react": 0.7.6
Lexical version: 0.7.6

Background

If using Lexical along with the @lexical/react/LexicalCollaborationPlugin, users who are not at the top of the document will experience a cursor/caret position "jump" when the user at the top of the document types. This appears to be related to line breaks in the document. It seems like the amount of lines the cursor jumps is around the same number of empty-space line breaks between the top user's cursor and the next user's cursor.

I reported this initially via Discord: https://discord.com/channels/953974421008293909/955972012541628456/1051920290101329940

The previous bug seemed to be related to this here: https://github.com/facebook/lexical/blob/main/packages/lexical-yjs/src/SyncEditorStates.ts#L119-L125

But now, I'm seeing an error on this line: https://github.com/facebook/lexical/blob/e155c88908097f4440037788815b8f62734d5056/packages/lexical/src/LexicalSelection.ts#L2669

Specifically, the error is anchorNode.selectionTransform is not a function

Steps To Reproduce

  1. Enter a collaborative document with at least two users.
  2. Create a simple layout looking like the following:
Section One (followed by some empty lines)
|

Section Two (followed by some empty lines)
  1. User two should place his/her cursor after the Section Two header.
  2. User one should place cursor after Section One header and begin typing.
  3. User two should experience a cursor jump, whether typing or not.
  4. An error will most likely be thrown in the console anchorNode.selectionTransform is not a function

Code example:

Live example: https://lexical-cursor-bug.glitch.me/ Code: https://glitch.com/edit/#!/lexical-cursor-bug

The current behavior

Cursors jump

The expected behavior

Cursors should maintain position.

trueadm commented 1 year ago

Why is your lexical version not in match with 0.7.6? Sane for lexical collaboration plugin? What version is that?

jamespantalones commented 1 year ago

@trueadm hrm, where you seeing that? Using 0.7.6 for the demo

Screen Shot 2023-01-13 at 9 41 28 AM

trueadm commented 1 year ago

Ah my bad. I'll take another look into this next week :)

trueadm commented 1 year ago

So I've looked into this using the latest version of Lexical and the Lexical playground and I cannot reproduce these errors. It would be great if you could supply a video showing this happening – maybe using the split screen option on the Lexical playground (it's under the toggle in the bottom left).

jamespantalones commented 1 year ago

will get that together, give me a day or two

jamespantalones commented 1 year ago

@trueadm do you all have any hosted collab playground? the issue is only visible when you have 2 or more people in the document typing near each other. I'm not able to recreate via local dev environment and a single user with the split screen collab mode on.

If you all don't have something, I will try to dump the playground into glitch for a repro

Thanks

trueadm commented 1 year ago

Ah, I was able to reproduce it today with my partner typing on another machine. This is a very awkward issue to resolve. I however didn't get selectionTransform errors locally. Do you still get that?

jamespantalones commented 1 year ago

@trueadm no, selectionTransform issues are not happening

husseinraoouf commented 1 year ago

I can reproduce this consistently by this steps:

  1. open the editor in two windows with collaboration plugin
  2. write a lot of text the the editor is scroll-able
  3. in one of the windows put the cursor on an empty paragraph node at the top of the editor and scroll down so you can't see the link you are on
  4. in the other window type any thing
  5. the editor in the first window will scroll to the empty paragraph you were selecting in step 3

unrelated note: the editor also scroll to the selected line when an update occurs, but this can be disabled with tag skip-scroll-into-view but unfortunately i already put a tag on the update and i can't put two tags on the same update, is there another way to mark the update that it shouldn't trigger scrolling

husseinraoouf commented 1 year ago

@trueadm one idea to fix this if we can tag updates coming from collaboration with tag skip-scroll-into-view or add the tags collaboration and historic to the check at https://github.com/facebook/lexical/blob/8a9634465fc31ebaeb7f8fd4df9926d71ad6a998/packages/lexical/src/LexicalSelection.ts#L2957-L2962

if any solution of these is acceptable i would be happy to make a pr