CodeMirror 6中只读文档的搜索功能实现方案

在基于CodeMirror 6编辑器开发Kubernetes资源YAML编辑器时，我们发现了一个关于只读模式下搜索功能的实现问题。本文将深入分析问题本质并提供完整的解决方案。

问题现象

当我们将编辑器设置为只读模式时：

1. 快捷键触发浏览器原生搜索而非CodeMirror搜索面板
2. 手动调出的搜索面板仍显示替换功能
3. 替换操作能实际修改只读文档内容

核心原因

经过分析，这实际上涉及两个独立但相关的配置问题：

1. 焦点捕获问题
   默认情况下，不可编辑元素无法获得焦点，导致无法捕获键盘事件。这解释了为什么快捷键失效。

2. 只读状态定义混淆
   EditorView.editable仅控制DOM元素的contenteditable属性，而真正的只读状态应该通过EditorState.readOnly来声明。

完整解决方案

1. 使只读编辑器可聚焦

通过添加tabindex属性使编辑器能够接收焦点：

EditorView.contentAttributes.of({tabindex: "0"})

2. 正确声明只读状态

使用官方推荐的只读声明方式：

EditorState.readOnly.of(true)

3. 完整配置示例

以下是正确的只读编辑器配置示例：

new EditorView({
  extensions: [
    basicSetup,
    EditorState.readOnly.of(true),
    EditorView.contentAttributes.of({tabindex: "0"})
  ]
})

实现效果

采用上述方案后：

• 快捷键可正常调出搜索面板
• 面板自动隐藏替换功能按钮
• 彻底防止内容被意外修改

技术原理

CodeMirror 6的设计将编辑状态与视图属性明确分离：

• EditorState处理文档状态（包括只读）
• EditorView处理呈现和交互 这种分离提供了更精细的控制能力，但也需要开发者准确理解各配置项的作用域。

最佳实践建议

1. 优先使用EditorState.readOnly控制文档状态
2. 需要交互的只读编辑器必须设置tabindex
3. 测试各种交互场景确保符合预期行为

通过正确理解和使用这些配置，可以构建出行为一致的只读编辑器体验。