Copy to Clipboard Button

A fully accessible copy to clipboard button for Tiptap editors. Copy selected content or entire nodes to the clipboard with optional formatting preservation and keyboard shortcut support.

Installation

Add the component via the Tiptap CLI:

npx @tiptap/cli@latest add copy-to-clipboard-button

Components

`<CopyToClipboardButton />`

A prebuilt React component that copies editor content to the clipboard.

Usage

export default function MyEditor() {
  return (
    <CopyToClipboardButton
      editor={editor}
      text="Copy"
      copyWithFormatting={true}
      hideWhenUnavailable={true}
      showShortcut={true}
      onCopied={() => console.log('Content copied to clipboard!')}
    />
  )
}

Props

Name	Type	Default	Description
`editor`	`Editor \| null`	`undefined`	The Tiptap editor instance
`text`	`string`	`undefined`	Optional text label for the button
`copyWithFormatting`	`boolean`	`true`	Whether to preserve formatting when copying
`hideWhenUnavailable`	`boolean`	`false`	Hides the button when copying is not available
`onCopied`	`() => void`	`undefined`	Callback fired after a successful copy operation
`showShortcut`	`boolean`	`false`	Shows a keyboard shortcut badge (if available)

Hooks

`useCopyToClipboard()`

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

Usage

function MyCopyToClipboardButton() {
  const { isVisible, handleCopyToClipboard, canCopyToClipboard, label, shortcutKeys, Icon } =
    useCopyToClipboard({
      editor: myEditor,
      copyWithFormatting: false,
      hideWhenUnavailable: true,
      onCopied: () => console.log('Content copied!'),
    })

  if (!isVisible) return null

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

Props

Name	Type	Default	Description
`editor`	`Editor \| null`	`undefined`	The Tiptap editor instance
`copyWithFormatting`	`boolean`	`true`	Whether to preserve formatting when copying
`hideWhenUnavailable`	`boolean`	`false`	Hides the button if copying cannot be performed
`onCopied`	`() => void`	`undefined`	Callback fired after successful copy operation

Return Values

Name	Type	Description
`isVisible`	`boolean`	Whether the button should be rendered
`canCopyToClipboard`	`boolean`	If content can be copied to clipboard
`handleCopyToClipboard`	`() => Promise<boolean>`	Function to copy content to clipboard
`label`	`string`	Accessible label text for the button
`shortcutKeys`	`string`	Keyboard shortcut (Cmd/Ctrl + C)
`Icon`	`React.FC`	Icon component for the copy button

Utilities

`canCopyToClipboard(editor)`

Checks if content can be copied in the current editor state.

import { canCopyToClipboard } from '@/registry/tiptap-ui/copy-to-clipboard-button'

const canCopy = canCopyToClipboard(editor)

`copyToClipboard(editor, copyWithFormatting?)`

Programmatically copies content to the clipboard.

import { copyToClipboard } from '@/registry/tiptap-ui/copy-to-clipboard-button'

const success = await copyToClipboard(editor, true) // With formatting
const plainSuccess = await copyToClipboard(editor, false) // Plain text only

`writeToClipboard(textContent, htmlContent?)`

Low-level utility to write content directly to the clipboard.

import { writeToClipboard } from '@/registry/tiptap-ui/copy-to-clipboard-button'

await writeToClipboard('Plain text content')
await writeToClipboard('Plain text', '<p>HTML content</p>')

`extractContent(editor, copyWithFormatting?)`

Extracts content from the current selection or node.

import { extractContent } from '@/registry/tiptap-ui/copy-to-clipboard-button'

const { textContent, htmlContent } = extractContent(editor, true)
console.log('Text:', textContent)
console.log('HTML:', htmlContent)

Keyboard Shortcuts

The copy to clipboard button supports the following keyboard shortcut:

Cmd/Ctrl + C: Copy selected content to clipboard

The shortcut is automatically registered when using either the <CopyToClipboardButton /> component or the useCopyToClipboard() hook. Note that this overrides the browser's default copy 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)
sun-icon (icon)