{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "toggle-docs",
"title": "Toggle",
"description": "Documentation for Toggle",
"files": [
{
"path": "../../content/docs/(plugins)/(elements)/toggle.mdx",
"content": "---\ntitle: Toggle\ndocs:\n - route: /docs/components/toggle-node\n title: Toggle Element\n - route: /docs/components/toggle-toolbar-button\n title: Toggle Button\n---\n\n\n\n\n\n## Features\n\n- Add toggles to your document\n- Toggles are closed by default, and can be opened to reveal the content inside\n\n\n\n## Kit Usage\n\n\n\n### Installation\n\nThe fastest way to add toggle functionality is with the `ToggleKit`, which includes pre-configured `TogglePlugin` with indent support and their [Plate UI](/docs/installation/plate-ui) components.\n\n\n\n- [`IndentKit`](/docs/indent): Provides indent support for toggle elements.\n- [`ToggleElement`](/docs/components/toggle-node): Renders toggle elements.\n\n### Add Kit\n\nAdd the kit to your plugins:\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\nimport { ToggleKit } from '@/components/editor/plugins/toggle-kit';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n ...ToggleKit,\n ],\n});\n```\n\n\n\n## Manual Usage\n\n\n\n### Installation\n\n```bash\nnpm install @platejs/indent @platejs/toggle\n```\n\n### Add Plugins\n\nInclude `TogglePlugin` and `IndentPlugin` in your Plate plugins array when creating the editor.\n\n```tsx\nimport { IndentPlugin } from '@platejs/indent/react';\nimport { TogglePlugin } from '@platejs/toggle/react';\nimport { createPlateEditor } from 'platejs/react';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n IndentPlugin,\n TogglePlugin,\n ],\n});\n```\n\n### Configure Plugins\n\nConfigure the `IndentPlugin` and `TogglePlugin` with proper targeting and component assignment.\n\n```tsx\nimport { IndentPlugin } from '@platejs/indent/react';\nimport { TogglePlugin } from '@platejs/toggle/react';\nimport { createPlateEditor } from 'platejs/react';\nimport { ToggleElement } from '@/components/ui/toggle-node';\nimport { KEYS } from 'platejs';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n IndentPlugin.configure({\n inject: {\n targetPlugins: [...KEYS.heading, KEYS.p, KEYS.toggle],\n },\n }),\n TogglePlugin.withComponent(ToggleElement),\n ],\n});\n```\n\n- `withComponent`: Assigns [`ToggleElement`](/docs/components/toggle-node) to render toggle elements.\n- `IndentPlugin.inject.targetPlugins`: Configures which element types support indentation, including toggles.\n\n### Add Toolbar Button\n\nYou can add [`ToggleToolbarButton`](/docs/components/toggle-toolbar-button) to your [Toolbar](/docs/toolbar) to insert toggle elements.\n\n### Turn Into Toolbar Button\n\nYou can add this item to the [Turn Into Toolbar Button](/docs/toolbar#turn-into-toolbar-button) to convert blocks into toggles:\n\n```tsx\n{\n icon: ,\n label: 'Toggle list',\n value: KEYS.toggle,\n}\n```\n\n### Insert Toolbar Button\n\nYou can add this item to the [Insert Toolbar Button](/docs/toolbar#insert-toolbar-button) to insert toggle elements:\n\n```tsx\n{\n icon: ,\n label: 'Toggle list',\n value: KEYS.toggle,\n}\n```\n\n\n\n## Plugins\n\n### `TogglePlugin`\n\nPlugin for managing toggle functionality.\n\n\n\n \" optional>\n Set of open toggle IDs.\n - **Default:** `new Set()`\n \n boolean\" optional>\n Function to check if toggle is open.\n - **Default:** `(id) => openIds.has(id)`\n \n boolean\" optional>\n Function to check if any toggles are closed.\n - **Default:** `(ids) => ids.some(id => !isOpen(id))`\n \n\n\n\n## API\n\n### `api.toggle.toggleIds`\n\nToggles the open state of specified toggles.\n\n\nToggle open state of toggles.\n\n\n \n Array of element IDs to toggle.\n \n \n Force toggle state:\n - `true`: expand all toggles\n - `false`: collapse all toggles\n - `null`: toggle current state\n \n\n\n\n### `openNextToggles`\n\nMark block at current selection as open toggle.\n\n## Hooks\n\n### `useToggleToolbarButtonState`\n\nHook for getting toggle toolbar button state.\n\n\n\n \n Whether button is pressed.\n \n\n\n\n### `useToggleToolbarButton`\n\nHook for handling toggle toolbar button behavior.\n\n\n\n \n Whether button is pressed.\n \n\n\n\n \n Props for toggle button.\n \n \n Whether button is pressed.\n \n \n Toggle node type and focus editor.\n \n \n Prevent focus loss on click.\n \n \n \n\n\n\n### `useToggleButtonState`\n\nHook for getting toggle button state.\n\n\nGet toggle button state.\n\n\n \n Toggle element ID.\n \n\n\n\n \n Toggle element ID.\n \n \n Whether toggle is expanded.\n \n\n\n\n### `useToggleButton`\n\nHook for handling toggle button behavior.\n\n\nHandle toggle button behavior.\n\n\n \n Toggle element ID.\n \n \n Whether toggle is expanded.\n \n\n\n\n \n Toggle element ID.\n \n \n Whether toggle is expanded.\n \n \n Props for toggle button.\n \n \n Toggle open state.\n \n \n Prevent focus loss on click.\n \n \n \n\n",
"type": "registry:file",
"target": "content/docs/plate/(plugins)/(elements)/toggle.mdx"
}
],
"type": "registry:file"
}