toc-element.json

{
  "dependencies": [
    "@udecode/plate-heading"
  ],
  "doc": {
    "description": "A table of contents component with links to document headings.",
    "docs": [
      {
        "route": "/docs/basic-elements"
      },
      {
        "route": "https://pro.platejs.org/docs/components/toc-element"
      }
    ],
    "examples": [
      "toc-demo",
      "toc-pro"
    ],
    "label": "New",
    "title": "TOC Element"
  },
  "files": [
    {
      "content": "'use client';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  useTocElement,\n  useTocElementState,\n} from '@udecode/plate-heading/react';\nimport { cva } from 'class-variance-authority';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\n\nconst headingItemVariants = cva(\n  'block h-auto w-full cursor-pointer truncate rounded-none px-0.5 py-1.5 text-left font-medium text-muted-foreground underline decoration-[0.5px] underline-offset-4 hover:bg-accent hover:text-muted-foreground',\n  {\n    variants: {\n      depth: {\n        1: 'pl-0.5',\n        2: 'pl-[26px]',\n        3: 'pl-[50px]',\n      },\n    },\n  }\n);\n\nexport const TocElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const state = useTocElementState();\n\n    const { props: btnProps } = useTocElement(state);\n\n    const { headingList } = state;\n\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn('relative mb-1 p-0', className)}\n        {...props}\n      >\n        <div contentEditable={false}>\n          {headingList.length > 0 ? (\n            headingList.map((item) => (\n              <Button\n                key={item.id}\n                variant=\"ghost\"\n                className={cn(\n                  headingItemVariants({ depth: item.depth as any })\n                )}\n                onClick={(e) => btnProps.onClick(e, item, 'smooth')}\n                aria-current\n              >\n                {item.title}\n              </Button>\n            ))\n          ) : (\n            <div className=\"text-sm text-gray-500\">\n              Create a heading to display the table of contents.\n            </div>\n          )}\n        </div>\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
      "path": "plate-ui/toc-element.tsx",
      "target": "components/plate-ui/toc-element.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "toc-element",
  "registryDependencies": [],
  "type": "registry:ui"
}