Integrate Comments into your editor

Available in Start planBeta

Integrate and manage comments within your editor using the Tiptap Comments extension. Create threads and comments in your editor or via REST API.

More details

For more detailed information on how to integrate, install, and configure the Tiptap Comments extension, please visit our feature page.

Events

The Comments extension emits events you can listen to with editor.on(). These events are useful for building custom UIs, syncing state, and integrating with other extensions like Tracked Changes.

Thread Events

comments:threadCreated

Fired when a new comment thread is created.

editor.on('comments:threadCreated', ({ threadId, thread, initialComment, position, threadType }) => {
  // threadType: 'block' | 'inline'
  console.log(`Thread ${threadId} created at ${position.from}-${position.to}`)
})

comments:threadUpdated

Fired when a thread's data or metadata changes.

editor.on('comments:threadUpdated', ({ threadId, thread, changes, updatedBy }) => {
  console.log(`Thread ${threadId} updated by ${updatedBy}`)
})

comments:threadResolved

Fired when a thread is resolved.

editor.on('comments:threadResolved', ({ threadId, thread, resolvedBy, resolvedAt }) => {
  console.log(`Thread ${threadId} resolved by ${resolvedBy} at ${resolvedAt}`)
})

comments:threadUnresolved

Fired when a previously resolved thread is reopened.

editor.on('comments:threadUnresolved', ({ threadId, thread, unresolvedBy }) => {
  console.log(`Thread ${threadId} reopened by ${unresolvedBy}`)
})

comments:threadDeleted

Fired when a thread is deleted.

editor.on('comments:threadDeleted', ({ threadId, thread, deletedBy, soft }) => {
  // soft: whether this is a soft delete (archived) or hard delete
  console.log(`Thread ${threadId} deleted by ${deletedBy}`)
})

comments:threadRemovedFromDocument

Fired when a thread's mark is removed from the document (e.g., the annotated text was deleted or the thread was archived).

editor.on('comments:threadRemovedFromDocument', ({ threadId, thread, removedBy, canRestore }) => {
  // removedBy: 'edit' | 'command'
  console.log(`Thread ${threadId} removed from document`)
})

Comment Events

comments:commentCreated

Fired when a new comment is added to a thread.

editor.on('comments:commentCreated', ({ threadId, commentId, comment, thread }) => {
  console.log(`Comment ${commentId} added to thread ${threadId}`)
})

comments:commentUpdated

Fired when a comment's content is edited.

editor.on('comments:commentUpdated', ({ threadId, commentId, comment, oldContent, newContent }) => {
  console.log(`Comment ${commentId} updated`)
})

comments:commentDeleted

Fired when a comment is deleted from a thread.

editor.on('comments:commentDeleted', ({ threadId, commentId, comment, deletedBy }) => {
  console.log(`Comment ${commentId} deleted by ${deletedBy}`)
})

Selection & Hover Events

comments:threadSelected

Fired when a thread is selected (e.g., user clicks on a comment annotation).

editor.on('comments:threadSelected', ({ threadId, thread }) => {
  // Show thread details in your sidebar
  console.log(`Thread ${threadId} selected`)
})

comments:threadUnselected

Fired when a thread is deselected.

editor.on('comments:threadUnselected', ({ threadId }) => {
  console.log('Thread deselected')
})

comments:threadHovered

Fired when the user hovers over a thread annotation in the document.

editor.on('comments:threadHovered', ({ threadIds, threads }) => {
  console.log(`Hovering over threads: ${threadIds.join(', ')}`)
})

comments:threadUnhovered

Fired when the user stops hovering over a thread annotation.

editor.on('comments:threadUnhovered', ({ threadIds }) => {
  console.log('Threads unhovered')
})

PreviouslyColor

Next upDrag Handle