Comments extension

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

Usage

Configure comments through the modules option:

modules: {
  comments: {
    readOnly: false,
    allowResolve: true
  }
}

Commands

`addComment`

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

// 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
})

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
    })
  },
});

Parameters:

contentOrOptions

string | Object

required

Comment text, or an options object with content, author, authorEmail, authorImage, and isInternal fields

`addCommentReply`

Add a reply to an existing comment thread.

editor.commands.addCommentReply({
  parentId: 'comment-123',
  content: 'Done, updated the wording.'
})

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.'
    })
  },
});

Parameters:

options

Object

required

Object with parentId (required), content, author, authorEmail, authorImage

`removeComment`

Remove a comment and its highlight marks from the document.

editor.commands.removeComment({ commentId: 'abc-123' })

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' })
  },
});

Parameters:

options

Object

required

Object with commentId and/or importedId

`resolveComment`

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

editor.commands.resolveComment({ commentId: 'abc-123' })

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' })
  },
});

Parameters:

options

Object

required

Object with commentId

`setActiveComment`

Set the active/selected comment thread by ID.

editor.commands.setActiveComment({ commentId: 'abc-123' })

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' })
  },
});

`setCommentInternal`

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

editor.commands.setCommentInternal({
  commentId: 'abc-123',
  isInternal: true
})

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
    })
  },
});

`setCursorById`

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

editor.commands.setCursorById('abc-123')

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')
  },
});

Events

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

Export behavior

Comments export to DOCX as native Word comments:

await superdoc.export({ commentsType: 'external' });

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

Getting Started

Editor

Document Engine

AI

Solutions

Resources

Comments extension

Usage

Commands

`addComment`

`addCommentReply`

`removeComment`

`resolveComment`

`setActiveComment`

`setCommentInternal`

`setCursorById`

Events

Export behavior

Source code

​Usage

​Commands

​addComment

​addCommentReply

​removeComment

​resolveComment

​setActiveComment

​setCommentInternal

​setCursorById

​Events

​Export behavior

​Source code

Usage

Commands

`addComment`

`addCommentReply`

`removeComment`

`resolveComment`

`setActiveComment`

`setCommentInternal`

`setCursorById`

Events

Export behavior

Source code