History Plugin

The withHistory plugin is the core function that transforms a standard Slate editor into a history-enabled editor, adding comprehensive undo/redo functionality through operation tracking and intelligent batch management.

Capabilities

withHistory Plugin

Creates a history-enabled editor by adding undo/redo functionality to any Slate editor.

/**
 * Transforms a Slate editor into a history-enabled editor with undo/redo capabilities
 * @param editor - Any Slate editor instance
 * @returns Editor with HistoryEditor interface and history functionality
 */
function withHistory<T extends Editor>(editor: T): T & HistoryEditor;

Usage Examples:

import { createEditor } from "slate";
import { withHistory } from "slate-history";

// Basic usage
const editor = withHistory(createEditor());

// With React
import { withReact } from "slate-react";
const reactEditor = withReact(withHistory(createEditor()));

// The editor now has history functionality
editor.undo(); // Undo last operation batch
editor.redo(); // Redo last undone batch

// Access history state
console.log(editor.history.undos.length); // Number of undo operations
console.log(editor.history.redos.length); // Number of redo operations

Plugin Behavior

The withHistory plugin enhances the editor with the following behavior:

Operation Tracking:

• Intercepts all operations applied to the editor
• Groups related operations into batches for logical undo/redo units
• Maintains separate undo and redo stacks

Intelligent Batching:

• Automatically merges consecutive text insertions at the same location
• Automatically merges consecutive text deletions at the same location
• Preserves selection state before each operation batch

History Management:

• Maintains maximum of 100 operation batches in undo stack
• Clears redo stack when new operations are applied
• Handles operation saving and merging based on editor state flags

Added Methods:

• undo(): Reverts the last batch of operations
• redo(): Reapplies the last undone batch of operations
• writeHistory(): Manually adds operation batches to history stacks

Added Properties:

• history: Contains the undo and redo operation stacks

Operation Merging Logic

The plugin includes intelligent operation merging to create logical undo/redo units:

Text Insertion Merging:

• Consecutive insert_text operations at the same path and offset are merged
• Creates smooth undo behavior for continuous typing

Text Deletion Merging:

• Consecutive remove_text operations at adjacent positions are merged
• Supports both forward deletion and backspace deletion patterns

Non-mergeable Operations:

• set_selection operations are never saved to history
• Other operation types create separate batches

Integration Notes

Plugin Order:

• When using with withReact, apply withHistory first: withReact(withHistory(editor))
• This ensures history operations work correctly with React-specific editor behavior

Performance:

• History stack is automatically limited to 100 batches to prevent memory issues
• Operation batching reduces memory usage compared to storing every individual operation

State Preservation:

• Selection state is preserved and restored during undo/redo operations
• Editor normalization is temporarily disabled during history operations to prevent conflicts