Document Toggle plugin

apps/www/content/docs/components/toggle-element.mdx

@@ -0,0 +1,63 @@
+---
+title: Toggle Element
+description: Turn any block into a toggle.
+component: true
+docs:
+  - route: /docs/toggle
+    title: Toggle
+---
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+<TabsTrigger value="cli">CLI</TabsTrigger>
+<TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx @udecode/plate-ui@latest add toggle-element
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>
+
+Install the following dependencies:
+
+- [Toggle](/docs/toggle)
+- [Toolbar](/docs/components/toolbar)
+
+</Step>
+
+<Step>
+
+Copy and paste the following code into your project.
+
+</Step>
+
+<ComponentSource name="toggle-element" />
+
+<Step>
+
+Update the import paths to match your project setup.
+
+</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Examples
+
+<ComponentPreview name="playground-demo" id="toggle" />
+
+<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />

apps/www/content/docs/components/toggle-toolbar-button.mdx

@@ -0,0 +1,86 @@
+---
+title: Toggle Toolbar Button
+description: Turns blocks into toggles and vice-versa.
+component: true
+docs:
+  - route: /docs/toggle
+    title: Toggle
+  - route: /docs/components/toolbar
+    title: Toolbar
+---
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+<TabsTrigger value="cli">CLI</TabsTrigger>
+<TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx @udecode/plate-ui@latest add toggle-toolbar-button
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>
+
+Install the following dependencies:
+
+- [Toggle](/docs/toggle)
+- [Toolbar](/docs/components/toolbar)
+
+</Step>
+
+<Step>
+
+Copy and paste the following code into your project.
+
+</Step>
+
+<ComponentSource name="toggle-toolbar-button" />
+
+<Step>
+
+Update the import paths to match your project setup.
+
+</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+<Accordion type="single" collapsible>
+<AccordionItem value="manual-installation">
+<AccordionTrigger>Manual Installation</AccordionTrigger>
+<AccordionContent>
+
+1. Install the following dependencies:
+
+- [Toggle](/docs/toggle)
+- [Toolbar](/docs/components/toolbar)
+
+2. Copy and paste the following code into your project.
+
+- `components/plate-ui/toggle-toolbar-button.tsx`
+
+<ComponentSource name="toggle-toolbar-button" />
+
+</AccordionContent>
+
+</AccordionItem>
+</Accordion>
+
+## Examples
+
+<ComponentPreview name="playground-demo" id="toggle" />
+
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx" />

apps/www/content/docs/toggle.mdx

@@ -0,0 +1,110 @@
+---
+title: Toggle
+description: Turn any block into a toggle.
+docs:
+  - route: /docs/components/toggle-toolbar-button
+    title: Toggle Button
+---
+
+<ComponentPreview name="playground-demo" id="toggle" />
+
+<PackageInfo>
+
+## Features
+
+- Turn any bock into a toggle:
+  - Toggles are closed by default, and can be opened to reveal the content inside
+- Refer to the [Indent documentation](/docs/indent) for more information.
+
+## Plugin dependencies
+
+- [Indent](/docs/indent)
+- [Indent List](/docs/indent-list)
+- [Node id](/docs/node-id)
+
+</PackageInfo>
+
+## Installation
+
+```bash
+npm install @udecode/plate-indent @udecode/plate-indent-list @udecode/plate-node-id @udecode/toggle
+```
+
+## Usage
+
+```tsx
+// ...
+import { createIndentPlugin } from '@udecode/plate-indent';
+import { createIndentListPlugin } from '@udecode/plate-indent-list';
+import { createNodeIdPlugin } from '@udecode/plate-node-id';
+import { createTogglePlugin } from '@udecode/plate-toggle';
+
+const plugins = [
+  // ...otherPlugins,
+  createHeadingPlugin(),
+  createParagraphPlugin(),
+  createIndentPlugin({
+    inject: {
+      props: {
+        validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1],
+      },
+    },
+  }),
+  createIndentListPlugin({
+    inject: {
+      props: {
+        validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1],
+      },
+    },
+  }),
+  createNodeIdPlugin(),
+  createTogglePlugin(),
+];
+```
+
+## API
+
+### createTogglePlugin
+
+<APIOptions>
+  {/* TODO */}
+</APIOptions>
+
+### openFutureToggles
+
+<APIParameters>
+  <APIItem name="editor" type="TEditor">
+    The editor instance.
+  </APIItem>
+</APIParameters>
+
+{/* TODO Add API DOC */}
+
+## API Components
+
+### useToggleToolbarButton
+
+A behavior hook for the toggle toolbar button.
+
+<APIState>
+  <APIItem name="pressed" type="boolean">
+    A boolean indicating whether the button is pressed or not.
+  </APIItem>
+</APIState>
+
+<APIReturns>
+  <APIItem name="props" type="object">
+    <APISubList>
+      <APISubListItem parent="props" name="pressed" type="boolean">
+        A boolean indicating whether the button is pressed or not.
+      </APISubListItem>
+      <APISubListItem parent="props" name="onClick" type="function">
+        A callback function to handle the click event of the button. It toggles
+        the toggle of the specified node type in the editor and focuses the
+        editor.
+      </APISubListItem>
+    </APISubList>
+  </APIItem>
+</APIReturns>
+
+{/* TODO Add components DOC */}

apps/www/package.json

@@ -97,6 +97,7 @@
     "@udecode/plate-tabbable": "workspace:^",
     "@udecode/plate-table": "workspace:^",
     "@udecode/plate-test-utils": "workspace:^",
