Toggle
components/demo.tsx
'use client';
import React from 'react';
import { Plate } from '@udecode/plate/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>
);
}
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/react';
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
Plugin for managing toggle functionality.
API
editor.api.toggle.toggleIds
Toggles the open state of specified toggles.
openNextToggles
Mark block at current selection as open toggle.
Hooks
useToggleToolbarButtonState
Hook for getting toggle toolbar button state.
useToggleToolbarButton
Hook for handling toggle toolbar button behavior.
useToggleButtonState
Hook for getting toggle button state.
useToggleButton
Hook for handling toggle button behavior.