Table of Contents Kit

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

Usage

Installation

The fastest way to add table of contents functionality is with the TocKit, which includes pre-configured TocPlugin with the Plate UI component.

• TocElement: Renders table of contents elements.

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from "platejs/react";
import { TocKit } from "@/components/editor/plugins/toc-kit";

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...TocKit,
  ],
});