安装 AI Changes 扩展

Available in Team planBeta

AI Changes 扩展作为 npm 包通过我们的私有注册表提供。请遵循以下步骤在你的项目中安装并设置它。

AI Changes 扩展发布在 Tiptap 私有 npm 注册表中。通过遵循私有注册表指南集成该扩展。

准备好后，你可以像安装其他 Tiptap Pro 扩展一样安装它。

npm install @tiptap-pro/extension-ai-changes

初始化扩展

将 AI Changes 集成到你的编辑器实例中，就像集成其他 Tiptap 扩展一样。以下是一个示例实现：

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import AiChanges from '@tiptap-pro/extension-ai-changes'

const editor = new Editor({
  extensions: [
    StarterKit,
    AiChanges,
    // … 更多扩展
  ],
})

你还需要设置 CSS 样式，以便在编辑器中显示更改。

:root {
  --color-green-100: oklch(0.962 0.044 156.743);
  --color-green-700: oklch(0.527 0.154 150.069);
  --color-red-100: oklch(0.936 0.032 17.717);
  --color-red-700: oklch(0.505 0.213 27.518);
}

.tiptap-ai-changes--old,
.tiptap-ai-changes--old > * {
  color: var(--color-red-700);
  background-color: var(--color-red-100);
}

.tiptap-ai-changes--new,
.tiptap-ai-changes--new > * {
  color: var(--color-green-700);
  background-color: var(--color-green-100);
}

开始跟踪更改

要开始跟踪更改，调用 startTrackingAiChanges 命令。该命令会创建当前编辑器内容的快照，用于与 AI 生成的新内容进行比较。

editor.commands.startTrackingAiChanges()

调用此命令后，对编辑器内容的任何修改 —— 无论是手动进行还是通过AI 生成扩展产生 —— 都会被跟踪并显示为更改。

接受或拒绝更改

此扩展提供多个命令以便你审阅更改：

// 接受指定更改
editor.commands.acceptAiChange(changeId)

// 拒绝指定更改
editor.commands.rejectAiChange(changeId)

// 接受所有更改
editor.commands.acceptAllAiChanges()

// 拒绝所有更改
editor.commands.rejectAllAiChanges()

停止跟踪更改

完成更改审阅后，调用 stopTrackingAiChanges 命令结束跟踪会话：

editor.commands.stopTrackingAiChanges()

此操作将移除之前文档的快照，并停止显示更改高亮。

有关审阅、接受和拒绝更改的详细信息，请参阅审阅内容指南。