Table of Contents Menu & Table of Child Pages

Added component menu
Added support for toggling between "Table of Contents" or "Table of Child Pages"

apps/client/src/features/editor/components/table-of-contents/table-of-contents-menu.tsx

@@ -0,0 +1,127 @@
+import { BubbleMenu as BaseBubbleMenu, findParentNode, posToDOMRect } from "@tiptap/react";
+import React, { useCallback } from "react";
+import { sticky } from "tippy.js";
+import { Node as PMNode } from "prosemirror-model";
+import { EditorMenuProps, ShouldShowProps } from "@/features/editor/components/table/types/types.ts";
+import {
+    ActionIcon,
+    DividerVariant,
+    Group,
+    SegmentedControl,
+    Select,
+    Tooltip,
+    Text,
+    Checkbox,
+    Card,
+} from "@mantine/core";
+import { IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignRight } from "@tabler/icons-react";
+import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
+
+export function TableOfContentsMenu({ editor }: EditorMenuProps) {
+    const shouldShow = useCallback(
+        ({ state }: ShouldShowProps) => {
+            if (!state) {
+                return false;
+            }
+
+            return editor.isActive("tableOfContents");
+        },
+        [editor]
+    );
+
+    const getReferenceClientRect = useCallback(() => {
+        const { selection } = editor.state;
+        const predicate = (node: PMNode) => node.type.name === "tableOfContents";
+        const parent = findParentNode(predicate)(selection);
+
+        if (parent) {
+            const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
+            return dom.getBoundingClientRect();
+        }
+
+        return posToDOMRect(editor.view, selection.from, selection.to);
+    }, [editor]);
+
+    const setDividerType = useCallback(
+        (type: DividerVariant) => {
+            editor.chain().focus(undefined, { scrollIntoView: false }).setDividerType(type).run();
+        },
+        [editor]
+    );
+
+    const setTableType = useCallback(
+        (type: "Contents" | "Child Pages") => {
+            editor.chain().focus(undefined, { scrollIntoView: false }).setTableType(type).run();
+        },
+        [editor]
+    );
+
+    const setPageIcons = useCallback(
+        (icons: boolean) => {
+            editor.chain().focus(undefined, { scrollIntoView: false }).setPageIcons(icons).run();
+        },
+        [editor]
+    );
+
+    return (
+        <BaseBubbleMenu
+            editor={editor}
+            pluginKey={`tableOfContents-menu}`}
+            updateDelay={0}
+            tippyOptions={{
+                getReferenceClientRect,
+                offset: [0, 8],
+                zIndex: 99,
+                popperOptions: {
+                    modifiers: [{ name: "flip", enabled: false }],
+                },
+                plugins: [sticky],
+                sticky: "popper",
+                maxWidth: 500,
+            }}
+            shouldShow={shouldShow}
+        >
+            <Group gap={0}>
+                <Tooltip position="top" label="Divider type">
+                    <Select
+                        w={100}
+                        value={editor.getAttributes("tableOfContents").dividerType}
+                        data={[
+                            { value: "solid", label: "Solid" },
+                            { value: "dashed", label: "Dashed" },
+                            { value: "dotted", label: "Dotted" },
+                            { value: "none", label: "None" },
+                        ]}
+                        onChange={(_value, option) => setDividerType(_value as DividerVariant)}
+                    />
+                </Tooltip>
+                <Tooltip position="top" label="Table type">
+                    <SegmentedControl
+                        value={editor.getAttributes("tableOfContents").tableType}
+                        data={["Contents", "Child Pages"]}
+                        onChange={(value: "Contents" | "Child Pages") => setTableType(value)}
+                    />
+                </Tooltip>
+                <Tooltip position="top" label="Show page icons">
+                    <Card
+                        p="xs"
+                        m={0}
+                        onClick={() => setPageIcons(!editor.getAttributes("tableOfContents").icons)}
+                        style={{ cursor: "pointer" }}
+                        withBorder
+                    >
+                        <Group gap="xs">
+                            <Text size="sm">Page Icons</Text>
+                            <Checkbox
+                                checked={editor.getAttributes("tableOfContents").icons}
+                                onChange={(event) => setPageIcons(event.currentTarget.checked)}
+                            />
+                        </Group>
+                    </Card>
+                </Tooltip>
+            </Group>
+        </BaseBubbleMenu>
+    );
+}
+
+export default TableOfContentsMenu;

apps/client/src/features/editor/components/table-of-contents/table-of-contents-view.tsx

