比较文档

使用 compareDocuments 命令比较两个 Tiptap JSON 文档并显示变化。

比较文档

首先，创建要比较的文档。

import { Editor } from '@tiptap/core'

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

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

使用 Compare 扩展创建差异编辑器，该编辑器用于显示变化。然后将两个 Tiptap JSON 文档传给 compareDocuments。

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

// 差异编辑器
const editor = new Editor({
  extensions: [
    Compare,
    // ...other extensions
  ],
})

editor.commands.compareDocuments({
  docA,
  docB,
})

compareDocuments 命令会创建比较结果，并立即将变化显示为建议。

设置变更样式

Compare 会为当前文档 B 的内容以及文档 A 的替换内容添加 CSS 类。添加以下样式即可将变化显示为红绿差异。

.compare-documents {
  --diff-document-a-color: oklch(0.396 0.141 25.723);
  --diff-document-a-group-color: oklch(0.936 0.032 17.717);
  --diff-document-a-highlight-color: oklch(80.8% 0.114 19.571);
  --diff-document-b-color: var(--black);
  --diff-document-b-group-color: oklch(0.962 0.044 156.743);
  --diff-document-b-highlight-color: oklch(87.1% 0.15 154.449);
}

/* Document B: current, added, or changed content */
.diff-suggestion,
.diff-suggestion > *,
.diff-suggestion-nested-change {
  background-color: var(--diff-document-b-highlight-color);
  color: var(--diff-document-b-color);
}

/* Keep formatting correct inside replacement content */
strong .diff-suggestion-diff {
  font-weight: normal;
}

em .diff-suggestion-diff {
  font-style: normal;
}

code:not(pre code) .diff-suggestion-diff {
  font-family: sans-serif;
}

.diff-suggestion-diff strong {
  font-weight: bold;
}

.diff-suggestion-diff em {
  font-style: italic;
}

.diff-suggestion-diff code:not(pre code) {
  font-family: monospace;
}

/* Lighter backgrounds for grouped changes */
.diff-suggestion.diff-suggestion--change-group,
.diff-suggestion.diff-suggestion--change-group > *:not(.diff-suggestion-sub-change) {
  background-color: var(--diff-document-b-group-color);
}

.diff-suggestion-sub-change {
  background-color: var(--diff-document-b-highlight-color);
}

/* Document A: removed or replacement content */
.diff-suggestion-diff,
.diff-suggestion-diff > * {
  background-color: var(--diff-document-a-highlight-color);
  color: var(--diff-document-a-color);
}

.diff-suggestion-diff.diff-suggestion-diff--change-group,
.diff-suggestion-diff.diff-suggestion-diff--change-group > *:not(.diff-suggestion-diff-sub-change) {
  background-color: var(--diff-document-a-group-color);
}

.diff-suggestion-diff-sub-change {
  background-color: var(--diff-document-a-highlight-color);
}

/* Keep table changes inside their table cells */
.diff-suggestion-diff:has(tr) {
  display: contents;
}

.diff-suggestion-diff:has(tr) td,
.diff-suggestion-diff:has(tr) th {
  background-color: var(--diff-document-a-highlight-color);
}

色觉障碍友好样式

The following stylesheet uses orange and blue to display the diff. The colorblind styles are activated when the diff is wrapped inside an element with the colorblind-mode class.

.colorblind-mode {
  --diff-document-a-color: oklch(0.396 0.08 55);
  --diff-document-a-group-color: oklch(0.95 0.05 70);
  --diff-document-a-highlight-color: oklch(83% 0.13 70);
  --diff-document-b-group-color: oklch(0.95 0.035 250);
  --diff-document-b-highlight-color: oklch(83% 0.1 250);
}

Previously概述

Next up比较版本