添加视频浮动菜单功能

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);

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);
+    }
+}

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;