Tiptap Docs

Configure the AI Changes extension

The AI Changes extension for Tiptap offers several configuration options to customize its appearance and behavior.

Custom styles

The getCustomDecorations function allows you to control the appearance of the changed text. Apply custom CSS classes to the text, and add custom elements before and after it. Useful for showing popovers, tooltips, or icons.

It receives these arguments:

  • change: The current change object containing information about what was modified
  • changes: A list of all detected changes in the document
  • isSelected: A boolean indicating if the current change is selected (cursor is positioned within it)
  • getDefaultDecorations: A function that returns the default decorations for the change. If the getCustomDecorations function is not provided, the default decorations will be used.
  • editor: The Tiptap Editor instance
  • previousDoc: The snapshot of the document before AI changes were made
  • currentDoc: The current document after the AI made changes
AiChanges.configure({
  getCustomDecorations({ change, isSelected, getDefaultDecorations }) {
    // You can combine the default decorations of the AI Changes extension with your custom ones
    const decorations = getDefaultDecorations()

    // Add a custom element after the inserted text when the change is selected
    if (isSelected) {
      decorations.push(
        Decoration.widget(change.newRange.to, () => {
          const element = document.createElement('span')
          element.textContent = '✅'
          return element
        }),
      )
    }
    return decorations
  },
})

The custom styles and elements are implemented using the Prosemirror Decorations API.

To show a popover when you select a change, follow this guide.