@lexical/history

What is @lexical/history?

@lexical/history is a plugin for the Lexical framework that provides undo and redo functionality for text editors. It allows developers to easily integrate history management into their Lexical-based editors, enabling users to revert or reapply changes made to the content.

What are @lexical/history's main functionalities?

Undo

This feature allows users to undo the last change made in the editor. The `undo` method reverts the editor state to the previous state.

import { createHistoryPlugin } from '@lexical/history';

const historyPlugin = createHistoryPlugin();

// To undo the last change
historyPlugin.undo();

Redo

This feature allows users to redo the last undone change in the editor. The `redo` method reapplies the last change that was undone.

import { createHistoryPlugin } from '@lexical/history';

const historyPlugin = createHistoryPlugin();

// To redo the last undone change
historyPlugin.redo();

Custom History Management

This feature allows developers to customize the history management, such as setting a maximum stack size for the undo/redo history. The `createHistoryPlugin` function accepts configuration options to tailor the history behavior.

import { createHistoryPlugin } from '@lexical/history';

const historyPlugin = createHistoryPlugin({ maxStackSize: 100 });

// Custom history management with a maximum stack size of 100
historyPlugin.undo();

Other packages similar to @lexical/history

draft-js

Draft.js is a framework for building rich text editors in React. It includes built-in undo and redo functionality, similar to @lexical/history, but is part of a larger framework for managing editor state and content.

slate

Slate is another framework for building rich text editors in React. It provides undo and redo functionality through its history plugin, similar to @lexical/history. Slate offers more flexibility and control over the editor's behavior and state management.

prosemirror-history

ProseMirror is a toolkit for building rich text editors, and the prosemirror-history plugin provides undo and redo functionality. It is similar to @lexical/history in that it focuses on history management, but it is designed to work within the ProseMirror ecosystem.

README

@lexical/history

This package contains history helpers for Lexical.

Methods

registerHistory

Registers necessary listeners to manage undo/redo history stack and related editor commands. It returns unregister callback that cleans up all listeners and should be called on editor unmount.

function registerHistory(
  editor: LexicalEditor,
  externalHistoryState: HistoryState,
  delay: number,
): () => void

Commands

History package handles UNDO_COMMAND, REDO_COMMAND and CLEAR_HISTORY_COMMAND commands. It also triggers CAN_UNDO_COMMAND and CAN_REDO_COMMAND commands when history state is changed. These commands could be used to work with history state:

import {UNDO_COMMAND, REDO_COMMAND} from 'lexical';

<Toolbar>
  <Button onClick={() => editor.dispatchCommand(UNDO_COMMAND)}>Undo</Button>
  <Button onClick={() => editor.dispatchCommand(REDO_COMMAND)}>Redo</Button>
</Toolbar>;