CodeMirror 6 Merge Editor差异导航实现方法

CodeMirror 6 废弃了 V5 中的 execCommand 方式，改用**命令（Command）**体系实现差异跳转。你可以直接使用 @codemirror/merge 包内置的差异跳转命令，通过编辑器视图的调度方法执行跳转逻辑。

步骤1：导入差异跳转命令 #

在 Angular 组件文件顶部，导入所需的跳转命令：

import { MergeView, goToPrevDiff, goToNextDiff } from '@codemirror/merge';

步骤2：添加跳转按钮到模板 #

在组件的 HTML 模板中新增两个按钮，绑定点击事件：

<div class="diff-controls">
  <button (click)="jumpToPrevDiff()">上一个差异</button>
  <button (click)="jumpToNextDiff()">下一个差异</button>
</div>
<div #diffEl></div>

步骤3：实现跳转逻辑 #

在组件类中编写跳转方法，调用对应命令完成差异定位：

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',
    })
  }

  // 跳转到上一个差异
  jumpToPrevDiff() {
    goToPrevDiff(this.view.editorA)
    goToPrevDiff(this.view.editorB)
  }

  // 跳转到下一个差异
  jumpToNextDiff() {
    goToNextDiff(this.view.editorA)
    goToNextDiff(this.view.editorB)
  }
}

关键说明 #

• goToPrevDiff 和 goToNextDiff 命令会自动定位到编辑器内最近的目标差异，并滚动视图至该位置。
• 因为 MergeView 包含 editorA 和 editorB 两个编辑器实例，需要同时调用两个实例的跳转命令，确保两侧视图同步定位到对应差异位置。

内容的提问来源于stack exchange，提问作者Ashok