editor.view.scrollDOM and editor.view.dom don't match actual rendered DOM in react-codemirror-merge

[EstherRhew]

Hi, thank you for your work on this library!

I'm trying to sync scroll positions between the two panes (Original and Modified) in react-codemirror-merge, so I need access to the actual scrollable DOM elements (scrollDOM) of each editor.

❗ Problem

In the @uiw/react-codemirror package, the CodeMirror component provides an onCreateEditor prop where I can easily access the underlying DOM and editor instance. However, in react-codemirror-merge, the CodeMirrorMerge component does not provide this prop.

So instead, I use a ref to get the editor object. I do receive editor.view.a and editor.view.b, but:

• editor.view.dom, editor.view.a.dom, and editor.view.a.scrollDOM do not match the actual DOM rendered in the browser (as seen in the Elements tab).
• I tried logging them after delays (setTimeout, requestAnimationFrame), but they always point to a stripped-down or intermediate structure that does not include .cm-gutters, .cm-layer, or the actual scrollable container.

🔁 Code Example

<CodeMirrorMerge
  ref={editorRef}
  orientation="a-b"
>
  <Original
    value={originalContent?.code}
    extensions={extensions}
  />
  <Modified
    value={newContent?.code}
    extensions={[
      ...extensions,
      EditorView.editable.of(false),
      EditorState.readOnly.of(true),
    ]}
  />
</CodeMirrorMerge>

const editorRef = useCallback((editor: CodeMirrorMergeRef) => {
  if (!editor?.view) return;

  // Test 1
  console.log(editor.view.dom, 'editor.view.dom');
  console.log(editor.view.b.dom, 'editor.view.b.dom');

  // Test 2
  document.querySelectorAll(".cm-scroller").forEach((node, index) => {
    console.log(`Scroller [${index}]:`, node);
  });

  // Test 3
  setTimeout(() => {
    console.log(editor.view.dom, 'editor.view.dom in setTimeout');
    console.log(editor.view.b.dom, 'editor.view.b.dom in setTimeout');
  }, 3000);
}, []);

🧪 Observations

(for all the tests, they return the same result)
From ref:

<div class="cm-mergeView">
  <div class="cm-mergeViewEditors">
    <div class="cm-mergeViewEditor"></div> // It is empty
    <div class="cm-mergeViewEditor"></div> // It is empty
  </div>
</div>

<div class="cm-editor cm-merge-b">
 // div.cm-scroller only contains div.cm-content, when actually rendered DOM has div.cm-layer, div.cm-gutters etc.
  <div tabindex="-1" class="cm-scroller">
    <div class="cm-content">...</div>
  </div>
</div>

From browser's Elements tab (actual rendered DOM):

<div class="cm-mergeView">
  <div class="cm-mergeViewEditors">
    <div class="cm-mergeViewEditor">
      <div class="cm-editor cm-merge-a">
        <div class="cm-gutters">...</div>
        <div class="cm-scroller">...</div>
        <div class="cm-layer cm-selectionLayer">...</div>
      </div>
    </div>
    <div class="cm-mergeViewEditor">
      <div class="cm-editor cm-merge-b">
        ...
      </div>
    </div>
  </div>
</div>

✅ Additional Note

When I tested with ReactCodeMirror (not CodeMirrorMerge) using the onCreateEditor callback, I received the correct scrollDOM, and event listeners attached worked as expected.

🙋 Questions

1. Shouldn’t the dom and scrollDOM properties point to the actual scrollable container (with .cm-scroller, .cm-gutters, etc.)? Why is this happening?

2. Is there a better way to reliably access the rendered editor DOM for scroll syncing or event handling?

Thanks again for your great work — I’d love to hear your recommendations or whether this could be addressed in a future release.

[EstherRhew]

After some investigation, I found that the editor's wrapper DOM (specifically div.cm-mergeView) is replaced multiple times immediately after the initial mount. I confirmed this by attaching a MutationObserver to div.cm-merge-theme (the container of div.cm-mergeView) and observed the following:

• The div.cm-mergeView node is first added to div.cm-merge-theme, then removed and re-added — and this process repeats twice.
• As a result, accessing or attaching DOM event listeners to elements like editorRef.current.view.a.scrollDOM (which is nested inside div.cm-mergeView) during useEffect, or even after a setTimeout, doesn’t reliably target the final rendered DOM.

To work around this, I used a MutationObserver combined with a debounce strategy to detect when the DOM stabilizes, then attached the event listener at that point.

Here’s a simplified version of the workaround I’m using:

const editorRef= useRef<HTMLDivElement>(null);

useEffect(() => {
  const editor = editorRef.current;
  if (!editor ) return;

// since `div.cm-merge-theme` node is not a replaced dom, it remains stable and can be referenced reliably
const mergeTheme = editor.container;

  const attachIfStable = debounce(() => {
    // Can now access the final scroll dom
    const scrollers =  mergeTheme.querySelectorAll('.cm-scroller');
     if (scrollers[0]) {
       scrollers[0].addEventListener('scroll', handleScroll);
     }
  }, 200);

  const observer = new MutationObserver(() => {
    attachIfStable();
  });

  observer.observe(mergeTheme , { childList: true});

  return () => {
    observer.disconnect();
    attachIfStable.cancel();
  };
}, []);

This ensures the scroll event is attached to the final rendered DOM node. Ideally, it would be helpful if the library provided a stable callback (e.g., onEditorReady) once the final DOM is fully mounted.

If anyone has suggestions or better approaches for handling this, I’d really appreciate the feedback. Thanks!