Overview
The Divider plugin creates horizontal dividers (rules) to visually separate content sections. Supports multiple styles and custom colors.
Installation
npm install @yoopta/divider
Basic Usage
import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Divider from '@yoopta/divider';
const plugins = [Divider];
export default function Editor() {
const editor = useMemo(() => createYooptaEditor({ plugins, marks: [] }), []);
return <YooptaEditor editor={editor} onChange={() => {}} />;
}
Features
- Multiple Styles: Solid, dashed, dotted, and gradient dividers
- Custom Colors: Set custom divider colors
- Void Block: Non-editable block element
- Shortcuts: Type
divider, ---, or *** to insert
Configuration
import Divider from '@yoopta/divider';
const plugins = [Divider];
Options
Display title in UI menus
description
string
default:"Visually divide blocks"
Description shown in menus
shortcuts
string[]
default:"['divider', '---', '***']"
Keyboard shortcuts to trigger the plugin in slash menu
Element Props
theme
DividerTheme
default:"solid"
Divider style themeOptions: 'solid' | 'dashed' | 'dotted' | 'gradient'
Custom color for the divider (CSS color value)
Commands
Divider commands are available via DividerCommands.
insertDivider
Insert a new Divider block.
import Divider, { DividerCommands } from '@yoopta/divider';
DividerCommands.insertDivider(editor, {
props: {
theme: 'dashed',
color: '#cccccc',
},
at: 0,
focus: false,
});
props.theme
DividerTheme
default:"solid"
Style of the divider
Custom color (hex, rgb, etc.)
Index where to insert the block
Whether to focus after insert (usually false for dividers)
updateDivider
Update divider properties.
import { DividerCommands } from '@yoopta/divider';
DividerCommands.updateDivider(editor, blockId, {
theme: 'gradient',
color: '#ff6b6b',
});
deleteDivider
Delete a divider block.
import { DividerCommands } from '@yoopta/divider';
DividerCommands.deleteDivider(editor, blockId);
buildDividerElements
Build divider element structure (used internally).
import { DividerCommands } from '@yoopta/divider';
const dividerElement = DividerCommands.buildDividerElements(editor, {
props: { theme: 'dotted' },
});
Block Operations
You can also use the generic Blocks API:
import { Blocks } from '@yoopta/editor';
// Delete
Blocks.deleteBlock(editor, { blockId });
// Update block meta
Blocks.updateBlock(editor, { blockId, meta: { align: 'center' } });
Element Operations
Use the Elements API to update divider properties:
import { Elements } from '@yoopta/editor';
// Update divider theme
Elements.updateElement(editor, {
blockId,
type: 'divider',
props: { theme: 'gradient', color: '#00ff00' },
});
Themes
The Divider plugin supports the following themes:
- solid: Solid line (default)
- dashed: Dashed line
- dotted: Dotted line
- gradient: Gradient effect
Custom Colors
You can set custom colors using any valid CSS color value:
DividerCommands.updateDivider(editor, blockId, {
theme: 'solid',
color: '#3498db', // Hex
});
DividerCommands.updateDivider(editor, blockId, {
theme: 'dashed',
color: 'rgb(231, 76, 60)', // RGB
});
DividerCommands.updateDivider(editor, blockId, {
theme: 'gradient',
color: 'linear-gradient(to right, #667eea, #764ba2)', // Gradient
});
Parsers
HTML
- Deserialize:
<hr> elements with data attributes for theme and color
- Serialize: Divider block →
<hr> with theme and color in data attributes
Markdown
- Serialize: Divider →
--- or *** depending on theme
Email
- Serialize:
<hr> with inline styles for email client compatibility