添加页面大纲功能

src/components/Footer.ts

@@ -4,14 +4,22 @@
 import { EditorEvents } from "@tiptap/core";
 import { UAIEditorEventListener, UAIEditorOptions } from "../core/UAIEditor.ts";
 
+import { ToggleToc } from "./menus/toolbar/page/ToggleToc";
+
 /**
  * 编辑器底部状态栏
  */
 export class Footer extends HTMLElement implements UAIEditorEventListener {
     container!: HTMLElement;
 
+    // 文档大纲
+    toggleToc!: ToggleToc;
+
     constructor() {
         super();
+
+        // 创建状态栏菜单
+        this.toggleToc = new ToggleToc({ menuType: "button", enable: true });
     }
 
     /**
@@ -20,6 +28,9 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
      * @param options 
      */
     onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        // 初始化状态栏菜单
+        this.toggleToc.onCreate(event, options);
+
         this.container = document.createElement("div");
         this.container.classList.add("uai-footer");
         this.appendChild(this.container);
@@ -38,6 +49,11 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
         const statusBarRight = document.createElement("div");
         statusBarRight.classList.add("uai-status-bar-right");
         statusBar.appendChild(statusBarRight);
+
+        this.toggleToc.classList.add("uai-status-bar-button");
+
+        // 状态栏中添加功能菜单按钮
+        statusBarLeft.appendChild(this.toggleToc);
     }
 
     /**
@@ -46,10 +62,10 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
      * @param options 
      */
     onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
-
+        this.toggleToc.onTransaction(event, options);
     }
 
-    onEditableChange(_editable: boolean) {
-
+    onEditableChange(editable: boolean) {
+        this.toggleToc.onEditableChange(editable);
     }
 }

src/components/containers/TocContainer.ts

@@ -0,0 +1,119 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import closeIcon from "../../assets/icons/close.svg";
+import titleIcon from "../../assets/icons/toc.svg";
+import { t } from "i18next";
+import { UAIEditor, UAIEditorEventListener, UAIEditorOptions } from "../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+
+/**
+ * 定义文档大纲容器
+ */
+export class TocContainer extends HTMLElement implements UAIEditorEventListener {
+    // 文档大纲容器
+    container!: HTMLElement;
+
+    // 文档大纲标题
+    tocTitle!: HTMLElement;
+
+    // 文档大纲内容
+    content!: HTMLElement;
+
+    constructor() {
+        super();
+        // 初始化容器
+        this.container = document.createElement("div");
+        this.container.classList.add("uai-pannel-container");
+        this.appendChild(this.container);
+
+        // 初始化标题
+        this.tocTitle = document.createElement("div");
+        this.tocTitle.classList.add("uai-pannel-title");
+        this.tocTitle.innerHTML = `<img src="${titleIcon}" width="18" />&nbsp; ${t('toc.title')}`;
+        this.container.appendChild(this.tocTitle);
+
+        // 初始化关闭容器按钮
+        const dialogClose = document.createElement("div");
+        dialogClose.classList.add("uai-pannel-close");
+        dialogClose.innerHTML = `<img src="${closeIcon}" width="24"/>`;
+        // 注册点击事件，点击关闭按钮关闭容器
+        dialogClose.addEventListener("click", () => {
+            this.style.display = "none";
+        })
+        this.tocTitle.appendChild(dialogClose);
+
+        this.content = document.createElement("div");
+        this.content.classList.add("uai-toc-content");
+        this.container.appendChild(this.content);
+    }
+
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+    }
+
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+    }
+
+    onEditableChange(editable: boolean) {
+    }
+
+    /**
+     * 文档大纲内容渲染
+     * @param uaiEditor 
+     */
+    renderContents(uaiEditor: UAIEditor) {
+        this.content.innerHTML = "";
+        // 获取编辑器的文档大纲内容
+        let tableOfContents = uaiEditor.tableOfContents;
+        if (tableOfContents) {
+            // 循环处理所有大纲
+            tableOfContents.forEach(content => {
+                const item = document.createElement("div");
+                item.classList.add("uai-toc-item");
+                // 根据大纲级别渲染大纲
+                item.classList.add(`level-${content.level}`);
+                if (content.isActive) {
+                    item.classList.add("active");
+                }
+                // 大纲条目点击事件，跳转到文档中对应的位置
+                item.addEventListener("click", () => {
+                    if (!uaiEditor.innerEditor) {
+                        return;
+                    }
+                    const activeHeading = tableOfContents.find(
+                        (item: any) => 'isActive' in item && item.isActive,
+                    )
+                    if (activeHeading && 'isActive' in activeHeading) {
+                        activeHeading.isActive = false;
+                    }
+                    if ('isActive' in content) {
+                        content.isActive = true;
+                    }
+                    const element = uaiEditor.innerEditor.view.dom.querySelector(
+                        `[data-toc-id="${content.id}"`,
+                    )
+                    const pageContainer = document.querySelector(
+                        `.uai-main`,
+                    )
+                    pageContainer?.scrollTo({
+                        top: (element as HTMLElement)?.offsetTop ?? 0 + 10,
+                    })
+                    const pos = uaiEditor.innerEditor.view.posAtDOM(element as Node, 0);
+                    const { tr } = uaiEditor.innerEditor.view.state;
+                    tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
+                    uaiEditor.innerEditor.view.dispatch(tr);
+                    // uaiEditor.innerEditor.view.focus();
+                    this.renderContents(uaiEditor);
+                });
+                // 大纲文字内容
+                const text = document.createElement("div");
+                text.classList.add("uai-toc-text");
+                text.innerHTML = content.textContent;
+                item.appendChild(text);
+                this.content.appendChild(item);
+            })
+        }
+    }
+}
+

