Undo Redo Button

Available for free

A fully accessible undo redo button for Tiptap editors. Easily undo or redo editor actions with keyboard shortcut support and flexible customization options.

Installation

Add the component via the Tiptap CLI:

npx @tiptap/cli@latest add undo-redo-button

Components

`<UndoRedoButton />`

A prebuilt React component that performs undo or redo actions for a specific action type.

Usage

import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { UndoRedoButton } from '@/components/tiptap-ui/undo-redo-button'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit],
    content: `
        <p>Try typing something and then click the undo and redo buttons.</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <UndoRedoButton
        editor={editor}
        action="undo"
        text="Undo"
        hideWhenUnavailable={true}
        showShortcut={true}
        onExecuted={() => console.log('Action executed!')}
      />
      <UndoRedoButton
        editor={editor}
        action="redo"
        text="Redo"
        hideWhenUnavailable={true}
        showShortcut={true}
        onExecuted={() => console.log('Action executed!')}
      />

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

Props

Name	Type	Default	Description
`editor`	`Editor \| null`	`undefined`	The Tiptap editor instance
`action`	`UndoRedoAction`	`required`	The action type (`"undo"` or `"redo"`)
`text`	`string`	`undefined`	Optional text label for the button
`hideWhenUnavailable`	`boolean`	`false`	Hides the button when action is not available
`onExecuted`	`() => void`	`undefined`	Callback fired after a successful action execution
`showShortcut`	`boolean`	`false`	Shows a keyboard shortcut badge (if available)

Hooks

`useUndoRedo()`

A custom hook to build your own undo redo button with full control over rendering and behavior.

Usage

function MyUndoRedoButton() {
  const { isVisible, canExecute, handleAction, label, shortcutKeys, Icon } = useUndoRedo({
    editor: myEditor,
    action: 'undo',
    hideWhenUnavailable: true,
    onExecuted: () => console.log('Action executed!'),
  })

  if (!isVisible) return null

  return (
    <button onClick={handleAction} disabled={!canExecute} aria-label={label}>
      <Icon />
      {label}
      {shortcutKeys && <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>}
    </button>
  )
}

Props

Name	Type	Default	Description
`editor`	`Editor \| null`	`undefined`	The Tiptap editor instance
`action`	`UndoRedoAction`	`required`	The action type to perform
`hideWhenUnavailable`	`boolean`	`false`	Hides the button if action is not available
`onExecuted`	`() => void`	`undefined`	Callback fired after a successful action execution

Return Values

Name	Type	Description
`isVisible`	`boolean`	Whether the button should be rendered
`canExecute`	`boolean`	If the specific action can be executed
`handleAction`	`() => boolean`	Function to execute the history action
`label`	`string`	Accessible label text for the button
`shortcutKeys`	`string`	Keyboard shortcut for the specific action
`Icon`	`React.FC`	Icon component for the undo redo button

Utilities

`canExecuteUndoRedoAction(editor, action)`

Checks if a specific history action can be executed in the current editor state.

import { canExecuteUndoRedoAction } from '@/components/tiptap-ui/undo-redo-button'

const canUndo = canExecuteUndoRedoAction(editor, 'undo') // Check if undo is available
const canRedo = canExecuteUndoRedoAction(editor, 'redo') // Check if redo is available

`executeUndoRedoAction(editor, action)`

Programmatically executes a history action for the specified type.

import { executeUndoRedoAction } from '@/components/tiptap-ui/undo-redo-button'

const success = executeUndoRedoAction(editor, 'undo')
if (success) {
  console.log('Undo executed successfully!')
}

const success2 = executeUndoRedoAction(editor, 'redo')
if (success2) {
  console.log('Redo executed successfully!')
}

Keyboard Shortcuts

Each action type has its own keyboard shortcut:

Cmd/Ctrl + Z: Undo last action
Cmd/Ctrl + Shift + Z: Redo last undone action

The shortcuts are automatically registered when using either the <UndoRedoButton /> component or the useUndoRedo() hook.

Requirements

Dependencies

@tiptap/react - Core Tiptap React integration
@tiptap/extension-history - History extension for undo/redo
react-hotkeys-hook - Keyboard shortcut management

Referenced Components

use-tiptap-editor (hook)
button (primitive)
badge (primitive)
tiptap-utils (lib)
undo-icon (icon)
redo-icon (icon)