Toggle through heading levels with a button

A button for toggling different heading levels.

Install

You can add the component via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add heading-button

Manual Integration

For frameworks other than Vite or Next.js, add the component manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

Usage

import { HeadingButton } from '@/components/tiptap-ui/heading-button'
import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit],
    content: `
          <h1>Heading 1</h1>
          <h2>Heading 2</h2>
          <h3>Heading 3</h3>
          <h4>Heading 4</h4>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <HeadingButton level={1}></HeadingButton>
        <HeadingButton level={2}></HeadingButton>
        <HeadingButton level={3}></HeadingButton>
        <HeadingButton level={4}></HeadingButton>
      </div>

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

Props

Name	Type	Default	Description
editor	Editor \| null	null	The Tiptap editor instance
level	1 \| 2 \| 3 \| 4 \| 5 \| 6	required	The heading level
hideWhenUnavailable	boolean	false	Whether the button should be hide if not available
text	string	-	Text to display alongside the icon

Requirements

Used reference components

use-tiptap-editor (hook)
button (primitive)
tiptap-utils (lib)
heading-one-icon (icon)
heading-two-icon (icon)
heading-three-icon (icon)
heading-four-icon (icon)
heading-five-icon (icon)
heading-six-icon (icon)