Heading

The Heading extension adds a heading dropdown to the toolbar. It supports heading levels H1 through H6 and a "Paragraph" option to reset to body text.

Import

import { Heading } from 'ritext/extension/heading';

Usage

const extensions = [Heading];

Configuration

Heading.configure({
  surface: { bubbleMenu: true },
  showKeyShortcutText: true,
})

Options

Prop

Type

Keyboard Shortcuts

Heading	Windows / Linux	macOS
H1	`Ctrl+Alt+1`	`⌘+⌥+1`
H2	`Ctrl+Alt+2`	`⌘+⌥+2`
H3	`Ctrl+Alt+3`	`⌘+⌥+3`
H4	`Ctrl+Alt+4`	`⌘+⌥+4`
H5	`Ctrl+Alt+5`	`⌘+⌥+5`
H6	`Ctrl+Alt+6`	`⌘+⌥+6`

Custom Level Configuration

Show only H1–H3 and customize their display:

Heading.configure({
  level: [
    { enable: true, text: 'Heading 1', keyShortcuts: 'Ctrl+Alt+1' },
    { enable: true, text: 'Heading 2', keyShortcuts: 'Ctrl+Alt+2' },
    { enable: true, text: 'Heading 3', keyShortcuts: 'Ctrl+Alt+3' },
    { enable: false }, // H4
    { enable: false }, // H5
    { enable: false }, // H6
  ],
})