lijianqi/uai-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加页面大纲功能

Browse Source
This commit is contained in:
wux_labs
2025-02-18 22:31:06 +08:00
parent 8d513d1191
commit 95a374fb03
14 changed files with 663 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/menus/toolbar/Classic.ts
+46
View File
@@ -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
+46
View File
@@ -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
+72
View File
@@ -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
+79
View File
@@ -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);
}
}