Now Available: Notion-like editor templateNotion-style editor for Tiptap Cloud

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

NameTypeDefaultDescription
editorEditor | nullundefinedThe Tiptap editor instance
textstringundefinedOptional text label for the button
hideWhenUnavailablebooleanfalseHides the button when code block is not applicable
onToggled() => voidundefinedCallback fired after a successful toggle
showShortcutbooleanfalseShows 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

NameTypeDefaultDescription
editorEditor | nullundefinedThe Tiptap editor instance
hideWhenUnavailablebooleanfalseHides the button if code block cannot be applied
onToggled() => voidundefinedCallback fired after toggling code block

Return Values

NameTypeDescription
isVisiblebooleanWhether the button should be rendered
isActivebooleanIf the code block is currently active
canTogglebooleanIf the code block toggle is currently allowed
handleCodeBlock() => booleanFunction to toggle code block formatting
labelstringAccessible label text for the button
shortcutKeysstringKeyboard shortcut (Cmd/Ctrl + Alt + C)
IconReact.FCIcon 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 support
  • react-hotkeys-hook - Keyboard shortcut management

Referenced Components

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