From 66969925ac5193b5a2b0e227df247052cf79364f Mon Sep 17 00:00:00 2001
From: Hufe921 <huangyunfeihufe@hotmail.com>
Date: Wed, 17 Apr 2024 22:11:47 +0800
Subject: [PATCH] feat: add srcdoc property to IFrameBlock element #454

---
 .vscode/settings.json                         |  1 +
 docs/en/guide/schema.md                       |  3 ++-
 docs/guide/schema.md                          |  3 ++-
 .../particle/block/modules/IFrameBlock.ts     |  6 ++++-
 src/editor/interface/Block.ts                 |  3 ++-
 src/main.ts                                   | 27 +++++++++++++------
 6 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 213b9d5..09ddb03 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -22,6 +22,7 @@
     "richtext",
     "rowmargin",
     "rowspan",
+    "srcdoc",
     "TEXTLIKE",
     "trlist",
     "updown",
diff --git a/docs/en/guide/schema.md b/docs/en/guide/schema.md
index 3c8169b..65950c6 100644
--- a/docs/en/guide/schema.md
+++ b/docs/en/guide/schema.md
@@ -139,7 +139,8 @@ interface IElement {
       VIDEO = 'video'
     };
     iframeBlock?: {
-      src: string;
+      src?: string;
+      srcdoc?: string;
     };
     videoBlock?: {
       src: string;
diff --git a/docs/guide/schema.md b/docs/guide/schema.md
index e8f4eb2..097c120 100644
--- a/docs/guide/schema.md
+++ b/docs/guide/schema.md
@@ -139,7 +139,8 @@ interface IElement {
       VIDEO = 'video'
     };
     iframeBlock?: {
-      src: string;
+      src?: string;
+      srcdoc?: string;
     };
     videoBlock?: {
       src: string;
diff --git a/src/editor/core/draw/particle/block/modules/IFrameBlock.ts b/src/editor/core/draw/particle/block/modules/IFrameBlock.ts
index 9fd58cb..c5c90aa 100644
--- a/src/editor/core/draw/particle/block/modules/IFrameBlock.ts
+++ b/src/editor/core/draw/particle/block/modules/IFrameBlock.ts
@@ -20,7 +20,11 @@ export class IFrameBlock {
     iframe.style.border = 'none'
     iframe.style.width = '100%'
     iframe.style.height = '100%'
-    iframe.src = block.iframeBlock?.src || ''
+    if (block.iframeBlock?.src) {
+      iframe.src = block.iframeBlock.src
+    } else if (block.iframeBlock?.srcdoc) {
+      iframe.srcdoc = block.iframeBlock.srcdoc
+    }
     blockItemContainer.append(iframe)
   }
 }
diff --git a/src/editor/interface/Block.ts b/src/editor/interface/Block.ts
index 603fa21..4145728 100644
--- a/src/editor/interface/Block.ts
+++ b/src/editor/interface/Block.ts
@@ -1,7 +1,8 @@
 import { BlockType } from '../dataset/enum/Block'
 
 export interface IIFrameBlock {
-  src: string
+  src?: string
+  srcdoc?: string
 }
 
 export interface IVideoBlock {
diff --git a/src/main.ts b/src/main.ts
index cebac5a..072bb98 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -900,32 +900,43 @@ window.onload = function () {
           placeholder: '请输入高度'
         },
         {
-          type: 'textarea',
+          type: 'input',
           label: '地址',
-          height: 100,
-          name: 'value',
-          required: true,
+          name: 'src',
+          required: false,
           placeholder: '请输入地址'
+        },
+        {
+          type: 'textarea',
+          label: 'HTML',
+          height: 100,
+          name: 'srcdoc',
+          required: false,
+          placeholder: '请输入HTML代码（仅网址类型有效）'
         }
       ],
       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
         const height = payload.find(p => p.name === 'height')?.value
         if (!height) return
+        // 地址或HTML代码至少存在一项
+        const src = payload.find(p => p.name === 'src')?.value
+        const srcdoc = payload.find(p => p.name === 'srcdoc')?.value
         const block: IBlock = {
           type: <BlockType>type
         }
         if (block.type === BlockType.IFRAME) {
+          if (!src && !srcdoc) return
           block.iframeBlock = {
-            src: value
+            src,
+            srcdoc
           }
         } else if (block.type === BlockType.VIDEO) {
+          if (!src) return
           block.videoBlock = {
-            src: value
+            src
           }
         }
         const blockElement: IElement = {