Tiptap 中文文档

在服务器上比较文档

BetaPilot program

Compare 包无需 Tiptap Editor 实例即可运行。文档比较可以在 Web Worker 或服务器上执行。

首先，创建要比较的两个文档：

import { Editor } from '@tiptap/core'

const editorA = new Editor()
const docA = editorA.toJSON()

const editorB = new Editor()
const docB = editorB.toJSON()

要比较两个文档，Compare 包需要编辑器 schema。要通过网络发送 schema，请先将其序列化：

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

const serializedSchema = serializeSchema(editorA.schema)

const response = await fetch('/api/compare', {
  method: 'POST',
  body: JSON.stringify({ docA, docB, schema: serializedSchema }),
})

然后在服务器上反序列化 schema，并使用 compareDocuments 工具比较两个文档。

compareDocuments 工具会返回一个 Changeset。Changeset 包含两个文档以及描述差异的 Change 对象列表。Changeset 可以序列化为 JSON，因此你可以将其 JSON 表示存储在数据库中，或发送到客户端显示。

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

export async function POST(request: Request) {
  const { docA, docB, schema: serializedSchema } = await request.json()
  const schema = deserializeSchema(serializedSchema)
  const changeset = compareDocuments({ schema, docA, docB })
  const changesetJSON = changeset.toJSON()

  return Response.json(changesetJSON)
}

Back on the client, you can recover the Changeset object and display it.

import { Editor } from '@tiptap/core'
import { Changeset } from '@tiptap-pro/compare'

// 从服务器响应中获取 changeset
const changesetJSON = await response.json()
const changeset = Changeset.fromJSON(changesetJSON)

// 显示 changeset
const diffEditor = new Editor()
diffEditor.commands.displayChangeset({ changeset })

此外，还有一个 compareVersions 工具，可以让你在服务器上比较两个版本。

性能建议

在独立进程中运行文档比较

比较大型文档的计算成本较高。此外，文档比较是同步过程，运行期间会阻塞事件循环。因此，请避免在客户端或服务器的主线程中运行文档比较，而应在独立进程中运行：

缓存差异结果

compareDocuments 工具会返回 Changeset。Changeset 是可序列化为 JSON 的对象，可以缓存。如果应用经常比较两个文档，请缓存 Changeset，避免重复比较。

以上建议同样适用于 compareVersions 等其他比较 API。

Previously比较版本