Reputation: 21
I have created a merge view editor that shows differences between 2 files. I want to navigate through (jump from one to another) the differences on click of the button (Next, Previous). I found out from here that this was possible in code mirror version 5. Now I have to do the same in Code mirror version 6. How can I achieve this?
In Code Mirror V5,
var target = document.getElementById("view");
target.innerHTML = "";
dv = CodeMirror.MergeView(target, {
value: value,
origLeft: panes == 3 ? orig1 : null,
origRight: orig2,
revertButtons: true,
lineNumbers: true,
mode: "text/html",
highlightDifferences: highlight,
connect: connect,
collapseIdentical: collapse,
allowEditingOriginals: false,
});
var prev = document.getElementById("prevdiff");
var next = document.getElementById("nextdiff");
// On clicking the Previous button, navigating to previous difference
prev.onclick = function () {
dv.edit.execCommand("goPrevDiff");
};
// On clicking the Next button, navigating to next difference
next.onclick = function () {
dv.edit.execCommand("goNextDiff");
};
In Code Mirror Version 6, I have created a merge view inside an angular component like this.
export class CmeditorComponent implements OnInit, AfterViewInit {
doc = `one
two
three
four
five
seven
eight
abc`
view!: MergeView
@ViewChild("diffEl") diffEl!: ElementRef
ngOnInit(): void {
}
ngAfterViewInit(): void {
this.view = new MergeView({
a: {
doc: this.doc,
extensions: basicSetup
},
b: {
doc: this.doc.replace(/t/g, "T") + "\nSix",
extensions: [
basicSetup,
EditorView.editable.of(true),
EditorState.readOnly.of(true)
]
},
parent: this.diffEl.nativeElement,
revertControls: 'a-to-b',
})
}
}
The editor that I receive from the MergeView class(Version 6) seems different from the one given by the version 5 MergeView class. I have no clue how to do this in Code Mirror V6.
Upvotes: 2
Views: 207