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-buttonComponents
<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 availableexecuteUndoRedoAction(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/redoreact-hotkeys-hook- Keyboard shortcut management
Referenced Components
use-tiptap-editor(hook)button(primitive)badge(primitive)tiptap-utils(lib)undo-icon(icon)redo-icon(icon)