History Extension Setup

PreviousNext

Install history with the history() extension.

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.

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.

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.