Comments editor events

The Comments extension emits events when threads and comments are created, changed, selected, or hovered. Listen to them with editor.on() to build custom interfaces or keep your own state in sync.

Start plan

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 and 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')
})

The events also help you integrate with other extensions like Tracked Changes.

PreviouslyEditor commands

Next upComments on code