or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-udecode--plate-horizontal-rule

Horizontal rule plugin for the Plate rich text editor framework.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@udecode/plate-horizontal-rule@49.0.x

To install, run

npx @tessl/cli install tessl/npm-udecode--plate-horizontal-rule@49.0.0

index.mddocs/

Plate Horizontal Rule Plugin

A horizontal rule plugin for the Plate rich text editor framework. This plugin provides the ability to insert and render horizontal rule (<hr>) elements as void blocks within Slate.js-based editors.

Package Information

  • Package Name: @udecode/plate-horizontal-rule
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @udecode/plate-horizontal-rule

Core Imports

import { BaseHorizontalRulePlugin } from "@udecode/plate-horizontal-rule";

For React applications:

import { HorizontalRulePlugin } from "@udecode/plate-horizontal-rule/react";

CommonJS:

const { BaseHorizontalRulePlugin } = require("@udecode/plate-horizontal-rule");
const { HorizontalRulePlugin } = require("@udecode/plate-horizontal-rule/react");

Basic Usage

With Slate Editor

import { createSlateEditor } from "@udecode/plate";
import { BaseHorizontalRulePlugin } from "@udecode/plate-horizontal-rule";

const editor = createSlateEditor({
  plugins: [BaseHorizontalRulePlugin]
});

With Plate React Editor

import { createPlateEditor } from "@udecode/plate/react";
import { HorizontalRulePlugin } from "@udecode/plate-horizontal-rule/react";

const editor = createPlateEditor({
  plugins: [HorizontalRulePlugin]
});

HTML Parsing

The plugin automatically handles HTML deserialization:

<hr> → { type: 'hr', children: [{text: ''}] }

And serializes back to HTML:

{ type: 'hr', children: [{ text: '' }] } → <hr>

Capabilities

Base Horizontal Rule Plugin

Core Slate.js-compatible plugin that handles horizontal rule elements.

/**
 * Base horizontal rule plugin for Slate editors
 * Created with createSlatePlugin({ key: KEYS.hr, ... })
 */
const BaseHorizontalRulePlugin: SlatePlugin;

React Horizontal Rule Plugin

React-enhanced version of the base plugin created with toPlatePlugin(BaseHorizontalRulePlugin).

/**
 * React-enhanced horizontal rule plugin for Plate editors
 * Created with toPlatePlugin(BaseHorizontalRulePlugin)
 */
const HorizontalRulePlugin: PlatePlugin;

Plugin Key Constant

/**
 * Plugin key constant for horizontal rule elements
 */
const KEYS: {
  hr: 'hr';
};

Types

/** Horizontal rule element node structure */
interface HorizontalRuleElement {
  /** Element type identifier */
  type: 'hr';
  /** Required empty children array for void elements */
  children: [{ text: '' }];
}

Plugin Configuration

The plugin is created with these core settings:

  • Key: KEYS.hr (equals 'hr')
  • Node type: { isElement: true, isVoid: true }
  • HTML parsing: Handles <HR> tags via deserializer rules
  • Rendering: Renders as 'hr' HTML element

Node Structure

Horizontal rule elements in the editor follow this structure:

{
  type: 'hr',
  children: [{ text: '' }] // Required by Slate for void elements
}

Element Behavior

  • Void Element: Cannot contain editable content or child elements
  • Block Element: Takes full width and creates line breaks
  • Selectable: Can be selected as a single unit
  • Non-Editable: Cursor cannot be placed inside the element
  • HTML Compatible: Serializes to standard <hr> tags