Duplicate Button

A fully accessible duplicate button for Tiptap editors. Clone selected nodes or blocks in the editor with keyboard shortcut support and intelligent content copying.

Installation

Add the component via the Tiptap CLI:

npx @tiptap/cli@latest add duplicate-button

Components

`<DuplicateButton />`

A prebuilt React component that duplicates nodes in the editor.

Usage

export default function MyEditor() {
  return (
    <DuplicateButton
      editor={editor}
      text="Duplicate"
      hideWhenUnavailable={true}
      showShortcut={true}
      onDuplicated={() => console.log('Node duplicated!')}
    />
  )
}

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 duplication is not available
`onDuplicated`	`() => void`	`undefined`	Callback fired after a successful duplication
`showShortcut`	`boolean`	`false`	Shows a keyboard shortcut badge (if available)

Hooks

`useDuplicate()`

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

Usage

function MyDuplicateButton() {
  const { isVisible, handleDuplicate, canDuplicate, label, shortcutKeys, Icon } = useDuplicate({
    editor: myEditor,
    hideWhenUnavailable: true,
    onDuplicated: () => console.log('Node duplicated!'),
  })

  if (!isVisible) return null

  return (
    <button onClick={handleDuplicate} disabled={!canDuplicate} 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 duplication cannot be performed
`onDuplicated`	`() => void`	`undefined`	Callback fired after successful duplication

Return Values

Name	Type	Description
`isVisible`	`boolean`	Whether the button should be rendered
`canDuplicate`	`boolean`	If a node can be duplicated
`handleDuplicate`	`() => boolean`	Function to duplicate the selected node
`label`	`string`	Accessible label text for the button
`shortcutKeys`	`string`	Keyboard shortcut (Cmd/Ctrl + D)
`Icon`	`React.FC`	Icon component for the duplicate button (CopyIcon)

Utilities

`canDuplicateNode(editor)`

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

import { canDuplicateNode } from '@/registry/tiptap-ui/duplicate-button'

const canDuplicate = canDuplicateNode(editor)

`duplicateNode(editor)`

Programmatically duplicates the selected node or block.

import { duplicateNode } from '@/registry/tiptap-ui/duplicate-button'

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

Keyboard Shortcuts

The duplicate button supports the following keyboard shortcut:

Cmd/Ctrl + D: Duplicate the selected node or block

The shortcut is automatically registered when using either the <DuplicateButton /> component or the useDuplicate() hook. Note that this overrides the browser's default bookmark behavior when the editor is focused.

Requirements

Dependencies

@tiptap/react - Core Tiptap React integration
react-hotkeys-hook - Keyboard shortcut management

Referenced Components

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