添加插入文件功能

src/components/index.ts

@@ -63,6 +63,7 @@ import { Link } from "./menus/toolbar/insert/Link.ts";
 import { Image } from "./menus/toolbar/insert/Image.ts";
 import { Video } from "./menus/toolbar/insert/Video.ts";
 import { Audio } from "./menus/toolbar/insert/Audio.ts";
+import { File } from "./menus/toolbar/insert/File.ts";
 import { HardBreak } from "./menus/toolbar/insert/HardBreak.ts";
 import { Emoji } from "./menus/toolbar/insert/Emoji.ts";
 import { Symbol } from "./menus/toolbar/insert/Symbol.ts";
@@ -103,6 +104,8 @@ import { VideoBubbleMenu } from "./menus/bubble/VideoBubbleMenu.ts";
 
 import { AudioBubbleMenu } from "./menus/bubble/AudioBubbleMenu.ts";
 
+import { FileBubbleMenu } from "./menus/bubble/FileBubbleMenu.ts";
+
 import { CharacterCount } from "./menus/statusbar/CharacterCount.ts";
 
 import { Fullscreen } from "./menus/statusbar/Fullscreen.ts";
@@ -172,6 +175,7 @@ defineCustomElement('uai-editor-insert-menu-link', Link);
 defineCustomElement('uai-editor-insert-menu-image', Image);
 defineCustomElement('uai-editor-insert-menu-video', Video);
 defineCustomElement('uai-editor-insert-menu-audio', Audio);
+defineCustomElement('uai-editor-insert-menu-file', File);
 defineCustomElement('uai-editor-insert-menu-hard-break', HardBreak);
 defineCustomElement('uai-editor-insert-menu-emoji', Emoji);
 defineCustomElement('uai-editor-insert-menu-symbol', Symbol);
@@ -218,6 +222,8 @@ defineCustomElement('uai-editor-bubble-menu-video', VideoBubbleMenu);
 
 defineCustomElement('uai-editor-bubble-menu-audio', AudioBubbleMenu);
 
+defineCustomElement('uai-editor-bubble-menu-file', FileBubbleMenu);
+
 defineCustomElement('uai-editor-ai-action-request-action', AIRequestAction);
 defineCustomElement('uai-editor-ai-action-chat-response-action', AIChatResponseAction);
 defineCustomElement('uai-editor-ai-action-image-response-action', AIImageResponseAction);

src/components/menus/bubble/FileBubbleMenu.ts

@@ -0,0 +1,89 @@
+// 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 FileBubbleMenu 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/components/menus/toolbar/Classic.ts

@@ -50,6 +50,7 @@ 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";
@@ -162,6 +163,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
     insertMenuImage!: Image;
     insertMenuVideo!: Video;
     insertMenuAudio!: Audio;
+    insertMenuFile!: File;
     insertMenuHardBreak!: HardBreak;
     insertMenuEmoji!: Emoji;
     insertMenuSymbol!: Symbol;
@@ -403,6 +405,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         this.insertMenuAudio = new Audio({ menuType: "button", enable: true, header: "classic", hideText: false });
         this.eventComponents.push(this.insertMenuAudio);
 
+        this.insertMenuFile = new File({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.insertMenuFile);
+
         this.insertMenuHardBreak = new HardBreak({ menuType: "button", enable: true, header: "classic", hideText: false });
         this.eventComponents.push(this.insertMenuHardBreak);
 
@@ -555,6 +560,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         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-classic-virtual-group");

src/components/menus/toolbar/Ribbon.ts

@@ -53,6 +53,7 @@ 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";
@@ -164,6 +165,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
     insertMenuImage!: Image;
     insertMenuVideo!: Video;
     insertMenuAudio!: Audio;
+    insertMenuFile!: File;
     insertMenuHardBreak!: HardBreak;
     insertMenuEmoji!: Emoji;
     insertMenuSymbol!: Symbol;
@@ -425,6 +427,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         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);
 
@@ -651,6 +656,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         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");

src/components/menus/toolbar/insert/Audio.ts

@@ -49,7 +49,7 @@ export class Audio extends HTMLElement implements UAIEditorEventListener {
         // 定义按钮点击事件，插入音频
         this.addEventListener("click", () => {
             if (this.menuButtonOptions.enable) {
-                event.editor.chain().focus().selectFiles('audio', true).run()
+                event.editor.chain().focus().selectFiles('audio', true).run();
             }
         })
     }

src/components/menus/toolbar/insert/File.ts

@@ -0,0 +1,83 @@
+// 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 { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+
+import icon from "../../../../assets/icons/file.svg";
+
+/**
+ * 插入菜单：插入文件
+ */
+export class File extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: false,
+        text: t('insert.file'),
+        tooltip: t('insert.file'),
+    }
+
+    // 功能按钮
+    menuButton: MenuButton;
+    // 文件选择
+    fileInput: HTMLInputElement;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.menuButton = new MenuButton(this.menuButtonOptions);
+
+        // 初始化文件选择
+        this.fileInput = document.createElement("input");
+        this.fileInput.type = "file";
+        this.fileInput.multiple = true;
+        this.fileInput.accept = "*/*";
+    }
+
+    /**
+     * 定义创建方法
+     * @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().selectFiles('file', false).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/insert/Image.ts

@@ -54,20 +54,10 @@ export class Image extends HTMLElement implements UAIEditorEventListener {
         this.menuButton.onCreate(event, options);
         this.appendChild(this.menuButton);
 
-        // this.fileInput.addEventListener("change", () => {
-        //     const files = this.fileInput.files;
-        //     if (files && files.length > 0) {
-        //         for (let file of files) {
-        //             event.editor.commands.uploadImage(file);
-        //         }
-        //     }
-        //     (this.fileInput as any).value = "";
-        // });
-
         // 定义按钮点击事件，插入图片
         this.addEventListener("click", () => {
             if (this.menuButtonOptions.enable) {
-                event.editor.chain().focus().selectFiles('image', true).run()
+                event.editor.chain().focus().selectFiles('image', true).run();
                 // this.fileInput.click();
             }
         })

src/components/menus/toolbar/insert/Video.ts

@@ -49,7 +49,7 @@ export class Video extends HTMLElement implements UAIEditorEventListener {
         // 定义按钮点击事件，插入视频
         this.addEventListener("click", () => {
             if (this.menuButtonOptions.enable) {
-                event.editor.chain().focus().selectFiles('video', true).run()
+                event.editor.chain().focus().selectFiles('video', true).run();
             }
         })
     }