4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T2163,--- title: Table of Contents docs: - route: https://pro.platejs.org/docs/examples/toc title: Plus - route: components/toc-node title: Toc Element --- ## Features - Automatically generates a table of contents from document headings - Smooth scrolling to headings - Active section tracking for the current heading while you scroll - Keyboard-accessible heading navigation with `Enter` and `Space` ## Kit Usage ### Installation The 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. - [`TocElement`](/docs/components/toc-node): Renders table of contents elements. ### Add Kit Add the kit to your plugins: ```tsx import { createPlateEditor } from 'platejs/react'; import { TocKit } from '@/components/editor/plugins/toc-kit'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, ...TocKit, ], }); ``` ## Manual Usage ### Installation ```bash npm install @platejs/basic-nodes @platejs/toc ``` ### Add Plugins Include `TocPlugin` and `HnPlugin` in your Plate plugins array when creating the editor. ```tsx import { TocPlugin } from '@platejs/toc/react'; import { H1Plugin, H2Plugin, H3Plugin } from '@platejs/basic-nodes/react'; import { createPlateEditor } from 'platejs/react'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, H1Plugin, H2Plugin, H3Plugin, TocPlugin, ], }); ``` ### Configure Plugin Configure the `TocPlugin` with custom component and scroll options. ```tsx import { TocPlugin } from '@platejs/toc/react'; import { H1Plugin, H2Plugin, H3Plugin } from '@platejs/basic-nodes/react'; import { createPlateEditor } from 'platejs/react'; import { TocElement } from '@/components/ui/toc-node'; import { H1Element, H2Element, H3Element } from '@/components/ui/heading-node'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, H1Plugin.withComponent(H1Element), H2Plugin.withComponent(H2Element), H3Plugin.withComponent(H3Element), TocPlugin.configure({ node: { component: TocElement }, options: { topOffset: 80, isScroll: true, }, }), ], }); ``` - `node.component`: Assigns [`TocElement`](/docs/components/toc-node) to render table of contents elements. - `options.topOffset`: Sets the top offset when scrolling to headings. - `options.isScroll`: Enables scrolling behavior to headings. ### Insert Toolbar Button You can add this item to the [Insert Toolbar Button](/docs/toolbar#insert-toolbar-button) to insert table of contents elements: ```tsx { icon: , label: 'Table of contents', value: KEYS.toc, } ``` ### Scroll Container Setup - If your scrolling element is [EditorContainer](/docs/components/editor), you can skip this step. - If your scrolling element is the editor container, pass `useEditorContainerRef()` as the `ref` prop. For example: ```tsx // Below component function EditorContainer({ children }: { children: React.ReactNode }) { const containerRef = useEditorContainerRef(); return

{children}

; } ``` - If your scrolling element is an ancestor of the editor container, pass `useEditorScrollRef()` as the `ref` prop. For example: ```tsx // Below component function Layout() { const scrollRef = useEditorScrollRef(); return (

); } ``` ## Plate Plus ## Plugins ### `TocPlugin` Plugin for generating table of contents. Enable scrolling behavior. - **Default:** `true` Top offset when scrolling to heading. - **Default:** `80` Custom function to query headings. ## Transforms ### `tf.insertToc` Insert table of contents element. Node insertion options. ## Hooks ### `useTocElementState` Manage TOC element state. Active heading ID for the current document position. Document headings array. Heading scroll handler. ### `useTocElement` Handle TOC element interactions. Scroll handler from useTocElementState. Props for TOC element. TOC item click handler. ### `useTocSideBarState` Manage TOC sidebar state. Initial open state. - **Default:** `true` Intersection Observer root margin. - **Default:** `'0px 0px 0px 0px'` Scroll top offset. - **Default:** `0` Active section ID. Document headings. Mouse over TOC state. Sidebar open state. Set observation state. Set mouse over state. TOC element ref. Content scroll handler. ### `useTocSideBar` This hook provides props and handlers for the TOC sidebar component. Mouse over TOC state. Sidebar open state. Set observation state. Set mouse over state. TOC element ref. Content scroll handler. Navigation element props. TOC element ref. Mouse enter handler. Mouse leave handler. TOC item click handler. 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"../../content/docs/(plugins)/(elements)/toc.mdx","content":"$4f","type":"registry:file","target":"content/docs/plate/(plugins)/(elements)/toc.mdx"}],"className":"h-[70svh] min-h-80"}]]}]