Code Block Button
Available for free
A fully accessible code block button for Tiptap editors. Easily toggle selected content into a <codeBlock>
with keyboard shortcut support and flexible customization options.
Installation
Add the component via the Tiptap CLI:
npx @tiptap/cli@latest add code-block-button
Components
<CodeBlockButton />
A prebuilt React component that toggles code block formatting.
Usage
import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { CodeBlockButton } from '@/components/tiptap-ui/code-block-button'
import '@/components/tiptap-node/code-block-node/code-block-node.scss'
export default function MyEditor() {
const editor = useEditor({
immediatelyRender: false,
extensions: [StarterKit],
content: `
<pre><code>console.log('Hello, World!');</code></pre>
`,
})
return (
<EditorContext.Provider value={{ editor }}>
<CodeBlockButton
editor={editor}
text="Code"
hideWhenUnavailable={true}
showShortcut={true}
onToggled={() => console.log('Code block 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 code block is not applicable |
onToggled | () => void | undefined | Callback fired after a successful toggle |
showShortcut | boolean | false | Shows a keyboard shortcut badge (if available) |
Hooks
useCodeBlock()
A custom hook to build your own code block toggle button with full control over rendering and behavior.
Usage
function MyCodeBlockButton() {
const { isVisible, isActive, canToggle, handleCodeBlock, label, shortcutKeys, Icon } =
useCodeBlock({
editor: myEditor,
hideWhenUnavailable: true,
onToggled: () => console.log('Code block toggled!'),
})
if (!isVisible) return null
return (
<button
onClick={handleCodeBlock}
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 code block cannot be applied |
onToggled | () => void | undefined | Callback fired after toggling code block |
Return Values
Name | Type | Description |
---|---|---|
isVisible | boolean | Whether the button should be rendered |
isActive | boolean | If the code block is currently active |
canToggle | boolean | If the code block toggle is currently allowed |
handleCodeBlock | () => boolean | Function to toggle code block formatting |
label | string | Accessible label text for the button |
shortcutKeys | string | Keyboard shortcut (Cmd/Ctrl + Alt + C) |
Icon | React.FC | Icon component for the code block button |
Utilities
canToggle(editor, turnInto?)
Checks if code block can be toggled in the current editor state.
import { canToggle } from '@/components/tiptap-ui/code-block-button'
const canToggle = canToggle(editor) // Check if can toggle
const canTurnInto = canToggle(editor, true) // Explicit: check if selection can be turned into a code block
toggleCodeBlock(editor)
Programmatically toggles code block formatting for the current selection.
import { toggleCodeBlock } from '@/components/tiptap-ui/code-block-button'
const success = toggleCodeBlock(editor)
if (success) {
console.log('Code block toggled successfully!')
}
Keyboard Shortcuts
The code block button supports the following keyboard shortcut:
- Cmd/Ctrl + Alt + C: Toggle code block formatting
The shortcut is automatically registered when using either the <CodeBlockButton />
component or the useCodeBlock()
hook.
Requirements
Dependencies
@tiptap/react
- Core Tiptap React integration@tiptap/starter-kit
- Basic Tiptap extensions including code block supportreact-hotkeys-hook
- Keyboard shortcut management
Referenced Components
use-tiptap-editor
(hook)button
(primitive)badge
(primitive)tiptap-utils
(lib)code-block-icon
(icon)