使用修订记录比较文档

将文档比较结果显示为修订记录，让用户可以逐项审阅、接受或拒绝变化。

独立产品

修订记录是与 Compare 不同的 Tiptap 产品，需要单独购买。

Compare documents

将 Compare 和 TrackedChanges 添加到显示比较结果的编辑器中。使用 compareDocuments 工具比较文档，然后将结果传给 displayChangesetAsTrackedChanges 编辑器命令。

import { Editor } from '@tiptap/core'
import { Compare, compareDocuments } from '@tiptap-pro/compare'
import { TrackedChanges } from '@tiptap-pro/extension-tracked-changes'

// 显示差异的编辑器
const editor = new Editor({
  extensions: [
    Compare,
    TrackedChanges.configure({ enabled: true }),
    // ...other extensions shared by both documents
  ],
})

const changeset = compareDocuments({
  schema: editor.schema,
  docA, // 原始 Tiptap JSON 文档
  docB, // 变更后的 Tiptap JSON 文档
})

editor.commands.displayChangesetAsTrackedChanges({ changeset })

编辑器现在会将两个文档之间的变化显示为修订记录建议。使用修订记录命令接受或拒绝这些建议。

必须启用修订记录

调用 displayChangesetAsTrackedChanges 命令前，请确保已启用修订记录。例如，可以这样初始化扩展：TrackedChanges.configure({ enabled: true })

比较版本

使用 compareVersions 比较两个 Yjs 版本更新，然后可以使用修订记录建议在编辑器中显示差异。

import { compareVersions } from '@tiptap-pro/compare'

const changeset = compareVersions({
  schema: editor.schema,
  versionA, // Older Yjs update
  versionB, // Newer Yjs update
})

editor.commands.displayChangesetAsTrackedChanges({ changeset })

compareVersions 工具会捕获每个变化的用户归因数据，并将其存储在变化元数据的 userId 属性中。这些数据会自动传递到修订记录建议，使修订记录审阅 UI 能显示每项变化的作者。

有关获取和显示版本更新的更多信息，请参阅比较版本指南。

在服务器上创建修订记录

当你需要在没有编辑器实例的情况下创建包含修订记录的文档（例如在服务器路由或 Web Worker 中）时，请使用 TrackedChangesDocumentFactory。客户端序列化 schema 前，schema 必须包含修订记录扩展。请参阅在服务器上比较文档，了解如何将文档和 schema 发送到服务器。

import {
  compareDocuments,
  deserializeSchema,
  TrackedChangesDocumentFactory,
} from '@tiptap-pro/compare'

const schema = deserializeSchema(serializedSchema)
const changeset = compareDocuments({ schema, docA, docB })

const { doc, trackedChanges } = new TrackedChangesDocumentFactory().fromChangeset({
  changeset,
  schema,
})

doc 是编码了修订记录的 Tiptap JSON 文档。trackedChanges 包含每项编码变化的元数据和文档范围，可用于额外的服务器端处理。

Previously服务器比较

Next up分栏视图