在React CodeMirror中基于索引范围实现文本高亮

本文将介绍如何在React CodeMirror编辑器中实现基于字符索引范围的文本高亮功能。这种功能常见于代码搜索场景，比如需要突出显示搜索结果中的匹配部分。

实现原理

核心思路是利用CodeMirror 6的装饰器(Decoration)系统，通过指定文本范围的起始和结束索引来创建高亮效果。与传统的基于关键词匹配的高亮不同，这种方法直接操作文本位置，更加灵活精确。

关键代码实现

首先需要定义一个生成装饰器的函数，它接收一个包含起始和结束索引的数组：

const getDecorations = (
  highlights: Array<{ start: number; end: number }> = []
) => {
  const decorations = highlights.map(({ start, end }) =>
    Decoration.mark({
      attributes: { style: "background-color: #dadb1699" },
    }).range(start, end)
  );
  return Decoration.set(decorations);
};

然后创建一个视图插件，用于管理这些装饰器：

const highlightPlugin = (
  highlights: Array<{ start: number; end: number }>
) =>
  ViewPlugin.fromClass(
    class {
      decorations: DecorationSet;
      constructor() {
        this.decorations = getDecorations(highlights);
      }

      update(update: ViewUpdate) {
        if (update.docChanged || update.viewportChanged) {
          this.decorations = getDecorations();
        }
      }
    },
    {
      decorations: (v) => v.decorations,
    }
  );

最后在React组件中使用这个插件：

<ReactCodeMirror
  extensions={[defaultEditorExtensions, highlightPlugin(highlights)]}
  editable={contentEditable}
  theme={isDark ? githubDark : githubLight}
  style={style}
  value={value}
/>

实际应用场景

这种基于索引的高亮方式特别适合以下场景：

1. 代码搜索结果展示 - 高亮搜索匹配的代码片段
2. 差异对比 - 突出显示修改前后的不同部分
3. 语法错误标记 - 标记特定位置的语法问题
4. 代码审查 - 突出显示需要关注的代码区域

性能考虑

当处理大量高亮范围时，需要注意：

1. 合并相邻或重叠的范围可以减少装饰器数量
2. 只在可见视口内应用高亮可以提升性能
3. 使用更简单的CSS样式可以减少渲染开销

扩展可能性

此基础实现可以进一步扩展：

1. 添加多种颜色区分不同类型的高亮
2. 实现悬停提示等交互功能
3. 结合其他CodeMirror扩展创建更复杂的效果

通过这种基于索引的高亮方法，开发者可以精确控制编辑器中的文本展示效果，为用户提供更直观的视觉反馈。