Toggle
Add toggles to your document.
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-indent @udecode/plate-node-id @udecode/plate-toggleUsage
// ...
import { ParagraphPlugin } from '@udecode/plate-common/react';
import { NodeIdPlugin } from '@udecode/plate-node-id';
import { IndentPlugin } from '@udecode/plate-indent/react';
import { TogglePlugin } from '@udecode/plate-toggle/react';
const plugins = [
// ...其他插件,
HeadingPlugin,
IndentPlugin.configure({
inject: {
targetPlugins: [TogglePlugin.key, ParagraphPlugin.key, HEADING_KEYS.h1],
},
}),
NodeIdPlugin,
TogglePlugin,
];Plugins
TogglePlugin
Options
Collapse all
打开的折叠 ID 集合。
判断折叠是否打开的函数。
判断是否有折叠处于关闭状态的函数。
API
editor.api.toggle.toggleIds
切换折叠的打开状态。
Parameters
Collapse all
元素 ID 数组。
设置为 true 将展开所有折叠，无论其当前状态如何。设置为 false 将折叠所有折叠，无论其当前状态如何。如果为 null，将切换当前状态。
openNextToggles
将当前选择处的块标记为打开的折叠。 在插入块之前使用此函数，以便在插入时折叠处于展开状态。
Parameters
Collapse all
编辑器实例。
API 组件
useToggleToolbarButtonState
Returns
Collapse all
指示按钮是否被按下的布尔值。
useToggleToolbarButton
折叠工具栏按钮的行为钩子。
State
Collapse all
指示按钮是否被按下的布尔值。
Returns
Collapse all
useToggleButtonState
Parameters
Collapse all
折叠元素的 ID。
Returns
Collapse all
折叠元素的 ID。
指示折叠是否打开（展开）或关闭（折叠）的布尔值。
useToggleButton
用于展开或折叠折叠元素的折叠按钮的行为钩子。
Parameters
Collapse all
折叠元素的 ID。
指示折叠是否打开（展开）或关闭（折叠）的布尔值。
Returns
Collapse all
折叠元素的 ID。
指示折叠是否打开（展开）或关闭（折叠）的布尔值。