Tiptap Docs

Compare documents

Compare two documents in real time and optionally show the diff as suggestions in the editor.

startComparingDocuments

Starts real-time comparison with another document. Differences are displayed as suggestions in an inline diff view where the old and the new content are displayed in the editor.

Parameters (StartComparingDocumentsOptions)

  • otherDoc? (Node): The document to compare against. Defaults to a snapshot of the current document if omitted
  • displayOptions? (DisplayOptions<{ suggestion: Suggestion }>): Controls how differences are rendered as suggestions
    • showAsDiff? (boolean): Show alternative content as a diff widget. Default: true in comparison flows
    • diffPosition? ('before' | 'after'): Where to display the diff relative to the suggestion. Default: 'before'
    • attributes? (Record<string, any>): Attributes added to rendered elements
    • renderDecorations? (RenderDecorations<{ suggestion: Suggestion }>): Custom rendering function
  • debounceTimeout? (number): Milliseconds to wait before recomputing diffs. Default: 500

Returns

void

Example 

// Start comparing changes with another document
toolkit.startComparingDocuments({
  otherDoc,
})

stopComparingDocuments

Stops the real-time comparison and clears all suggestions, so the diff view is no longer visible.

Returns

void

Example 

// Stop comparison and clear decorations
toolkit.stopComparingDocuments()

applySuggestionToOtherDoc

Applies a specific suggestion by its ID to the other document when comparing documents in real-time. The "other document" is the document that is being compared to the current document.

Parameters

  • suggestionId (string): The unique identifier of the suggestion to apply

Returns

void

Example 

// Start comparing documents
toolkit.startComparingDocuments({
  otherDoc: otherDoc,
})

// Get all suggestions
const suggestions = toolkit.getSuggestions()

// Apply the first suggestion to the other document
if (suggestions.length > 0) {
  toolkit.applySuggestionToOtherDoc(suggestions[0].id)
}