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
- In a total random way, after some render, it crashes the browser. It goes in memory leak.
- The highlighting isn’t always correct and sometimes it doesn’t appear.
- 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. - The collapse doesn’t work, nothing is collapsed and I don’t know why.
Thanks for the helping