A fully accessible blockquote button for Tiptap editors. Easily wrap selected content in a <blockquote> with keyboard shortcut support and flexible customization options.

Installation

Add the component via the Tiptap CLI:

npx @tiptap/cli@latest add blockquote-button

Components

<BlockquoteButton />

A prebuilt React component that toggles blockquote formatting.

Usage

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

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

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit],
    content: `
        <blockquote>
            <p>"The best way to predict the future is to invent it."</p><p>— Alan Kay</p>
        </blockquote>
        `,
  })

return (
    <EditorContext.Provider value={{ editor }}>
      <BlockquoteButton
        editor={editor}
        text="Quote"
        hideWhenUnavailable={true}
        showShortcut={true}
        onToggled={() => console.log('Blockquote toggled!')}
      />

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

Props

Name Type Default Description
editor `Editor null` undefined
text string undefined Optional text label for the button
hideWhenUnavailable boolean false Hides the button when blockquote is not applicable
onToggled () => void undefined Callback fired after a successful toggle
showShortcut boolean false Shows a keyboard shortcut badge (if available)

Hooks

useBlockquote()

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

Usage

function MyBlockquoteButton() {
  const { isVisible, isActive, canToggle, handleToggle, label, shortcutKeys, Icon } = useBlockquote(
    {
      editor: myEditor,
      hideWhenUnavailable: true,
      onToggled: () => console.log('Blockquote toggled!'),
    },
  )

if (!isVisible) return null

return (
    <button onClick={handleToggle} disabled={!canToggle} aria-label={label} aria-pressed={isActive}>
      <Icon />
      {label}
      {shortcutKeys && <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>}
    </button>
  )
}

Props

Name Type Default Description
editor `Editor null` undefined
hideWhenUnavailable boolean false Hides the button if blockquote cannot be applied
onToggled () => void undefined Callback fired after toggling blockquote

Return Values

Name Type Description
isVisible boolean Whether the button should be rendered
isActive boolean If the blockquote is currently active
canToggle boolean If the blockquote toggle is currently allowed
handleToggle () => boolean Function to toggle blockquote formatting
label string Accessible label text for the button
shortcutKeys string Keyboard shortcut (Cmd/Ctrl + Shift + B)
Icon React.FC Icon component for the blockquote button

Utilities

canToggleBlockquote(editor, turnInto?)

Checks if blockquote can be toggled in the current editor state.

import { canToggleBlockquote } from '@/components/tiptap-ui/blockquote-button'

const canToggle = canToggleBlockquote(editor) // Check if can toggle
const canTurnInto = canToggleBlockquote(editor, true) // Check if can turn into blockquote

toggleBlockquote(editor)

Programmatically toggles blockquote formatting for the current selection.

import { toggleBlockquote } from '@/components/tiptap-ui/blockquote-button'

const success = toggleBlockquote(editor)
if (success) {
  console.log('Blockquote toggled successfully!')
}

Keyboard Shortcuts

The blockquote button supports the following keyboard shortcut:

  • Cmd/Ctrl + Shift + B: Toggle blockquote formatting

The shortcut is automatically registered when using either the <BlockquoteButton /> component or the useBlockquote() hook.

Requirements

Dependencies

  • @tiptap/react - Core Tiptap React integration
  • @tiptap/starter-kit - Basic Tiptap extensions including blockquote support
  • react-hotkeys-hook - Keyboard shortcut management

Referenced Components

  • use-tiptap-editor (hook)
  • button (primitive)
  • badge (primitive)
  • tiptap-utils (lib)
  • block-quote-icon (icon)