CtrlK
BlogDocsLog inGet started
Tessl Logo

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

Horizontal rule plugin for the Plate rich text editor framework.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@udecode/plate-horizontal-rule@49.0.x
Publish Source
CLI
Badge
tessl/npm-udecode--plate-horizontal-rule badge