;
+};
+
+function TocNode({ node, activeLine, ancestorLines, collapsed, onToggleCollapse, onJump, activeRef }: TocNodeProps) {
+ const { heading, children } = node;
+ const isActive = heading.line === activeLine;
+ const isAncestor = ancestorLines.has(heading.line);
+ const hasChildren = children.length > 0;
+ const isCollapsed = collapsed.has(heading.line);
+
+ return (
+
+
+
+
+
+ {hasChildren && !isCollapsed && (
+
+ {children.map((child) => (
+
+ ))}
+
+ )}
+
+ );
+}
+
+type Props = {
+ source: string;
+ cursorLine: number;
+ viewRef: RefObject;
+};
+
+export function HeadingBreadcrumb({ source, cursorLine, viewRef }: Props) {
+ const [tocOpen, setTocOpen] = useState(false);
+ const [collapsed, setCollapsed] = useState>(new Set());
+ const rootRef = useRef(null);
+ const activeRef = useRef(null);
+
+ const headings = useMemo(() => parseHeadings(source), [source]);
+ const tree = useMemo(() => buildTree(headings), [headings]);
+ const path = useMemo(() => getCurrentPath(headings, cursorLine), [headings, cursorLine]);
+ const ancestorLines = useMemo(() => new Set(path.map((h) => h.line)), [path]);
+
+ // scroll active item into view when TOC opens
+ useEffect(() => {
+ if (tocOpen && activeRef.current) {
+ activeRef.current.scrollIntoView({ block: "nearest" });
+ }
+ }, [tocOpen]);
+
+ // close on outside click
+ useEffect(() => {
+ if (!tocOpen) return;
+ const onDown = (e: MouseEvent) => {
+ if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+ setTocOpen(false);
+ }
+ };
+ document.addEventListener("mousedown", onDown);
+ return () => document.removeEventListener("mousedown", onDown);
+ }, [tocOpen]);
+
+ if (headings.length === 0) return null;
+
+ const jumpTo = (line: number) => {
+ const view = viewRef.current;
+ if (!view) return;
+ const lineObj = view.state.doc.line(Math.min(line, view.state.doc.lines));
+ view.dispatch({
+ selection: { anchor: lineObj.from },
+ effects: EditorView.scrollIntoView(lineObj.from, { y: "start", yMargin: 40 }),
+ });
+ view.focus();
+ setTocOpen(false);
+ };
+
+ const toggleCollapse = (line: number) => {
+ setCollapsed((prev) => {
+ const next = new Set(prev);
+ if (next.has(line)) next.delete(line);
+ else next.add(line);
+ return next;
+ });
+ };
+
+ const activeLine = path.length > 0 ? path[path.length - 1].line : -1;
+
+ return (
+
+
+
+ {tocOpen && (
+
+
+ {tree.map((node) => (
+
+ ))}
+
+
+ )}
+