Horizontal Rule
Visually divide and organize content sections with a horizontal line.
components/demo.tsx
'use client';
import React from 'react';
import { Plate } from '@udecode/plate-common/react';
import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';
import { DEMO_VALUES } from './values/demo-values';
export default function Demo({ id }: { id: string }) {
const editor = useCreateEditor({
plugins: [...editorPlugins],
value: DEMO_VALUES[id],
});
return (
<Plate editor={editor}>
<EditorContainer variant="demo">
<Editor />
</EditorContainer>
</Plate>
);
}
Installation
npm install @udecode/plate-horizontal-rule
Usage
import { insertNodes, setNodes } from '@udecode/plate-common';
import { AutoformatPlugin } from '@udecode/plate-autoformat/react';
import { ParagraphPlugin } from '@udecode/plate-common/react';
import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';
import { SelectOnBackspacePlugin } from '@udecode/plate-select/react';
const plugins = [
// ...otherPlugins,
HorizontalRulePlugin,
SelectOnBackspacePlugin.configure({
options: { query: { allow: [HorizontalRulePlugin.key] } },
}),
AutoformatPlugin.configure({
options: {
rules: [
{
mode: 'block',
type: HorizontalRulePlugin.key,
match: ['---', '—-', '___ '],
format: (editor) => {
setNodes(editor, { type: HorizontalRulePlugin.key });
insertNodes(editor, {
type: ParagraphPlugin.key,
children: [{ text: '' }],
});
},
},
],
},
}),
];