探索 Tiptap V3 的最新功能

Tiptap 中的无效架构处理

Editor

内容完整性在协作编辑环境中可能是一个重大挑战。想象一下这样一个场景:拥有不同版本应用的用户试图编辑同一份文档。或者另一种常见场景:单页面应用中,一些用户长时间保持浏览器标签打开而不刷新,而另一些用户在最近一次页面加载后总是使用最新版本的编辑器。

在这两种情况下,版本较新的用户可能会创造包含新功能的内容,而这些功能对旧版用户而言并不可用。当旧版本用户尝试访问此类文档时,我们如何防止数据丢失、保持文档结构完整,以及确保用户体验顺畅?

这时,无效架构处理变得尤为重要。它让开发者可以优雅地管理内容结构与编辑器预期不符的场景,防止出现数据损坏、意外内容被剥除或编辑器崩溃等问题。

无论你是在构建笔记应用、内容管理系统,还是任何具有丰富文本编辑功能的应用,理解并正确实现架构处理都能显著提升你应用的稳定性和用户体验。

引入内容校验

Tiptap 提供了一个名为 enableContentCheck 的选项。当将其设为 true 时,会激活一套机制,用于根据已注册扩展的架构验证内容。这对于在内容出现错误时提前检测并处理尤为有用,可以避免错误带来的不良影响。

启用内容校验

要启用此功能,只需在初始化 Tiptap 编辑器时添加 enableContentCheck 选项:

new Editor({
  enableContentCheck: true,
  // ... 其他选项
})

contentError 事件

当启用内容校验后,如果在初始化时提供的内容与架构不兼容,Tiptap 会触发一个 contentError 事件。这个事件提供有价值的信息,方便你正确处理相关错误。

处理 contentError 事件

你可以通过两种方式处理这些事件:

一种是使用 onContentError 回调:

new Editor({
  enableContentCheck: true,
  content: 可能包含错误的内容,
  onContentError({ editor, error, disableCollaboration }) {
    // 你的错误处理逻辑
  },
  // ... 其他选项
})

另一种是监听 contentError 事件:

const editor = new Editor({
  enableContentCheck: true,
  content: 有问题的内容,
  // ... 其他选项
})

editor.on('contentError', ({ editor, error, disableCollaboration }) => {
  // 你的错误处理逻辑
})

在不启用内容校验时监听 contentError 事件

如果你想在不启用内容校验的情况下监听 contentError 事件,可以在初始化 Tiptap 编辑器时将 emitContentError 设置为 true

new Editor({
  enableContentCheck: false,
  emitContentError: true,
  // ... 其他选项
})

此设置允许运行带有无效内容的编辑器,但依然会在内容无效时通知你。

关于内容类型的说明

需要注意的是,Tiptap 在处理 JSON 内容类型时,内容校验的准确率达 100%。但在处理 HTML 内容时,可能存在一些局限。虽然 Tiptap 会尽最大努力提示缺失的节点,但某些与标记相关的问题可能在某些情况下未被检测到。

推荐的错误处理策略

你应如何应对架构错误,取决于你的具体应用和需求。以下提供一些常用的建议:

非协作编辑

如果你没有使用协作编辑功能,默认证的未知内容剥除行为可能已足够。这会确保内容保持在一个已知的有效状态,便于未来编辑。

协作编辑

如果使用协作功能,处理内容错误尤为重要,以防同步出现问题。以下是在协作环境中处理内容错误的示例方案:

onContentError({ editor, error, disableCollaboration }) {
  // 禁用协作,避免同步无效内容
  disableCollaboration()

  // 阻止传发更新
  const emitUpdate = false

  // 禁用编辑器以阻止进一步操作
  editor.setEditable(false, emitUpdate)

  // 通知用户发生了错误
  notifyUser("发生了错误。请刷新应用程序。")
}

此方法执行了以下操作:

  1. 禁用协作以避免同步无效内容
  2. 阻止任何内容更新的传输
  3. 禁止编辑器的进一步输入
  4. 向用户发出提示,告知问题所在