Skip to main content
The commit extension tracks document changes and displays them visually with colored highlights. It’s useful for showing edits, tracking modifications, and implementing change tracking features.

​
Installation

The commit extension is included in the prosekit package. 
import { defineCommit } from 'prosekit/extensions/commit'

​
Styling

Import commit styles to show change highlights: 
import 'prosekit/extensions/commit/style.css'

​
Usage

import { createEditor } from 'prosekit/core'
import { defineCommit } from 'prosekit/extensions/commit'
import 'prosekit/extensions/commit/style.css'

const editor = createEditor({
  extension: defineCommit()
})

​
API reference

​
defineCommit()

Creates a commit extension that tracks and visualizes document changes.

​
How it works

The commit extension:
  1. Tracks changes in the document using changesets
  2. Applies decorations to show additions and deletions
  3. Color codes changes by author or change type
  4. Preserves history of modifications

​
Use cases

Track edits

Show what changed in a document

Review changes

Review modifications before accepting

Change tracking

Microsoft Word-style change tracking

Audit trail

Maintain history of who changed what

​
Styling changes

The default styles show additions in green and deletions in red: 
/* Additions */
.prosekit-commit-insertion {
  background-color: rgba(34, 197, 94, 0.2);
  text-decoration: underline;
  text-decoration-color: rgb(34, 197, 94);
}

/* Deletions */
.prosekit-commit-deletion {
  background-color: rgba(239, 68, 68, 0.2);
  text-decoration: line-through;
  text-decoration-color: rgb(239, 68, 68);
}

​
Custom styling

/* Subtle additions */
.prosekit-commit-insertion {
  background-color: rgba(37, 99, 235, 0.1);
  border-bottom: 2px solid rgba(37, 99, 235, 0.5);
  text-decoration: none;
}

/* Strikethrough deletions */
.prosekit-commit-deletion {
  background-color: rgba(239, 68, 68, 0.1);
  text-decoration: line-through;
  opacity: 0.6;
}

​
With collaboration

Combine with Yjs or Loro for collaborative change tracking: 
import { createEditor, union } from 'prosekit/core'
import { defineYjs } from 'prosekit/extensions/yjs'
import { defineCommit } from 'prosekit/extensions/commit'
import * as Y from 'yjs'
import 'prosekit/extensions/yjs/style.css'
import 'prosekit/extensions/commit/style.css'

const ydoc = new Y.Doc()
const type = ydoc.getXmlFragment('prosemirror')

const editor = createEditor({
  extension: union([
    defineYjs({ doc: ydoc, type }),
    defineCommit(),
  ])
})
  • Yjs - Real-time collaboration
  • Loro - Alternative collaboration library
  • History - Undo/redo functionality