73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import type { Editor } from "@tiptap/react";
|
|
|
|
/** 文档目录中的一个标题项 */
|
|
export interface OutlineHeading {
|
|
/** React key + scroll-spy 标识，按 ProseMirror 位置生成 */
|
|
id: string;
|
|
/** 标题层级，仅保留 1~3 */
|
|
level: 1 | 2 | 3;
|
|
/** 标题纯文本 */
|
|
text: string;
|
|
/** 标题节点在 ProseMirror 文档中的位置，用于解析 DOM 元素 */
|
|
pos: number;
|
|
}
|
|
|
|
/** 仅纳入目录的最大标题层级（H1~H3） */
|
|
const MAX_LEVEL = 3;
|
|
/** 内容变化后重建目录的防抖间隔（ms） */
|
|
const DEBOUNCE_MS = 200;
|
|
|
|
/**
|
|
* 从 Tiptap 编辑器实时提取 H1~H3 标题，构成文档目录。
|
|
*
|
|
* 首次挂载立即构建一次；之后监听 `editor.on('update')`，按 DEBOUNCE_MS 防抖重建，
|
|
* 避免逐字输入时频繁全量遍历。
|
|
*/
|
|
export function useDocumentOutline(editor: Editor | null): OutlineHeading[] {
|
|
const [headings, setHeadings] = useState<OutlineHeading[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (!editor) {
|
|
setHeadings([]);
|
|
return;
|
|
}
|
|
|
|
const compute = () => {
|
|
const out: OutlineHeading[] = [];
|
|
editor.state.doc.descendants((node, pos) => {
|
|
if (node.type.name !== "heading") return true;
|
|
const level = node.attrs.level as number;
|
|
if (level >= 1 && level <= MAX_LEVEL) {
|
|
out.push({
|
|
id: `heading-${pos}`,
|
|
level: level as 1 | 2 | 3,
|
|
text: node.textContent.trim() || "(无标题)",
|
|
pos,
|
|
});
|
|
}
|
|
return true;
|
|
});
|
|
setHeadings(out);
|
|
};
|
|
|
|
// 首次立即构建
|
|
compute();
|
|
|
|
// 内容变化时防抖重建
|
|
let timer: ReturnType<typeof setTimeout> | undefined;
|
|
const onUpdate = () => {
|
|
clearTimeout(timer);
|
|
timer = setTimeout(compute, DEBOUNCE_MS);
|
|
};
|
|
editor.on("update", onUpdate);
|
|
|
|
return () => {
|
|
clearTimeout(timer);
|
|
editor.off("update", onUpdate);
|
|
};
|
|
}, [editor]);
|
|
|
|
return headings;
|
|
}
|