CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tiptap--extension-history

Deprecated Tiptap extension providing undo/redo functionality through keyboard shortcuts and programmatic commands

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

@tiptap/extension-history

The @tiptap/extension-history package provides undo and redo functionality for Tiptap rich text editors. This deprecated extension offers a simple interface for implementing keyboard shortcuts and programmatic commands for editor history management.

Package Information

  • Package Name: @tiptap/extension-history
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tiptap/extension-history
  • Status: Deprecated (located in packages-deprecated)

Core Imports

import { History } from '@tiptap/extension-history';
import type { HistoryOptions } from '@tiptap/extension-history';

For default export:

import History from '@tiptap/extension-history';

CommonJS:

const { History } = require('@tiptap/extension-history');
const History = require('@tiptap/extension-history').default;

Basic Usage

import { Editor } from '@tiptap/core';
import { History } from '@tiptap/extension-history';

// Create editor with history extension
const editor = new Editor({
  extensions: [
    History.configure({
      depth: 100,
      newGroupDelay: 500,
    }),
  ],
});

// Use undo/redo commands
editor.commands.undo();
editor.commands.redo();

// Check if undo/redo is available
const canUndo = editor.can().undo();
const canRedo = editor.can().redo();

Capabilities

Extension Configuration

Configure the history extension with options for depth and grouping delay.

/**
 * History extension with undo/redo functionality
 * @param options - Configuration options for the history extension
 */
const History: Extension<HistoryOptions>;

interface HistoryOptions {
  /**
   * The amount of history events that are collected before the oldest events are discarded.
   * @default 100
   */
  depth: number;

  /**
   * The delay (in milliseconds) between changes after which a new group should be started.
   * @default 500
   */
  newGroupDelay: number;
}

Usage Example:

import { Editor } from '@tiptap/core';
import { History } from '@tiptap/extension-history';

const editor = new Editor({
  extensions: [
    History.configure({
      depth: 50,        // Keep only 50 history events
      newGroupDelay: 1000, // Group changes within 1 second
    }),
  ],
});

Undo Command

Undo the most recent changes in the editor.

/**
 * Undo recent changes
 * @returns boolean - true if undo was successful, false if no changes to undo
 */
undo(): boolean;

Usage Example:

// Programmatic undo
if (editor.can().undo()) {
  editor.commands.undo();
}

// Check if undo is available
const canUndo = editor.can().undo();

Redo Command

Reapply previously undone changes in the editor.

/**
 * Reapply reverted changes
 * @returns boolean - true if redo was successful, false if no changes to redo
 */
redo(): boolean;

Usage Example:

// Programmatic redo
if (editor.can().redo()) {
  editor.commands.redo();
}

// Check if redo is available
const canRedo = editor.can().redo();

Keyboard Shortcuts

The extension automatically registers the following keyboard shortcuts:

interface KeyboardShortcuts {
  'Mod-z': () => boolean;        // Undo (Ctrl+Z on Windows/Linux, Cmd+Z on Mac)
  'Shift-Mod-z': () => boolean;  // Redo (Ctrl+Shift+Z)
  'Mod-y': () => boolean;        // Redo (Ctrl+Y on Windows/Linux, Cmd+Y on Mac)
  'Mod-я': () => boolean;        // Undo (Russian keyboard layout)
  'Shift-Mod-я': () => boolean;  // Redo (Russian keyboard layout)
}

Note: The shortcuts are automatically active when the extension is installed - no additional configuration required.

Types

/**
 * Main extension class providing undo/redo functionality
 */
class Extension<HistoryOptions> {
  /**
   * Configure the extension with custom options
   * @param options - Partial configuration options
   */
  configure(options?: Partial<HistoryOptions>): Extension<HistoryOptions>;

  /**
   * Extension name identifier
   */
  name: 'undoRedo';
}

/**
 * Type alias for backward compatibility
 */
type HistoryOptions = UndoRedoOptions;

/**
 * Configuration interface for the history extension
 */
interface UndoRedoOptions {
  depth: number;
  newGroupDelay: number;
}

Important Notes

Compatibility Constraints

⚠️ Not compatible with @tiptap/extension-collaboration

This extension cannot be used together with the collaboration extension, as they have conflicting history implementations:

// ❌ Don't do this - will cause conflicts
import { Collaboration } from '@tiptap/extension-collaboration';
import { History } from '@tiptap/extension-history';

const editor = new Editor({
  extensions: [
    History,        // ❌ Remove this when using collaboration
    Collaboration.configure({
      document: ydoc,
    }),
  ],
});

// ✅ Use collaboration without history extension
const editor = new Editor({
  extensions: [
    // History is built into collaboration
    Collaboration.configure({
      document: ydoc,
    }),
  ],
});

Deprecation Status

This package is deprecated and located in the packages-deprecated directory. For new projects, consider using:

  • @tiptap/extensions UndoRedo directly
  • Built-in collaboration history when using @tiptap/extension-collaboration

Migration Example:

// Old (deprecated)
import { History } from '@tiptap/extension-history';

// New (recommended)
import { UndoRedo } from '@tiptap/extensions';

const editor = new Editor({
  extensions: [
    UndoRedo.configure({
      depth: 100,
      newGroupDelay: 500,
    }),
  ],
});

Complete API Surface

Exports:

  • History - Main extension class (alias for UndoRedo)
  • HistoryOptions - Configuration interface (alias for UndoRedoOptions)
  • Default export: UndoRedo extension class

Commands added to editor:

  • undo() - Undo recent changes
  • redo() - Reapply reverted changes

Keyboard shortcuts:

  • Mod-z, Shift-Mod-z, Mod-y (with Russian keyboard support)

Configuration options:

  • depth - Number of history events to keep (default: 100)
  • newGroupDelay - Delay for grouping changes (default: 500ms)

docs

index.md

tile.json