src/components/index.ts

@@ -5,6 +5,8 @@ import { Header } from "../components/Header.ts";
 import { Editor } from "../components/Editor.ts";
 import { Footer } from "../components/Footer.ts";
 
+import { TocContainer } from "../components/containers/TocContainer.ts";
+
 import { Ribbon } from "./menus/toolbar/Ribbon.ts";
 import { Classic } from "./menus/toolbar/Classic.ts";
 
@@ -59,12 +61,17 @@ import { HardBreak } from "./menus/toolbar/insert/HardBreak.ts";
 import { Emoji } from "./menus/toolbar/insert/Emoji.ts";
 import { Symbol } from "./menus/toolbar/insert/Symbol.ts";
 import { Math } from "./menus/toolbar/insert/Math.ts";
+import { Toc } from "./menus/toolbar/insert/Toc.ts";
+
+import { ToggleToc } from "./menus/toolbar/page/ToggleToc.ts";
 
 // 注册组件
 defineCustomElement('uai-editor-header', Header);
 defineCustomElement('uai-editor-editor', Editor);
 defineCustomElement('uai-editor-footer', Footer);
 
+defineCustomElement('uai-editor-toc-container', TocContainer);
+
 defineCustomElement('uai-editor-ribbon-menu', Ribbon);
 defineCustomElement('uai-editor-classic-menu', Classic);
 
@@ -119,3 +126,6 @@ defineCustomElement('uai-editor-insert-menu-hard-break', HardBreak);
 defineCustomElement('uai-editor-insert-menu-emoji', Emoji);
 defineCustomElement('uai-editor-insert-menu-symbol', Symbol);
 defineCustomElement('uai-editor-insert-menu-math', Math);
+defineCustomElement('uai-editor-insert-menu-toc', Toc);
+
+defineCustomElement('uai-editor-page-menu-toggle-toc', ToggleToc);

src/components/menus/toolbar/Classic.ts

@@ -54,6 +54,9 @@ import { HardBreak } from "./insert/HardBreak.ts";
 import { Emoji } from "./insert/Emoji.ts";
 import { Symbol } from "./insert/Symbol.ts";
 import { Math } from "./insert/Math.ts";
