Toggle
Add Toggles to your document.
🦚 Toggle
Features
- Add toggles to your document.
- Toggles are closed by default, and can be opened to reveal the content inside.
- Refer to the Indent documentation for more information.
Plugin dependencies
Installation
npm install @udecode/plate-indent @udecode/plate-node-id @udecode/plate-toggle
Usage
// ...
import { ParagraphPlugin } from '@udecode/plate-common';
import { NodeIdPlugin } from '@udecode/plate-node-id';
import { IndentPlugin } from '@udecode/plate-indent/react';
import { TogglePlugin } from '@udecode/plate-toggle/react';
const plugins = [
// ...otherPlugins,
HeadingPlugin,
IndentPlugin.configure({
inject: {
targetPlugins: [TogglePlugin.key, ParagraphPlugin.key, HEADING_KEYS.h1],
},
}),
NodeIdPlugin,
TogglePlugin,
];
Plugins
TogglePlugin
Options
A set of open toggle IDs.
A function to determine if a toggle is open.
A function to determine if some toggles are closed.
API
editor.api.toggle.toggleIds
Toggles the open state of toggles.
Parameters
An array of element ids.
Set to true if you want to expand all toggles regardless of their current state. Set to false if you want to collapse all toggles regardless of their current state. If null, it will toggle the current state.
openNextToggles
Marks the block at the current selection as an open toggle. Use this function right before inserting a block so that the toggle is expanded upon insertion.
Parameters
The editor instance.
API Components
useToggleToolbarButtonState
Returns
A boolean indicating whether the button is pressed or not.
useToggleToolbarButton
A behavior hook for the toggle toolbar button.
State
A boolean indicating whether the button is pressed or not.
Returns
useToggleButtonState
Parameters
The id of the toggle element.
Returns
The id of the toggle element.
A boolean indicating whether the toggle is open (expanded) or not (collapsed).
useToggleButton
A behavior hook for the toggle button that expands or collapses a toggle element.
Parameters
The id of the toggle element.
A boolean indicating whether the toggle is open (expanded) or not (collapsed).
Returns
The id of the toggle element.
A boolean indicating whether the toggle is open (expanded) or not (collapsed).