> ## Documentation Index
> Fetch the complete documentation index at: https://superdoc-nick-sd-2070-add-content-controls-namespace-to-doc.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Track Changes extension

export const SourceCodeLink = ({extension, path}) => {
  const githubPath = path || `packages/super-editor/src/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>;
};

Track Changes records all edits with author attribution and timestamps, matching Microsoft Word's revision tracking.

## Usage

Enable through document mode:

```javascript theme={null}
superdoc.setDocumentMode('suggesting'); // Enable tracking
superdoc.setDocumentMode('editing');    // Disable tracking
```

Or toggle programmatically:

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.enableTrackChanges()
  editor.commands.disableTrackChanges()
  editor.commands.toggleTrackChanges()
  ```

  ```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.enableTrackChanges()
      editor.commands.disableTrackChanges()
      editor.commands.toggleTrackChanges()
    },
  });
  ```
</CodeGroup>

## Commands

### Accept changes

<CodeGroup>
  ```javascript Usage theme={null}
  // Accept at current selection
  editor.commands.acceptTrackedChangeBySelection()

  // Accept a specific change by ID
  editor.commands.acceptTrackedChangeById('change-123')

  // Accept a change object (with start/end positions)
  editor.commands.acceptTrackedChange({ trackedChange: { start: 10, end: 50 } })

  // Accept changes in a range
  editor.commands.acceptTrackedChangesBetween(10, 50)

  // Accept all changes in the document
  editor.commands.acceptAllTrackedChanges()

  // Toolbar-aware accept (uses active thread or selection)
  editor.commands.acceptTrackedChangeFromToolbar()
  ```

  ```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;
      // Accept at current selection
      editor.commands.acceptTrackedChangeBySelection()

      // Accept a specific change by ID
      editor.commands.acceptTrackedChangeById('change-123')

      // Accept a change object (with start/end positions)
      editor.commands.acceptTrackedChange({ trackedChange: { start: 10, end: 50 } })

      // Accept changes in a range
      editor.commands.acceptTrackedChangesBetween(10, 50)

      // Accept all changes in the document
      editor.commands.acceptAllTrackedChanges()

      // Toolbar-aware accept (uses active thread or selection)
      editor.commands.acceptTrackedChangeFromToolbar()
    },
  });
  ```
</CodeGroup>

### Reject changes

<CodeGroup>
  ```javascript Usage theme={null}
  // Reject at current selection
  editor.commands.rejectTrackedChangeOnSelection()

  // Reject a specific change by ID
  editor.commands.rejectTrackedChangeById('change-123')

  // Reject a change object
  editor.commands.rejectTrackedChange({ trackedChange: { start: 10, end: 50 } })

  // Reject changes in a range
  editor.commands.rejectTrackedChangesBetween(10, 50)

  // Reject all changes in the document
  editor.commands.rejectAllTrackedChanges()

  // Toolbar-aware reject
  editor.commands.rejectTrackedChangeFromToolbar()
  ```

  ```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;
      // Reject at current selection
      editor.commands.rejectTrackedChangeOnSelection()

      // Reject a specific change by ID
      editor.commands.rejectTrackedChangeById('change-123')

      // Reject a change object
      editor.commands.rejectTrackedChange({ trackedChange: { start: 10, end: 50 } })

      // Reject changes in a range
      editor.commands.rejectTrackedChangesBetween(10, 50)

      // Reject all changes in the document
      editor.commands.rejectAllTrackedChanges()

      // Toolbar-aware reject
      editor.commands.rejectTrackedChangeFromToolbar()
    },
  });
  ```
</CodeGroup>

### Insert tracked change programmatically

Use `insertTrackedChange` to add tracked edits from external sources (e.g., AI suggestions):

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.insertTrackedChange({
    from: 10,
    to: 25,
    text: 'replacement text',
    comment: 'AI suggestion: improved 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.insertTrackedChange({
        from: 10,
        to: 25,
        text: 'replacement text',
        comment: 'AI suggestion: improved wording'
      })
    },
  });
  ```
</CodeGroup>

**Parameters:**

<ParamField path="options" type="Object">
  Object with `from`, `to`, `text`, `user`, `comment`, `addToHistory`, `emitCommentEvent`
</ParamField>

### View modes

<CodeGroup>
  ```javascript Usage theme={null}
  // Show document as it was before changes
  editor.commands.toggleTrackChangesShowOriginal()
  editor.commands.enableTrackChangesShowOriginal()
  editor.commands.disableTrackChangesShowOriginal()

  // Show document as if all changes were accepted
  editor.commands.toggleTrackChangesShowFinal()
  editor.commands.enableTrackChangesShowFinal()
  ```

  ```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;
      // Show document as it was before changes
      editor.commands.toggleTrackChangesShowOriginal()
      editor.commands.enableTrackChangesShowOriginal()
      editor.commands.disableTrackChangesShowOriginal()

      // Show document as if all changes were accepted
      editor.commands.toggleTrackChangesShowFinal()
      editor.commands.enableTrackChangesShowFinal()
    },
  });
  ```
</CodeGroup>

## Helpers

```javascript theme={null}
import { trackChangesHelpers } from 'superdoc';

// Get all tracked changes in the document
const changes = trackChangesHelpers.getTrackChanges(editor.state);
// Returns: [{ mark, from, to }, ...]

// Get a specific change by ID
const change = trackChangesHelpers.getTrackChanges(editor.state, 'change-123');
```

## Change types

| Type          | Mark          | Visual                          |
| ------------- | ------------- | ------------------------------- |
| Insertion     | `trackInsert` | Green underline                 |
| Deletion      | `trackDelete` | Red strikethrough               |
| Format change | `trackFormat` | Records before/after formatting |

Each change includes author name, email, timestamp, and a unique ID.

## Export behavior

Changes export to DOCX as Word revisions:

<CodeGroup>
  ```javascript Usage theme={null}
  // Export with changes preserved
  await superdoc.export();

  // Accept all first, then export clean
  editor.commands.acceptAllTrackedChanges();
  await superdoc.export();
  ```

  ```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;
      // Export with changes preserved
      await superdoc.export();

      // Accept all first, then export clean
      editor.commands.acceptAllTrackedChanges();
      await superdoc.export();
    },
  });
  ```
</CodeGroup>

## Full example

<Card title="Track Changes Example" icon="github" href="https://github.com/superdoc-dev/superdoc/tree/main/examples/features/track-changes">
  Runnable example with mode switching, accept/reject, and comments sidebar
</Card>

## Source code

<SourceCodeLink path="packages/super-editor/src/extensions/track-changes/track-changes.js" />