@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>;

Changelog

v0.7.0 (2022-12-09)

Lexical 0.7 includes some breaking changes, including:

• Removal of $cloneContents from @lexical/selection
• Changes to PlainTextPlugin and RichTextPlugin with regards to how placeholders are handled
• Pressing tab with the RichTextPlugin no longer indents by default, use the LexicalTabIndentationPlugin for this behavior.
• The unstable helper function unstable_convertLegacyJSONEditorState has been removed. This was always meant to be a temporary work-around to allow developers to convert their formats to the new JSON format rather than using the actual editor state internals directly.

Lexical 0.7 includes performance and usability improvements. Notably, Lexical has a new internal architecture that allows for much better performance with large documents of content. Lexical also now provides a way to handle selection between blocks of content by providing an emulated cursor (make sure you add a blockCursor theme to your editor config to use it).

• Revert "Fix exportJSON return types for ParagraphNode and LineBreakNode" (#3521) John Flockton
• Move default language setting to Tokenizer (#3368) mizuno
• Improve LexicalTreeView around large EditorStates (#3515) Dominic Gannaway
• Improve insertBefore, insertAfter, replace selection restoration logic (#3516) Dominic Gannaway
• ⏸ [0.7] Switch the internal architecture to utilize doubly linked lists (#3480) Dominic Gannaway
• Add missing annotation to internal field of Textnode (#3514) John Flockton
• ⏸ [0.7] Remove indentation keyboard shortcuts in RTE set up (#2855) John Flockton
• Fix dom-less reconciliation (#3506) Maksim Horbachevsky
• ⏸ [0.7] Add block emulated cursors (#3434) Dominic Gannaway
• ⏸ [0.7] Customize Placeholder visibility (#3379) Gerard Rovira
• ⏸ [0.7] Remove IntentionallyMarkedAsDirtyElement from public API (#3422) John Flockton
• ⏸ [0.7] Remove $cloneContents (#3483) Dominic Gannaway
• Update Playwright (#3511) Dominic Gannaway
• Improve Auto Embed (#3505) Tyler Bainbridge
• Skip tab e2e test in webkit (#3512) Dominic Gannaway
• Add poll and speech-to-text plugin examples (#3484) akmarzhan1
• Fix typedef for wrapNodes (#3492) Maksim Horbachevsky