I am implementing a collaborative text editor with CodeMirror as the foundation. I am having a issue with scrolling or maintaining the viewport if you will, when other users’ edits are coming in.
- Assume 2 users: user A and user B.
- Document is 200 lines long with variable height lines.
- Viewport is roughly 30 lines high (for arguments sake)
- User B’s editor is scrolled so his viewport displays lines 160-190
- User A pastes 20 lines at the top of the document
- In User B’s editor, these 20 lines are added using replaceRange
- User B’s viewport is still lines 160-190, however these are not the lines of text he was looking at before.
In the above scenario, I would like to scroll User B’s viewport so it would display lines 180-210 (the same lines of text he was looking at before). Seen from User B’s perspective, nothing should change in his editor (except the length of the scrollbar).
To achieve this, I have been trying to use scrollTo to scroll User B’s document to the correct position. This is proving difficult to do consistently and without flashing (inserting in one operation and scrolling in another), however.
The reasons for this are:
- I cannot easily determine the height of the inserted text, since it can be variable height, and I do not know exactly where the editor will wrap
- getCursorCoords does not update until the operation running replaceRange is finished. If I had updated cursor coords, I could compute the scroll adjustment needed.
Any thoughts on this? Am I going about this the wrong way?