探索 Tiptap V3 的最新功能
Tiptap 中文文档

Tiptap V3 中的新功能

Tiptap V3 对核心编辑器进行了重大更新。本指南清晰地突出重要更改，使您的升级变得简单。使用它可以快速找到更新您集成所需的所有重要信息。

升级指南

如果您正在从 Tiptap 2.x 升级到 3.x，请参考我们的 升级指南。该指南涵盖了重大变更、重要更新和新特性，确保您的迁移过程高效。

重大变更

更改描述
移除了 UMD 构建已移除 UMD 构建。我们建议使用 ESM 构建。UMD 构建与新的 @tiptap/extension-* 包不兼容。
新的 shouldRerenderOnTransaction 选项，默认值为 false新的 shouldRerenderOnTransaction 选项默认禁用，以减少与 React 组件的重新渲染。这可能导致您的编辑器组件未按预期重新渲染。阅读更多。
从 tippy.js 迁移到 floating-ui我们用新的 floating-ui 库替换了过时的 tippy.js 库。此更改提高了我们的菜单和工具提示的性能和可靠性。
文本样式 API 的更改@tiptap/extension-text-style 包进行了 API 更新，提供了一个新的 TextStyleKit 扩展，将所有可能的文本样式功能封装在一个扩展中。默认选项也进行了更新。
命令发生了变化命令的行为或名称发生了变化。clearContent 和 setContent 现在正确发出更新，同时 setContent 的参数也进行了更改。insertContent 被更改以防止不必要的文本分割。
NodeView getPos 现在可以返回 undefinednodeView.getPos() 现在可以返回 undefined，这使得检查 undefined 变得必要，以正确处理这种情况。
已移除 editor.getCharacterCount()已移除 editor.getCharacterCount() 方法。它在之前版本中被标记为已弃用，现在被移除。您可以在使用 CharacterCount 扩展时使用 editor.storage.characterCount.characters() 代替。
已移除 placeholder 扩展中的 considerAnyAsEmpty 选项considerAnyAsEmpty 选项已从 placeholder 扩展中移除，因为它已被弃用且在之前版本中未被遵循。
严格类型3.0.0 为编辑器带来了更严格的类型。这一变化提高了编辑器的整体类型安全性，使工作更容易，但可能需要您在代码中进行一些调整。我们建议使用 TypeScript 以受益于改进的类型安全性。
移动了实用工具扩展我们将所有实用工具扩展，如 History、Placeholder、CharacterCount、DropCursor、GapCursor、TrailingNode、Focus 和 Selection 移到了新的 @tiptap/extensions 包中。
重命名协作光标CollaborationCursor 扩展被重命名为 CollaborationCaret，因为我们认为光标太过于通用，可能与未来其他光标类型发生冲突。
重命名历史扩展History 扩展被重命名为 UndoRedo，以更好地反映其用途并避免与协作历史功能的混淆。这也包括 StarterKit 中的 history 选项。

新功能

  • 新的 @tiptap/extensions 扩展 - 新的 @tiptap/extensions 包包含和结合了多个实用工具扩展。阅读更多。

  • 新支持的 MarkView - Tiptap 现在支持 MarkViews。这对于渲染标记的自定义 HTML 非常有用。阅读更多。

  • 改进的服务器端渲染 - 该编辑器现在可以在 SSR 环境中运行，而无需渲染编辑器内容。阅读更多。

  • 删除操作现在可以作为事件跟踪 - 现在可以将编辑器删除操作作为事件进行跟踪。阅读更多。

  • 节点和标记具有新的属性验证支持 - 现在支持对节点或标记的属性进行验证。

  • StarterKit 更新 - StarterKit 现在更强大，默认包括更多扩展。阅读更多。

  • TableKit - 新的 TableKit 扩展允许您在一个包中注册所有重要的表格扩展。阅读更多。

  • ListKit - 新的 ListKit 扩展允许您在一个包中注册所有重要的列表扩展。阅读更多。

  • TextStyleKit - 新的 TextStyleKit 扩展在一个包中注册了所有重要的文本样式扩展。阅读更多。

  • 新的 rewriteUnknownContent 助手 - 该辅助函数可以从 @tiptap/core 导入。

  • 新的 unmount 方法作为销毁编辑器的替代方式 - 编辑器实例现在支持 unmount 方法，允许将编辑器挂载和卸载到 DOM。这鼓励通过在实例之间保留所有相同选项来重用编辑器实例。这与 destroy 方法不同，后者将卸载，发出 destroy 事件，并删除所有事件监听器。

  • 新的 toggleTextStyle 命令用于文本样式 - toggleTextStyle 命令允许您切换文本样式的开关。这对于切换文本样式（如粗体或斜体）非常有用。

  • 静态渲染器 - 静态渲染器帮助将 JSON 内容渲染为 HTML、Markdown 或 React 组件，而无需编辑器实例。阅读更多。

  • JSX 渲染器 - 利用 3.0.0，您将能够使用 框架无关 的 JSX 作为您扩展的 renderHTML 函数。阅读更多。

改进

  • 改进的事务处理 - 现在事务的处理效率和可靠性有所提高。这一改变提升了编辑器的整体性能。
  • 导出了 focusEvent 插件键 - 如果需要，您现在可以从核心包中导入 focusEvent 插件键。
  • 针对移动设备的改进 - 3.0.0 版本为移动设备带来了改进，主要关注于触摸事件。
  • 小型 IME 错误修复 - 3.0.0 版本包括了一些关于 IME 输入处理的小型错误修复。
  • TextStyle 现在可以消耗样式属性 - TextStyle 扩展现在可以消耗来自样式属性的样式，如果样式属性中定义了覆盖样式，则会跳过对其他样式的解析。请参见 这条 GitHub 评论。
  • Table 扩展上的 TableView 现在可以导入 - Table 扩展上的 TableView 类现在可以导入，以允许仍然可调整大小的自定义表格视图。

其他变化

  • 使用 happy-dom-without-node 进行 HTML 解析 - 现在我们使用 happy-dom-without-node 来解析 HTML，作为对 zeed-dom 的轻量级替代方案。
  • 各种较小的错误修复 - 3.0.0 版本包括了各种较小的错误修复和对编辑器整体性能的改进。

Tiptap 3.X 的未来计划？

我们已经在探索 Tiptap 3.0 之后版本的未来功能。

提供反馈

如果您有任何希望我们考虑的其他用例，请 告诉我们。

  • 内容迁移：迁移允许您重写文档 JSON 以与当前架构对齐，使得在架构更改期间帮助文档更新，提供完全可定制的解决方案以满足您的需求。
  • Markdown 支持：通过允许编辑器接受和输出 Markdown 内容，增强您的编辑能力，满足现代应用程序的需求，并利用 LLM 在 Markdown 生成中的优势。
  • 装饰 API：新的装饰 API 允许您影响文档呈现而不改变其内容，提供了超越复杂 ProseMirror 内部操作的直观方式来添加视觉增强。