// Copyright (c) 2024-present AI-Labs

// @ ts-nocheck
import { EditorEvents } from "@tiptap/core";

import { t } from "i18next";

import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
import { ScrollableDiv } from "./ScrollableDiv.ts";
import { Icons } from "../../Icons.ts";

import { FontSizeIncrease } from "../common/FontSizeIncrease.ts";
import { FontSizeDecrease } from "../common/FontSizeDecrease.ts";

import { Bold } from "../common/Bold.ts";
import { Italic } from "../common/Italic.ts";
import { Underline } from "../common/Underline.ts";
import { Strike } from "../common/Strike.ts";
import { Subscript } from "../common/Subscript.ts";
import { Superscript } from "../common/Superscript.ts";

import { AlignLeft } from "../common/AlignLeft.ts";
import { AlignCenter } from "../common/AlignCenter.ts";
import { AlignRight } from "../common/AlignRight.ts";
import { AlignJustify } from "../common/AlignJustify.ts";
import { AlignDistributed } from "../common/AlignDistributed.ts";

import { FontColor } from "../common/FontColor.ts";
import { Highlight } from "../common/Highlight.ts";

import { Redo } from "./base/Redo.ts";
import { Undo } from "./base/Undo.ts";

import { FormatPainter } from "./base/FormatPainter.ts";
import { ClearFormat } from "./base/ClearFormat.ts";

import { FontFamily } from "./base/FontFamily.ts";
import { FontSize } from "./base/FontSize.ts";

import { OrderedList } from "./base/OrderedList.ts";
import { BulletList } from "./base/BulletList.ts";
import { TaskList } from "./base/TaskList.ts";
import { Indent } from "./base/Indent.ts";
import { Outdent } from "./base/Outdent.ts";
import { LineHeight } from "./base/LineHeight.ts";

import { BlockQuote } from "./base/BlockQuote.ts";
import { Code } from "./base/Code.ts";

import { Print } from "./base/Print.ts";

import { Link } from "./insert/Link.ts";
import { Image } from "./insert/Image.ts";
import { Video } from "./insert/Video.ts";
import { Audio } from "./insert/Audio.ts";
import { File } from "./insert/File.ts";
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 { InsertTable } from "./table/InsertTable.ts";
import { AddColumnAfter } from "./table/AddColumnAfter.ts";
import { AddColumnBefore } from "./table/AddColumnBefore.ts";
import { DeleteColumn } from "./table/DeleteColumn.ts";
import { AddRowAfter } from "./table/AddRowAfter.ts";
import { AddRowBefore } from "./table/AddRowBefore.ts";
import { DeleteRow } from "./table/DeleteRow.ts";
import { DeleteTable } from "./table/DeleteTable.ts";

import { Diagrams } from "./tools/Diagrams.ts";
import { ToggleArxiv } from "./tools/ToggleArxiv.ts";

import { ToggleToc } from "./page/ToggleToc.ts";
import { BackgroundColor } from "./page/BackgroundColor.ts";
import { Watermark } from "./page/Watermark.ts";

import { ExportDocx } from "./export/ExportDocx.ts";
import { ExportOdt } from "./export/ExportOdt.ts";
import { ExportPdf } from "./export/ExportPdf.ts";
import { ExportMarkdown } from "./export/ExportMarkdown.ts";
import { ExportImage } from "./export/ExportImage.ts";

import { ToggleChat } from "./ai/ToggleChat.ts";
import { ToggleImage } from "./ai/ToggleImage.ts";

/**
 * 经典菜单栏
 */
export class Ribbon extends HTMLElement implements UAIEditorEventListener {
    defaultToolbarMenus!: Record<string, any>[];
    eventComponents: UAIEditorEventListener[] = [];
    headingOptions: Record<string, any>[] = [];
    scrollableDivs: ScrollableDiv[] = [];

    // 经典菜单栏容器
    ribbonMenu!: HTMLElement;
    ribbonScrollableContainer!: HTMLElement;

