折叠开关

PreviousNext
折叠元素折叠按钮
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}
Collapsible content blocks.
toggle-demo
toggle-demo

功能特性

  • 在文档中添加可折叠内容
  • 折叠项默认收起，点击可展开显示内部内容

套件使用

安装

最快捷的方式是使用 ToggleKit，它包含预配置的 TogglePlugin（支持缩进）及其 Plate UI 组件。

'use client';

import { TogglePlugin } from '@platejs/toggle/react';

import { IndentKit } from '@/components/editor/plugins/indent-kit';
import { ToggleElement } from '@/components/ui/toggle-node';

export const ToggleKit = [
  ...IndentKit,
  TogglePlugin.withComponent(ToggleElement),
];

添加套件

将套件加入插件列表：

import { createPlateEditor } from 'platejs/react';
import { ToggleKit } from '@/components/editor/plugins/toggle-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    ...ToggleKit,
  ],
});

手动配置

安装依赖

pnpm add @platejs/indent @platejs/toggle

添加插件

在创建编辑器时，将 TogglePlugin 和 IndentPlugin 加入插件数组。

import { IndentPlugin } from '@platejs/indent/react';
import { TogglePlugin } from '@platejs/toggle/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    IndentPlugin,
    TogglePlugin,
  ],
});

配置插件

为 IndentPlugin 和 TogglePlugin 配置目标元素和组件分配。

import { IndentPlugin } from '@platejs/indent/react';
import { TogglePlugin } from '@platejs/toggle/react';
import { createPlateEditor } from 'platejs/react';
import { ToggleElement } from '@/components/ui/toggle-node';
import { KEYS } from 'platejs';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    IndentPlugin.configure({
      inject: {
        targetPlugins: [...KEYS.heading, KEYS.p, KEYS.toggle],
      },
    }),
    TogglePlugin.withComponent(ToggleElement),
  ],
});
  • withComponent: 指定 ToggleElement 渲染折叠元素
  • IndentPlugin.inject.targetPlugins: 配置支持缩进的元素类型（包括折叠项）

添加工具栏按钮

可在工具栏中添加 ToggleToolbarButton 来插入折叠元素。

转换工具栏按钮

将此选项加入转换工具栏按钮可将区块转为折叠项：

{
  icon: <ChevronRightIcon />,
  label: '折叠列表',
  value: KEYS.toggle,
}

插入工具栏按钮

将此选项加入插入工具栏按钮可插入折叠元素：

{
  icon: <ChevronRightIcon />,
  label: '折叠列表',
  value: KEYS.toggle,
}

插件

TogglePlugin

管理折叠功能的插件。

Optionsobject

Collapse all

    当前展开的折叠项ID集合

    • 默认值: new Set()

    检查折叠项是否展开的函数

    • 默认值: (id) => openIds.has(id)

    检查是否存在收起状态的折叠项

    • 默认值: (ids) => ids.some(id => !isOpen(id))

API接口

api.toggle.toggleIds

切换指定折叠项的展开状态。

切换折叠项展开状态

Parameters

Collapse all

    需要切换的元素ID数组

    强制切换状态：

    • true: 展开所有
    • false: 收起所有
    • null: 切换当前状态

openNextToggles

将当前选区所在区块标记为展开的折叠项。

钩子函数

useToggleToolbarButtonState

获取折叠工具栏按钮状态的钩子。

Returnsobject

Collapse all

    按钮是否处于按下状态

useToggleToolbarButton

处理折叠工具栏按钮行为的钩子。

State

Collapse all

    按钮是否处于按下状态

Returnsobject

Collapse all

    折叠按钮属性

useToggleButtonState

获取折叠按钮状态的钩子。

获取折叠按钮状态

Parameters

Collapse all

    折叠元素ID

Returnsobject

Collapse all

    折叠元素ID

    是否处于展开状态

useToggleButton

处理折叠按钮行为的钩子。

处理折叠按钮行为

Parameters

Collapse all

    折叠元素ID

    是否展开状态

Returnsobject

Collapse all

    折叠元素ID

    是否展开状态

    折叠按钮属性

Table of ContentsToggle