{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "toc-docs",
"title": "Table of Contents",
"description": "Documentation for Table of Contents",
"files": [
{
"path": "../../content/docs/(plugins)/(elements)/toc.mdx",
"content": "---\ntitle: Table of Contents\ndocs:\n - route: https://pro.platejs.org/docs/examples/toc\n title: Plus\n - route: components/toc-node\n title: Toc Element\n---\n\n\n\n\n\n## Features\n\n- Automatically generates a table of contents from document headings\n- Smooth scrolling to headings\n- Active section tracking for the current heading while you scroll\n- Keyboard-accessible heading navigation with `Enter` and `Space`\n\n\n\n## Kit Usage\n\n\n\n### Installation\n\nThe fastest way to add table of contents functionality is with the `TocKit`, which includes pre-configured `TocPlugin` with the [Plate UI](/docs/installation/plate-ui) component.\n\n\n\n- [`TocElement`](/docs/components/toc-node): Renders table of contents elements.\n\n### Add Kit\n\nAdd the kit to your plugins:\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\nimport { TocKit } from '@/components/editor/plugins/toc-kit';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n ...TocKit,\n ],\n});\n```\n\n\n\n## Manual Usage\n\n\n\n### Installation\n\n```bash\nnpm install @platejs/basic-nodes @platejs/toc\n```\n\n### Add Plugins\n\nInclude `TocPlugin` and `HnPlugin` in your Plate plugins array when creating the editor.\n\n```tsx\nimport { TocPlugin } from '@platejs/toc/react';\nimport { H1Plugin, H2Plugin, H3Plugin } from '@platejs/basic-nodes/react';\nimport { createPlateEditor } from 'platejs/react';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n H1Plugin,\n H2Plugin,\n H3Plugin,\n TocPlugin,\n ],\n});\n```\n\n### Configure Plugin\n\nConfigure the `TocPlugin` with custom component and scroll options.\n\n```tsx\nimport { TocPlugin } from '@platejs/toc/react';\nimport { H1Plugin, H2Plugin, H3Plugin } from '@platejs/basic-nodes/react';\nimport { createPlateEditor } from 'platejs/react';\nimport { TocElement } from '@/components/ui/toc-node';\nimport { H1Element, H2Element, H3Element } from '@/components/ui/heading-node';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n H1Plugin.withComponent(H1Element),\n H2Plugin.withComponent(H2Element),\n H3Plugin.withComponent(H3Element),\n TocPlugin.configure({\n node: { component: TocElement },\n options: {\n topOffset: 80,\n isScroll: true,\n },\n }),\n ],\n});\n```\n\n- `node.component`: Assigns [`TocElement`](/docs/components/toc-node) to render table of contents elements.\n- `options.topOffset`: Sets the top offset when scrolling to headings.\n- `options.isScroll`: Enables scrolling behavior to headings.\n\n### Insert Toolbar Button\n\nYou can add this item to the [Insert Toolbar Button](/docs/toolbar#insert-toolbar-button) to insert table of contents elements:\n\n```tsx\n{\n icon: ,\n label: 'Table of contents',\n value: KEYS.toc,\n}\n```\n\n### Scroll Container Setup\n\n- If your scrolling element is [EditorContainer](/docs/components/editor), you can skip this step.\n- If your scrolling element is the editor container, pass `useEditorContainerRef()` as the `ref` prop. For example:\n\n```tsx\n// Below component\nfunction EditorContainer({ children }: { children: React.ReactNode }) {\n const containerRef = useEditorContainerRef();\n\n return {children}
;\n}\n```\n\n- If your scrolling element is an ancestor of the editor container, pass `useEditorScrollRef()` as the `ref` prop. For example:\n\n```tsx\n// Below component\nfunction Layout() {\n const scrollRef = useEditorScrollRef();\n\n return (\n \n \n \n \n \n );\n}\n```\n\n\n\n## Plate Plus\n\n\n\n## Plugins\n\n### `TocPlugin`\n\nPlugin for generating table of contents.\n\n\n\n \n Enable scrolling behavior.\n - **Default:** `true`\n \n \n Top offset when scrolling to heading.\n - **Default:** `80`\n \n Heading[]\" optional>\n Custom function to query headings.\n \n\n\n\n## Transforms\n\n### `tf.insertToc`\n\nInsert table of contents element.\n\n\n\">\n Node insertion options.\n\n\n\n## Hooks\n\n### `useTocElementState`\n\nManage TOC element state.\n\n\n\n \n Active heading ID for the current document position.\n \n \n Document headings array.\n \n void\">\n Heading scroll handler.\n \n\n\n\n### `useTocElement`\n\nHandle TOC element interactions.\n\n\n\n\n void\">\n Scroll handler from useTocElementState.\n \n\n\n\n \n Props for TOC element.\n \n \n void\">\n TOC item click handler.\n \n \n\n\n\n### `useTocSideBarState`\n\nManage TOC sidebar state.\n\n\n\n \n Initial open state.\n - **Default:** `true`\n \n \n Intersection Observer root margin.\n - **Default:** `'0px 0px 0px 0px'`\n \n \n Scroll top offset.\n - **Default:** `0`\n \n\n\n\n \n Active section ID.\n \n \n Document headings.\n \n \n Mouse over TOC state.\n \n \n Sidebar open state.\n \n >\">\n Set observation state.\n \n >\">\n Set mouse over state.\n \n \">\n TOC element ref.\n \n void\">\n Content scroll handler.\n \n\n\n\n### `useTocSideBar`\n\nThis hook provides props and handlers for the TOC sidebar component.\n\n\n\n \n Mouse over TOC state.\n \n \n Sidebar open state.\n \n >\">\n Set observation state.\n \n >\">\n Set mouse over state.\n \n \">\n TOC element ref.\n \n void\">\n Content scroll handler.\n \n\n\n \n Navigation element props.\n \n \n \">\n TOC element ref.\n \n void\">\n Mouse enter handler.\n \n ) => void\">\n Mouse leave handler.\n \n \n , item: Heading, behavior?: ScrollBehavior) => void\">\n TOC item click handler.\n \n\n\n",
"type": "registry:file",
"target": "content/docs/plate/(plugins)/(elements)/toc.mdx"
}
],
"type": "registry:file"
}