    // 基础菜单容器
    ribbonMenuBaseScrollable!: ScrollableDiv;
    ribbonMenuBaseGroup!: HTMLElement;

    // 插入菜单容器
    ribbonMenuInsertScrollable!: ScrollableDiv;
    ribbonMenuInsertGroup!: HTMLElement;

    // 表格菜单容器
    ribbonMenuTableScrollable!: ScrollableDiv;
    ribbonMenuTableGroup!: HTMLElement;

    // 工具菜单容器
    ribbonMenuToolScrollable!: ScrollableDiv;
    ribbonMenuToolGroup!: HTMLElement;

    // 页面菜单容器
    ribbonMenuPageScrollable!: ScrollableDiv;
    ribbonMenuPageGroup!: HTMLElement;

    // 导出菜单容器
    ribbonMenuExportScrollable!: ScrollableDiv;
    ribbonMenuExportGroup!: HTMLElement;

    // 人工智能菜单容器
    ribbonMenuAIScrollable!: ScrollableDiv;
    ribbonMenuAIGroup!: HTMLElement;

    // 基础菜单
    baseMenuUndo!: Undo;
    baseMenuRedo!: Redo;
    baseMenuFormatPainter!: FormatPainter;
    baseMenuClearFormat!: ClearFormat;

    baseMenuFontFamily!: FontFamily;
    baseMenuFontSize!: FontSize;
    baseMenuFontSizeIncrease!: FontSizeIncrease;
    baseMenuFontSizeDecrease!: FontSizeDecrease;

    baseMenuBold!: Bold;
    baseMenuItalic!: Italic;
    baseMenuUnderline!: Underline;
    baseMenuStrike!: Strike;
    baseMenuSubscript!: Subscript;
    baseMenuSuperscript!: Superscript;
    baseMenuFontColor!: FontColor;
    baseMenuHighlight!: Highlight;

    baseMenuOrderedList!: OrderedList;
    baseMenuBulletList!: BulletList;
    baseMenuTaskList!: TaskList;
    baseMenuIndent!: Indent;
    baseMenuOutdent!: Outdent;
    baseMenuLineHeight!: LineHeight;

    baseMenuAlignLeft!: AlignLeft;
    baseMenuAlignCenter!: AlignCenter;
    baseMenuAlignRight!: AlignRight;
    baseMenuAlignJustify!: AlignJustify;
    baseMenuAlignDistributed!: AlignDistributed;
    baseMenuBlockQuote!: BlockQuote;
    baseMenuCode!: Code;
    baseMenuPrint!: Print;

    // 插入菜单
    insertMenuLink!: Link;
    insertMenuImage!: Image;
    insertMenuVideo!: Video;
    insertMenuAudio!: Audio;
    insertMenuFile!: File;
    insertMenuHardBreak!: HardBreak;
    insertMenuEmoji!: Emoji;
    insertMenuSymbol!: Symbol;
    insertMenuMath!: Math;
    insertMenuToc!: Toc;

    // 表格菜单
    tableMenuInsertTable!: InsertTable;
    tableMenuAddColumnAfter!: AddColumnAfter;
    tableMenuAddColumnBefore!: AddColumnBefore;
    tableMenuDeleteColumn!: DeleteColumn;
    tableMenuAddRowAfter!: AddRowAfter;
    tableMenuAddRowBefore!: AddRowBefore;
    tableMenuDeleteRow!: DeleteRow;
    tableMenuDeleteTable!: DeleteTable;

    // 工具菜单
    toolsMenuDiagrams!: Diagrams;
    toolsMenuToggleArxiv!: ToggleArxiv;

    // 页面菜单
    pageMenuToggleToc!: ToggleToc;
    pageMenuBackgroundColor!: BackgroundColor;
    pageMenuWatermark!: Watermark;

