feat:add video block menu

src/components/dialog/Dialog.ts

@@ -6,6 +6,7 @@ export interface IDialogData {
   label?: string;
   name: string;
   value?: string;
+  options?: { label: string; value: string; }[];
   placeholder?: string;
   width?: number;
   height?: number;
@@ -29,7 +30,7 @@ export class Dialog {
   private options: IDialogOptions
   private mask: HTMLDivElement | null
   private container: HTMLDivElement | null
-  private inputList: (HTMLInputElement | HTMLTextAreaElement)[]
+  private inputList: (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[]
 
   constructor(options: IDialogOptions) {
     this.options = options
@@ -85,8 +86,16 @@ export class Dialog {
         optionItemContainer.append(optionName)
       }
       // 选项输入框
-      let optionInput: HTMLInputElement | HTMLTextAreaElement
-      if (option.type === 'textarea') {
+      let optionInput: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+      if (option.type === 'select') {
+        optionInput = document.createElement('select')
+        option.options?.forEach(item => {
+          const optionItem = document.createElement('option')
+          optionItem.value = item.value
+          optionItem.label = item.label
+          optionInput.append(optionItem)
+        })
+      } else if (option.type === 'textarea') {
         optionInput = document.createElement('textarea')
       } else {
         optionInput = document.createElement('input')
@@ -100,7 +109,9 @@ export class Dialog {
       }
       optionInput.name = option.name
       optionInput.value = option.value || ''
+      if (!(optionInput instanceof HTMLSelectElement)) {
         optionInput.placeholder = option.placeholder || ''
+      }
       optionItemContainer.append(optionInput)
       optionContainer.append(optionItemContainer)
       this.inputList.push(optionInput)

src/components/dialog/dialog.css

@@ -64,7 +64,8 @@
 }
 
 .dialog-option__item input,
-.dialog-option__item textarea {
+.dialog-option__item textarea,
+.dialog-option__item select {
   width: 276px;
   height: 30px;
   border-radius: 2px;

src/editor/index.ts

@@ -27,6 +27,7 @@ import { INavigateInfo } from './core/draw/interactive/Search'
 import { Shortcut } from './core/shortcut/Shortcut'
 import { KeyMap } from './dataset/enum/KeyMap'
 import { BlockType } from './dataset/enum/Block'
+import { IBlock } from './interface/Block'
 
 export default class Editor {
 
@@ -138,5 +139,6 @@ export type {
   IContextMenuContext,
   IRegisterContextMenu,
   IWatermark,
-  INavigateInfo
+  INavigateInfo,
+  IBlock
 }

src/main.ts

@@ -1,7 +1,7 @@
 import { data, options } from './mock'
 import './style.css'
 import prism from 'prismjs'
-import Editor, { BlockType, Command, ControlType, EditorMode, ElementType, IElement, KeyMap, PageMode } from './editor'
+import Editor, { BlockType, Command, ControlType, EditorMode, ElementType, IBlock, IElement, KeyMap, PageMode } from './editor'
 import { Dialog } from './components/dialog/Dialog'
 import { formatPrismToken } from './utils/prism'
 import { Signature } from './components/signature/Signature'
@@ -618,6 +618,18 @@ window.onload = function () {
     new Dialog({
       title: '内容块',
       data: [{
+        type: 'select',
+        label: '类型',
+        name: 'type',
+        value: 'iframe',
+        options: [{
+          label: '网址',
+          value: 'iframe'
+        }, {
+          label: '视频',
+          value: 'video'
+        }]
+      }, {
         type: 'number',
         label: '宽度',
         name: 'width',
@@ -635,23 +647,32 @@ window.onload = function () {
         placeholder: '请输入地址'
       }],
       onConfirm: (payload) => {
+        const type = payload.find(p => p.name === 'type')?.value
+        if (!type) return
         const value = payload.find(p => p.name === 'value')?.value
         if (!value) return
         const width = payload.find(p => p.name === 'width')?.value
         if (!width) return
         const height = payload.find(p => p.name === 'height')?.value
         if (!height) return
+        const block: IBlock = {
+          type: <BlockType>type
+        }
+        if (block.type === BlockType.IFRAME) {
+          block.iframeBlock = {
+            src: value
+          }
+        } else if (block.type === BlockType.VIDEO) {
+          block.videoBlock = {
+            src: value
+          }
+        }
         instance.command.executeInsertElementList([{
           type: ElementType.BLOCK,
           value: '',
           width: Number(width),
           height: Number(height),
-          block: {
-            type: BlockType.IFRAME,
-            iframeBlock: {
-              src: value
-            }
-          }
+          block
         }])
       }
     })