Delete Node Button

Available in Start plan

A fully accessible delete node button for Tiptap editors. Remove selected nodes or blocks from the editor with keyboard shortcut support and smart selection handling.

Installation

Add the component via the Tiptap CLI:

npx @tiptap/cli@latest add delete-node-button

Components

`<DeleteNodeButton />`

A prebuilt React component that deletes nodes from the editor.

Usage

export default function MyEditor() {
  return (
    <DeleteNodeButton
      editor={editor}
      text="Delete"
      hideWhenUnavailable={true}
      showShortcut={true}
      onDeleted={() => console.log('Node deleted!')}
    />
  )
}

Props

Name	Type	Default	Description
`editor`	`Editor \| null`	`undefined`	The Tiptap editor instance
`text`	`string`	`undefined`	Optional text label for the button
`hideWhenUnavailable`	`boolean`	`false`	Hides the button when deletion is not available
`onDeleted`	`() => void`	`undefined`	Callback fired after a successful deletion
`showShortcut`	`boolean`	`false`	Shows a keyboard shortcut badge (if available)

Hooks

`useDeleteNode()`

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

Usage

function MyDeleteNodeButton() {
  const { isVisible, handleDeleteNode, canDeleteNode, label, shortcutKeys, Icon } = useDeleteNode({
    editor: myEditor,
    hideWhenUnavailable: true,
    onDeleted: () => console.log('Node deleted!'),
  })

  if (!isVisible) return null

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

Props

Name	Type	Default	Description
`editor`	`Editor \| null`	`undefined`	The Tiptap editor instance
`hideWhenUnavailable`	`boolean`	`false`	Hides the button if deletion cannot be performed
`onDeleted`	`() => void`	`undefined`	Callback fired after successful deletion

Return Values

Name	Type	Description
`isVisible`	`boolean`	Whether the button should be rendered
`canDeleteNode`	`boolean`	If a node can be deleted
`handleDeleteNode`	`() => boolean`	Function to delete the selected node
`label`	`string`	Accessible label text for the button
`shortcutKeys`	`string`	Keyboard shortcut (Backspace)
`Icon`	`React.FC`	Icon component for the delete button (TrashIcon)

Utilities

`canDeleteNode(editor)`

Checks if a node can be deleted in the current editor state.

import { canDeleteNode } from '@/components/tiptap-ui/delete-node-button'

const canDelete = canDeleteNode(editor)

`deleteNode(editor)`

Programmatically deletes the selected node or block.

import { deleteNode } from '@/components/tiptap-ui/delete-node-button'

const success = deleteNode(editor)
if (success) {
  console.log('Node deleted successfully!')
}

`deleteNodeAtPosition(editor, pos, nodeSize)`

Low-level utility to delete a node at a specific position.

import { deleteNodeAtPosition } from '@/components/tiptap-ui/delete-node-button'

const success = deleteNodeAtPosition(editor, position, nodeSize)

Keyboard Shortcuts

The delete node button supports the following keyboard shortcut:

Backspace: Delete the selected node or block

The shortcut is automatically registered when using either the <DeleteNodeButton /> component or the useDeleteNode() hook. Editor extensions keep ownership of Backspace events they already handled; the shared delete shortcut runs only for an unhandled event and prevents the browser default only after a successful deletion. A successful positional deletion starts a separate undo step.

Requirements

Dependencies

@tiptap/react - Core Tiptap React integration
@tiptap/pm - ProseMirror selection and history utilities
@tiptap/starter-kit - Core editor extensions and keymaps
react-hotkeys-hook - Keyboard shortcut management

Referenced Components

use-tiptap-editor (hook)
use-is-breakpoint (hook)
button (primitive)
badge (primitive)
tiptap-utils (lib)
trash-icon (icon)
styles (shared styles)

PreviouslyCopy to clipboard button

Next upDrag context menu