Tiptap 中文文档

比较文档

实时比较两个文档，并在编辑器中显示差异。

适用于非 AI 场景

此功能无需 AI 即可使用。它可以比较任何两个文档，无论它们是否由 AI 生成。

指南：比较两个文档

首先调用 startComparingDocuments 方法。它会比较编辑器当前文档与您选择的另一个文档。该方法接收一个参数：otherDoc，即要比较的文档。

const toolkit = getAiToolkit(editor)

// 开始与另一个文档比较变更
toolkit.startComparingDocuments({
  otherDoc,
})

如果未提供 otherDoc，AI 工具包将从调用 startComparingDocuments 之时起，开始跟踪当前文档的变更，并显示变更前后的文档差异。

差异会以 建议 的形式显示在编辑器中。将以下 CSS 文件添加到您的应用中，以将建议格式化为红绿对比差异：

/* 将插入的文本高亮为绿色 */
.tiptap-ai-suggestion,
.tiptap-ai-suggestion > * {
  background-color: oklch(87.1% 0.15 154.449);
}

/* 变更组使用更浅的背景色（子变更保留更强的高亮） */
.tiptap-ai-suggestion.tiptap-ai-suggestion--change-group,
.tiptap-ai-suggestion.tiptap-ai-suggestion--change-group > *:not(.tiptap-ai-suggestion-sub-change) {
  background-color: oklch(0.962 0.044 156.743);
}

/* 高亮行内组中的子变更 */
.tiptap-ai-suggestion-sub-change {
  background-color: oklch(87.1% 0.15 154.449);
}

/* 将删除的文本高亮为红色 */
.tiptap-ai-suggestion-diff,
.tiptap-ai-suggestion-diff > * {
  background-color: oklch(80.8% 0.114 19.571);
  color: oklch(0.396 0.141 25.723);
}

/* diff 变更组使用更浅的背景色（子变更保留更强的高亮） */
.tiptap-ai-suggestion-diff.tiptap-ai-suggestion-diff--change-group,
.tiptap-ai-suggestion-diff.tiptap-ai-suggestion-diff--change-group
  > *:not(.tiptap-ai-suggestion-diff-sub-change) {
  background-color: oklch(0.936 0.032 17.717);
}

/* 高亮替换 diff 小部件中的子变更 */
.tiptap-ai-suggestion-diff-sub-change {
  background-color: oklch(80.8% 0.114 19.571);
}

/* 正确渲染表格行删除 */
.tiptap-ai-suggestion-diff:has(tr) {
  display: contents;
}

.tiptap-ai-suggestion-diff:has(tr) td,
.tiptap-ai-suggestion-diff:has(tr) th {
  background-color: oklch(80.8% 0.114 19.571);
}

比较文档时，变更会以建议的形式显示。若要接受或拒绝单个变更或一次性处理所有变更，请使用以下建议方法：

调用 getSuggestions 可获取文档之间的变更列表，这些变更会以 建议 的形式存储。

// 获取所有变更（作为建议）
const suggestions = toolkit.getSuggestions()

// 接受第一个变更

toolkit.acceptSuggestion(suggestions[0].id)

// 拒绝第一个变更
toolkit.rejectSuggestion(suggestions[0].id)

// 接受所有变更
toolkit.acceptAllSuggestions()

// 拒绝所有变更
toolkit.rejectAllSuggestions()

若要停止比较文档，使用 stopComparingDocuments 方法。它会隐藏差异视图并清除建议。

toolkit.stopComparingDocuments()

示例演示

下面是一个实时比较两个文档的演示。

尝试点击“开始比较文档”按钮，差异即会显示。然后尝试编辑文档，观察差异的变化。

下一步

PreviouslyAI 工程