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` | 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 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)