How to load large documents in a MergeView avoiding browser to "crash" and styling issues.

v6
1

I need to load in the editor two large documents and highlight the differences. The docs are usually around 70k+ lines, they are two JSON schemas, the current and one of its variant.

The project is an ember.js project, I’m using code-mirror v6 through a modifier, this is the code:

import Modifier from 'ember-modifier';
import { EditorState } from '@codemirror/state';
import { EditorView, lineNumbers } from '@codemirror/view';
import { MergeView } from '@codemirror/merge';
import { action } from '@ember/object';

enum DocumentType {
  A,
  B,
}

CodeMirrorDiffModifier extends Modifier {
  _editor;
  _extensions;

  modify(element, posArgs, namedArgs) {
    const currentTheme = EditorView.theme({
      '&': {
        color: 'black',
        backgroundColor: 'lightgray',
        fontSize: '14px',
        fontWeight: 'normal',
      },
      '&.cm-focused .cm-cursor': {
        boxShadow: 'inset 0 0 0 2px gray',
        outline: 0,
      },
      '.cm-gutters': {
        backgroundColor: 'lightgray',
        color: 'black',
        whiteSpace: 'nowrap',
        width: '50px;',
      },
      '.cm-gutter .cm-lineNumbers': {
        color: 'black',
        backgroundColor: 'lightgray',
      },
    });

    const heightEditor = EditorView.theme({
      '&': { height: 'calc(100vh - 185px)' },
      '.cm-content, .cm-gutter': { minHeight: '500px' },
      '.cm-scroller': { overflow: 'auto', maxHeight: 'calc(100vh - 185px)' },
    });

    this._extensions = [heightEditor, currentTheme, lineNumbers(), EditorState.readOnly.of(true)];

    this._editor ??= new MergeView({
      a: {
        extensions: this._extensions,
      },
      b: {
        extensions: this._extensions,
      },
      collapseUnchanged: { margin: 3, minSize: 4 },
      gutter: true,
      highlightChanges: true,
      parent: element,
    });

    this._updateEditorContent(namedArgs.docA, DocumentType.A);
    this._updateEditorContent(namedArgs.docB, DocumentType.B);
  }

  @action
  private _updateEditorContent(content, doc: DocumentType) {
    if (this._editor === undefined) {
      return;
    }

    if (doc === DocumentType.A) {
      this._editor.a.dispatch({
        changes: { from: 0, to: this._editor.a.state.doc.length, insert: content },
      });
    }

    if (doc === DocumentType.B) {
      this._editor.b.dispatch({
        changes: { from: 0, to: this._editor.b.state.doc.length, insert: content },
      });
    }
  }
}

I’m using the modifier in a simple component, this one:

<div {{code-mirror-diff docA=@docA docB=@docB}}></div>

These are the libraries that I’m using

"@codemirror/merge": "6.0.2",
"@codemirror/state": "6.2.1",
"@codemirror/view": "6.12.0",

THE PROBLEMS

  1. In a total random way, after some render, it crashes the browser. It goes in memory leak.
  2. The highlighting isn’t always correct and sometimes it doesn’t appear.
  3. Is there another way to fix the height instead of using the calc(100vh - 185px) that I used? I need that the scrollbar is inside the editor and not outside and what I did is the only solution I found.
  4. The collapse doesn’t work, nothing is collapsed and I don’t know why.

Thanks for the helping :man_bowing: