4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T16e7,--- title: Horizontal Rule description: Void divider blocks rendered as horizontal rules. docs: - route: /docs/components/hr-node title: Horizontal Rule Element - route: /docs/basic-blocks title: Basic Blocks - route: https://pro.platejs.org/docs/components/hr-node title: Plus --- Horizontal Rule adds a void `hr` block for separating sections. The package owns the element type, HTML parser, default `

` render tag, and Markdown-style input rules. The registry kit adds the Plate UI divider component, static renderer, and insert toolbar item. ## Features - Void block `hr` element. - HTML deserialization from `

`. - Default render tag of `

`. - `---` and `___ ` input rules through `HorizontalRuleRules.markdown()`. - Editable and static registry divider components. - Insert toolbar item labeled `Divider`. ## Fast Path ### Add Basic Blocks `BasicBlocksKit` installs `HorizontalRulePlugin` with the registry `HrElement` and both default input rules. ```tsx import { createPlateEditor } from 'platejs/react'; import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit'; export const editor = createPlateEditor({ plugins: BasicBlocksKit, }); ``` ### Render The Divider `hr-node` renders the editable divider with selected/focused ring styles and a static companion component. ### Add Static Rendering Use `BaseBasicBlocksKit` when rendering read-only content with `platejs/static`. ## Ownership | Layer | Owner | What It Does | |-------|-------|--------------| | `@platejs/basic-nodes` | Package | Exports `BaseHorizontalRulePlugin` and `HorizontalRuleRules`. | | `@platejs/basic-nodes/react` | Package | Exports `HorizontalRulePlugin`. | | `basic-blocks-kit` | Registry | Adds `HorizontalRulePlugin` with dash and underscore input rules plus `HrElement`. | | `basic-blocks-base-kit` | Registry | Adds `BaseHorizontalRulePlugin.withComponent(HrElementStatic)`. | | `hr-node` | Registry UI | Renders editable and static divider components. | | Insert toolbar | Registry UI | Inserts `KEYS.hr` through the generic `insertBlock` path. | There is no package-specific `insertHorizontalRule` helper. App UI usually inserts `KEYS.hr` through the same block insertion helper used by other registry blocks. ## Manual Setup ### Install Package ```bash npm install @platejs/basic-nodes ``` ### Add The Plugin Use the React plugin when the editor renders the divider UI. ```tsx import { HorizontalRuleRules } from '@platejs/basic-nodes'; import { HorizontalRulePlugin } from '@platejs/basic-nodes/react'; import { createPlateEditor } from 'platejs/react'; import { HrElement } from '@/components/ui/hr-node'; export const editor = createPlateEditor({ plugins: [ HorizontalRulePlugin.configure({ inputRules: [ HorizontalRuleRules.markdown({ variant: '-' }), HorizontalRuleRules.markdown({ variant: '_' }), ], node: { component: HrElement }, }), ], }); ``` ### Add Static Rendering Use the base plugin with the static component in static rendering paths. ```tsx import { BaseHorizontalRulePlugin } from '@platejs/basic-nodes'; import { createStaticEditor } from 'platejs'; import { HrElementStatic } from '@/components/ui/hr-node-static'; export const staticEditor = createStaticEditor({ plugins: [BaseHorizontalRulePlugin.withComponent(HrElementStatic)], }); ``` ## Value Shape Horizontal rules are void block elements. Keep the empty text child so the node remains a valid Slate element. ```tsx const value = [ { children: [{ text: 'Before the divider' }], type: 'p', }, { children: [{ text: '' }], type: 'hr', }, { children: [{ text: 'After the divider' }], type: 'p', }, ]; ``` | Field | Type | Notes | |-------|------|-------| | `type` | `'hr'` | Plugin key and node type from `KEYS.hr`. | | `children` | `[{ text: '' }]` | Required child for the void element. | ## Input Rules `HorizontalRuleRules.markdown()` converts a paragraph into an `hr` block and inserts an empty paragraph after it. | Rule | Trigger | Behavior | |------|---------|----------| | `HorizontalRuleRules.markdown({ variant: '-' })` | type the third `-` after `--` | Converts `---` to `hr`, then inserts a paragraph. | | `HorizontalRuleRules.markdown({ variant: '_' })` | type a space after `___` | Converts `___ ` to `hr`, then inserts a paragraph. | The rule uses `editor.tf.setNodes({ type: KEYS.hr })`, so it transforms the current block instead of inserting a second divider elsewhere. ## Registry UI | Surface | Behavior | |---------|----------| | Editable element | Renders a non-editable padded wrapper with an `

` inside it. | | Selected + focused | Adds a focus ring around the divider. | | Read-only | Removes the pointer cursor from the editable component. | | Static element | Renders the same divider inside `SlateElement`. | | Insert toolbar | Adds a `Divider` item with `MinusIcon` and `KEYS.hr`. | The divider component renders `{props.children}` after the non-editable wrapper so Slate can still keep the void child mounted. ## API Reference | API | Package | Use | |-----|---------|-----| | `BaseHorizontalRulePlugin` | `@platejs/basic-nodes` | Headless void `hr` block with HTML deserialization and default render tag. | | `HorizontalRulePlugin` | `@platejs/basic-nodes/react` | React horizontal rule plugin. | | `HorizontalRuleRules.markdown({ variant: '-' })` | `@platejs/basic-nodes` | Creates the dash input rule for `---`. | | `HorizontalRuleRules.markdown({ variant: '_' })` | `@platejs/basic-nodes` | Creates the underscore input rule for `___ `. | 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"../../content/docs/(plugins)/(elements)/horizontal-rule.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/(plugins)/(elements)/horizontal-rule.mdx"}],"className":"h-[70svh] min-h-80"}]]}]