Horizontal Rule

PreviousNext
Hr Element
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Insert horizontal lines to separate content or indicate topic shifts
  • Type three dashes (---) at a new line start to transform into a horizontal rule
  • Renders as <hr> HTML element by default

Kit Usage

Installation

The fastest way to add the horizontal rule plugin is with the BasicBlocksKit, which includes pre-configured HorizontalRulePlugin along with other basic block elements and their Plate UI components.

'use client';
 
import {
  BlockquotePlugin,
  H1Plugin,
  H2Plugin,
  H3Plugin,
  HorizontalRulePlugin,
} from '@platejs/basic-nodes/react';
import { ParagraphPlugin } from 'platejs/react';
 
import { BlockquoteElement } from '@/components/ui/blockquote-node';
import { H1Element, H2Element, H3Element } from '@/components/ui/heading-node';
import { HrElement } from '@/components/ui/hr-node';
import { ParagraphElement } from '@/components/ui/paragraph-node';
 
export const BasicBlocksKit = [
  ParagraphPlugin.withComponent(ParagraphElement),
  H1Plugin.configure({
    node: {
      component: H1Element,
    },
    rules: {
      break: { empty: 'reset' },
    },
    shortcuts: { toggle: { keys: 'mod+alt+1' } },
  }),
  H2Plugin.configure({
    node: {
      component: H2Element,
    },
    rules: {
      break: { empty: 'reset' },
    },
    shortcuts: { toggle: { keys: 'mod+alt+2' } },
  }),
  H3Plugin.configure({
    node: {
      component: H3Element,
    },
    rules: {
      break: { empty: 'reset' },
    },
    shortcuts: { toggle: { keys: 'mod+alt+3' } },
  }),
  BlockquotePlugin.configure({
    node: { component: BlockquoteElement },
    shortcuts: { toggle: { keys: 'mod+shift+period' } },
  }),
  HorizontalRulePlugin.withComponent(HrElement),
];
  • HrElement: Renders horizontal rule elements.

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...BasicBlocksKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/basic-nodes

Add Plugin

Include HorizontalRulePlugin in your Plate plugins array when creating the editor.

import { HorizontalRulePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    HorizontalRulePlugin,
  ],
});

Configure Plugin

You can configure the HorizontalRulePlugin with autoformat rules to automatically convert typed patterns like --- into horizontal rules.

import { insertNodes, setNodes, KEYS } from 'platejs';
import { AutoformatPlugin } from '@platejs/autoformat';
import { HorizontalRulePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    HorizontalRulePlugin,
    AutoformatPlugin.configure({
      options: {
        rules: [
          {
            mode: 'block',
            type: KEYS.hr,
            match: ['---', '—-', '___ '],
            format: (editor) => {
              setNodes(editor, { type: KEYS.hr });
              insertNodes(editor, {
                type: KEYS.p,
                children: [{ text: '' }],
              });
            },
          },
        ],
      },
    }),
  ],
});
  • AutoformatPlugin: Automatically converts typed patterns (like ---) into horizontal rules.

Insert Toolbar Button

You can add this item to the Insert Toolbar Button to insert horizontal rules:

{
  icon: <MinusIcon />,
  label: 'Divider',
  value: KEYS.hr,
}

Plugins

HorizontalRulePlugin

Plugin for inserting horizontal rules to separate content. Horizontal rules are void elements that render as <hr> tags by default.

HeadingCallout