    // 导出菜单
    exportMenuExportDocx!: ExportDocx;
    exportMenuExportOdt!: ExportOdt;
    exportMenuExportPdf!: ExportPdf;
    exportMenuExportMarkdown!: ExportMarkdown;
    exportMenuExportImage!: ExportImage;

    // 人工智能菜单
    aiMenuToggleChat!: ToggleChat;
    aiMenuToggleImage!: ToggleImage;

    constructor(defaultToolbarMenus: Record<string, any>[]) {
        super();
        this.defaultToolbarMenus = defaultToolbarMenus;
        // 初始化菜单
        this.initMenus();
    }

    /**
     * 定义创建方法
     * @param event 
     * @param options 
     */
    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
        this.eventComponents.forEach(component => {
            component.onCreate(event, options);
        })
        // 创建菜单容器
        this.ribbonMenu = document.createElement("div");
        this.ribbonMenu.classList.add("uai-ribbon-menu");
        this.appendChild(this.ribbonMenu);

        const ribbonTabs = document.createElement("div");
        ribbonTabs.classList.add("uai-ribbon-tabs");
        this.ribbonMenu.appendChild(ribbonTabs);

        // 添加菜单分组
        this.defaultToolbarMenus.forEach(menu => {
            const tab = document.createElement("div");
            tab.classList.add("uai-ribbon-tabs-item");
            tab.innerHTML = menu.label;
            // 添加事件，处理菜单分组切换、界面元素切换
            tab.addEventListener("click", () => {
                for (var i = 0; i < ribbonTabs.children.length; i++) {
                    ribbonTabs.children[i].classList.remove("active");
                }
                tab.classList.add("active");
                this.scrollableDivs.forEach(scrollable => {
                    try {
                        this.ribbonScrollableContainer.removeChild(scrollable);
                    } catch (e) {
                    }
                });
                if (menu.value === "base") {
                    this.ribbonScrollableContainer.appendChild(this.ribbonMenuBaseScrollable);
                }
                if (menu.value === "insert") {
                    this.ribbonScrollableContainer.appendChild(this.ribbonMenuInsertScrollable);
                }
                if (menu.value === "table") {
                    this.ribbonScrollableContainer.appendChild(this.ribbonMenuTableScrollable);
                }
                if (menu.value === "tools") {
                    this.ribbonScrollableContainer.appendChild(this.ribbonMenuToolScrollable);
                }
                if (menu.value === "page") {
                    this.ribbonScrollableContainer.appendChild(this.ribbonMenuPageScrollable);
                }
                if (menu.value === "export") {
                    this.ribbonScrollableContainer.appendChild(this.ribbonMenuExportScrollable);
                }
                if (menu.value === "ai") {
                    this.ribbonScrollableContainer.appendChild(this.ribbonMenuAIScrollable);
                }
            })
            ribbonTabs.appendChild(tab);
        });

        this.ribbonScrollableContainer = document.createElement("div");
        this.ribbonScrollableContainer.classList.add("uai-ribbon-scrollable-container");
        this.ribbonMenu.appendChild(this.ribbonScrollableContainer);

        this.headingOptions.push({ label: t('base.heading.paragraph'), desc: 'text', value: 'paragraph', element: document.createElement("div") });

        for (const i of Array.from({ length: 6 }).keys()) {
            const level = i + 1
            this.headingOptions.push({ label: `${t('base.heading.text')}`.replace("{level}", `${level}`), desc: `h${level}`, value: level, element: document.createElement("div") })
        }

