添加插入音频菜单

src/components/index.ts

@@ -54,6 +54,7 @@ import { Print } from "./menus/toolbar/base/Print.ts";
 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";
 
 // 注册组件
 defineCustomElement('uai-editor-header', Header);
@@ -109,3 +110,4 @@ defineCustomElement('uai-editor-base-menu-print', Print);
 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);

src/components/menus/toolbar/Classic.ts

@@ -49,6 +49,7 @@ import { Print } from "./base/Print.ts";
 import { Link } from "./insert/Link.ts";
 import { Image } from "./insert/Image.ts";
 import { Video } from "./insert/Video.ts";
+import { Audio } from "./insert/Audio.ts";
 
 /**
  * 传统菜单栏
@@ -109,6 +110,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
     insertMenuLink!: Link;
     insertMenuImage!: Image;
     insertMenuVideo!: Video;
+    insertMenuAudio!: Audio;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -287,6 +289,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
 
         this.insertMenuVideo = new Video({ menuType: "button", enable: true, header: "classic", hideText: false });
         this.eventComponents.push(this.insertMenuVideo);
+
+        this.insertMenuAudio = new Audio({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.insertMenuAudio);
     }
     /**
      * 创建基础菜单
@@ -367,5 +372,6 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         group1.appendChild(this.insertMenuLink);
         group1.appendChild(this.insertMenuImage);
         group1.appendChild(this.insertMenuVideo);
+        group1.appendChild(this.insertMenuAudio);
     }
 }

src/components/menus/toolbar/Ribbon.ts

@@ -51,6 +51,7 @@ import { Print } from "./base/Print.ts";
 import { Link } from "./insert/Link.ts";
 import { Image } from "./insert/Image.ts";
 import { Video } from "./insert/Video.ts";
+import { Audio } from "./insert/Audio.ts";
 
 /**
  * 经典菜单栏
@@ -112,6 +113,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
     insertMenuLink!: Link;
     insertMenuImage!: Image;
     insertMenuVideo!: Video;
+    insertMenuAudio!: Audio;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -310,6 +312,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
 
         this.insertMenuVideo = new Video({ menuType: "button", enable: true, huge: true });
         this.eventComponents.push(this.insertMenuVideo);
+
+        this.insertMenuAudio = new Audio({ menuType: "button", enable: true, huge: true });
+        this.eventComponents.push(this.insertMenuAudio);
     }
 
     /**
@@ -464,5 +469,6 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         group1.appendChild(this.insertMenuLink);
         group1.appendChild(this.insertMenuImage);
         group1.appendChild(this.insertMenuVideo);
+        group1.appendChild(this.insertMenuAudio);
     }
 }

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

@@ -0,0 +1,72 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/audio.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 插入菜单：插入音频
+ */
+export class Audio extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: false,
+        text: t('insert.audio'),
+        tooltip: t('insert.audio'),
+    }
+
+    // 功能按钮
+    menuButton: MenuButton;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.menuButton = new MenuButton(this.menuButtonOptions);
+    }
+
+    /**
+     * 定义创建方法
+     * @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('audio', true).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/core/UAIEditor.ts

@@ -94,6 +94,12 @@ export type UAIEditorOptions = {
         uploadFormName?: string,
         uploader?: Uploader,
     },
+    audio?: {
+        uploadUrl?: string,
+        uploadHeaders?: (() => Record<string, any>) | Record<string, any>,
+        uploadFormName?: string,
+        uploader?: Uploader,
+    },
 }
 
 /**

src/core/UAIExtensions.ts

@@ -26,6 +26,7 @@ import NodeAlign from "../extensions/NodeAlign.ts";
 import OrderedList from "../extensions/OrderedList.ts";
 import SelectFile from "../extensions/SelectFile.ts";
 import Video from "../extensions/Video.ts";
+import Audio from "../extensions/Audio.ts";
 
 /**
  * 定义编辑器的所有自定义扩展组件
@@ -39,6 +40,7 @@ export const allExtensions = (uaiEditor: UAIEditor, _options: UAIEditorOptions):
             bulletList: false,
             orderedList: false,
         }),
+        Audio,
         BulletList,
         Color,
         FontFamily,

src/extensions/Audio.ts

@@ -0,0 +1,85 @@
+// Copyright (c) 2024-present AI-Labs
+
+import { mergeAttributes, Node } from '@tiptap/core'
+import { resize } from '../utils/resize.ts'
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        setAudio: {
+            setAudio: (options: any) => ReturnType
+        }
+    }
+}
+export default Node.create({
+    name: 'audio',
+    group: 'block',
+    atom: true,
+    addAttributes() {
+        return {
+            vnode: {
+                default: true,
+            },
+            id: {
+                default: null,
+            },
+            file: {
+                default: null,
+            },
+            name: {
+                default: null,
+            },
+            size: {
+                default: null,
+            },
+            src: {
+                default: null,
+            },
+            controls: {
+                default: true,
+            },
+            uploaded: {
+                default: false,
+            },
+            previewType: {
+                default: 'audio',
+            },
+        }
+    },
+    parseHTML() {
+        return [{ tag: 'audio' }]
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['audio', mergeAttributes(HTMLAttributes)]
+    },
+    addCommands() {
+        return {
+            setAudio:
+                (options) =>
+                    ({ commands, editor }) => {
+                        return commands.insertContentAt(editor.state.selection.anchor, {
+                            type: this.name,
+                            attrs: options,
+                        })
+                    },
+        }
+    },
+    addNodeView() {
+        return (props) => {
+            const container = document.createElement('div');
+            const { nodeAlign, src } = props.node.attrs;
+            container.classList.add(`uai-node-view`);
+            container.style.justifyContent = nodeAlign;
+            container.innerHTML = `
+        <div class="uai-resize-wrapper">
+          <div class="uai-resize">
+          </div>
+          <audio src="${src}" controls="true"></audio>
+        </div>
+      `
+            resize(container, this.editor.view.dom, (attrs) => this.editor.commands.updateAttributes("audio", attrs));
+            return {
+                dom: container
+            }
+        }
+    },
+})

src/extensions/SelectFile.ts

@@ -55,6 +55,7 @@ const mimeTypes: any = {
         'image/apng',
     ],
     video: ['video/mp4', 'video/webm', 'video/ogg'],
+    audio: ['audio/mp3', 'audio/wav', 'audio/ogg', 'audio/aac', 'audio/flac'],
 }
 
 /**
@@ -193,6 +194,26 @@ export default Node.create<SelectFileOptions>({
                                     });
                                 });
                         }
+                        // 音频
+                        if (type.startsWith('audio/') && mimeTypes.audio.includes(type)) {
+                            previewType = 'audio';
+                            uploader = editorOptions.audio?.uploader ?? Base64Uploader;
+                            uploader(file, editorOptions.audio?.uploadUrl, editorOptions.audio?.uploadHeaders, editorOptions.audio?.uploadFormName || "audio")
+                                .then(json => {
+                                    view.dispatch(tr.setMeta(actionKey, { type: "remove", id }));
+                                    this.editor.commands.insertContentAt(tr.selection.from, {
+                                        type: autoType ? (previewType ?? 'file') : 'file',
+                                        attrs: {
+                                            [previewType === 'file' ? 'url' : 'src']: json.data.src,
+                                            name,
+                                            type,
+                                            size,
+                                            file,
+                                            previewType,
+                                        },
+                                    });
+                                });
+                        }
                         return true;
                     },
             selectFiles: