Compare documents

Use the compareDocuments command to compare two Tiptap JSON documents and display the changes.

Compare the documents

First, create the documents you want to compare.

import { Editor } from '@tiptap/core'

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

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

Create a diff editor with the Compare extension. This is the editor where the changes will be displayed. Then call compareDocuments with the two Tiptap JSON documents.

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

// The diff editor
const editor = new Editor({
  extensions: [
    Compare,
    // ...other extensions
  ],
})

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

The compareDocuments command creates the comparison and immediately displays the changes as suggestions.

Style the changes

Compare adds CSS classes to the current document B content and the replacement content from document A. Add these styles to display the changes as a red and green diff.

.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);
}

Colorblind styles

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);
}

PreviouslyOverview

Next upCompare versions