āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/udecode/plate/(plugins)/(elements)/toggle ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
title: Toggle docs:
The fastest way to add toggle functionality is with the ToggleKit, which includes pre-configured TogglePlugin with indent support and their Plate UI components.
IndentKit: Provides indent support for toggle elements.ToggleElement: Renders toggle elements.Add the kit to your plugins:
import { createPlateEditor } from 'platejs/react';
import { ToggleKit } from '@/components/editor/plugins/toggle-kit';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
...ToggleKit,
],
});
npm install @platejs/indent @platejs/toggle
Include TogglePlugin and IndentPlugin in your Plate plugins array when creating the editor.
import { IndentPlugin } from '@platejs/indent/react';
import { TogglePlugin } from '@platejs/toggle/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
IndentPlugin,
TogglePlugin,
],
});
Configure the IndentPlugin and TogglePlugin with proper targeting and component assignment.
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: [
// ...otherPlugins,
IndentPlugin.configure({
inject: {
targetPlugins: [...KEYS.heading, KEYS.p, KEYS.toggle],
},
}),
TogglePlugin.withComponent(ToggleElement),
],
});
withComponent: Assigns ToggleElement to render toggle elements.IndentPlugin.inject.targetPlugins: Configures which element types support indentation, including toggles.You can add ToggleToolbarButton to your Toolbar to insert toggle elements.
You can add this item to the Turn Into Toolbar Button to convert blocks into toggles:
{
icon: <ChevronRightIcon />,
label: 'Toggle list',
value: KEYS.toggle,
}
You can add this item to the Insert Toolbar Button to insert toggle elements:
{
icon: <ChevronRightIcon />,
label: 'Toggle list',
value: KEYS.toggle,
}
TogglePluginPlugin for managing toggle functionality.
<API name="TogglePlugin"> <APIOptions type="object"> <APIItem name="openIds" type="Set<string>" optional> Set of open toggle IDs. - **Default:** `new Set()` </APIItem> <APIItem name="isOpen" type="(toggleId: string) => boolean" optional> Function to check if toggle is open. - **Default:** `(id) => openIds.has(id)` </APIItem> <APIItem name="someClosed" type="(toggleIds: string[]) => boolean" optional> Function to check if any toggles are closed. - **Default:** `(ids) => ids.some(id => !isOpen(id))` </APIItem> </APIOptions> </API>api.toggle.toggleIdsToggles the open state of specified toggles.
<API name="editor.api.toggle.toggleIds"> Toggle open state of toggles. <APIParameters> <APIItem name="ids" type="string[]"> Array of element IDs to toggle. </APIItem> <APIItem name="force" type="boolean | null" optional> Force toggle state: - `true`: expand all toggles - `false`: collapse all toggles - `null`: toggle current state </APIItem> </APIParameters> </API>openNextTogglesMark block at current selection as open toggle.
useToggleToolbarButtonStateHook for getting toggle toolbar button state.
<API name="useToggleToolbarButtonState"> <APIReturns type="object"> <APIItem name="pressed" type="boolean"> Whether button is pressed. </APIItem> </APIReturns> </API>useToggleToolbarButtonHook for handling toggle toolbar button behavior.
<API name="useToggleToolbarButton"> <APIState> <APIItem name="pressed" type="boolean"> Whether button is pressed. </APIItem> </APIState> <APIReturns type="object"> <APIItem name="props" type="object"> Props for toggle button. <APISubList> <APISubListItem parent="props" name="pressed" type="boolean"> Whether button is pressed. </APISubListItem> <APISubListItem parent="props" name="onClick" type="function"> Toggle node type and focus editor. </APISubListItem> <APISubListItem parent="props" name="onMouseDown" type="function"> Prevent focus loss on click. </APISubListItem> </APISubList> </APIItem> </APIReturns> </API>useToggleButtonStateHook for getting toggle button state.
<API name="useToggleButtonState"> Get toggle button state. <APIParameters> <APIItem name="toggleId" type="string"> Toggle element ID. </APIItem> </APIParameters> <APIReturns type="object"> <APIItem name="toggleId" type="string"> Toggle element ID. </APIItem> <APIItem name="open" type="boolean"> Whether toggle is expanded. </APIItem> </APIReturns> </API>useToggleButtonHook for handling toggle button behavior.
<API name="useToggleButton"> Handle toggle button behavior. <APIParameters> <APIItem name="toggleId" type="string"> Toggle element ID. </APIItem> <APIItem name="open" type="boolean"> Whether toggle is expanded. </APIItem> </APIParameters> <APIReturns type="object"> <APIItem name="toggleId" type="string"> Toggle element ID. </APIItem> <APIItem name="open" type="boolean"> Whether toggle is expanded. </APIItem> <APIItem name="buttonProps" type="object"> Props for toggle button. <APISubList> <APISubListItem parent="buttonProps" name="onClick" type="function"> Toggle open state. </APISubListItem> <APISubListItem parent="buttonProps" name="onMouseDown" type="function"> Prevent focus loss on click. </APISubListItem> </APISubList> </APIItem> </APIReturns> </API>ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā