Horizontal Rule

The HorizontalRule node provides a block-level thematic break (<hr>). It supports markdown-style input rules (---, ***, ___ + space) and a toolbar button for insertion.

Live Playground

Type ---, ***, or ___ followed by space at the start of a line to insert a horizontal rule. You can also use the toolbar button.

Vanilla JS/TS

Click to try it out

Angular

Click to try it out

Vanilla JS preview - Angular components produce the same output

React

Click to try it out

Vanilla JS preview - React components produce the same output

Headless

The button above the editor is a custom HTML button wired to setHorizontalRule().

Click to try it out

Usage

HorizontalRule is included in StarterKit. If you are building a custom setup without StarterKit, add it manually:

Vanilla JS/TS

import { Editor, Document, Text, Paragraph, HorizontalRule } from '@domternal/core';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Text, Paragraph, HorizontalRule],
  content: '<p>Above the rule</p><hr><p>Below the rule</p>',
});

Angular

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent } from '@domternal/angular';
import { Editor, Document, Text, Paragraph, HorizontalRule } from '@domternal/core';

@Component({
  selector: 'app-editor',
  imports: [DomternalEditorComponent],
  template: `
    <domternal-editor
      [extensions]="extensions"
      [content]="content"
      (editorCreated)="editor.set($event)"
    />
  `,
})
export class EditorComponent {
  editor = signal<Editor | null>(null);
  extensions = [Document, Text, Paragraph, HorizontalRule];
  content = '<p>Above the rule</p><hr><p>Below the rule</p>';
}

React

import { Domternal } from '@domternal/react';
import { Document, Text, Paragraph, HorizontalRule } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Text, Paragraph, HorizontalRule]}
      content="<p>Above the rule</p><hr><p>Below the rule</p>"
    >
      <Domternal.Content />
    </Domternal>
  );
}

Schema

Property	Value
ProseMirror name	horizontalRule
Type	Node
Group	block
Content	None (leaf node)
HTML tag	<hr>

HorizontalRule is a leaf node with no content. It cannot contain text or other nodes.

Options

Option	Type	Default	Description
HTMLAttributes	Record<string, unknown>	{}	HTML attributes added to the <hr> element

Custom HTML attributes

import { HorizontalRule } from '@domternal/core';

const CustomHR = HorizontalRule.configure({
  HTMLAttributes: { class: 'my-divider' },
});

Commands

Command	Description
setHorizontalRule()	Insert a horizontal rule at the current cursor position

// Insert a horizontal rule
editor.commands.setHorizontalRule();

// With chaining
editor.chain().focus().setHorizontalRule().run();

setHorizontalRule has two behaviors depending on context:

1. Cursor in an empty paragraph: Replaces the empty paragraph with the horizontal rule and creates a new paragraph below it.
2. Cursor in a non-empty block: Inserts the horizontal rule after the current block and creates a new paragraph below it.

In both cases, the cursor moves into the new paragraph after the rule. The command only works when the cursor is inside a textblock - it will not insert inside non-text contexts like table cell selections.

Input rules

Input	Result
--- + space	Horizontal rule
*** + space	Horizontal rule
___ + space	Horizontal rule

Type the pattern at the start of a new line, then press space. The entire paragraph is replaced with a horizontal rule, and the cursor moves to the next block below.

The regex also matches —- + space (em dash + hyphen + space), which handles the case where the Typography extension converts -- to — before you type the third -.

Toolbar items

HorizontalRule registers a button in the toolbar with the name horizontalRule in group blocks at priority 130.

Item	Command	Icon
Horizontal Rule	setHorizontalRule	minus

JSON representation

{
  "type": "horizontalRule"
}

A document with a horizontal rule between two paragraphs:

{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        { "type": "text", "text": "Above" }
      ]
    },
    { "type": "horizontalRule" },
    {
      "type": "paragraph",
      "content": [
        { "type": "text", "text": "Below" }
      ]
    }
  ]
}

Source

@domternal/core - HorizontalRule.ts