---
title: "Comments editor events"
description: "Listen to Comments events in the editor to react when threads and comments are created, changed, selected, or hovered."
canonical_url: "https://tiptap.dev/docs/comments/integrate/editor-events"
---

# Comments editor events

Listen to Comments events in the editor to react when threads and comments are created, changed, selected, or hovered.

## Thread events

### comments:threadCreated

Fired when a new comment thread is created.

```js
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.

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

### comments:threadResolved

Fired when a thread is resolved.

```js
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.

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

### comments:threadDeleted

Fired when a thread is deleted.

```js
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).

```js
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.

```js
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.

```js
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.

```js
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).

```js
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.

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

### comments:threadHovered

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

```js
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.

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

## Related

The events also help you integrate with other extensions like [Tracked Changes](https://tiptap.dev/docs/tracked-changes/getting-started/overview.md).