+import { Toc } from "./insert/Toc.ts";
+
+import { ToggleToc } from "./page/ToggleToc.ts";
 
 /**
  * 传统菜单栏
@@ -74,6 +77,10 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
     classicMenuInsertScrollable!: ScrollableDiv;
     classicMenuInsertGroup!: HTMLElement;
 
+    // 页面菜单容器
+    classicMenuPageScrollable!: ScrollableDiv;
+    classicMenuPageGroup!: HTMLElement;
+
     // 基础菜单
     baseMenuUndo!: Undo;
     baseMenuRedo!: Redo;
@@ -119,6 +126,10 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
     insertMenuEmoji!: Emoji;
     insertMenuSymbol!: Symbol;
     insertMenuMath!: Math;
+    insertMenuToc!: Toc;
+
+    // 页面菜单
+    pageMenuToggleToc!: ToggleToc;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -165,16 +176,21 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
             const menu = selectMuenus.selectedOptions[0].value;
             this.classicMenuBaseScrollable.style.display = "none";
             this.classicMenuInsertScrollable.style.display = "none";
+            this.classicMenuPageScrollable.style.display = "none";
             if (menu === "base") {
                 this.classicMenuBaseScrollable.style.display = "flex";
             }
             if (menu === "insert") {
                 this.classicMenuInsertScrollable.style.display = "flex";
             }
+            if (menu === "page") {
+                this.classicMenuPageScrollable.style.display = "flex";
+            }
         })
         // 创建分组菜单
         this.createBaseMenu(event, options);
         this.createInsertMenu(event, options);
+        this.createPageMenu(event, options);
         this.classicMenuBaseScrollable.style.display = "flex";
     }
 
@@ -312,6 +328,12 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
 
         this.insertMenuMath = new Math({ menuType: "button", enable: true, header: "classic", hideText: false });
         this.eventComponents.push(this.insertMenuMath);
+
+        this.insertMenuToc = new Toc({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.insertMenuToc);
+
+        this.pageMenuToggleToc = new ToggleToc({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.pageMenuToggleToc);
     }
     /**
      * 创建基础菜单
@@ -401,5 +423,29 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         group2.appendChild(this.insertMenuEmoji);
         group2.appendChild(this.insertMenuSymbol);
         group2.appendChild(this.insertMenuMath);
+
+        const group3 = document.createElement("div");
+        group3.classList.add("uai-classic-virtual-group");
+        this.classicMenuInsertGroup.appendChild(group3);
+        group3.appendChild(this.insertMenuToc);
+    }
+
+    /**
+     * 创建页面菜单
+     * @param event 
+     * @param options 
+     */
+    createPageMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.classicMenuPageGroup = document.createElement("div");
+        this.classicMenuPageGroup.style.display = "flex";
+        this.classicMenuPageScrollable = new ScrollableDiv(this.classicMenuPageGroup);
+        this.classicMenuPageScrollable.style.display = "none";
+        this.classicMenu.appendChild(this.classicMenuPageScrollable);
+        this.classicMenuPageScrollable.onCreate(event, options);
+
+        const group1 = document.createElement("div");
+        group1.classList.add("uai-classic-virtual-group");
+        this.classicMenuPageGroup.appendChild(group1);
+        group1.appendChild(this.pageMenuToggleToc);
     }
 }

src/components/menus/toolbar/Ribbon.ts

@@ -56,6 +56,9 @@ import { HardBreak } from "./insert/HardBreak.ts";
 import { Emoji } from "./insert/Emoji.ts";
 import { Symbol } from "./insert/Symbol.ts";
 import { Math } from "./insert/Math.ts";
