Codemirror 6 sync scrolling of two EditorView's

Meta
1

I’m building an app with two editors, split vertically. One for users to type into, and the other that formats it (changes the words, fixes spelling, things like that…).

My question is, how it is possible to keep two editors in sync when you scroll?

I’m looking at the “merge add-on” and the scrolling is very tight and synched. So I know at least technically it is possible. But of course that plugin is for diffs, not the same use case.

Also I’m looking the Codemirror 6 split examples. Is it possible for two EditorView’s to sync their scroll position, but have different state?

https://codemirror.net/6/examples/split/

2

I haven’t tried this yet, but the idea is that you have an update listener and scroll event handler on both editors that syncs the other editor’s scroll position whenever something relevant changes. You’ll probably need to take a bit of care to avoid endless loops between the editors, but other than that this might be quite simple.

3

Awesome. I’ll give that a try. Thanks!

4

Hi, I was trying to implement sync scrolling too, and found this thread, but here’s what I discovered for future reference:
Scroll events are not handled by updateListener, but rather domEventHandlers, for example:

extensions : [
  ...
  EditorView.domEventHandlers({
    scroll(event, view) {
      // handle infinite loop:
      //   early exit if mouse is not hover over current div
      const self = document.getElementById( ... )
      if (!self.matches(":hover")) { return; }
      // main logic
      const scroll = event.target.scrollTop;
      ...
    }
  }),
]

Hopefully this is correct and is useful for future readers.

1 Like
5

I want to achieve the following link function, I use codemirror6.

let offsetTop = editor.heightAtLine(child.position.start.line - 1, “local”);

what should I do？