doc

apps/www/public/r/styles/default/toggle-element.json

@@ -1,5 +1,7 @@
 {
-  "dependencies": ["@udecode/plate-toggle"],
+  "dependencies": [
+    "@udecode/plate-toggle"
+  ],
   "doc": {
     "description": "A collapsible component for toggling content visibility.",
     "docs": [
@@ -8,17 +10,22 @@
         "title": "Toggle"
       }
     ],
-    "examples": ["toggle-demo"]
+    "examples": [
+      "toggle-demo"
+    ]
   },
   "files": [
     {
-      "content": "'use client';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement } from '@udecode/plate-common/react';\nimport {\n  useToggleButton,\n  useToggleButtonState,\n} from '@udecode/plate-toggle/react';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\n\nexport const ToggleElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const element = useElement();\n    const state = useToggleButtonState(element.id as string);\n    const { buttonProps, open } = useToggleButton(state);\n\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn('relative pl-6', className)}\n        {...props}\n      >\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"absolute -left-0.5 top-0 size-6 cursor-pointer select-none items-center justify-center rounded-md p-px text-muted-foreground transition-colors hover:bg-accent [&_svg]:size-4\"\n          contentEditable={false}\n          {...buttonProps}\n        >\n          {open ? <ChevronDown /> : <ChevronRight />}\n        </Button>\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement } from '@udecode/plate-common/react';\nimport {\n  useToggleButton,\n  useToggleButtonState,\n} from '@udecode/plate-toggle/react';\nimport { ChevronRight } from 'lucide-react';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\n\nexport const ToggleElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const element = useElement();\n    const state = useToggleButtonState(element.id as string);\n    const { buttonProps, open } = useToggleButton(state);\n\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn('relative pl-6', className)}\n        {...props}\n      >\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"absolute -left-0.5 top-0 size-6 cursor-pointer select-none items-center justify-center rounded-md p-px text-muted-foreground transition-colors hover:bg-accent [&_svg]:size-4\"\n          contentEditable={false}\n          {...buttonProps}\n        >\n          <ChevronRight\n            className={cn(\n              'transition-transform duration-75',\n              open ? 'rotate-90' : 'rotate-0'\n            )}\n          />\n        </Button>\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/toggle-element.tsx",
       "target": "components/plate-ui/toggle-element.tsx",
       "type": "registry:ui"
     }
   ],
   "name": "toggle-element",
-  "registryDependencies": ["button", "plate-element"],
+  "registryDependencies": [
+    "button",
+    "plate-element"
+  ],
   "type": "registry:ui"
-}
+}