+import { Toc } from "./insert/Toc.ts";
+
+import { ToggleToc } from "./page/ToggleToc.ts";
 
 /**
  * 经典菜单栏
@@ -77,6 +80,10 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
     ribbonMenuInsertScrollable!: ScrollableDiv;
     ribbonMenuInsertGroup!: HTMLElement;
 
+    // 页面菜单容器
+    ribbonMenuPageScrollable!: ScrollableDiv;
+    ribbonMenuPageGroup!: HTMLElement;
+
     // 基础菜单
     baseMenuUndo!: Undo;
     baseMenuRedo!: Redo;
@@ -122,6 +129,10 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
     insertMenuEmoji!: Emoji;
     insertMenuSymbol!: Symbol;
     insertMenuMath!: Math;
+    insertMenuToc!: Toc;
+
+    // 页面菜单
+    pageMenuToggleToc!: ToggleToc;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -161,12 +172,16 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
                 tab.classList.add("active");
                 this.ribbonMenuBaseScrollable.style.display = "none";
                 this.ribbonMenuInsertScrollable.style.display = "none";
+                this.ribbonMenuPageScrollable.style.display = "none";
                 if (menu.value === "base") {
                     this.ribbonMenuBaseScrollable.style.display = "flex";
                 }
                 if (menu.value === "insert") {
                     this.ribbonMenuInsertScrollable.style.display = "flex";
                 }
+                if (menu.value === "page") {
+                    this.ribbonMenuPageScrollable.style.display = "flex";
+                }
             })
             ribbonTabs.appendChild(tab);
         });
@@ -186,6 +201,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         // 创建分组菜单
         this.createBaseMenu(event, options);
         this.createInsertMenu(event, options);
+        this.createPageMenu(event, options);
         this.ribbonMenuBaseScrollable.style.display = "flex";
     }
 
@@ -335,6 +351,12 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
 
         this.insertMenuMath = new Math({ menuType: "button", enable: true, huge: true });
         this.eventComponents.push(this.insertMenuMath);
+
+        this.insertMenuToc = new Toc({ menuType: "button", enable: true, huge: true });
+        this.eventComponents.push(this.insertMenuToc);
+
+        this.pageMenuToggleToc = new ToggleToc({ menuType: "button", enable: true, huge: true, hideText: false });
+        this.eventComponents.push(this.pageMenuToggleToc);
     }
 
     /**
@@ -498,5 +520,29 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         group2.appendChild(this.insertMenuEmoji);
         group2.appendChild(this.insertMenuSymbol);
         group2.appendChild(this.insertMenuMath);
+
+        const group3 = document.createElement("div");
+        group3.classList.add("uai-ribbon-virtual-group");
+        this.ribbonMenuInsertGroup.appendChild(group3);
+        group3.appendChild(this.insertMenuToc);
+    }
+
+    /**
+     * 创建页面菜单
+     * @param event 
+     * @param options 
+     */
+    createPageMenu(_event: EditorEvents["create"], _options: UAIEditorOptions) {
+        this.ribbonMenuPageGroup = document.createElement("div");
+        this.ribbonMenuPageGroup.classList.add("uai-ribbon-container");
+        this.ribbonMenuPageGroup.style.display = "flex";
+        this.ribbonMenuPageScrollable = new ScrollableDiv(this.ribbonMenuPageGroup);
+        this.ribbonMenuPageScrollable.style.display = "none";
+        this.ribbonScrollableContainer.appendChild(this.ribbonMenuPageScrollable);
+
+        const group1 = document.createElement("div");
+        group1.classList.add("uai-ribbon-virtual-group");
+        this.ribbonMenuPageGroup.appendChild(group1);
+        group1.appendChild(this.pageMenuToggleToc);
     }
 }

src/components/menus/toolbar/insert/Toc.ts

@@ -0,0 +1,72 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/toc.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 插入菜单：插入大纲
+ */
+export class Toc extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: false,
+        text: t('insert.toc'),
+        tooltip: t('insert.toc'),
+    }
+
+    // 功能按钮
+    menuButton: MenuButton;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.menuButton = new MenuButton(this.menuButtonOptions);
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.menuButton.onCreate(event, options);
+        this.appendChild(this.menuButton);
+
+        // 定义按钮点击事件，插入文档大纲
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().addTableOfContents().run();
+            }
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+        if (this.menuButton.menuButton) {
+            var disable = event.editor.isEditable;
+            this.onEditableChange(disable);
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/toolbar/page/ToggleToc.ts

@@ -0,0 +1,79 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/toc.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 页面菜单：打开文档大纲
+ */
+export class ToggleToc extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('toc.title'),
+        tooltip: t('toc.title'),
+    }
+
+    // 功能按钮
+    menuButton: MenuButton;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.menuButton = new MenuButton(this.menuButtonOptions);
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.menuButton.onCreate(event, options);
+        this.appendChild(this.menuButton);
+
+        // 定义按钮点击事件，显示或关闭文档大纲界面
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                // 判断文档大纲是否显示
+                const display = (event.editor as InnerEditor).uaiEditor.tocContainer.style.display;
+                if (display != "none") {
+                    // 如果当前已显示，则关闭文档大纲界面
+                    (event.editor as InnerEditor).uaiEditor.tocContainer.style.display = "none";
+                } else {
+                    // 如果当前未显示，则显示文档大纲界面
+                    (event.editor as InnerEditor).uaiEditor.toggleContainers.forEach(toggle => {
+                        toggle.style.display = "none";
+                    });
+                    (event.editor as InnerEditor).uaiEditor.tocContainer.style.display = "block";
+                }
+            }
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+