feat: convert block elements to html #984

Co-authored-by: Hufe921 <[email protected]>
Hufe921 · Feb 8, 2025 · b77fd96 · b77fd96
1 parent c0d49a4
commit b77fd96
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 2 deletions.
diff --git a/src/editor/core/draw/particle/block/modules/IFrameBlock.ts b/src/editor/core/draw/particle/block/modules/IFrameBlock.ts
@@ -1,7 +1,7 @@
 import { IRowElement } from '../../../../../interface/Row'
 
 export class IFrameBlock {
-  private static readonly sandbox = ['allow-scripts', 'allow-same-origin']
+  public static readonly sandbox = ['allow-scripts', 'allow-same-origin']
   private element: IRowElement
 
   constructor(element: IRowElement) {

diff --git a/src/editor/core/draw/particle/block/modules/VideoBlock.ts b/src/editor/core/draw/particle/block/modules/VideoBlock.ts
@@ -15,7 +15,6 @@ export class VideoBlock {
     video.style.objectFit = 'contain'
     video.src = block.videoBlock?.src || ''
     video.controls = true
-    video.crossOrigin = 'anonymous'
     blockItemContainer.append(video)
   }
 }
diff --git a/src/editor/utils/element.ts b/src/editor/utils/element.ts
@@ -9,6 +9,7 @@ import {
   splitText
 } from '.'
 import {
+  BlockType,
   EditorMode,
   ElementType,
   IEditorOption,
@@ -21,6 +22,7 @@ import {
   TableBorder,
   TdBorder
 } from '..'
+import { IFrameBlock } from '../core/draw/particle/block/modules/IFrameBlock'
 import { LaTexParticle } from '../core/draw/particle/latex/LaTexParticle'
 import { NON_BREAKING_SPACE, ZERO } from '../dataset/constant/Common'
 import {
@@ -1249,6 +1251,37 @@ export function createDomFromElementList(
           img.height = element.height!
         }
         clipboardDom.append(img)
+      } else if (element.type === ElementType.BLOCK) {
+        if (element.block?.type === BlockType.VIDEO) {
+          const src = element.block.videoBlock?.src
+          if (src) {
+            const video = document.createElement('video')
+            video.style.display = 'block'
+            video.controls = true
+            video.src = src
+            video.width = element.width! || options?.width || window.innerWidth
+            video.height = element.height!
+            clipboardDom.append(video)
+          }
+        } else if (element.block?.type === BlockType.IFRAME) {
+          const { src, srcdoc } = element.block.iframeBlock || {}
+          if (src || srcdoc) {
+            const iframe = document.createElement('iframe')
+            iframe.sandbox.add(...IFrameBlock.sandbox)
+            iframe.style.display = 'block'
+            iframe.style.border = 'none'
+            if (src) {
+              iframe.src = src
+            } else if (srcdoc) {
+              iframe.srcdoc = srcdoc
+            }
+            iframe.width = `${
+              element.width || options?.width || window.innerWidth
+            }`
+            iframe.height = `${element.height!}`
+            clipboardDom.append(iframe)
+          }
+        }
       } else if (element.type === ElementType.SEPARATOR) {
         const hr = document.createElement('hr')
         clipboardDom.append(hr)
@@ -1483,6 +1516,39 @@ export function getElementListByHTML(
               type: ElementType.IMAGE
             })
           }
+        } else if (node.nodeName === 'VIDEO') {
+          const { src, width, height } = node as HTMLVideoElement
+          if (src && width && height) {
+            elementList.push({
+              value: '',
+              type: ElementType.BLOCK,
+              block: {
+                type: BlockType.VIDEO,
+                videoBlock: {
+                  src
+                }
+              },
+              width,
+              height
+            })
+          }
+        } else if (node.nodeName === 'IFRAME') {
+          const { src, srcdoc, width, height } = node as HTMLIFrameElement
+          if ((src || srcdoc) && width && height) {
+            elementList.push({
+              value: '',
+              type: ElementType.BLOCK,
+              block: {
+                type: BlockType.IFRAME,
+                iframeBlock: {
+                  src,
+                  srcdoc
+                }
+              },
+              width: parseInt(width),
+              height: parseInt(height)
+            })
+          }
         } else if (node.nodeName === 'TABLE') {
           const tableElement = node as HTMLTableElement
           const element: IElement = {