807 lines
34 KiB
TypeScript
807 lines
34 KiB
TypeScript
// 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 { CodeBlock } from "./base/CodeBlock.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 { 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>[] = [];
|
|
|
|
// 经典菜单栏容器
|
|
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;
|
|
baseMenuCodeBlock!: CodeBlock;
|
|
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;
|
|
|
|
// 页面菜单
|
|
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.ribbonMenuBaseScrollable.style.display = "none";
|
|
this.ribbonMenuInsertScrollable.style.display = "none";
|
|
this.ribbonMenuTableScrollable.style.display = "none";
|
|
this.ribbonMenuToolScrollable.style.display = "none";
|
|
this.ribbonMenuPageScrollable.style.display = "none";
|
|
this.ribbonMenuExportScrollable.style.display = "none";
|
|
this.ribbonMenuAIScrollable.style.display = "none";
|
|
if (menu.value === "base") {
|
|
this.ribbonMenuBaseScrollable.style.display = "flex";
|
|
}
|
|
if (menu.value === "insert") {
|
|
this.ribbonMenuInsertScrollable.style.display = "flex";
|
|
}
|
|
if (menu.value === "table") {
|
|
this.ribbonMenuTableScrollable.style.display = "flex";
|
|
}
|
|
if (menu.value === "tools") {
|
|
this.ribbonMenuToolScrollable.style.display = "flex";
|
|
}
|
|
if (menu.value === "page") {
|
|
this.ribbonMenuPageScrollable.style.display = "flex";
|
|
}
|
|
if (menu.value === "export") {
|
|
this.ribbonMenuExportScrollable.style.display = "flex";
|
|
}
|
|
if (menu.value === "ai") {
|
|
this.ribbonMenuAIScrollable.style.display = "flex";
|
|
}
|
|
})
|
|
ribbonTabs.appendChild(tab);
|
|
});
|
|
ribbonTabs.children[0].classList.add("active")
|
|
|
|
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);
|
|
this.ribbonMenuBaseScrollable.style.display = "flex";
|
|
}
|
|
|
|
/**
|
|
* 定义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.baseMenuCodeBlock = new CodeBlock({ menuType: "button", enable: true });
|
|
this.eventComponents.push(this.baseMenuCodeBlock);
|
|
|
|
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.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 = "none";
|
|
this.ribbonScrollableContainer.appendChild(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.baseMenuCodeBlock);
|
|
|
|
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 = "none";
|
|
this.ribbonScrollableContainer.appendChild(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 = "none";
|
|
this.ribbonScrollableContainer.appendChild(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 = "none";
|
|
this.ribbonScrollableContainer.appendChild(this.ribbonMenuToolScrollable);
|
|
|
|
const group1 = document.createElement("div");
|
|
group1.classList.add("uai-ribbon-virtual-group");
|
|
this.ribbonMenuToolGroup.appendChild(group1);
|
|
group1.appendChild(this.toolsMenuDiagrams);
|
|
}
|
|
|
|
/**
|
|
* 创建页面菜单
|
|
* @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);
|
|
|
|
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 = "none";
|
|
this.ribbonScrollableContainer.appendChild(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 = "none";
|
|
this.ribbonScrollableContainer.appendChild(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);
|
|
}
|
|
} |