nextjournal 2023-07-22

Does anyone have an example of setting up Codemirror 6 MergeView editors to be in sync (scroll together)?

I went with removing :max-height in theme

I tried these two approaches, creating extensions where on editor listens and change another

(.domEventHandlers
 EditorView
 (j/lit
  {:scroll
   (j/fn [^:js {-type :type}
          ^:js {:as view}]
     (when (= -type "scroll")

       (j/let [^:js {:keys [from to]} (.. view -viewState -viewport)
               scroll-to (new SelectionRange from to)]
         (.dispatch (.-b (db/get-in [:diff :editor]))
                    (j/lit {:effects [(.scrollIntoView EditorView scroll-to)]})))))}))

(.domEventHandlers
 EditorView
 (j/lit
  {:scroll
   (j/fn [^:js {-type :type :as event}
          ^:js {:as view}]
     (when (= -type "scroll")
       (j/let [^:js xy (.getBoundingClientRect (.-dom view))
               scroll-pos (.posAtCoords view xy)]
         (.dispatch (.-b (db/get-in [:diff :editor]))
                    (j/lit {:effects [(.scrollIntoView EditorView scroll-pos)]})))))}))

But the first one is flickering, and the second one make one of the editors lag behind. How can I have something like this https://marijnhaverbeke.nl/upload/merge/ ?