Track Changes extension

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

Usage

Enable through document mode:

superdoc.setDocumentMode('suggesting'); // Enable tracking
superdoc.setDocumentMode('editing');    // Disable tracking

Or toggle programmatically:

Usage

editor.commands.enableTrackChanges()
editor.commands.disableTrackChanges()
editor.commands.toggleTrackChanges()

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

Commands

Accept changes

Usage

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

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

Reject changes

Usage

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

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

Insert tracked change programmatically

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

Usage

editor.commands.insertTrackedChange({
  from: 10,
  to: 25,
  text: 'replacement text',
  comment: 'AI suggestion: improved 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.insertTrackedChange({
      from: 10,
      to: 25,
      text: 'replacement text',
      comment: 'AI suggestion: improved wording'
    })
  },
});

Parameters:

options · Object

Object with from, to, text, user, comment, addToHistory, emitCommentEvent

View modes

Usage

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

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

Helpers

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:

Usage

// Export with changes preserved
await superdoc.export();

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

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

Full example

Track Changes Example

Runnable example with mode switching, accept/reject, and comments sidebar

Source code