Table of Contents

npm install @yoopta/table-of-contents

import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import TableOfContents from '@yoopta/table-of-contents';
import { HeadingOne, HeadingTwo, HeadingThree } from '@yoopta/headings';
import Paragraph from '@yoopta/paragraph';
import { applyTheme } from '@yoopta/themes-shadcn';

const plugins = applyTheme([
  TableOfContents,
  HeadingOne,
  HeadingTwo,
  HeadingThree,
  Paragraph,
]);

export default function Editor() {
  const editor = useMemo(
    () => createYooptaEditor({ plugins, marks: [], value: {} }),
    [],
  );
  return (
    <YooptaEditor editor={editor} onChange={() => {}}>
      <YooptaToolbar />
      <YooptaSlashCommandMenu />
    </YooptaEditor>
  );
}

import TableOfContents, { TableOfContentsCommands } from '@yoopta/table-of-contents';

// Insert a TOC block at the current position
TableOfContentsCommands.insertTableOfContents(editor, { focus: true });

// Insert with custom props
TableOfContentsCommands.insertTableOfContents(editor, {
  at: 0,
  depth: 2,
  title: 'On this page',
  showNumbers: true,
  collapsible: true,
});

// Update an existing TOC block
TableOfContentsCommands.updateTableOfContents(editor, blockId, {
  depth: 2,
  title: 'Contents',
});

// Delete a TOC block
TableOfContentsCommands.deleteTableOfContents(editor, blockId);

// Build element only (e.g. for custom insert logic)
const element = TableOfContentsCommands.buildTableOfContentsElements(editor, {
  depth: 3,
  title: 'Table of Contents',
});

import { useTableOfContentsItems } from '@yoopta/table-of-contents';

function MyTOCRender(props) {
  const editor = useYooptaEditor();
  const { blockId, element } = props;
  const { depth = 3, headingTypes = ['HeadingOne', 'HeadingTwo', 'HeadingThree'] } = element.props ?? {};

  const items = useTableOfContentsItems(editor, blockId, { depth, headingTypes });

  return (
    <nav>
      {items.map((item) => (
        <a key={item.id} href="#" onClick={() => editor.focusBlock(item.id)}>
          {item.text || '(Untitled)'} (level {item.level})
        </a>
      ))}
    </nav>
  );
}

import { applyTheme } from '@yoopta/themes-shadcn';
import TableOfContents from '@yoopta/table-of-contents';

const plugins = applyTheme([
  TableOfContents,
  // ... Headings, Paragraph, etc.
]);