Table of Contents

Renders a table of contents element with clickable links to headings in the document.

Toc ElementToc Sidebar
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • 自动从文档标题生成目录
  • 平滑滚动到标题

Installation

npm install @udecode/plate-heading @udecode/plate-node-id

Usage

import { TocPlugin, HeadingPlugin } from '@udecode/plate-heading/react';
import { NodeIdPlugin } from '@udecode/plate-node-id';
const plugins = [
  // ...otherPlugins,
  HeadingPlugin,
  NodeIdPlugin,
  TocPlugin.configure({
    options: {
      topOffset: 80,
    },
  }),
];
const components = {
  // ...otherComponents,
  [TocPlugin.key]: TocElement,
};

Scroll container

  • 如果你的滚动元素是 EditorContainer, 你可以跳过这一步。
  • 如果你的滚动元素是编辑器容器，请将 useEditorContainerRef() 作为 ref 属性传递。例如：
// Should be rendered below <Plate> component
function EditorContainer({ children }: { children: React.ReactNode }) {
  const containerRef = useEditorContainerRef();
 
  return <div ref={containerRef}>{children}</div>;
}
  • 如果你的滚动元素是编辑器容器的祖先，请将 useEditorScrollRef() 作为 ref 属性传递。例如：
// Should be rendered below <Plate> component
function Layout() {
  const scrollRef = useEditorScrollRef();
 
  return (
    <main ref={scrollRef}>
      <EditorContainer>
        <PlateContent />
      </EditorContainer>
    </main>
  );
}

组件

示例

Plate UI

参考上面的预览。

Plate Plus

插件

TocPlugin

Options

Collapse all

    是否使用滚动行为。

    • 默认值: true

    滚动到标题时应用的顶部偏移量。

    • 默认值: 80

    从编辑器查询标题的自定义函数。

转换

insertToc

在编辑器中插入目录元素。

Parameters

Collapse all

    编辑器实例。

    插入目录节点的选项。

Hooks

useTocElementState

Returns

Collapse all

    编辑器实例。

    文档中标题对象的数组。

    处理滚动到特定标题的函数。

useTocElement

Parameters

Collapse all

    编辑器实例。

    来自 useTocElementState 的滚动处理函数。

Returns

Collapse all

useTocSideBarState

此 hook 管理目录侧边栏的状态。

Parameters

Collapse all

    目录侧边栏是否打开。

    • 默认值: true

    Intersection Observer 的根边距。

    • 默认值: '0px 0px 0px 0px'

    滚动的顶部偏移量。

    • 默认值: 0

Returns

Collapse all

    当前活动内容部分的 ID。

    编辑器实例。

    文档中的标题列表。

    鼠标当前是否在目录上。

    目录侧边栏是否打开。

    设置观察状态的函数。

    设置鼠标是否在目录上的函数。

    目录元素的引用。

    处理内容滚动的函数。

useTocSideBar

此 hook 为目录侧边栏组件提供属性和处理程序。

Parameters

Collapse all

    编辑器实例。

    鼠标当前是否在目录上。

    目录侧边栏是否打开。

    设置观察状态的函数。

    设置鼠标是否在目录上的函数。

    目录元素的引用。

    处理内容滚动的函数。

Returns

Collapse all

    目录导航元素的属性。

    点击目录项的处理程序。

TableToggle