HorizontalRule

Insert horizontal rules to create visual separators in your content.

The HorizontalRule extension allows you to insert horizontal rules (dividers) into your document. These are commonly used to create visual breaks between sections.

Installation

npm

npm install @tiptap/extension-horizontal-rule

Usage

The HorizontalRule 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 HorizontalRule from '@tiptap/extension-horizontal-rule'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

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

Configuration

HTMLAttributes

Custom HTML attributes to add to the horizontal rule element.

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

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

HorizontalRule.configure({
  HTMLAttributes: {
    class: 'my-horizontal-rule',
  },
})

nextNodeType

The default node type to insert after the horizontal rule.

nextNodeType · string · default: "'paragraph'"

Specifies which node type to create after inserting a horizontal rule at the end of the document.

HorizontalRule.configure({
  nextNodeType: 'paragraph',
})

Commands

setHorizontalRule

Inserts a horizontal rule at the current position and automatically positions the cursor after it.

editor.commands.setHorizontalRule()

Input Rules

The HorizontalRule extension supports multiple Markdown-style input rules:

• Type --- followed by a space to insert a horizontal rule
• Type ___ followed by a space to insert a horizontal rule
• Type *** followed by a space to insert a horizontal rule

Behavior

When you insert a horizontal rule:

1. The rule is inserted at the current cursor position
2. If there’s content after the rule, the cursor moves to that content
3. If the rule is at the end of the document, a new paragraph is automatically created after it
4. The cursor is positioned in the correct location for continued editing

Source Code

View the source code on GitHub:

packages/extension-horizontal-rule/src/horizontal-rule.ts