CodeMirror Merge 扩展中折叠未更改行的交互优化

背景介绍

CodeMirror Merge 扩展提供了一个强大的功能：可以折叠未更改的代码行，以提高大型文件对比时的可读性。这个功能会在边栏(gutter)中显示一个可点击的控件，允许用户展开被折叠的代码块。

技术挑战

在实现自定义交互时，开发者遇到了两个主要的技术限制：

1. 无法直接识别折叠控件：原本需要通过检查widget对象是否包含lines属性来判断是否为折叠控件，这种方式不够可靠且依赖于实现细节。

2. 无法直接触发展开操作：虽然知道存在uncollapse效果，但由于未导出，无法直接调用它来展开代码块。

解决方案演进

识别折叠控件

CodeMirror团队通过添加type属性到控件中解决了第一个问题。现在可以通过更可靠的方式识别折叠控件：

gutterWidgetClass.of(function (_view, widget, _block): GutterMarker | null {
  if ('type' in widget && widget.type === 'collapsed-unchanged-code') {
    return new CollapseUnchangedGutterMarker();
  }
  return null;
})

触发展开操作

虽然uncollapse效果被重命名为uncollapseUnchanged并导出，但在实际应用中，开发者发现难以将点击事件转换为正确的文档位置。最终采用了一个巧妙的替代方案：

class CollapseUnchangedGutterMarker extends GutterMarker {
  elementClass = 'cm-collapseUnchangedBarNeighbor';

  toDOM(_view: EditorView): Node {
    const el = document.createElement('div');
    el.className = 'cm-collapseUnchangedBarGutterElement';
    el.addEventListener('click', (_e) => {
      // 找到对应的展开控件并模拟点击
      const expandCollapsedBar = editor
        .querySelectorAll<HTMLElement>('.cm-content .cm-collapsedLines')
        .item(gutterElementIndex);
      expandCollapsedBar.click();
    });
    return el;
  }
}

实现效果

通过上述解决方案，开发者成功实现了：

1. 在边栏中显示自定义样式的折叠/展开指示器
2. 点击边栏指示器可以正确展开对应的代码块
3. 完全基于DOM操作，不依赖未公开的内部API

技术启示

这个案例展示了在面对框架限制时的创造性解决方案。当直接API不可用时，可以通过以下思路解决问题：

1. 寻找框架提供的替代识别机制（如type属性）
2. 利用DOM操作间接实现所需功能
3. 保持与框架内部实现的松耦合

这种方案虽然使用了"取巧"的方法，但确保了代码的稳定性和可维护性，是实际开发中值得借鉴的思路。