添加插入视频菜单

src/components/index.ts

@@ -53,6 +53,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";
 
 // 注册组件
 defineCustomElement('uai-editor-header', Header);
@@ -107,3 +108,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);

src/components/menus/toolbar/Classic.ts

@@ -48,6 +48,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";
 
 /**
  * 传统菜单栏
@@ -107,6 +108,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
     // 插入菜单
     insertMenuLink!: Link;
     insertMenuImage!: Image;
+    insertMenuVideo!: Video;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -282,6 +284,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
 
         this.insertMenuImage = new Image({ menuType: "button", enable: true, header: "classic", hideText: false });
         this.eventComponents.push(this.insertMenuImage);
+
+        this.insertMenuVideo = new Video({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.insertMenuVideo);
     }
     /**
      * 创建基础菜单
@@ -361,5 +366,6 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         this.classicMenuInsertGroup.appendChild(group1);
         group1.appendChild(this.insertMenuLink);
         group1.appendChild(this.insertMenuImage);
+        group1.appendChild(this.insertMenuVideo);
     }
 }

src/components/menus/toolbar/Ribbon.ts

@@ -50,6 +50,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";
 
 /**
  * 经典菜单栏
@@ -110,6 +111,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
     // 插入菜单
     insertMenuLink!: Link;
     insertMenuImage!: Image;
+    insertMenuVideo!: Video;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -305,6 +307,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
 
         this.insertMenuImage = new Image({ menuType: "button", enable: true, huge: true });
         this.eventComponents.push(this.insertMenuImage);
+
+        this.insertMenuVideo = new Video({ menuType: "button", enable: true, huge: true });
+        this.eventComponents.push(this.insertMenuVideo);
     }
 
     /**
@@ -458,5 +463,6 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         this.ribbonMenuInsertGroup.appendChild(group1);
         group1.appendChild(this.insertMenuLink);
         group1.appendChild(this.insertMenuImage);
+        group1.appendChild(this.insertMenuVideo);
     }
 }

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

@@ -0,0 +1,72 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/video.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 插入菜单：插入视频
+ */
+export class Video extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: false,
+        text: t('insert.video'),
+        tooltip: t('insert.video'),
+    }
+
+    // 功能按钮
+    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('video', 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

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

src/core/UAIExtensions.ts

@@ -25,6 +25,7 @@ import LineHeight from "../extensions/LineHeight.ts"
 import NodeAlign from "../extensions/NodeAlign.ts";
 import OrderedList from "../extensions/OrderedList.ts";
 import SelectFile from "../extensions/SelectFile.ts";
+import Video from "../extensions/Video.ts";
 
 /**
  * 定义编辑器的所有自定义扩展组件
@@ -67,6 +68,7 @@ export const allExtensions = (uaiEditor: UAIEditor, _options: UAIEditorOptions):
         }),
         TextStyle,
         Underline,
+        Video,
     ];
 
     return extensions;

src/extensions/SelectFile.ts

@@ -54,6 +54,7 @@ const mimeTypes: any = {
         'image/svg+xml',
         'image/apng',
     ],
+    video: ['video/mp4', 'video/webm', 'video/ogg'],
 }
 
 /**
@@ -171,6 +172,27 @@ export default Node.create<SelectFileOptions>({
                                     });
                                 });
                         }
+                        // 视频
+                        if (type.startsWith('video/') && mimeTypes.video.includes(type)) {
+                            previewType = 'video';
+
+                            uploader = editorOptions.video?.uploader ?? Base64Uploader;
+                            uploader(file, editorOptions.video?.uploadUrl, editorOptions.video?.uploadHeaders, editorOptions.video?.uploadFormName || "video")
+                                .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:

src/extensions/Video.ts

@@ -0,0 +1,116 @@
+// Copyright (c) 2024-present AI-Labs
+
+import { mergeAttributes, Node } from '@tiptap/core'
+import { resize } from '../utils/resize'
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        setVideo: {
+            /**
+             * 设置视频
+             * @param options 
+             * @returns 
+             */
+            setVideo: (options: any) => ReturnType
+        }
+    }
+}
+export default Node.create({
+    name: 'video',
+    group: 'block',
+    atom: true,
+    addAttributes() {
+        return {
+            vnode: {
+                default: true,
+            },
+            id: {
+                default: null,
+            },
+            file: {
+                default: null,
+            },
+            name: {
+                default: null,
+            },
+            size: {
+                default: null,
+            },
+            src: {
+                default: null,
+            },
+            width: {
+                default: '500px',
+            },
+            height: {
+                default: 'auto',
+            },
+            controls: {
+                default: true,
+            },
+            draggable: {
+                default: false,
+            },
+            uploaded: {
+                default: false,
+            },
+            previewType: {
+                default: 'video',
+            },
+        }
+    },
+    parseHTML() {
+        return [{ tag: 'video' }]
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['video', mergeAttributes(HTMLAttributes)]
+    },
+    addCommands() {
+        return {
+            setVideo:
+                (options) =>
+                    ({ commands, editor }) => {
+                        return commands.insertContentAt(editor.state.selection.anchor, {
+                            type: this.name,
+                            attrs: options,
+                        })
+                    },
+        }
+    },
+    addNodeView() {
+        return (props) => {
+            const container = document.createElement('div');
+            const { src, width, nodeAlign } = props.node.attrs;
+            container.classList.add(`uai-node-view`);
+            container.style.justifyContent = nodeAlign;
+
+            if (!this.editor.isEditable) {
+                return {
+                    dom: container
+                }
+            }
+
+            container.innerHTML = `
+        <div class="uai-resize-wrapper">
+            <div class="uai-resize">
+              <div class="uai-resize-btn-top-left" data-position="1" draggable="true"></div>
+              <div class="uai-resize-btn-top-center" data-position="2" draggable="true"></div>
+              <div class="uai-resize-btn-top-right" data-position="3" draggable="true"></div>
+              <div class="uai-resize-btn-left-center" data-position="4" draggable="true"></div>
+              <div class="uai-resize-btn-right-center" data-position="5" draggable="true"></div>
+              <div class="uai-resize-btn-bottom-left" data-position="6" draggable="true"></div>
+              <div class="uai-resize-btn-bottom-center" data-position="7" draggable="true"></div>
+              <div class="uai-resize-btn-bottom-right" data-position="8" draggable="true"></div>
+            </div>
+            <video controls="controls" width="${width}" class="resize-obj">
+                <source src="${src}">
+            </video>
+        </div>
+      `
+            resize(container, this.editor.view.dom, (attrs) => this.editor.commands.updateAttributes("video", attrs));
+            return {
+                dom: container,
+            }
+        }
+    },
+})