0
# Plate Horizontal Rule Plugin
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: @udecode/plate-horizontal-rule
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @udecode/plate-horizontal-rule`
10

11
## Core Imports
12

13
```typescript
14
import { BaseHorizontalRulePlugin } from "@udecode/plate-horizontal-rule";
15
```
16

17
For React applications:
18

19
```typescript
20
import { HorizontalRulePlugin } from "@udecode/plate-horizontal-rule/react";
21
```
22

23
CommonJS:
24

25
```javascript
26
const { BaseHorizontalRulePlugin } = require("@udecode/plate-horizontal-rule");
27
const { HorizontalRulePlugin } = require("@udecode/plate-horizontal-rule/react");
28
```
29

30
## Basic Usage
31

32
### With Slate Editor
33

34
```typescript
35
import { createSlateEditor } from "@udecode/plate";
36
import { BaseHorizontalRulePlugin } from "@udecode/plate-horizontal-rule";
37

38
const editor = createSlateEditor({
39
  plugins: [BaseHorizontalRulePlugin]
40
});
41
```
42

43
### With Plate React Editor
44

45
```typescript
46
import { createPlateEditor } from "@udecode/plate/react";
47
import { HorizontalRulePlugin } from "@udecode/plate-horizontal-rule/react";
48

49
const editor = createPlateEditor({
50
  plugins: [HorizontalRulePlugin]
51
});
52
```
53

54
### HTML Parsing
55

56
The plugin automatically handles HTML deserialization:
57

58
```html
59
<hr> → { type: 'hr', children: [{text: ''}] }
60
```
61

62
And serializes back to HTML:
63

64
```typescript
65
{ type: 'hr', children: [{ text: '' }] } → <hr>
66
```
67

68
## Capabilities
69

70
### Base Horizontal Rule Plugin
71

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

74
```typescript { .api }
75
/**
76
 * Base horizontal rule plugin for Slate editors
77
 * Created with createSlatePlugin({ key: KEYS.hr, ... })
78
 */
79
const BaseHorizontalRulePlugin: SlatePlugin;
80
```
81

82
### React Horizontal Rule Plugin
83

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

86
```typescript { .api }
87
/**
88
 * React-enhanced horizontal rule plugin for Plate editors
89
 * Created with toPlatePlugin(BaseHorizontalRulePlugin)
90
 */
91
const HorizontalRulePlugin: PlatePlugin;
92
```
93

94
### Plugin Key Constant
95

96
```typescript { .api }
97
/**
98
 * Plugin key constant for horizontal rule elements
99
 */
100
const KEYS: {
101
  hr: 'hr';
102
};
103
```
104

105
## Types
106

107
```typescript { .api }
108
/** Horizontal rule element node structure */
109
interface HorizontalRuleElement {
110
  /** Element type identifier */
111
  type: 'hr';
112
  /** Required empty children array for void elements */
113
  children: [{ text: '' }];
114
}
115
```
116

117
## Plugin Configuration
118

119
The plugin is created with these core settings:
120

121
- **Key**: `KEYS.hr` (equals `'hr'`)
122
- **Node type**: `{ isElement: true, isVoid: true }`
123
- **HTML parsing**: Handles `<HR>` tags via deserializer rules
124
- **Rendering**: Renders as `'hr'` HTML element
125

126
## Node Structure
127

128
Horizontal rule elements in the editor follow this structure:
129

130
```typescript
131
{
132
  type: 'hr',
133
  children: [{ text: '' }] // Required by Slate for void elements
134
}
135
```
136

137
## Element Behavior
138

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