Text Button

A fully accessible text button for Tiptap editors. Easily convert content to paragraph/text format with keyboard shortcut support and flexible customization options.

Installation

Add the component via the Tiptap CLI:

npx @tiptap/cli@latest add text-button

Components

`<TextButton />`

A prebuilt React component that converts content to paragraph/text format.

Usage

<TextButton
  editor={editor}
  text="Text"
  hideWhenUnavailable={true}
  showShortcut={true}
  onToggled={() => console.log('Converted to text!')}
/>

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 text conversion is not available
`onToggled`	`() => void`	`undefined`	Callback fired after a successful conversion
`showShortcut`	`boolean`	`false`	Shows a keyboard shortcut badge (if available)

Hooks

`useText()`

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

Usage

function MyTextButton() {
  const { isVisible, isActive, canToggle, handleToggle, label, shortcutKeys, Icon } = useText({
    editor: myEditor,
    hideWhenUnavailable: true,
    onToggled: () => console.log('Converted to text!'),
  })

  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 text conversion is not available
`onToggled`	`() => void`	`undefined`	Callback fired after a successful conversion

Return Values

Name	Type	Description
`isVisible`	`boolean`	Whether the button should be rendered
`isActive`	`boolean`	If paragraph/text format is currently active
`canToggle`	`boolean`	If text conversion is currently allowed
`handleToggle`	`() => boolean`	Function to convert content to text format
`label`	`string`	Accessible label text for the button
`shortcutKeys`	`string`	Keyboard shortcut (Cmd/Ctrl + Alt + 0)
`Icon`	`React.FC`	Icon component for the text button

Utilities

`canToggleText(editor, turnInto?)`

Checks if content can be converted to text/paragraph format in the current editor state.

import { canToggleText } from '@/registry/tiptap-ui/text-button'

const canToggle = canToggleText(editor) // Check if can convert to text
const canTurnInto = canToggleText(editor, true) // Check if can turn into paragraph

`toggleParagraph(editor)`

Programmatically converts the current selection or node to paragraph format.

import { toggleParagraph } from '@/registry/tiptap-ui/text-button'

const success = toggleParagraph(editor)
if (success) {
  console.log('Content converted to text successfully!')
}

`isParagraphActive(editor)`

Checks if paragraph/text format is currently active.

import { isParagraphActive } from '@/registry/tiptap-ui/text-button'

const active = isParagraphActive(editor)

Keyboard Shortcuts

The text button supports the following keyboard shortcut:

Cmd/Ctrl + Alt + 0: Convert content to text/paragraph format

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

Requirements

Dependencies

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

Referenced Components

use-tiptap-editor (hook)
button (primitive)
badge (primitive)
tiptap-utils (lib)
type-icon (icon)