Tiptap Docs

Edit the document

The AI Toolkit provides primitives to edit the document in different formats.

insertText

Insert plain text into the editor.

Parameters

  • content (string): Text to insert
  • options? (InsertTextOptions): Options for the insertText method
    • position? (InsertPosition): Where to insert. One of Range, number, 'selection', 'selectionStart', 'selectionEnd', 'document', 'documentStart', 'documentEnd'. Default: 'selection'
    • reviewOptions? (ReviewOptions): Control preview/review behavior
      • mode? ('disabled' | 'review' | 'preview'): Whether to review the changes before or after applying them. 'disabled' means no review, 'review' means review after applying, 'preview' means preview before applying. Default: 'disabled'
      • showDiff? (boolean): Whether to diff the documents before and after the change to display the change as a detailed diff. Default: false
      • displayOptions? (DisplayOptions<{ suggestion: Suggestion }>): Customize how suggestions are displayed
        • showAsDiff? (boolean): Whether to show the suggestion as a diff where inserted and original content are displayed side by side. Default: true
        • diffPosition? ('before' | 'after'): The position of the diff relative to the suggestion. Default: 'before'
        • attributes? (Record<string, any>): Extra HTML attributes to be added to the suggestion
        • renderDecorations? (RenderDecorations<{ suggestion: Suggestion }>): A function to render the suggestion as ProseMirror decorations

Returns

void

Example 

// Insert text at the current selection and show review markers
toolkit.insertText('AI content', { position: 'selection', reviewOptions: { mode: 'review' } })

insertHtml

Insert HTML into the editor.

Parameters

  • content (string): HTML to insert
  • options? (InsertHtmlOptions): Options for the insertHtml method
    • position? (InsertPosition): Where to insert. One of Range, number, 'selection', 'selectionStart', 'selectionEnd', 'document', 'documentStart', 'documentEnd'. Default: 'selection'
    • reviewOptions? (ReviewOptions): Control preview/review behavior
      • mode? ('disabled' | 'review' | 'preview'): Whether to review the changes before or after applying them. 'disabled' means no review, 'review' means review after applying, 'preview' means preview before applying. Default: 'disabled'
      • showDiff? (boolean): Whether to diff the documents before and after the change to display the change as a detailed diff. Default: false
      • displayOptions? (DisplayOptions<{ suggestion: Suggestion }>): Customize how suggestions are displayed
        • showAsDiff? (boolean): Whether to show the suggestion as a diff where inserted and original content are displayed side by side. Default: true
        • diffPosition? ('before' | 'after'): The position of the diff relative to the suggestion. Default: 'before'
        • attributes? (Record<string, any>): Extra HTML attributes to be added to the suggestion
        • renderDecorations? (RenderDecorations<{ suggestion: Suggestion }>): A function to render the suggestion as ProseMirror decorations

Returns

void

Example 

// Insert a paragraph after the selection
toolkit.insertHtml('<p>AI paragraph</p>', { position: 'selectionEnd' })

insertJson

Insert ProseMirror JSON into the editor.

Parameters

  • content (any): ProseMirror JSON node or slice
  • options? (InsertJsonOptions): Options for the insertJson method
    • position? (InsertPosition): Where to insert. One of Range, number, 'selection', 'selectionStart', 'selectionEnd', 'document', 'documentStart', 'documentEnd'. Default: 'selection'
    • reviewOptions? (ReviewOptions): Control preview/review behavior
      • mode? ('disabled' | 'review' | 'preview'): Whether to review the changes before or after applying them. 'disabled' means no review, 'review' means review after applying, 'preview' means preview before applying. Default: 'disabled'
      • showDiff? (boolean): Whether to diff the documents before and after the change to display the change as a detailed diff. Default: false
      • displayOptions? (DisplayOptions<{ suggestion: Suggestion }>): Customize how suggestions are displayed
        • showAsDiff? (boolean): Whether to show the suggestion as a diff where inserted and original content are displayed side by side. Default: true
        • diffPosition? ('before' | 'after'): The position of the diff relative to the suggestion. Default: 'before'
        • attributes? (Record<string, any>): Extra HTML attributes to be added to the suggestion
        • renderDecorations? (RenderDecorations<{ suggestion: Suggestion }>): A function to render the suggestion as ProseMirror decorations

Returns

void

Example 

// Insert a paragraph node
toolkit.insertJson({ type: 'paragraph', content: [{ type: 'text', text: 'AI' }] })

applyHtmlDiff

Apply context-aware HTML diffs to a chunk or the whole document.

Parameters

  • diffs (HtmlDiff[]): Each item has:
    • context? (string): Text/HTML that appears before delete to anchor the change
    • delete (string): Exact HTML to remove
    • insert (string): HTML to insert
  • options? (ApplyHtmlDiffOptions): Options for the applyHtmlDiff method
    • chunkIndex? (number): Target chunk index. Default: 0
    • reviewOptions? (Omit<ReviewOptions, 'showDiff'>): Review behavior. Note: diff previews force showAsDiff in compare mode
      • mode? ('disabled' | 'review' | 'preview'): Whether to review the changes before or after applying them. 'disabled' means no review, 'review' means review after applying, 'preview' means preview before applying. Default: 'disabled'
      • displayOptions? (DisplayOptions<{ suggestion: Suggestion }>): Customize how suggestions are displayed
        • showAsDiff? (boolean): Whether to show the suggestion as a diff where inserted and original content are displayed side by side. Default: true
        • diffPosition? ('before' | 'after'): The position of the diff relative to the suggestion. Default: 'before'
        • attributes? (Record<string, any>): Extra HTML attributes to be added to the suggestion
        • renderDecorations? (RenderDecorations<{ suggestion: Suggestion }>): A function to render the suggestion as ProseMirror decorations

Returns (ApplyHtmlDiffResult)

  • errorMessage (string | null): null when all diffs applied; error message otherwise

Example 

// Replace "fine" with emphasized "great" in the first chunk
toolkit.applyHtmlDiff([{ context: '<p>This is ', delete: 'fine', insert: '<em>great</em>' }])