Ashok
Ashok

Reputation: 21

How to navigate through the differences in Merge editor (CodeMirror version 6)

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

Answers (0)

Related Questions