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/slate";
import { history } from "@platejs/slate-history";
 
const editor = createEditor({
  extensions: [history()],
  initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});
import { createEditor } from "@platejs/slate";
import { history } from "@platejs/slate-history";
 
const editor = createEditor({
  extensions: [history()],
  initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});

useSlateEditor 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/slate-history";
import { useSlateEditor } from "@platejs/slate-react";
 
const editor = useSlateEditor({
  extensions: [history({ enabled: false })],
  initialValue,
});
import { history } from "@platejs/slate-history";
import { useSlateEditor } from "@platejs/slate-react";
 
const editor = useSlateEditor({
  extensions: [history({ enabled: false })],
  initialValue,
});

Read history through state.history, write through tx.history, and control batching through editor.api.history.

Runtime API

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

See History Editor API for the full API surface.