\\n {headingList.length > 0 ? (\\n headingList.map((item) => (\\n btnProps.onClick(e, item, 'smooth')}\\n aria-current\\n >\\n {item.title}\\n \\n ))\\n ) : (\\n {\\n editor\\n .getApi(BlockSelectionPlugin)\\n .blockSelection.addSelectedRow(element.id as string);\\n }}\\n role=\\"button\\"\\n >\\n Add headings to display the table of contents.\\n \\n )}\\n

\\n {children}\\n \\n );\\n }\\n);\\n","file":"potion-ui/toc-element.tsx","language":"tsx","name":"toc-element.tsx","type":"potion-ui"},{"code":"'use client';\\n\\nimport React from 'react';\\n\\nimport type { PlateElementProps } from '@udecode/plate-common/react';\\n\\nimport { cn } from '@udecode/cn';\\nimport { PlateElement as PlateElementPrimitive } from '@udecode/plate-common/react';\\n\\nimport { BlockSelection } from './block-selection';\\n\\nexport const PlateElement = React.forwardRef(\\n ({ children, className, editor, ...props }: PlateElementProps, ref) => {\\n return (\\n \\n {children}\\n\\n {className?.includes('slate-selectable') && }\\n \\n );\\n }\\n);\\n","file":"potion-ui/plate-element.tsx","language":"tsx","name":"plate-element.tsx","type":"potion-ui"},{"code":"'use client';\\n\\nimport { cn } from '@udecode/cn';\\nimport { useBlockSelected } from '@udecode/plate-selection/react';\\nimport { type VariantProps, cva } from 'class-variance-authority';\\n\\nexport const blockSelectionVariants = cva(\\n cn(\\n 'before:pointer-events-none before:absolute before:inset-0 before:z-[1] before:size-full before:rounded-[4px] before:content-[\\"\\"]',\\n 'before:bg-brand/15',\\n 'before:transition-opacity before:duration-200'\\n ),\\n {\\n defaultVariants: {\\n active: true,\\n },\\n variants: {\\n active: {\\n false: 'before:opacity-0',\\n true: 'before:opacity-100',\\n },\\n },\\n }\\n);\\n\\nexport function BlockSelection({\\n className,\\n ...props\\n}: React.HTMLAttributes &\\n VariantProps) {\\n const isBlockSelected = useBlockSelected();\\n\\n return (\\n \\n );\\n}\\n","file":"potion-ui/block-selection.tsx","language":"tsx","name":"block-selection.tsx","type":"potion-ui"}]`,__dependencies__:'["@udecode/plate-selection","@udecode/plate-heading"]'})]})}function d(e={}){let{wrapper:n}=e.components||{};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}function p(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return y(T);})(); ;return Component;

Table of Contents Element

Table of Contents

Example Content

Subsection

Benefits of Using TOC

Installation

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.