Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#726 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia dal componente CodeMirrorMerge e dalla gestione della relativa ref, quindi confrontalo con il punto di ingresso onCreateEditor del componente CodeMirror di @uiw/react-codemirror. Riproduci le osservazioni riportate su ref e DOM con la configurazione Original e Modified mostrata; il lavoro è completato quando è stato stabilito un modo affidabile per accedere al DOM scorrevole di ciascun editor renderizzato per la sincronizzazione dello scorrimento o la gestione degli eventi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
2.3k
Fork
162
Merge medio
2h 41m
PR unite (30g)
1

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di uiwjs/react-codemirror

Tutte le issue di uiwjs/react-codemirror

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.