水平分隔线 - Plate

功能特性

插入水平线来分隔内容或表示主题转换
在新行开头输入三个破折号 (---) 可自动转换为水平分隔线
默认渲染为 <hr> HTML 元素

</PackageInfo>

套件使用

<Steps>

安装

添加水平分隔线插件最快的方式是使用 BasicBlocksKit，该套件包含预配置的 HorizontalRulePlugin 以及其他基础块元素及其 Plate UI 组件。

HrElement: 渲染水平分隔线元素

添加套件

将套件添加到你的插件中：

tsx

import { createPlateEditor } from 'platejs/react';
import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...BasicBlocksKit,
  ],
});

</Steps>

手动使用

<Steps>

安装

bash

npm install @platejs/basic-nodes

添加插件

在创建编辑器时，将 HorizontalRulePlugin 包含到 Plate 插件数组中。

tsx

import { HorizontalRuleRules } from '@platejs/basic-nodes';
import { HorizontalRulePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    HorizontalRulePlugin,
  ],
});

配置插件

你可以配置 HorizontalRulePlugin 的自动格式化规则，将输入的特定模式（如 ---）自动转换为水平分隔线。

tsx

import { HorizontalRulePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    HorizontalRulePlugin.configure({
      inputRules: [HorizontalRuleRules.markdown({ variant: '-' })],
    }),
  ],
});

HorizontalRuleRules.markdown({ variant: '-' }): 启用 ---

插入工具栏按钮

你可以将此项目添加到插入工具栏按钮中来插入水平分隔线：

tsx

{
  icon: <MinusIcon />,
  label: 'Divider',
  value: KEYS.hr,
}

</Steps>

插件

`HorizontalRulePlugin`

用于插入水平分隔线来分隔内容的插件。水平分隔线是 void 元素，默认渲染为 <hr> 标签。