添加插入图片菜单

src/components/menus/toolbar/Classic.ts

@@ -5,7 +5,7 @@ import { EditorEvents } from "@tiptap/core";
 import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
 
 import menuIcon from "../../../assets/icons/menu.svg";
-import { ScrollableDiv } from "./ScrollableDiv";
+import { ScrollableDiv } from "./ScrollableDiv.ts";
 
 import { FontSizeIncrease } from "../common/FontSizeIncrease.ts";
 import { FontSizeDecrease } from "../common/FontSizeDecrease.ts";
@@ -46,7 +46,8 @@ import { BlockQuote } from "./base/BlockQuote.ts";
 import { CodeBlock } from "./base/CodeBlock.ts";
 import { Print } from "./base/Print.ts";
 
-import { Link } from "./insert/Link";
+import { Link } from "./insert/Link.ts";
+import { Image } from "./insert/Image.ts";
 
 /**
  * 传统菜单栏
@@ -105,6 +106,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
 
     // 插入菜单
     insertMenuLink!: Link;
+    insertMenuImage!: Image;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -277,6 +279,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
 
         this.insertMenuLink = new Link({ menuType: "button", enable: true, header: "classic", hideText: false });
         this.eventComponents.push(this.insertMenuLink);
+
+        this.insertMenuImage = new Image({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.insertMenuImage);
     }
     /**
      * 创建基础菜单
@@ -355,5 +360,6 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         group1.classList.add("uai-classic-virtual-group");
         this.classicMenuInsertGroup.appendChild(group1);
         group1.appendChild(this.insertMenuLink);
+        group1.appendChild(this.insertMenuImage);
     }
 }

src/components/menus/toolbar/Ribbon.ts

@@ -5,7 +5,7 @@ import { EditorEvents } from "@tiptap/core";
 import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
 
 import { t } from "i18next";
-import { ScrollableDiv } from "./ScrollableDiv";
+import { ScrollableDiv } from "./ScrollableDiv.ts";
 import { Icons } from "../../Icons.ts";
 
 import { FontSizeIncrease } from "../common/FontSizeIncrease.ts";
@@ -48,7 +48,8 @@ import { CodeBlock } from "./base/CodeBlock.ts";
 
 import { Print } from "./base/Print.ts";
 
-import { Link } from "./insert/Link";
+import { Link } from "./insert/Link.ts";
+import { Image } from "./insert/Image.ts";
 
 /**
  * 经典菜单栏
@@ -108,6 +109,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
 
     // 插入菜单
     insertMenuLink!: Link;
+    insertMenuImage!: Image;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -300,6 +302,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
 
         this.insertMenuLink = new Link({ menuType: "button", enable: true, huge: true });
         this.eventComponents.push(this.insertMenuLink);
+
+        this.insertMenuImage = new Image({ menuType: "button", enable: true, huge: true });
+        this.eventComponents.push(this.insertMenuImage);
     }
 
     /**
@@ -452,5 +457,6 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         group1.classList.add("uai-ribbon-virtual-group");
         this.ribbonMenuInsertGroup.appendChild(group1);
         group1.appendChild(this.insertMenuLink);
+        group1.appendChild(this.insertMenuImage);
     }
 }

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

@@ -0,0 +1,91 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/image.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 插入菜单：插入图片
+ */
+export class Image extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: false,
+        text: t('insert.image'),
+        tooltip: t('insert.image'),
+    }
+
+    // 功能按钮
+    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 = "image/*";
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        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()
+                // this.fileInput.click();
+            }
+        })
+    }
+
+    /**
+     * 定义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);
+    }
+}
+