@@ -1,33 +1,141 @@
-import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { JSONContent, NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import {
     IconAlertTriangleFilled,
     IconCircleCheckFilled,
     IconCircleXFilled,
     IconInfoCircleFilled,
 } from "@tabler/icons-react";
-import { Alert, Divider, Group, Stack, Title, UnstyledButton, Text } from "@mantine/core";
+import { Alert, Divider, Group, Stack, Title, UnstyledButton, Text, DividerVariant } from "@mantine/core";
 // import classes from "./callout.module.css";
 import { CalloutType } from "@docmost/editor-ext";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { TextSelection } from "@tiptap/pm/state";
 import classes from "./table-of-contents.module.css";
 import clsx from "clsx";
+import { useGetRootSidebarPagesQuery, usePageQuery } from "@/features/page/queries/page-query";
+import { IPage, SidebarPagesParams } from "@/features/page/types/page.types";
+import { queryClient } from "@/main";
+import { getSidebarPages } from "@/features/page/services/page-service";
+import { useToggle } from "@mantine/hooks";
+import { useNavigate, useParams } from "react-router-dom";
+import { buildPageUrl } from "@/features/page/page.utils";
+import { string } from "zod";
 
 export default function TableOfContentsView(props: NodeViewProps) {
     const { node, editor, selected } = props;
-    const { type } = node.attrs;
 
-    const headings = editor.getJSON().content?.filter((c) => c.type == "heading");
+    const { dividerType, tableType, icons } = node.attrs as {
+        dividerType: DividerVariant & "none";
+        tableType: "Contents" | "Child Pages";
+        icons: boolean;
+    };
 
-    return (
+    const pageId = editor.storage?.pageId;
-        <NodeViewWrapper>
+
-            <Stack gap={0} className={clsx(selected ? "ProseMirror-selectednode" : "")} contentEditable={false}>
+    const { data: page } = usePageQuery({
-                {headings.map((value, index) => (
+        pageId: pageId,
+    });
+
+    const { pageSlug, spaceSlug } = useParams();
+
+    const navigate = useNavigate();
+
+    const [childPages, setChildPages] = useState<JSX.Element[]>([]);
+    const [headings, setHeadings] = useState<JSX.Element[]>([]);
+
+    const fetchChildren = async (params: SidebarPagesParams) => {
+        return await queryClient.fetchQuery({
+            queryKey: ["toc-child-pages", params],
+            queryFn: () => getSidebarPages(params),
+            staleTime: 10 * 60 * 1000,
+        });
+    };
+
+    // Max depth to prevent infinite recursion errors
+    const MAX_RECURSION_DEPTH = 10;
+
+    const fetchAllChildren = async (
+        currentPage: IPage,
+        pages: (IPage & { depth: number })[],
+        depth: number = 0
+    ): Promise<void> => {
+        // Prevent infinite recursion
+        if (depth > MAX_RECURSION_DEPTH) {
+            console.warn("Max recursion depth reached");
+            return;
+        }
+
+        const params: SidebarPagesParams = {
+            pageId: currentPage.id,
+            spaceId: currentPage.spaceId,
+        };
+
+        const result = await fetchChildren(params);
+        const children = result.items;
+
+        // Store the children in the relationships map
+        for (let child of children) pages.push({ ...child, depth });
+
+        // Use requestIdleCallback to allow the browser to perform other tasks
+        for (const child of children) {
+            if (child.hasChildren) {
+                await new Promise((resolve) =>
+                    requestIdleCallback(() => {
+                        fetchAllChildren(child, pages, depth + 1).then(resolve);
+                    })
+                );
+            }
+        }
+    };
+
+    useEffect(() => {
+        if (!page) return;
+
+        (async () => {
+            if (tableType == "Child Pages") {
+                // Initialize the child pagse array
+                const pages: (IPage & { depth: number })[] = [];
+
+                // Fetch all children recursively
+                await fetchAllChildren(page, pages);
+
+                const tocChildPages = pages.map((value, index) => (
                     <UnstyledButton
                         key={`toc-${index}`}
                         className={classes.heading}
                         style={{
-                            marginLeft: `calc(${value.attrs?.level} * var(--mantine-spacing-md))`,
+                            marginLeft: `calc(${value.depth} * var(--mantine-spacing-md))`,
+                        }}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (e.button != 0) return;
+
+                            const pageSlug = buildPageUrl(spaceSlug, value.slugId, value.title);
+
+                            // opted to not use "replace" so that browser back button workers properly
+                            navigate(pageSlug);
+                        }}
+                    >
+                        <Group>
+                            <Text m={6}>
+                                {icons ? value.icon : ""} {value.title}
+                            </Text>
+                            {dividerType != "none" && <Divider className={classes.divider} variant={dividerType} />}
+                        </Group>
+                    </UnstyledButton>
+                ));
+
+                setChildPages(tocChildPages);
+            } else {
+                const contentHeadings = editor.getJSON().content?.filter((c) => c.type == "heading");
+
+                const tocHeadings = contentHeadings.map((value, index) => (
+                    <UnstyledButton
+                        key={`toc-${index}`}
+                        className={classes.heading}
+                        style={{
+                            marginLeft: `calc(${value.attrs?.level - 1} * var(--mantine-spacing-md))`,
                         }}
                         onClick={(e) => {
                             e.preventDefault();
@@ -64,10 +172,28 @@ export default function TableOfContentsView(props: NodeViewProps) {
                     >
                         <Group>
                             <Text m={6}>{value.content?.at(0).text}</Text>
-                            <Divider className={classes.divider} />
+                            {dividerType != "none" && <Divider className={classes.divider} variant={dividerType} />}
                         </Group>
                     </UnstyledButton>
-                ))}
+                ));
+
+                setHeadings(tocHeadings);
+            }
+        })();
+    }, [page == undefined, dividerType, tableType, icons]);
+
+    return (
+        <NodeViewWrapper>
+            <NodeViewContent />
+            <Stack
+                gap={0}
+                className={clsx(selected ? "ProseMirror-selectednode" : "")}
+                contentEditable={false}
+                onContextMenu={(e) => e.preventDefault()}
+            >
+                {tableType == "Contents" && headings}
+
+                {tableType == "Child Pages" && childPages}
             </Stack>
         </NodeViewWrapper>
     );

packages/editor-ext/src/lib/table-of-contents.ts

@@ -8,6 +8,9 @@ declare module "@tiptap/core" {
             setTableOfContents: () => ReturnType;
             unsetTableOfContents: () => ReturnType;
             toggleTableOfContents: () => ReturnType;
+            setDividerType: (type: "solid" | "dashed" | "dotted" | "none") => ReturnType;
+            setTableType: (type: "Contents" | "Child Pages") => ReturnType;
+            setPageIcons: (icons: boolean) => ReturnType;
         };
     }
 }
@@ -43,7 +46,33 @@ export const TableofContents = Node.create<TableofContentsOptions>({
     },
 
     renderHTML({ HTMLAttributes }) {
-        return ["div", mergeAttributes({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes), 0];
+        return ["div", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+    },
+
+    addAttributes() {
+        return {
+            dividerType: {
+                default: "solid",
+                parseHTML: (element) => element.getAttribute("data-divider-type"),
+                renderHTML: (attributes) => ({
+                    "data-divider-type": attributes.dividerType,
+                }),
+            },
+            tableType: {
+                default: "Contents",
+                parseHTML: (element) => element.getAttribute("data-table-type"),
+                renderHTML: (attributes) => ({
+                    "data-table-type": attributes.tableType,
+                }),
+            },
+            icons: {
+                default: true,
+                parseHTML: (element) => element.getAttribute("data-page-icons"),
+                renderHTML: (attributes) => ({
+                    "data-page-icons": attributes.tableType,
+                }),
+            },
+        };
     },
 
     addNodeView() {
@@ -54,36 +83,33 @@ export const TableofContents = Node.create<TableofContentsOptions>({
         return {
             setTableOfContents:
                 () =>
-                ({ commands }) => {
+                ({ commands }) =>
-                    return commands.setNode(this.name);
+                    commands.setNode(this.name),
-                },
 
             unsetTableOfContents:
                 () =>
-                ({ commands }) => {
+                ({ commands }) =>
-                    return commands.lift(this.name);
+                    commands.lift(this.name),
-                },
 
             toggleTableOfContents:
                 () =>
-                ({ commands }) => {
+                ({ commands }) =>
-                    return commands.toggleWrap(this.name);
+                    commands.toggleWrap(this.name),
-                },
+
+            setDividerType:
+                (type) =>
+                ({ commands }) =>
+                    commands.updateAttributes("tableOfContents", { dividerType: type }),
+
+            setTableType:
+                (type) =>
+                ({ commands }) =>
+                    commands.updateAttributes("tableOfContents", { tableType: type }),
+
+            setPageIcons:
+                (icons) =>
+                ({ commands }) =>
+                    commands.updateAttributes("tableOfContents", { icons: icons }),
         };
     },
-
-    // addInputRules() {
-    //     return [
-    //         wrappingInputRule({
-    //             find: /^:::details\s$/,
-    //             type: this.type,
-    //         }),
-    //     ];
-    // },
-
-    // addKeyboardShortcuts() {
-    //     return {
-    //         "Mod-Alt-d": () => this.editor.commands.toggleDetails(),
-    //     };
-    // },
 });