> ## Documentation Index
> Fetch the complete documentation index at: https://superdoc-caio-pizzol-docs-ai-core-preset.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Comments extension

export const SourceCodeLink = ({extension, path}) => {
  const githubPath = path || `packages/super-editor/src/editors/v1/extensions/${extension.toLowerCase()}`;
  const githubUrl = `https://github.com/superdoc-dev/superdoc/tree/main/${githubPath}`;
  return <div>
      <p>
        <a href={githubUrl} target="_blank" rel="noopener noreferrer">
          View on GitHub →
        </a>
      </p>
    </div>;
};

The Comments extension adds Word-style commenting with threads, replies, and resolution.

## Usage

Configure comments through the modules option:

```javascript theme={null}
modules: {
  comments: {
    readOnly: false,
    allowResolve: true
  }
}
```

## Commands

### `addComment`

Add a comment to the current text selection. Requires text to be selected.

<CodeGroup>
  ```javascript Usage theme={null}
  // Simple text comment
  editor.commands.addComment('Please review this section')

  // With options
  editor.commands.addComment({
    content: 'Please review',
    author: 'Jane Smith',
    authorEmail: 'jane@example.com',
    isInternal: false
  })
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      // Simple text comment
      editor.commands.addComment('Please review this section')

      // With options
      editor.commands.addComment({
        content: 'Please review',
        author: 'Jane Smith',
        authorEmail: 'jane@example.com',
        isInternal: false
      })
    },
  });
  ```
</CodeGroup>

**Parameters:**

<ParamField path="contentOrOptions" type="string | Object" required>
  Comment text, or an options object with `content`, `author`, `authorEmail`, `authorImage`, and `isInternal` fields
</ParamField>

### `addCommentReply`

Add a reply to an existing comment thread.

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.addCommentReply({
    parentId: 'comment-123',
    content: 'Done, updated the wording.'
  })
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.addCommentReply({
        parentId: 'comment-123',
        content: 'Done, updated the wording.'
      })
    },
  });
  ```
</CodeGroup>

**Parameters:**

<ParamField path="options" type="Object" required>
  Object with `parentId` (required), `content`, `author`, `authorEmail`, `authorImage`
</ParamField>

### `removeComment`

Remove a comment and its highlight marks from the document.

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.removeComment({ commentId: 'abc-123' })
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.removeComment({ commentId: 'abc-123' })
    },
  });
  ```
</CodeGroup>

**Parameters:**

<ParamField path="options" type="Object" required>
  Object with `commentId` and/or `importedId`
</ParamField>

### `resolveComment`

Resolve a comment. Removes the highlight but preserves positional anchors for export.

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.resolveComment({ commentId: 'abc-123' })
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.resolveComment({ commentId: 'abc-123' })
    },
  });
  ```
</CodeGroup>

**Parameters:**

<ParamField path="options" type="Object" required>
  Object with `commentId`
</ParamField>

### `setActiveComment`

Set the active/selected comment thread by ID.

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.setActiveComment({ commentId: 'abc-123' })
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.setActiveComment({ commentId: 'abc-123' })
    },
  });
  ```
</CodeGroup>

### `setCommentInternal`

Toggle whether a comment is internal (private) or external.

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.setCommentInternal({
    commentId: 'abc-123',
    isInternal: true
  })
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.setCommentInternal({
        commentId: 'abc-123',
        isInternal: true
      })
    },
  });
  ```
</CodeGroup>

### `setCursorById`

Move the cursor to the start of a comment's range. Also works for tracked change IDs.

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.setCursorById('abc-123')
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.setCursorById('abc-123')
    },
  });
  ```
</CodeGroup>

## Events

```javascript theme={null}
superdoc.on('comments-update', ({ type, comment }) => {
  // type: 'pending' | 'add' | 'update' | 'deleted' | 'new' | 'resolved' | 'selected' | ...
});
```

## Export behavior

Comments export to DOCX as native Word comments:

```javascript theme={null}
await superdoc.export({ commentsType: 'external' });

// Without comments
await superdoc.export({ commentsType: 'clean' });
```

## Source code

<SourceCodeLink path="packages/super-editor/src/editors/v1/extensions/comment/comments-plugin.js" />