文档框架
This commit is contained in:
wux_labs
@@ -0,0 +1,69 @@
|
|||||||
|
// Copyright (c) 2024-present AI-Labs
|
||||||
|
|
||||||
|
// @ ts-nocheck
|
||||||
|
import { EditorEvents } from "@tiptap/core";
|
||||||
|
import { UAIEditorEventListener, UAIEditorOptions } from "../core/UAIEditor.ts";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编辑器界面，主要是用来组织编辑器页面布局
|
||||||
|
*/
|
||||||
|
export class Editor extends HTMLElement implements UAIEditorEventListener {
|
||||||
|
// 主容器
|
||||||
|
mainContainer!: HTMLElement;
|
||||||
|
// 分页容器
|
||||||
|
pageContainer!: HTMLElement;
|
||||||
|
// 可缩放容器
|
||||||
|
zoomableContainer!: HTMLElement;
|
||||||
|
// 缩放内容
|
||||||
|
zoomableContent!: HTMLElement;
|
||||||
|
// 页面内容
|
||||||
|
pageContent!: HTMLElement;
|
||||||
|
// 编辑器容器
|
||||||
|
editorContainer!: HTMLElement;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.pageContainer = document.createElement("div");
|
||||||
|
this.pageContainer.classList.add("uai-page-container");
|
||||||
|
this.appendChild(this.pageContainer);
|
||||||
|
|
||||||
|
this.zoomableContainer = document.createElement("div");
|
||||||
|
this.zoomableContainer.classList.add("uai-zoomable-container");
|
||||||
|
this.pageContainer.appendChild(this.zoomableContainer);
|
||||||
|
|
||||||
|
this.zoomableContent = document.createElement("div");
|
||||||
|
this.zoomableContent.classList.add("uai-zoomable-content");
|
||||||
|
this.zoomableContainer.appendChild(this.zoomableContent);
|
||||||
|
|
||||||
|
this.pageContent = document.createElement("div");
|
||||||
|
this.pageContent.classList.add("uai-page-content");
|
||||||
|
this.zoomableContent.appendChild(this.pageContent);
|
||||||
|
|
||||||
|
this.editorContainer = document.createElement("div");
|
||||||
|
this.editorContainer.classList.add("uai-editor-container");
|
||||||
|
this.pageContent.appendChild(this.editorContainer);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 定义创建方法
|
||||||
|
* @param event
|
||||||
|
* @param options
|
||||||
|
*/
|
||||||
|
onCreate(_event: EditorEvents["create"], _options: UAIEditorOptions) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 定义Transaction监听方法
|
||||||
|
* @param event
|
||||||
|
* @param options
|
||||||
|
*/
|
||||||
|
onTransaction(_event: EditorEvents["transaction"], _options: UAIEditorOptions) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditableChange(_editable: boolean) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
// Copyright (c) 2024-present AI-Labs
|
||||||
|
|
||||||
|
// @ ts-nocheck
|
||||||
|
import { EditorEvents } from "@tiptap/core";
|
||||||
|
import { UAIEditorEventListener, UAIEditorOptions } from "../core/UAIEditor.ts";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编辑器底部状态栏
|
||||||
|
*/
|
||||||
|
export class Footer extends HTMLElement implements UAIEditorEventListener {
|
||||||
|
container!: HTMLElement;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 定义创建方法
|
||||||
|
* @param event
|
||||||
|
* @param options
|
||||||
|
*/
|
||||||
|
onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
|
||||||
|
this.container = document.createElement("div");
|
||||||
|
this.container.classList.add("uai-footer");
|
||||||
|
this.appendChild(this.container);
|
||||||
|
|
||||||
|
// 状态栏
|
||||||
|
const statusBar = document.createElement("div");
|
||||||
|
statusBar.classList.add("uai-status-bar");
|
||||||
|
this.container.appendChild(statusBar);
|
||||||
|
|
||||||
|
// 状态栏左边区域
|
||||||
|
const statusBarLeft = document.createElement("div");
|
||||||
|
statusBarLeft.classList.add("uai-status-bar-left");
|
||||||
|
statusBar.appendChild(statusBarLeft);
|
||||||
|
|
||||||
|
// 状态栏右边区域
|
||||||
|
const statusBarRight = document.createElement("div");
|
||||||
|
statusBarRight.classList.add("uai-status-bar-right");
|
||||||
|
statusBar.appendChild(statusBarRight);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 定义Transaction监听方法
|
||||||
|
* @param event
|
||||||
|
* @param options
|
||||||
|
*/
|
||||||
|
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditableChange(_editable: boolean) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,222 @@
|
|||||||
|
// Copyright (c) 2024-present AI-Labs
|
||||||
|
|
||||||
|
// @ ts-nocheck
|
||||||
|
import { t } from "i18next";
|
||||||
|
import expandDownIcon from "../assets/icons/expand-down.svg";
|
||||||
|
import toolbarRibbon from "../assets/icons/toolbar-ribbon.svg";
|
||||||
|
import toolbarClassic from "../assets/icons/toolbar-classic.svg";
|
||||||
|
import toolbarSource from "../assets/icons/toolbar-source.svg";
|
||||||
|
import codeblock from "../assets/icons/codeblock.svg";
|
||||||
|
import { Ribbon } from "./menus/toolbar/Ribbon";
|
||||||
|
import { Classic } from "./menus/toolbar/Classic";
|
||||||
|
import { InnerEditor, UAIEditorEventListener, UAIEditorOptions } from "../core/UAIEditor.ts";
|
||||||
|
import { EditorEvents } from "@tiptap/core";
|
||||||
|
import tippy, { Instance, Props } from "tippy.js";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文档顶部菜单栏
|
||||||
|
*/
|
||||||
|
export class Header extends HTMLElement implements UAIEditorEventListener {
|
||||||
|
toolbar!: HTMLElement;
|
||||||
|
container!: HTMLElement;
|
||||||
|
actions!: HTMLElement;
|
||||||
|
|
||||||
|
defaultToolbarMenus!: Record<string, any>[];
|
||||||
|
|
||||||
|
// 专业工具栏
|
||||||
|
ribbonMenu!: Ribbon;
|
||||||
|
// 经典工具栏
|
||||||
|
classicMenu!: Classic;
|
||||||
|
// 源码编辑器
|
||||||
|
sourceMenu!: HTMLElement;
|
||||||
|
|
||||||
|
// 菜单模式
|
||||||
|
menuMode!: "ribbon" | "classic" | "source";
|
||||||
|
tippyInstance!: Instance<Props>;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
// 初始化所有菜单分组
|
||||||
|
this.defaultToolbarMenus = [
|
||||||
|
{ label: t('toolbar.base'), value: 'base' },
|
||||||
|
{ label: t('toolbar.insert'), value: 'insert' },
|
||||||
|
{ label: t('toolbar.table'), value: 'table' },
|
||||||
|
{ label: t('toolbar.tools'), value: 'tools' },
|
||||||
|
{ label: t('toolbar.page'), value: 'page' },
|
||||||
|
{ label: t('toolbar.export'), value: 'export' },
|
||||||
|
{ label: t('toolbar.ai'), value: 'ai' },
|
||||||
|
];
|
||||||
|
// 创建专业工具栏
|
||||||
|
this.ribbonMenu = new Ribbon(this.defaultToolbarMenus);
|
||||||
|
// 创建经典工具栏
|
||||||
|
this.classicMenu = new Classic(this.defaultToolbarMenus);
|
||||||
|
// 创建源码编辑器
|
||||||
|
this.sourceMenu = document.createElement("div");
|
||||||
|
this.sourceMenu.classList.add("uai-classic-scrollable-container");
|
||||||
|
this.sourceMenu.innerHTML = `<img src="${codeblock}" width="20" /> ${t('toolbar.source')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 定义创建方法
|
||||||
|
* @param event
|
||||||
|
* @param options
|
||||||
|
*/
|
||||||
|
onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
|
||||||
|
// 创建工具栏
|
||||||
|
this.toolbar = document.createElement("div");
|
||||||
|
this.toolbar.classList.add("uai-toolbar");
|
||||||
|
this.appendChild(this.toolbar);
|
||||||
|
|
||||||
|
this.container = document.createElement("div");
|
||||||
|
this.container.classList.add("uai-toolbar-container");
|
||||||
|
this.toolbar.appendChild(this.container);
|
||||||
|
|
||||||
|
// 初始化专业工具栏
|
||||||
|
this.ribbonMenu.onCreate(event, options);
|
||||||
|
// 初始化经典工具栏
|
||||||
|
this.classicMenu.onCreate(event, options);
|
||||||
|
|
||||||
|
this.container.appendChild(this.ribbonMenu);
|
||||||
|
this.container.appendChild(this.classicMenu);
|
||||||
|
this.container.appendChild(this.sourceMenu);
|
||||||
|
|
||||||
|
// 添加工具栏切换菜单
|
||||||
|
this.actions = document.createElement("div");
|
||||||
|
this.actions.classList.add("uai-toolbar-actions");
|
||||||
|
this.container.appendChild(this.actions);
|
||||||
|
|
||||||
|
const actionsButton = document.createElement("div");
|
||||||
|
actionsButton.classList.add("uai-toolbar-actions-button");
|
||||||
|
this.actions.appendChild(actionsButton);
|
||||||
|
|
||||||
|
const actionsButtonIcon = document.createElement("img");
|
||||||
|
actionsButtonIcon.src = expandDownIcon;
|
||||||
|
actionsButtonIcon.width = 12;
|
||||||
|
actionsButton.appendChild(actionsButtonIcon);
|
||||||
|
|
||||||
|
const actionsButtonText = document.createElement("span");
|
||||||
|
actionsButtonText.classList.add("uai-button-text");
|
||||||
|
actionsButtonText.innerHTML = ` ${t('toolbar.toggle')}`;
|
||||||
|
actionsButton.appendChild(actionsButtonText);
|
||||||
|
|
||||||
|
// 工具栏切换菜单
|
||||||
|
this.tippyInstance = tippy(actionsButton, {
|
||||||
|
content: this.createContainer(event, options),
|
||||||
|
placement: 'bottom',
|
||||||
|
trigger: 'click',
|
||||||
|
interactive: true,
|
||||||
|
arrow: false,
|
||||||
|
onShow: () => {
|
||||||
|
},
|
||||||
|
onHidden: () => {
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (options.header === "ribbon") {
|
||||||
|
this.switchRibbonMenu(event);
|
||||||
|
} else {
|
||||||
|
this.switchClassicMenu(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 定义Transaction监听方法
|
||||||
|
* @param event
|
||||||
|
* @param options
|
||||||
|
*/
|
||||||
|
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
|
||||||
|
this.ribbonMenu.onTransaction(event, options);
|
||||||
|
this.classicMenu.onTransaction(event, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditableChange(editable: boolean) {
|
||||||
|
this.ribbonMenu.onEditableChange(editable);
|
||||||
|
this.classicMenu.onEditableChange(editable);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换专业工具栏
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
switchRibbonMenu(event: EditorEvents["create"]) {
|
||||||
|
this.ribbonMenu.style.display = "flex";
|
||||||
|
this.classicMenu.style.display = "none";
|
||||||
|
this.sourceMenu.style.display = "none";
|
||||||
|
this.menuMode = "ribbon";
|
||||||
|
(event.editor as InnerEditor).uaiEditor.switchEditor();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换经典工具栏
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
switchClassicMenu(event: EditorEvents["create"]) {
|
||||||
|
this.ribbonMenu.style.display = "none";
|
||||||
|
this.classicMenu.style.display = "flex";
|
||||||
|
this.sourceMenu.style.display = "none";
|
||||||
|
this.menuMode = "classic";
|
||||||
|
(event.editor as InnerEditor).uaiEditor.switchEditor();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换源码编辑器
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
switchSourceMenu(event: EditorEvents["create"]) {
|
||||||
|
this.ribbonMenu.style.display = "none";
|
||||||
|
this.classicMenu.style.display = "none";
|
||||||
|
this.sourceMenu.style.display = "flex";
|
||||||
|
this.menuMode = "source";
|
||||||
|
(event.editor as InnerEditor).uaiEditor.switchSource();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建工具栏切换菜单选项提示框
|
||||||
|
* @param event
|
||||||
|
* @param options
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
createContainer(event: EditorEvents["create"], options: UAIEditorOptions) {
|
||||||
|
const container = document.createElement("div");
|
||||||
|
container.classList.add("uai-popup-action-list");
|
||||||
|
|
||||||
|
// 专业工具栏菜单
|
||||||
|
const ribbon = document.createElement("div");
|
||||||
|
ribbon.classList.add("uai-popup-action-item");
|
||||||
|
ribbon.innerHTML = `<img src="${toolbarRibbon}" width="16" /> ${t('toolbar.ribbon')}`;
|
||||||
|
// 点击切换到专业工具栏
|
||||||
|
ribbon.addEventListener('click', () => {
|
||||||
|
this.switchRibbonMenu(event);
|
||||||
|
this.tippyInstance.hide();
|
||||||
|
});
|
||||||
|
container.appendChild(ribbon);
|
||||||
|
|
||||||
|
// 经典工具栏菜单
|
||||||
|
const classic = document.createElement("div");
|
||||||
|
classic.classList.add("uai-popup-action-item");
|
||||||
|
classic.innerHTML = `<img src="${toolbarClassic}" width="16" /> ${t('toolbar.classic')}`;
|
||||||
|
// 点击切换到经典工具栏
|
||||||
|
classic.addEventListener('click', () => {
|
||||||
|
this.switchClassicMenu(event);
|
||||||
|
this.tippyInstance.hide();
|
||||||
|
});
|
||||||
|
container.appendChild(classic);
|
||||||
|
|
||||||
|
// 源码编辑器菜单
|
||||||
|
const source = document.createElement("div");
|
||||||
|
source.classList.add("uai-popup-action-item");
|
||||||
|
source.innerHTML = `<img src="${toolbarSource}" width="16" /> ${t('toolbar.source')}`;
|
||||||
|
// 点击切换到源码编辑器
|
||||||
|
source.addEventListener('click', () => {
|
||||||
|
this.switchSourceMenu(event);
|
||||||
|
this.tippyInstance.hide();
|
||||||
|
});
|
||||||
|
container.appendChild(source);
|
||||||
|
|
||||||
|
return container;
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
// Copyright (c) 2024-present AI-Labs
|
||||||
|
|
||||||
|
import { defineCustomElement } from "../utils/DefineCustomElement.ts";
|
||||||
|
import { Header } from "../components/Header.ts";
|
||||||
|
import { Editor } from "../components/Editor.ts";
|
||||||
|
import { Footer } from "../components/Footer.ts";
|
||||||
|
|
||||||
|
import { Ribbon } from "./menus/toolbar/Ribbon.ts";
|
||||||
|
import { Classic } from "./menus/toolbar/Classic.ts";
|
||||||
|
|
||||||
|
|
||||||
|
// 注册组件
|
||||||
|
defineCustomElement('uai-editor-header', Header);
|
||||||
|
defineCustomElement('uai-editor-editor', Editor);
|
||||||
|
defineCustomElement('uai-editor-footer', Footer);
|
||||||
|
|
||||||
|
defineCustomElement('uai-editor-ribbon-menu', Ribbon);
|
||||||
|
defineCustomElement('uai-editor-classic-menu', Classic);
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
// Copyright (c) 2024-present AI-Labs
|
||||||
|
|
||||||
|
// @ ts-nocheck
|
||||||
|
import { EditorEvents } from "@tiptap/core";
|
||||||
|
import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
|
||||||
|
|
||||||
|
import menuIcon from "../../../assets/icons/menu.svg";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 传统菜单栏
|
||||||
|
*/
|
||||||
|
export class Classic extends HTMLElement implements UAIEditorEventListener {
|
||||||
|
defaultToolbarMenus!: Record<string, any>[];
|
||||||
|
eventComponents: UAIEditorEventListener[] = [];
|
||||||
|
|
||||||
|
// 传统菜单栏容器
|
||||||
|
classicMenu!: HTMLElement;
|
||||||
|
classicScrollableContainer!: HTMLElement;
|
||||||
|
|
||||||
|
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.classicScrollableContainer = document.createElement("div");
|
||||||
|
this.classicScrollableContainer.classList.add("uai-classic-scrollable-container");
|
||||||
|
this.appendChild(this.classicScrollableContainer);
|
||||||
|
|
||||||
|
this.classicMenu = document.createElement("div");
|
||||||
|
this.classicMenu.classList.add("uai-classic-menu");
|
||||||
|
this.classicScrollableContainer.appendChild(this.classicMenu);
|
||||||
|
|
||||||
|
const selectDiv = document.createElement("div");
|
||||||
|
selectDiv.classList.add("uai-classic-virtual-group");
|
||||||
|
selectDiv.classList.add("uai-editor-menu-select-3");
|
||||||
|
selectDiv.innerHTML = `<img src="${menuIcon}" width="16" />`;
|
||||||
|
this.classicMenu.appendChild(selectDiv);
|
||||||
|
|
||||||
|
const selectMuenus = document.createElement("select");
|
||||||
|
selectDiv.appendChild(selectMuenus);
|
||||||
|
|
||||||
|
this.defaultToolbarMenus.forEach(menu => {
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.label = menu.label;
|
||||||
|
option.value = menu.value;
|
||||||
|
selectMuenus.options.add(option);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 定义Transaction监听方法
|
||||||
|
* @param event
|
||||||
|
* @param options
|
||||||
|
*/
|
||||||
|
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
|
||||||
|
this.eventComponents.forEach(component => {
|
||||||
|
component.onTransaction(event, options);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditableChange(editable: boolean) {
|
||||||
|
this.eventComponents.forEach(component => {
|
||||||
|
component.onEditableChange(editable);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化菜单
|
||||||
|
*/
|
||||||
|
initMenus() {
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,108 @@
|
|||||||
|
// Copyright (c) 2024-present AI-Labs
|
||||||
|
|
||||||
|
// @ ts-nocheck
|
||||||
|
import { EditorEvents } from "@tiptap/core";
|
||||||
|
import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
|
||||||
|
|
||||||
|
import { t } from "i18next";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 经典菜单栏
|
||||||
|
*/
|
||||||
|
export class Ribbon extends HTMLElement implements UAIEditorEventListener {
|
||||||
|
defaultToolbarMenus!: Record<string, any>[];
|
||||||
|
eventComponents: UAIEditorEventListener[] = [];
|
||||||
|
headingOptions: Record<string, any>[] = [];
|
||||||
|
|
||||||
|
// 经典菜单栏容器
|
||||||
|
ribbonMenu!: HTMLElement;
|
||||||
|
ribbonScrollableContainer!: HTMLElement;
|
||||||
|
|
||||||
|
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");
|
||||||
|
})
|
||||||
|
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") })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 定义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() {
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
// Copyright (c) 2024-present AI-Labs
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 注册Web组件
|
||||||
|
* @param name
|
||||||
|
* @param element
|
||||||
|
*/
|
||||||
|
export const defineCustomElement = (name: string, element: CustomElementConstructor) => {
|
||||||
|
if (!window.customElements.get(name)) {
|
||||||
|
window.customElements.define(name, element);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user