tiptap-redlines-extension

Track changes (redlines) extension for TipTap v3. Adds Microsoft Word-style revision tracking to any TipTap editor — insertions are highlighted with color and underline, deletions are preserved with strikethrough.

Built for TipTap v3. Based on chenyuncai/tiptap-track-change-extension, rewritten to use TipTap v3's addStorage() API instead of the v2 extension-lookup pattern.

Features

• Insertion tracking — New text is wrapped in <insert> tags
• Deletion tracking — Deleted text is preserved and wrapped in <delete> tags (strikethrough)
• Accept/Reject — Accept or reject individual changes or all changes at once
• User attribution — Attach user ID and nickname to each change
• CJK input support — Handles IME composition for Chinese/Japanese/Korean input
• Y.js compatible — Ignores changes from collaborative sync

Installation

npm install tiptap-redlines-extension

Peer dependencies:

npm install @tiptap/core @tiptap/pm

Quick Start

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { RedlinesExtension } from 'tiptap-redlines-extension'

const editor = new Editor({
  extensions: [
    StarterKit,
    RedlinesExtension.configure({
      enabled: false, // start with tracking disabled
      onStatusChange: (enabled) => {
        console.log('Track changes:', enabled ? 'ON' : 'OFF')
      },
    }),
  ],
  content: '<p>Hello World</p>',
})

Usage

Enable/Disable Track Changes

// Enable
editor.commands.setTrackChangeStatus(true)

// Disable
editor.commands.setTrackChangeStatus(false)

// Toggle
editor.commands.toggleTrackChangeStatus()

Accept and Reject Changes

// Accept the change at cursor position or within selection
editor.commands.acceptChange()

// Reject the change at cursor position or within selection
editor.commands.rejectChange()

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

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

User Attribution

editor.commands.updateOpUserOption('user-123', 'Jane Smith')

Each tracked change stores data-op-user-id, data-op-user-nickname, and data-op-date attributes on the mark element.

Styling

The extension renders insertions as <insert> elements and deletions as <delete> elements. Add CSS to style them:

/* Insertions — blue underline */
.ProseMirror insert {
  color: #2563EB;
  text-decoration: underline;
  text-decoration-color: #2563EB;
  text-underline-offset: 2px;
}

/* Deletions — red strikethrough */
.ProseMirror delete {
  color: #E11D48;
  text-decoration: line-through;
  text-decoration-color: #E11D48;
  opacity: 0.7;
}

Or use any colors that match your design system.

React Example

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import { RedlinesExtension } from 'tiptap-redlines-extension'

function MyEditor() {
  const [isTracking, setIsTracking] = useState(false)

  const editor = useEditor({
    extensions: [
      StarterKit,
      RedlinesExtension.configure({
        enabled: false,
        onStatusChange: setIsTracking,
      }),
    ],
    content: '<p>Start editing...</p>',
  })

  return (
    <div>
      <div className="toolbar">
        <button onClick={() => editor?.commands.toggleTrackChangeStatus()}>
          {isTracking ? 'Suggesting' : 'Editing'}
        </button>
        <button onClick={() => editor?.commands.acceptAllChanges()}>
          Accept All
        </button>
        <button onClick={() => editor?.commands.rejectAllChanges()}>
          Reject All
        </button>
      </div>
      <EditorContent editor={editor} />
    </div>
  )
}

Vue 3 Example

<script setup>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import { RedlinesExtension } from 'tiptap-redlines-extension'

const isTracking = ref(false)

const editor = useEditor({
  extensions: [
    StarterKit,
    RedlinesExtension.configure({
      enabled: false,
      onStatusChange: (status) => { isTracking.value = status },
    }),
  ],
  content: '<p>Start editing...</p>',
})
</script>

<template>
  <div>
    <button @click="editor?.commands.toggleTrackChangeStatus()">
      {{ isTracking ? 'Suggesting' : 'Editing' }}
    </button>
    <EditorContent :editor="editor" />
  </div>
</template>

API Reference

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | enabled | boolean | false | Whether track changes is enabled on init | | onStatusChange | (enabled: boolean) => void | undefined | Callback when status changes | | dataOpUserId | string | '' | User ID for change attribution | | dataOpUserNickname | string | '' | User nickname for change attribution |

Commands

| Command | Description | |---------|-------------| | setTrackChangeStatus(enabled) | Enable or disable tracking | | getTrackChangeStatus() | Get current tracking status | | toggleTrackChangeStatus() | Toggle tracking on/off | | acceptChange() | Accept change at cursor/selection | | acceptAllChanges() | Accept all changes | | rejectChange() | Reject change at cursor/selection | | rejectAllChanges() | Reject all changes | | updateOpUserOption(id, name) | Set user info for changes |

Exports

| Export | Description | |--------|-------------| | RedlinesExtension | Main extension (default export) | | InsertionMark | TipTap Mark for insertions | | DeletionMark | TipTap Mark for deletions | | MARK_INSERTION | Mark name constant ('insertion') | | MARK_DELETION | Mark name constant ('deletion') |

HTML Output

Insertions render as:

<insert data-op-user-id="..." data-op-user-nickname="..." data-op-date="...">new text</insert>

Deletions render as:

<delete data-op-user-id="..." data-op-user-nickname="..." data-op-date="...">removed text</delete>

How It Works

When tracking is enabled:

1. Typing new text — The onTransaction hook detects new content via ProseMirror ReplaceStep and applies the insertion mark
2. Deleting text — Instead of removing content, the extension re-adds it with the deletion mark (red strikethrough)
3. Deleting tracked insertions — If you delete text that was already marked as an insertion, it's removed for real (since it was a pending suggestion)
4. Accepting a change — Insertions: the mark is removed (text becomes normal). Deletions: the content is removed for real.
5. Rejecting a change — Insertions: the content is removed. Deletions: the mark is removed (text is restored).

Compatibility

• TipTap v3 (@tiptap/core ^3.0.0)
• Works with @tiptap/react, @tiptap/vue-3, and vanilla JS
• Compatible with Y.js collaborative editing (ignores sync changes)

Credits

Based on chenyuncai/tiptap-track-change-extension (MIT License). Rewritten for TipTap v3 compatibility using addStorage() instead of the v2 getSelfExt() pattern.

License

MIT