Blockquote Button
Available for free
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-buttonComponents
<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 | The Tiptap editor instance |
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 | The Tiptap editor instance |
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 blockquotetoggleBlockquote(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 supportreact-hotkeys-hook- Keyboard shortcut management
Referenced Components
use-tiptap-editor(hook)button(primitive)badge(primitive)tiptap-utils(lib)block-quote-icon(icon)