or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

history-editor.mdhistory.mdindex.mdwith-history.md
tile.json

tessl/npm-slate-history

An operation-based history implementation for Slate editors providing undo/redo functionality.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/slate-history@0.115.x

To install, run

npx @tessl/cli install tessl/npm-slate-history@0.115.0

index.mddocs/

Slate History

Slate History provides a comprehensive undo/redo history implementation for Slate rich text editors through operation-based state tracking. It seamlessly integrates with Slate editors to track all document operations in undo and redo stacks, enabling users to undo and redo changes while preserving selection state.

Package Information

  • Package Name: slate-history
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install slate-history
  • Peer Dependencies: slate >= 0.114.3

Core Imports

import { withHistory, HistoryEditor, History, HISTORY, SAVING, MERGING, SPLITTING_ONCE } from "slate-history";

For CommonJS:

const { withHistory, HistoryEditor, History, HISTORY, SAVING, MERGING, SPLITTING_ONCE } = require("slate-history");

Most Common Usage:

import { withHistory, HistoryEditor, History } from "slate-history";

Required Slate Types:

// These types from slate are used in the API signatures
import { Editor, BaseEditor, Operation, Range } from "slate";

Basic Usage

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

// Create an editor with history functionality
const editor = withHistory(createEditor());

// Use undo and redo methods
editor.undo();
editor.redo();

// Check if editor has history functionality
if (HistoryEditor.isHistoryEditor(editor)) {
  console.log("Editor has history support");
}

With React:

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

const editor = withReact(withHistory(createEditor()));

Architecture

Slate History is built around several key components:

  • withHistory Plugin: Core plugin function that transforms a Slate editor into a history-enabled editor
  • HistoryEditor Interface: Extended editor interface with history methods and state management utilities
  • History Object: Data structure containing undo and redo operation stacks
  • Operation Batching: Intelligent grouping of related operations for optimal undo/redo behavior
  • State Management: WeakMap-based state tracking for merging, saving, and splitting behaviors

Capabilities

History Plugin

The core plugin that adds undo/redo functionality to Slate editors through operation tracking and batch management.

function withHistory<T extends Editor>(editor: T): T & HistoryEditor;

History Plugin

Editor Methods and State Management

Helper methods for controlling history behavior, checking editor state, and managing operation batching.

interface HistoryEditor extends BaseEditor {
  history: History;
  undo: () => void;
  redo: () => void;
  writeHistory: (stack: 'undos' | 'redos', batch: any) => void;
}

History Editor

History Data Structure

The core data structure and utilities for managing undo/redo operation stacks.

interface History {
  redos: Batch[];
  undos: Batch[];
}

// Internal batch structure (not exported)
interface Batch {
  operations: Operation[];
  selectionBefore: Range | null;
}

// Static methods
namespace History {
  function isHistory(value: any): value is History;
}

History Structure

Types

interface HistoryEditor extends BaseEditor {
  history: History;
  undo: () => void;
  redo: () => void;
  writeHistory: (stack: 'undos' | 'redos', batch: any) => void;
}

interface History {
  redos: Batch[];
  undos: Batch[];
}

// Internal batch structure (not exported)
interface Batch {
  operations: Operation[];
  selectionBefore: Range | null;
}

// WeakMap exports for advanced usage
const HISTORY: WeakMap<Editor, History>;
const SAVING: WeakMap<Editor, boolean | undefined>;
const MERGING: WeakMap<Editor, boolean | undefined>;
const SPLITTING_ONCE: WeakMap<Editor, boolean | undefined>;