        // 创建分组菜单
        this.createBaseMenu(event, options);
        this.createInsertMenu(event, options);
        this.createTableMenu(event, options);
        this.createToolMenu(event, options);
        this.createPageMenu(event, options);
        this.createExportMenu(event, options);
        this.createAIMenu(event, options);
        ribbonTabs.children[0].dispatchEvent(new MouseEvent("click"));
    }

    /**
     * 定义Transaction监听方法
     * @param event 
     * @param options 
     */
    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
        this.eventComponents.forEach(component => {
            component.onTransaction(event, options);
        })

        this.headingOptions.forEach(headingOption => {
            // 标题样式设置
            (headingOption.element as HTMLElement).classList.remove("active");
            if (headingOption.value === "paragraph" && event.editor.isActive('paragraph')) {
                // 如果当前选中非标题，则正文选项被激活
                (headingOption.element as HTMLElement).classList.add("active");
            } else if (event.editor.isActive('heading', { level: headingOption.value })) {
                // 如果当前选中是标题，则激活对应的标题选项
                (headingOption.element as HTMLElement).classList.add("active");
            }
        })
    }

    onEditableChange(editable: boolean) {
        this.eventComponents.forEach(component => {
            component.onEditableChange(editable);
        })
    }

    /**
     * 初始化菜单
     */
    initMenus() {
        this.baseMenuUndo = new Undo({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuUndo);

        this.baseMenuRedo = new Redo({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuRedo);

        this.baseMenuFormatPainter = new FormatPainter({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuFormatPainter);

        this.baseMenuClearFormat = new ClearFormat({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuClearFormat);

        this.baseMenuFontFamily = new FontFamily({ menuType: "select", enable: true });
        this.eventComponents.push(this.baseMenuFontFamily);

        this.baseMenuFontSize = new FontSize({ menuType: "select", enable: true });
        this.eventComponents.push(this.baseMenuFontSize);

        this.baseMenuFontSizeIncrease = new FontSizeIncrease({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuFontSizeIncrease);

        this.baseMenuFontSizeDecrease = new FontSizeDecrease({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuFontSizeDecrease);

        this.baseMenuBold = new Bold({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuBold);

        this.baseMenuItalic = new Italic({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuItalic);

        this.baseMenuUnderline = new Underline({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuUnderline);

        this.baseMenuStrike = new Strike({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuStrike);

        this.baseMenuSubscript = new Subscript({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuSubscript);

        this.baseMenuSuperscript = new Superscript({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuSuperscript);

        this.baseMenuFontColor = new FontColor({ menuType: "color", enable: true });
        this.eventComponents.push(this.baseMenuFontColor);

        this.baseMenuHighlight = new Highlight({ menuType: "color", enable: true });
        this.eventComponents.push(this.baseMenuHighlight);

        this.baseMenuOrderedList = new OrderedList({ menuType: "popup", enable: true });
        this.eventComponents.push(this.baseMenuOrderedList);

        this.baseMenuBulletList = new BulletList({ menuType: "popup", enable: true });
        this.eventComponents.push(this.baseMenuBulletList);

        this.baseMenuTaskList = new TaskList({ menuType: "popup", enable: true });
        this.eventComponents.push(this.baseMenuTaskList);

        this.baseMenuIndent = new Indent({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuIndent);

        this.baseMenuOutdent = new Outdent({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuOutdent);

        this.baseMenuLineHeight = new LineHeight({ menuType: "popup", enable: true });
        this.eventComponents.push(this.baseMenuLineHeight);

        this.baseMenuAlignLeft = new AlignLeft({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuAlignLeft);

        this.baseMenuAlignCenter = new AlignCenter({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuAlignCenter);

        this.baseMenuAlignRight = new AlignRight({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuAlignRight);

        this.baseMenuAlignJustify = new AlignJustify({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuAlignJustify);

        this.baseMenuAlignDistributed = new AlignDistributed({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuAlignDistributed);

        this.baseMenuBlockQuote = new BlockQuote({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuBlockQuote);

        this.baseMenuCode = new Code({ menuType: "button", enable: true });
        this.eventComponents.push(this.baseMenuCode);

        this.baseMenuPrint = new Print({ menuType: "button", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.baseMenuPrint);

        this.insertMenuLink = new Link({ menuType: "button", enable: true, huge: true });
        this.eventComponents.push(this.insertMenuLink);

        this.insertMenuImage = new Image({ menuType: "button", enable: true, huge: true });
        this.eventComponents.push(this.insertMenuImage);

        this.insertMenuVideo = new Video({ menuType: "button", enable: true, huge: true });
        this.eventComponents.push(this.insertMenuVideo);

        this.insertMenuAudio = new Audio({ menuType: "button", enable: true, huge: true });
        this.eventComponents.push(this.insertMenuAudio);

        this.insertMenuFile = new File({ menuType: "button", enable: true, huge: true });
        this.eventComponents.push(this.insertMenuFile);

        this.insertMenuHardBreak = new HardBreak({ menuType: "button", enable: true, huge: true });
        this.eventComponents.push(this.insertMenuHardBreak);

        this.insertMenuEmoji = new Emoji({ menuType: "popup", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.insertMenuEmoji);

        this.insertMenuSymbol = new Symbol({ menuType: "popup", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.insertMenuSymbol);

        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.tableMenuInsertTable = new InsertTable({ menuType: "popup", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.tableMenuInsertTable);

        this.tableMenuAddColumnAfter = new AddColumnAfter({ menuType: "button", enable: true, header: "classic", hideText: false });
        this.eventComponents.push(this.tableMenuAddColumnAfter);

        this.tableMenuAddColumnBefore = new AddColumnBefore({ menuType: "button", enable: true, header: "classic", hideText: false });
        this.eventComponents.push(this.tableMenuAddColumnBefore);

        this.tableMenuDeleteColumn = new DeleteColumn({ menuType: "button", enable: true, header: "classic", hideText: false });
        this.eventComponents.push(this.tableMenuDeleteColumn);

        this.tableMenuAddRowAfter = new AddRowAfter({ menuType: "button", enable: true, header: "classic", hideText: false });
        this.eventComponents.push(this.tableMenuAddRowAfter);

        this.tableMenuAddRowBefore = new AddRowBefore({ menuType: "button", enable: true, header: "classic", hideText: false });
        this.eventComponents.push(this.tableMenuAddRowBefore);

        this.tableMenuDeleteRow = new DeleteRow({ menuType: "button", enable: true, header: "classic", hideText: false });
        this.eventComponents.push(this.tableMenuDeleteRow);

        this.tableMenuDeleteTable = new DeleteTable({ menuType: "button", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.tableMenuDeleteTable);

        this.toolsMenuDiagrams = new Diagrams({ menuType: "button", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.toolsMenuDiagrams);

        this.toolsMenuToggleArxiv = new ToggleArxiv({ menuType: "button", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.toolsMenuToggleArxiv);

        this.pageMenuToggleToc = new ToggleToc({ menuType: "button", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.pageMenuToggleToc);

        this.pageMenuBackgroundColor = new BackgroundColor({ menuType: "popup", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.pageMenuBackgroundColor);

        this.pageMenuWatermark = new Watermark({ menuType: "popup", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.pageMenuWatermark);

        this.exportMenuExportDocx = new ExportDocx({ menuType: "button", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.exportMenuExportDocx);

        this.exportMenuExportOdt = new ExportOdt({ menuType: "button", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.exportMenuExportOdt);

        this.exportMenuExportPdf = new ExportPdf({ menuType: "button", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.exportMenuExportPdf);

        this.exportMenuExportMarkdown = new ExportMarkdown({ menuType: "button", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.exportMenuExportMarkdown);

        this.exportMenuExportImage = new ExportImage({ menuType: "button", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.exportMenuExportImage);

        this.aiMenuToggleChat = new ToggleChat({ menuType: "button", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.aiMenuToggleChat);

        this.aiMenuToggleImage = new ToggleImage({ menuType: "button", enable: true, huge: true, hideText: false });
        this.eventComponents.push(this.aiMenuToggleImage);
    }

    /**
     * 创建基础菜单
     * @param event 
     * @param options 
     */
    createBaseMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
        this.ribbonMenuBaseGroup = document.createElement("div");
        this.ribbonMenuBaseGroup.classList.add("uai-ribbon-container");
        this.ribbonMenuBaseGroup.style.display = "flex";
        this.ribbonMenuBaseScrollable = new ScrollableDiv(this.ribbonMenuBaseGroup);
        this.ribbonMenuBaseScrollable.style.display = "flex";
        this.ribbonMenuBaseScrollable.onCreate(event, options);
        this.scrollableDivs.push(this.ribbonMenuBaseScrollable);

        const group1 = document.createElement("div");
        group1.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuBaseGroup.appendChild(group1);

        const group1row1 = document.createElement("div");
        group1row1.classList.add("uai-ribbon-virtual-group-row");
        group1.appendChild(group1row1);
        group1row1.appendChild(this.baseMenuUndo);
        group1row1.appendChild(this.baseMenuRedo);

        const group1row2 = document.createElement("div");
        group1row2.classList.add("uai-ribbon-virtual-group-row");
        group1.appendChild(group1row2);
        group1row2.appendChild(this.baseMenuFormatPainter);
        group1row2.appendChild(this.baseMenuClearFormat);

        const group2 = document.createElement("div");
        group2.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuBaseGroup.appendChild(group2);

        const group2row1 = document.createElement("div");
        group2row1.classList.add("uai-ribbon-virtual-group-row");
        group2.appendChild(group2row1);
        group2row1.appendChild(this.baseMenuFontFamily);
        group2row1.appendChild(this.baseMenuFontSize);
        group2row1.appendChild(this.baseMenuFontSizeIncrease);
        group2row1.appendChild(this.baseMenuFontSizeDecrease);

        const group2row2 = document.createElement("div");
        group2row2.classList.add("uai-ribbon-virtual-group-row");
        group2.appendChild(group2row2);
        group2row2.appendChild(this.baseMenuBold);
        group2row2.appendChild(this.baseMenuItalic);
        group2row2.appendChild(this.baseMenuUnderline);
        group2row2.appendChild(this.baseMenuStrike);
        group2row2.appendChild(this.baseMenuSubscript);
        group2row2.appendChild(this.baseMenuSuperscript);
        group2row2.appendChild(this.baseMenuFontColor);
        group2row2.appendChild(this.baseMenuHighlight);

        const group3 = document.createElement("div");
        group3.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuBaseGroup.appendChild(group3);

        const group3row1 = document.createElement("div");
        group3row1.classList.add("uai-ribbon-virtual-group-row");
        group3.appendChild(group3row1);
        group3row1.appendChild(this.baseMenuOrderedList);
        group3row1.appendChild(this.baseMenuBulletList);
        group3row1.appendChild(this.baseMenuTaskList);
        group3row1.appendChild(this.baseMenuIndent);
        group3row1.appendChild(this.baseMenuOutdent);
        group3row1.appendChild(this.baseMenuLineHeight);

        const group3row2 = document.createElement("div");
        group3row2.classList.add("uai-ribbon-virtual-group-row");
        group3.appendChild(group3row2);
        group3row2.appendChild(this.baseMenuAlignLeft);
        group3row2.appendChild(this.baseMenuAlignCenter);
        group3row2.appendChild(this.baseMenuAlignRight);
        group3row2.appendChild(this.baseMenuAlignJustify);
        group3row2.appendChild(this.baseMenuAlignDistributed);
        group3row2.appendChild(this.baseMenuBlockQuote);
        group3row2.appendChild(this.baseMenuCode);

        const group4 = document.createElement("div");
        group4.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuBaseGroup.appendChild(group4);

        const headingContainer = document.createElement("div");
        headingContainer.classList.add("uai-ribbon-heading-container")

        const headingList = document.createElement("div");
        headingList.classList.add("uai-ribbon-heading-list");

        const headingArrow = document.createElement("div");
        headingArrow.classList.add("uai-ribbon-heading-arrow");
        headingArrow.innerHTML = Icons.ArrowDown;
        headingArrow.addEventListener("click", () => {
            headingContainer.style.height = "104px";
        });
        document.addEventListener('click', (event) => {
            if (!headingContainer.contains(event.target as Node)) {
                headingContainer.style.height = "56px";
            }
        });

        this.headingOptions.forEach(headingOption => {
            const item = headingOption.element;
            item.classList.add("uai-ribbon-heading-item");

            const title = document.createElement("div");
            title.classList.add("uai-ribbon-heading-item-title");
            title.classList.add(headingOption.desc);
            title.innerHTML = headingOption.label;
            const subtitle = document.createElement("div");
            subtitle.classList.add("uai-ribbon-heading-item-subtitle");
            subtitle.innerHTML = headingOption.desc
            item.appendChild(title);
            item.appendChild(subtitle);
            item.addEventListener("click", () => {
                if (headingOption.value === 'paragraph') {
                    event.editor.chain().focus().setParagraph().run();
                } else {
                    event.editor.chain().focus().toggleHeading({ level: headingOption.value }).run();
                }
            });
            headingList.appendChild(item);
        })

        headingContainer.appendChild(headingList);
        headingContainer.appendChild(headingArrow);
        group4.appendChild(headingContainer);

        const group5 = document.createElement("div");
        group5.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuBaseGroup.appendChild(group5);
        group5.appendChild(this.baseMenuPrint);
    }

    /**
     * 创建插入菜单
     * @param event 
     * @param options 
     */
    createInsertMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
        this.ribbonMenuInsertGroup = document.createElement("div");
        this.ribbonMenuInsertGroup.classList.add("uai-ribbon-container");
        this.ribbonMenuInsertGroup.style.display = "flex";
        this.ribbonMenuInsertScrollable = new ScrollableDiv(this.ribbonMenuInsertGroup);
        this.ribbonMenuInsertScrollable.style.display = "flex";
        this.ribbonMenuInsertScrollable.onCreate(event, options);
        this.scrollableDivs.push(this.ribbonMenuInsertScrollable);

        const group1 = document.createElement("div");
        group1.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuInsertGroup.appendChild(group1);
        group1.appendChild(this.insertMenuLink);
        group1.appendChild(this.insertMenuImage);
        group1.appendChild(this.insertMenuVideo);
        group1.appendChild(this.insertMenuAudio);
        group1.appendChild(this.insertMenuFile);

        const group2 = document.createElement("div");
        group2.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuInsertGroup.appendChild(group2);
        group2.appendChild(this.insertMenuHardBreak);
        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 
     */
    createTableMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
        this.ribbonMenuTableGroup = document.createElement("div");
        this.ribbonMenuTableGroup.classList.add("uai-ribbon-container");
        this.ribbonMenuTableGroup.style.display = "flex";
        this.ribbonMenuTableScrollable = new ScrollableDiv(this.ribbonMenuTableGroup);
        this.ribbonMenuTableScrollable.style.display = "flex";
        this.ribbonMenuTableScrollable.onCreate(event, options);
        this.scrollableDivs.push(this.ribbonMenuTableScrollable);

        const group1 = document.createElement("div");
        group1.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuTableGroup.appendChild(group1);
        group1.appendChild(this.tableMenuInsertTable);

        const group2 = document.createElement("div");
        group2.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuTableGroup.appendChild(group2);

        const group2row1 = document.createElement("div");
        group2row1.classList.add("uai-ribbon-virtual-group-row");
        group2.appendChild(group2row1);
        group2row1.appendChild(this.tableMenuAddColumnBefore);
        group2row1.appendChild(this.tableMenuAddColumnAfter);
        group2row1.appendChild(this.tableMenuDeleteColumn);

        const group2row2 = document.createElement("div");
        group2row2.classList.add("uai-ribbon-virtual-group-row");
        group2.appendChild(group2row2);
        group2row2.appendChild(this.tableMenuAddRowBefore);
        group2row2.appendChild(this.tableMenuAddRowAfter);
        group2row2.appendChild(this.tableMenuDeleteRow);

        const group3 = document.createElement("div");
        group3.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuTableGroup.appendChild(group3);
        group3.appendChild(this.tableMenuDeleteTable);
    }

    /**
     * 创建工具菜单
     * @param event 
     * @param options 
     */
    createToolMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
        this.ribbonMenuToolGroup = document.createElement("div");
        this.ribbonMenuToolGroup.classList.add("uai-ribbon-container");
        this.ribbonMenuToolGroup.style.display = "flex";
        this.ribbonMenuToolScrollable = new ScrollableDiv(this.ribbonMenuToolGroup);
        this.ribbonMenuToolScrollable.style.display = "flex";
        this.ribbonMenuToolScrollable.onCreate(event, options);
        this.scrollableDivs.push(this.ribbonMenuToolScrollable);

        const group1 = document.createElement("div");
        group1.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuToolGroup.appendChild(group1);
        group1.appendChild(this.toolsMenuDiagrams);

        const group2 = document.createElement("div");
        group2.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuToolGroup.appendChild(group2);
        group2.appendChild(this.toolsMenuToggleArxiv);
    }

    /**
     * 创建页面菜单
     * @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 = "flex";
        this.ribbonMenuPageScrollable.onCreate(event, options);
        this.scrollableDivs.push(this.ribbonMenuPageScrollable);

        const group1 = document.createElement("div");
        group1.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuPageGroup.appendChild(group1);
        group1.appendChild(this.pageMenuToggleToc);

        const group2 = document.createElement("div");
        group2.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuPageGroup.appendChild(group2);
        group2.appendChild(this.pageMenuBackgroundColor);
        group2.appendChild(this.pageMenuWatermark);
    }

    /**
     * 创建导出菜单
     * @param event 
     * @param options 
     */
    createExportMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
        this.ribbonMenuExportGroup = document.createElement("div");
        this.ribbonMenuExportGroup.classList.add("uai-ribbon-container");
        this.ribbonMenuExportGroup.style.display = "flex";
        this.ribbonMenuExportScrollable = new ScrollableDiv(this.ribbonMenuExportGroup);
        this.ribbonMenuExportScrollable.style.display = "flex";
        this.ribbonMenuExportScrollable.onCreate(event, options);
        this.scrollableDivs.push(this.ribbonMenuExportScrollable);

        const group1 = document.createElement("div");
        group1.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuExportGroup.appendChild(group1);
        group1.appendChild(this.exportMenuExportDocx);
        group1.appendChild(this.exportMenuExportOdt);
        group1.appendChild(this.exportMenuExportPdf);
        group1.appendChild(this.exportMenuExportMarkdown);

        const group2 = document.createElement("div");
        group2.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuExportGroup.appendChild(group2);
        group2.appendChild(this.exportMenuExportImage);
    }

    /**
     * 创建人工智能菜单
     * @param event 
     * @param options 
     */
    createAIMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
        this.ribbonMenuAIGroup = document.createElement("div");
        this.ribbonMenuAIGroup.classList.add("uai-ribbon-container");
        this.ribbonMenuAIGroup.style.display = "flex";
        this.ribbonMenuAIScrollable = new ScrollableDiv(this.ribbonMenuAIGroup);
        this.ribbonMenuAIScrollable.style.display = "flex";
        this.ribbonMenuAIScrollable.onCreate(event, options);
        this.scrollableDivs.push(this.ribbonMenuAIScrollable);

        const group1 = document.createElement("div");
        group1.classList.add("uai-ribbon-virtual-group");
        this.ribbonMenuAIGroup.appendChild(group1);
        group1.appendChild(this.aiMenuToggleChat);
        group1.appendChild(this.aiMenuToggleImage);
    }
}