Heading

Create headings of different levels (h1 through h6) in your editor.

The Heading extension allows you to create headings with different levels. It supports headings from level 1 to 6.

Installation

npm

npm install @tiptap/extension-heading

Usage

The Heading extension is included in the StarterKit by default:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  extensions: [StarterKit],
})

To use it standalone:

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Heading from '@tiptap/extension-heading'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

const editor = new Editor({
  extensions: [
    Document,
    Paragraph,
    Text,
    Heading,
  ],
})

Configuration

levels

Specifies which heading levels are available in the editor.

levels · Level[] · default: "[1, 2, 3, 4, 5, 6]"

An array of heading levels to enable. Each level corresponds to an HTML heading tag (h1-h6).

Heading.configure({
  levels: [1, 2, 3],
})

HTMLAttributes

Custom HTML attributes to add to the rendered heading elements.

HTMLAttributes · Record<string, any> · default: "{}"

Custom HTML attributes that should be added to the rendered HTML tag.

Heading.configure({
  HTMLAttributes: {
    class: 'my-heading',
  },
})

Commands

setHeading

Converts the current node to a heading with the specified level.

editor.commands.setHeading({ level: 1 })
editor.commands.setHeading({ level: 2 })

toggleHeading

Toggles a heading node with the specified level. If the current node is already a heading with that level, it converts it to a paragraph.

editor.commands.toggleHeading({ level: 1 })
editor.commands.toggleHeading({ level: 2 })

Keyboard Shortcuts

• Mod-Alt-1: Toggle heading level 1
• Mod-Alt-2: Toggle heading level 2
• Mod-Alt-3: Toggle heading level 3
• Mod-Alt-4: Toggle heading level 4
• Mod-Alt-5: Toggle heading level 5
• Mod-Alt-6: Toggle heading level 6

Input Rules

The Heading extension supports Markdown-style input rules:

• Type # followed by a space to create an h1
• Type ## followed by a space to create an h2
• Type ### followed by a space to create an h3
• And so on, up to ###### for h6

Source Code

View the source code on GitHub:

packages/extension-heading/src/heading.ts