+    "@udecode/plate-toggle": "workspace:^",
     "@udecode/plate-trailing-block": "workspace:^",
     "@udecode/plate-utils": "workspace:^",
     "@udecode/react-utils": "workspace:^",

apps/www/public/registry/index.json

@@ -817,6 +817,30 @@
     ],
     "type": "components:plate-ui"
   },
+  {
+    "name": "toggle-element",
+    "dependencies": [
+      "@udecode/plate-toggle"
+    ],
+    "registryDependencies": [],
+    "files": [
+      "plate-ui/toggle-element.tsx"
+    ],
+    "type": "components:plate-ui"
+  },
+  {
+    "name": "toggle-toolbar-button",
+    "dependencies": [
+      "@udecode/plate-toggle"
+    ],
+    "registryDependencies": [
+      "toolbar"
+    ],
+    "files": [
+      "plate-ui/toggle-toolbar-button.tsx"
+    ],
+    "type": "components:plate-ui"
+  },
   {
     "name": "toolbar",
     "dependencies": [

apps/www/public/registry/styles/default/toggle-toolbar-button.json

@@ -0,0 +1,16 @@
+{
+  "name": "toggle-toolbar-button",
+  "dependencies": [
+    "@udecode/plate-toggle"
+  ],
+  "registryDependencies": [
+    "toolbar"
+  ],
+  "files": [
+    {
+      "name": "toggle-toolbar-button.tsx",
+      "content": "import React from 'react';\nimport { withRef } from '@udecode/cn';\nimport {\n  useToggleToolbarButton,\n  useToggleToolbarButtonState,\n} from '@udecode/plate-toggle';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const ToggleToolbarButton = withRef<typeof ToolbarButton>((rest, ref) => {\n  const state = useToggleToolbarButtonState();\n  const { props } = useToggleToolbarButton(state);\n\n  return (\n    <ToolbarButton\n      ref={ref}\n      tooltip={'Toggle'}\n      {...props}\n      {...rest}\n    >\n      <Icons.ChevronDown />\n    </ToolbarButton>\n  );\n});\n"
+    }
+  ],
+  "type": "components:plate-ui"
+}

apps/www/src/__registry__/index.tsx

@@ -641,6 +641,20 @@ export const Index: Record<string, any> = {
       files: ['registry/default/plate-ui/todo-list-element.tsx'],
       component: React.lazy(() => import('@/registry/default/plate-ui/todo-list-element')),
     },
+    'toggle-element': {
+      name: 'toggle-element',
+      type: 'components:plate-ui',
+      registryDependencies: [],
+      files: ['registry/default/plate-ui/toggle-element.tsx'],
+      component: React.lazy(() => import('@/registry/default/plate-ui/toggle-element')),
+    },
+    'toggle-toolbar-button': {
+      name: 'toggle-toolbar-button',
+      type: 'components:plate-ui',
+      registryDependencies: ["toolbar"],
+      files: ['registry/default/plate-ui/toggle-toolbar-button.tsx'],
+      component: React.lazy(() => import('@/registry/default/plate-ui/toggle-toolbar-button')),
+    },
     'toolbar': {
       name: 'toolbar',
       type: 'components:plate-ui',

apps/www/src/components/plate-ui/playground-fixed-toolbar-buttons.tsx

@@ -29,6 +29,7 @@ import { MarkToolbarButton } from '@/registry/default/plate-ui/mark-toolbar-butt
 import { MediaToolbarButton } from '@/registry/default/plate-ui/media-toolbar-button';
 import { OutdentToolbarButton } from '@/registry/default/plate-ui/outdent-toolbar-button';
 import { TableDropdownMenu } from '@/registry/default/plate-ui/table-dropdown-menu';
+import { ToggleToolbarButton } from '@/registry/default/plate-ui/toggle-toolbar-button';
 import { ToolbarGroup } from '@/registry/default/plate-ui/toolbar';
 
 import { PlaygroundInsertDropdownMenu } from './playground-insert-dropdown-menu';
@@ -137,6 +138,8 @@ export function PlaygroundFixedToolbarButtons({ id }: { id?: ValueId }) {
             <ToolbarGroup>
               {isEnabled('link', id) && <LinkToolbarButton />}
 
+              {isEnabled('toggle', id) && <ToggleToolbarButton />}
+
               {isEnabled('media', id) && (
                 <MediaToolbarButton nodeType={ELEMENT_IMAGE} />
               )}

apps/www/src/components/settings-combobox.tsx

@@ -65,6 +65,7 @@ const categories = [
       customizerPlugins.tabbable,
       customizerPlugins.table,
       customizerPlugins.todoli,
+      customizerPlugins.toggle,
       customizerPlugins.trailingblock,
     ],
   },

apps/www/src/config/customizer-components.ts

@@ -240,6 +240,14 @@ export const customizerComponents = {
     href: '/docs/components/todo-list-element',
     label: 'Element',
   },
+  toggleElement: {
+    title: 'Toggle',
+    href: '/docs/components/toggle',
+  },
+  toggleToolbarButton: {
+    title: 'Toggle Toolbar Button',
+    href: '/docs/components/toggle-toolbar-button',
+  },
   toolbar: { title: 'Toolbar', href: '/docs/components/toolbar' },
   tooltip: { title: 'Tooltip', href: '/docs/components/tooltip' },
   turnIntoDropdownMenu: {