diff --git a/src/components/index.ts b/src/components/index.ts index 46d9e13..8d0918b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -92,6 +92,8 @@ import { ImageBubbleMenu } from "./menus/bubble/ImageBubbleMenu.ts"; import { ImageFlipX } from "./menus/bubble/image/ImageFlipX.ts"; import { ImageFlipY } from "./menus/bubble/image/ImageFlipY.ts"; +import { VideoBubbleMenu } from "./menus/bubble/VideoBubbleMenu.ts"; + // 注册组件 defineCustomElement('uai-editor-header', Header); defineCustomElement('uai-editor-editor', Editor); @@ -183,3 +185,5 @@ defineCustomElement('uai-editor-bubble-menu-text-selection', TextSelectionBubble defineCustomElement('uai-editor-bubble-menu-image', ImageBubbleMenu); defineCustomElement('uai-editor-bubble-menu-image-flip-x', ImageFlipX); defineCustomElement('uai-editor-bubble-menu-image-flip-y', ImageFlipY); + +defineCustomElement('uai-editor-bubble-menu-video', VideoBubbleMenu); diff --git a/src/components/menus/bubble/VideoBubbleMenu.ts b/src/components/menus/bubble/VideoBubbleMenu.ts new file mode 100644 index 0000000..614e15d --- /dev/null +++ b/src/components/menus/bubble/VideoBubbleMenu.ts @@ -0,0 +1,87 @@ +// Copyright (c) 2024-present AI-Labs + +// @ ts-nocheck +import { EditorEvents } from "@tiptap/core"; +import { UAIEditorEventListener, UAIEditor, UAIEditorOptions } from "../../../core/UAIEditor.ts"; + +import { AlignLeft } from "../common/AlignLeft.ts"; +import { AlignCenter } from "../common/AlignCenter.ts"; +import { AlignRight } from "../common/AlignRight.ts"; +import { NodeDelete } from "../common/NodeDelete.ts"; + +/** + * 定义视频内容的浮动菜单 + */ +export class VideoBubbleMenu extends HTMLElement implements UAIEditorEventListener { + uaiEditor!: UAIEditor; + + // 左对齐 + baseMenuAlignLeft!: AlignLeft; + // 居中对齐 + baseMenuAlignCenter!: AlignCenter; + // 右对齐 + baseMenuAlignRight!: AlignRight; + // 删除 + commonMenuNodeDelete!: NodeDelete; + + constructor(uaiEditor: UAIEditor) { + super(); + this.uaiEditor = uaiEditor; + this.initMenus(); + + // 定义菜单容器 + const container = document.createElement("div"); + container.classList.add("uai-bubble-menu-container"); + + // 定义菜单组 + const group1 = document.createElement("div"); + group1.classList.add("uai-bubble-menu-virtual-group"); + container.appendChild(group1); + // 添加对齐功能 + group1.appendChild(this.baseMenuAlignLeft); + group1.appendChild(this.baseMenuAlignCenter); + group1.appendChild(this.baseMenuAlignRight); + + const group2 = document.createElement("div"); + group2.classList.add("uai-bubble-menu-virtual-group"); + container.appendChild(group2); + + // 定义菜单组 + const group3 = document.createElement("div"); + group3.classList.add("uai-bubble-menu-virtual-group"); + container.appendChild(group3); + // 添加删除功能 + group3.appendChild(this.commonMenuNodeDelete); + + this.appendChild(container); + } + + onCreate(event: EditorEvents["create"], options: UAIEditorOptions) { + + } + + onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) { + + } + + onEditableChange(editable: boolean) { + + } + + /** + * 初始化功能菜单 + */ + initMenus() { + this.baseMenuAlignLeft = new AlignLeft({ menuType: "button", enable: true }); + this.uaiEditor.eventComponents.push(this.baseMenuAlignLeft); + + this.baseMenuAlignCenter = new AlignCenter({ menuType: "button", enable: true }); + this.uaiEditor.eventComponents.push(this.baseMenuAlignCenter); + + this.baseMenuAlignRight = new AlignRight({ menuType: "button", enable: true }); + this.uaiEditor.eventComponents.push(this.baseMenuAlignRight); + + this.commonMenuNodeDelete = new NodeDelete({ menuType: "button", enable: true }); + this.uaiEditor.eventComponents.push(this.commonMenuNodeDelete); + } +} \ No newline at end of file diff --git a/src/core/UAIExtensions.ts b/src/core/UAIExtensions.ts index 12be8d8..66c1057 100644 --- a/src/core/UAIExtensions.ts +++ b/src/core/UAIExtensions.ts @@ -42,6 +42,7 @@ import Toc from "../extensions/Toc.ts"; import { BubbleMenuPluginOptions, BubbleMenuPlugin } from "../components/menus/bubble/BubbleMenuPlugin.ts"; import { TextSelectionBubbleMenu } from "../components/menus/bubble/TextSelectionBubbleMenu.ts"; import { ImageBubbleMenu } from "../components/menus/bubble/ImageBubbleMenu.ts"; +import { VideoBubbleMenu } from "../components/menus/bubble/VideoBubbleMenu.ts"; /** * 创建浮动菜单功能 @@ -134,6 +135,33 @@ const createImageBubbleMenu = (uaiEditor: UAIEditor) => { }) } +/** + * 创建视频内容的浮动菜单 + * @param uaiEditor + * @returns + */ +const createVideoBubbleMenu = (uaiEditor: UAIEditor) => { + const container = new VideoBubbleMenu(uaiEditor); + + return createBubbleMenu("videoBubbleMenu", { + pluginKey: 'videoBubbleMenu', + element: container, + tippyOptions: { + appendTo: uaiEditor.editor.editorContainer, + arrow: false, + interactive: true, + hideOnClick: false, + placement: 'top', + }, + shouldShow: ({ editor }) => { + if (!editor.isEditable) { + return false; + } + return editor.isActive("video") + } + }) +} + /** * 定义编辑器的所有自定义扩展组件 * @param uaiEditor @@ -211,6 +239,7 @@ export const allExtensions = (uaiEditor: UAIEditor, _options: UAIEditorOptions): Video, createTextSelectionBubbleMenu(uaiEditor), createImageBubbleMenu(uaiEditor), + createVideoBubbleMenu(uaiEditor), ]; return extensions;