添加页面大纲功能

src/core/UAIEditor.ts

@@ -7,8 +7,12 @@ import {
 } from "@tiptap/core";
 
 import { DOMParser } from "@tiptap/pm/model";
+
+import { TableOfContentData } from "@tiptap-pro/extension-table-of-contents";
+
 import "../components"
 import { Header } from "../components/Header.ts";
+import { TocContainer } from "../components/containers/TocContainer.ts";
 import { Editor } from "../components/Editor.ts";
 import { Footer } from "../components/Footer.ts";
 import * as monaco from 'monaco-editor';
@@ -128,9 +132,11 @@ export class UAIEditor {
     toggleContainers: HTMLElement[] = [];
 
     header!: Header;
+    tocContainer!: TocContainer;
     editor!: Editor;
     footer!: Footer;
     source!: HTMLElement;
+    tableOfContents?: TableOfContentData;
     sourceEditor!: monaco.editor.IStandaloneCodeEditor;
 
     constructor(customOptions: UAIEditorOptions) {
@@ -256,6 +262,11 @@ export class UAIEditor {
         this.center.style.height = "10vh";
         this.center.style.flex = "1";
 
+        this.tocContainer = new TocContainer();
+        this.tocContainer.style.display = "none";
+        this.center.appendChild(this.tocContainer);
+        this.toggleContainers.push(this.tocContainer);
+
         this.editor = new Editor();
         this.editor.classList.add("uai-main");
         this.center.appendChild(this.editor);
@@ -317,6 +328,7 @@ export class UAIEditor {
             this.options.onCreated(this);
         }
         this.header.onCreate(event, this.options);
+        this.tocContainer.onCreate(event, this.options);
         this.editor.onCreate(event, this.options);
         this.footer.onCreate(event, this.options);
         this.eventComponents.forEach(component => {
@@ -328,9 +340,10 @@ export class UAIEditor {
         this.header.onTransaction(event, this.options);
         this.editor.onTransaction(event, this.options);
         this.footer.onTransaction(event, this.options);
+        this.tocContainer.onTransaction(event, this.options);
         this.eventComponents.forEach(component => {
             component.onTransaction(event, this.options);
-        })
+        });
     }
 
     switchEditor() {

src/core/UAIExtensions.ts

@@ -18,6 +18,7 @@ import { TextStyle } from "@tiptap/extension-text-style";
 import { Underline } from "@tiptap/extension-underline";
 
 import { Mathematics } from '@tiptap-pro/extension-mathematics';
+import { TableOfContents, getHierarchicalIndexes } from '@tiptap-pro/extension-table-of-contents'
 
 import BulletList from "../extensions/BulletList.ts";
 import FontSize from "../extensions/FontSize.ts";
@@ -29,6 +30,8 @@ import OrderedList from "../extensions/OrderedList.ts";
 import SelectFile from "../extensions/SelectFile.ts";
 import Video from "../extensions/Video.ts";
 import Audio from "../extensions/Audio.ts";
+import { uuid } from "../utils/UUID.ts";
+import Toc from "../extensions/Toc.ts";
 
 /**
  * 定义编辑器的所有自定义扩展组件
@@ -69,6 +72,18 @@ export const allExtensions = (uaiEditor: UAIEditor, _options: UAIEditorOptions):
         }),
         Subscript,
         Superscript,
+        TableOfContents.configure({
+            getIndex: getHierarchicalIndexes,
+            onUpdate: (content) => {
+                uaiEditor.tableOfContents = content;
+                uaiEditor.tocContainer.renderContents(uaiEditor);
+            },
+            scrollParent: () =>
+                document.querySelector(
+                    ".uai-main",
+                ) as HTMLElement,
+            getId: () => uuid(),
+        }),
         TaskList,
         TaskItem.configure({
             nested: true,
@@ -77,6 +92,7 @@ export const allExtensions = (uaiEditor: UAIEditor, _options: UAIEditorOptions):
             types: ['heading', 'paragraph'],
         }),
         TextStyle,
+        Toc,
         Underline,
         Video,
     ];