History Extension Setup

PreviousNext

Install or disable the history extension in core and React-owned editors.

Install history with the history() extension.

Core Editor Setup

import { createEditor } from "@platejs/plite";
import { history } from "@platejs/plite-history";
 
const editor = createEditor({
  extensions: [history()],
  initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});
import { createEditor } from "@platejs/plite";
import { history } from "@platejs/plite-history";
 
const editor = createEditor({
  extensions: [history()],
  initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});

usePliteEditor installs history by default. Disable it explicitly when a React-owned editor should not expose history state or transaction helpers.

React Editor Setup

import { history } from "@platejs/plite-history";
import { usePliteEditor } from "@platejs/plite-react";
 
const editor = usePliteEditor({
  extensions: [history({ enabled: false })],
  initialValue,
});
import { history } from "@platejs/plite-history";
import { usePliteEditor } from "@platejs/plite-react";
 
const editor = usePliteEditor({
  extensions: [history({ enabled: false })],
  initialValue,
});

Read history through state.history, write through tx.history, and use an editor.update({ history }) policy for one controlled update.

Runtime API

const undoCount = editor.read((state) => state.history.undos().length);
 
editor.update((tx) => {
  tx.history.undo();
});
 
editor.update({ history: "skip" }).text.insert("draft");
const undoCount = editor.read((state) => state.history.undos().length);
 
editor.update((tx) => {
  tx.history.undo();
});
 
editor.update({ history: "skip" }).text.insert("draft");

See History Editor API for the full API surface.