Tiptap编辑器在只读模式下仍可撤销操作的问题分析与解决方案

问题背景

Tiptap是一个基于ProseMirror构建的现代化富文本编辑器框架。在2.6.6版本中，开发者发现了一个关键问题：当编辑器通过editor.setEditable(false)设置为只读模式后，用户仍然可以通过快捷键Ctrl+Z(Windows/Linux)或Cmd+Z(Mac)执行撤销操作，这明显违背了只读模式的设计初衷。

问题复现

该问题可以通过以下步骤复现：

1. 初始化一个包含历史记录扩展的Tiptap编辑器
2. 编辑一些内容
3. 调用editor.setEditable(false)将编辑器设为只读
4. 尝试使用撤销快捷键

有趣的是，这个问题仅影响撤销操作(Ctrl+Z)，而重做操作(Ctrl+Shift+Z)则表现正常，在只读模式下会被正确阻止。

技术分析

经过深入调查，发现这个问题源于多个层面的因素：

1. React重渲染问题：当使用React版本的Tiptap时，useEditor钩子的初始editable选项会在组件重渲染时重新应用，覆盖了通过setEditable设置的只读状态。这导致编辑器实际上仍保持可编辑状态。

2. ProseMirror历史插件行为：底层ProseMirror的历史插件没有检查编辑器的可编辑状态，直接处理了撤销操作。这是问题的根本原因，因为编辑器状态管理应该统一处理所有修改操作。

3. 浏览器事件处理：浏览器对内容可编辑区域的处理方式也影响了这一行为，使得撤销操作能够绕过Tiptap的部分控制逻辑。

解决方案演进

开发团队提出了多阶段的解决方案：

第一阶段：React可编辑状态修复

通过修改useEditor的实现，确保setEditable调用能够正确覆盖初始选项。这一修改确保了编辑器状态的一致性，解决了React重渲染导致的状态回退问题。

第二阶段：历史插件补丁

由于问题核心在于ProseMirror历史插件，团队创建了一个临时解决方案：

addProseMirrorPlugins() {
  return [
    new Plugin({
      key: new PluginKey('uneditableHistory'),
      props: {
        handleDOMEvents: {
          beforeinput: (view, e: Event) => {
            let inputType = (e as InputEvent).inputType
            if (inputType == 'historyUndo' || inputType == 'historyRedo') {
              if (!this.editor.isEditable) {
                e.preventDefault()
              }
            }
          }
        }
      }
    })
  ]
}

这个插件会拦截浏览器的历史操作事件，在编辑器不可编辑时阻止默认行为。

第三阶段：上游修复

最终解决方案是向ProseMirror历史插件提交修复，使其在内部检查编辑器可编辑状态。这一修改已被合并到ProseMirror主分支，从根本上解决了问题。

最佳实践建议

对于使用Tiptap的开发者，建议：

1. 确保使用最新版本的Tiptap和相关依赖
2. 如果遇到类似问题，可以先尝试更新prosemirror-history插件
3. 在需要严格只读的场景，考虑清除历史记录：

editor.unregisterPlugin('history');
editor.registerPlugin(history());

4. 对于复杂的状态管理，建议统一通过setEditable控制，避免混合使用初始选项和动态设置

总结

这个问题展示了现代编辑器框架中状态管理的复杂性，涉及从React组件生命周期到底层ProseMirror插件行为的多个层面。通过社区协作和分层解决方案，最终实现了对编辑器只读状态的完整控制。这也提醒我们，在构建富文本编辑器时，需要特别注意各种用户交互路径下的状态一致性。