@hufe921/canvas-editor 0.9.128 → 0.9.130

package/CHANGELOG.md

@@ -1,3 +1,51 @@
+## [0.9.130](https://github.com/Hufe921/canvas-editor/compare/v0.9.129...v0.9.130) (2026-03-27)
+
+
+### Bug Fixes
+
+* correct duplicate variable check in TextParticle render ([4b72161](https://github.com/Hufe921/canvas-editor/commit/4b721618d10ef484e92b79f52ea27ee4be316814))
+* ensure trailing line break in element list formatting #1378 ([30074b6](https://github.com/Hufe921/canvas-editor/commit/30074b6b703b3da581c5446a75edb38f4bff56b7)), closes [#1378](https://github.com/Hufe921/canvas-editor/issues/1378)
+* optimize cursor positioning for left/right key handlers #1378 ([a79928f](https://github.com/Hufe921/canvas-editor/commit/a79928fc507cac0302e105110bc31f2baeefb74c)), closes [#1378](https://github.com/Hufe921/canvas-editor/issues/1378)
+* prevent extra line break when list is first element in table #1381 ([bae2394](https://github.com/Hufe921/canvas-editor/commit/bae2394ceffee5e1a5b8f55d5ef8d60f7edc44b9)), closes [#1381](https://github.com/Hufe921/canvas-editor/issues/1381)
+
+
+### Features
+
+* support iframe snapshot in getImage api #1380 ([d980298](https://github.com/Hufe921/canvas-editor/commit/d9802988587333b8b624112f554d2b4e9d702e00)), closes [#1380](https://github.com/Hufe921/canvas-editor/issues/1380)
+
+
+
+## [0.9.129](https://github.com/Hufe921/canvas-editor/compare/v0.9.128...v0.9.129) (2026-03-13)
+
+
+### Bug Fixes
+
+* cursor positioning when pressing home key at line start #1376 ([3158103](https://github.com/Hufe921/canvas-editor/commit/3158103158d9a048b15b796b7dd89488e5ddef7b)), closes [#1376](https://github.com/Hufe921/canvas-editor/issues/1376)
+* disable iframe editing in readonly mode #1373 ([d2b2cf1](https://github.com/Hufe921/canvas-editor/commit/d2b2cf13adb5b545d27f9afc00387a0bb679a26d)), closes [#1373](https://github.com/Hufe921/canvas-editor/issues/1373)
+* iframe block position in print mode #1374 ([bc03f7b](https://github.com/Hufe921/canvas-editor/commit/bc03f7bf1126e8f484ebd6d6433f946efdf2a681)), closes [#1374](https://github.com/Hufe921/canvas-editor/issues/1374)
+* prevent auto-scroll when clicking menu bar #1371 ([ee09e93](https://github.com/Hufe921/canvas-editor/commit/ee09e9362d3034188ab4f5ef468533199df167ff)), closes [#1371](https://github.com/Hufe921/canvas-editor/issues/1371)
+* sync iframe block srcdoc when getValue #1369 ([53400b4](https://github.com/Hufe921/canvas-editor/commit/53400b4a6846b980d3e59385210eec8e768765ab)), closes [#1369](https://github.com/Hufe921/canvas-editor/issues/1369)
+
+
+### Chores
+
+* expose instance for canvas-editor-devtools ([8ea4798](https://github.com/Hufe921/canvas-editor/commit/8ea4798dc5b5c50b268da41dd2c6134787f669b6))
+
+
+### Documentation
+
+* add canvas-editor-devtools documentation ([1cbd9ee](https://github.com/Hufe921/canvas-editor/commit/1cbd9ee9c70c22107ece2dc76667211911b64efb))
+* refactor option.md configuration ([43ec928](https://github.com/Hufe921/canvas-editor/commit/43ec9285d080547cab2d6ec4fcebac46caca38df))
+
+
+### Features
+
+* add executeDeleteArea api #1377 ([10174ec](https://github.com/Hufe921/canvas-editor/commit/10174ecb0f0ade11a01db1b5227dee6a91266d81)), closes [#1377](https://github.com/Hufe921/canvas-editor/issues/1377)
+* improve word count logic to match mainstream word processors #452 ([117b1cb](https://github.com/Hufe921/canvas-editor/commit/117b1cb4ef2e3025464e66c44f398822cb7fbcda)), closes [#452](https://github.com/Hufe921/canvas-editor/issues/452)
+* print support for iframe block #1375 ([dfc3191](https://github.com/Hufe921/canvas-editor/commit/dfc31912173b7b44d2b81145d37080475f6dd9fe)), closes [#1375](https://github.com/Hufe921/canvas-editor/issues/1375)
+
+
+
 ## [0.9.128](https://github.com/Hufe921/canvas-editor/compare/v0.9.127...v0.9.128) (2026-02-28)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.128";
+const version = "0.9.130";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -414,6 +414,14 @@ function isRectIntersect(rect1, rect2) {
 function isNonValue(value) {
   return value === void 0 || value === null;
 }
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+}
 function normalizeLineBreak(text) {
   return text.replace(/\r\n|\r/g, "\n");
 }
@@ -674,7 +682,13 @@ const VIRTUAL_ELEMENT_TYPE = [
 const _IFrameBlock = class {
   constructor(element) {
     __publicField(this, "element");
+    __publicField(this, "iframe", null);
+    __publicField(this, "isReadonly");
     this.element = element;
+    this.isReadonly = false;
+  }
+  getIframe() {
+    return this.iframe;
   }
   _defineIframeProperties(iframeWindow) {
     Object.defineProperties(iframeWindow, {
@@ -702,6 +716,19 @@ const _IFrameBlock = class {
     }
     blockItemContainer.append(iframe);
     this._defineIframeProperties(iframe.contentWindow);
+    this.iframe = iframe;
+  }
+  setReadonly(readonly) {
+    if (!this.iframe || this.isReadonly === readonly)
+      return;
+    this.isReadonly = readonly;
+    if (readonly) {
+      this.iframe.style.pointerEvents = "none";
+      this.iframe.setAttribute("tabindex", "-1");
+    } else {
+      this.iframe.style.pointerEvents = "";
+      this.iframe.removeAttribute("tabindex");
+    }
   }
 };
 let IFrameBlock = _IFrameBlock;
@@ -4424,7 +4451,7 @@ function formatElementList(elementList, options) {
   var _a, _b;
   const { isHandleFirstElement = true, isForceCompensation = false, editorOptions } = options;
   const startElement = elementList[0];
-  if (isForceCompensation || isHandleFirstElement && (startElement == null ? void 0 : startElement.type) !== ElementType.LIST && ((startElement == null ? void 0 : startElement.type) && startElement.type !== ElementType.TEXT || !START_LINE_BREAK_REG.test(startElement == null ? void 0 : startElement.value))) {
+  if ((startElement == null ? void 0 : startElement.type) !== ElementType.LIST && (isForceCompensation || isHandleFirstElement && ((startElement == null ? void 0 : startElement.type) && startElement.type !== ElementType.TEXT || !START_LINE_BREAK_REG.test(startElement == null ? void 0 : startElement.value)))) {
     elementList.unshift({
       value: ZERO
     });
@@ -4479,6 +4506,12 @@ function formatElementList(elementList, options) {
           elementList.splice(i, 0, value);
           i++;
         }
+        if (elementList[i] && !START_LINE_BREAK_REG.test(elementList[i].value)) {
+          elementList.splice(i, 0, {
+            value: ZERO
+          });
+          i++;
+        }
       }
       i--;
     } else if (el.type === ElementType.AREA) {
@@ -6271,12 +6304,14 @@ class Cursor {
     } else {
       this._clearBlinkTimeout();
     }
-    nextTick(() => {
-      this.moveCursorToVisible({
-        cursorPosition,
-        direction: parseInt(oldTop) > cursorTop ? MoveDirection.UP : MoveDirection.DOWN
+    if (isFocus) {
+      nextTick(() => {
+        this.moveCursorToVisible({
+          cursorPosition,
+          direction: parseInt(oldTop) > cursorTop ? MoveDirection.UP : MoveDirection.DOWN
+        });
       });
-    });
+    }
   }
   recoveryCursor() {
     this.cursorDom.style.display = "none";
@@ -7512,6 +7547,20 @@ function left(evt, host) {
     isSubmitHistory: false,
     isCompute: false
   });
+  if (isAnchorCollapsed) {
+    const positionList = position.getPositionList();
+    const anchorPosition = positionList[anchorStartIndex];
+    if ((anchorPosition == null ? void 0 : anchorPosition.isLastLetter) && anchorPosition.value !== ZERO && anchorStartIndex + 1 < positionList.length) {
+      const nextPosition = positionList[anchorStartIndex + 1];
+      const element = newElementList[anchorStartIndex];
+      const nextElement = newElementList[anchorStartIndex + 1];
+      if (nextPosition.value !== ZERO && !getIsBlockElement(nextElement) && element.listId === nextElement.listId) {
+        draw.getCursor().drawCursor({
+          hitLineStartIndex: anchorStartIndex + 1
+        });
+      }
+    }
+  }
   evt.preventDefault();
 }
 function right(evt, host) {
@@ -7656,6 +7705,19 @@ function right(evt, host) {
     isSubmitHistory: false,
     isCompute: false
   });
+  if (isAnchorCollapsed) {
+    const anchorPosition = positionList[anchorStartIndex];
+    if ((anchorPosition == null ? void 0 : anchorPosition.isLastLetter) && anchorPosition.value !== ZERO && anchorStartIndex + 1 < positionList.length) {
+      const nextPosition = positionList[anchorStartIndex + 1];
+      const element = elementList[anchorStartIndex];
+      const nextElement = elementList[anchorStartIndex + 1];
+      if (nextPosition.value !== ZERO && !getIsBlockElement(nextElement) && element.listId === nextElement.listId) {
+        draw.getCursor().drawCursor({
+          hitLineStartIndex: anchorStartIndex + 1
+        });
+      }
+    }
+  }
   evt.preventDefault();
 }
 function tab(evt, host) {
@@ -8000,6 +8062,10 @@ function home(evt, host) {
       break;
     lineStartIndex = i;
   }
+  const isNonZero = positionList[lineStartIndex].value !== ZERO;
+  if (isNonZero) {
+    lineStartIndex--;
+  }
   let anchorStart = lineStartIndex;
   let anchorEnd = lineStartIndex;
   if (evt.shiftKey) {
@@ -8027,6 +8093,11 @@ function home(evt, host) {
     isSubmitHistory: false,
     isCompute: false
   });
+  if (isNonZero) {
+    draw.getCursor().drawCursor({
+      hitLineStartIndex: lineStartIndex + 1
+    });
+  }
   evt.preventDefault();
 }
 function end(evt, host) {
@@ -8048,7 +8119,11 @@ function end(evt, host) {
       anchorPosition = positionList[startIndex];
     }
   }
-  const { rowNo } = anchorPosition;
+  let { rowNo } = anchorPosition;
+  const hitLineStartIndex = draw.getCursor().getHitLineStartIndex();
+  if (hitLineStartIndex !== void 0) {
+    rowNo++;
+  }
   let lineEndIndex = anchorPosition.index;
   for (let i = anchorPosition.index + 1; i < positionList.length; i++) {
     if (positionList[i].rowNo !== rowNo)
@@ -10939,7 +11014,7 @@ class TextParticle {
     this.curY = y;
   }
   _render() {
-    if (!this.text || !~this.curX || !~this.curX)
+    if (!this.text || !~this.curX || !~this.curY)
       return;
     this.ctx.save();
     this.ctx.font = this.curStyle;
@@ -15619,7 +15694,7 @@ class RadioParticle {
     ctx.restore();
   }
 }
-const encodedJs$3 = "KCgpPT57KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO3ZhciBhOyhmdW5jdGlvbihlKXtlLlRFWFQ9InRleHQiLGUuVEFCTEU9InRhYmxlIixlLkhZUEVSTElOSz0iaHlwZXJsaW5rIixlLkNPTlRST0w9ImNvbnRyb2wifSkoYXx8KGE9e30pKTt2YXIgcDsoZnVuY3Rpb24oZSl7ZS5WQUxVRT0idmFsdWUifSkocHx8KHA9e30pKTtjb25zdCBoPSJcdTIwMEIiLGQ9YApgO2Z1bmN0aW9uIHUoZSl7dmFyIGMsZjtsZXQgcj0iIixuPTA7Zm9yKDtuPGUubGVuZ3RoOyl7Y29uc3QgdD1lW25dO2lmKHQudHlwZT09PWEuVEFCTEUpe2lmKHQudHJMaXN0KWZvcihsZXQgbD0wO2w8dC50ckxpc3QubGVuZ3RoO2wrKyl7Y29uc3Qgcz10LnRyTGlzdFtsXTtmb3IobGV0IG89MDtvPHMudGRMaXN0Lmxlbmd0aDtvKyspe2NvbnN0IGk9cy50ZExpc3Rbb107cis9dShpLnZhbHVlKX19fWVsc2UgaWYodC50eXBlPT09YS5IWVBFUkxJTkspe2NvbnN0IGw9dC5oeXBlcmxpbmtJZCxzPVtdO2Zvcig7bjxlLmxlbmd0aDspe2NvbnN0IG89ZVtuXTtpZihsIT09by5oeXBlcmxpbmtJZCl7bi0tO2JyZWFrfWRlbGV0ZSBvLnR5cGUscy5wdXNoKG8pLG4rK31yKz11KHMpfWVsc2UgaWYodC5jb250cm9sSWQpe2lmKCEoKGM9dC5jb250cm9sKT09bnVsbD92b2lkIDA6Yy5oaWRlKSl7Y29uc3QgbD10LmNvbnRyb2xJZCxzPVtdO2Zvcig7bjxlLmxlbmd0aDspe2NvbnN0IG89ZVtuXTtpZihsIT09by5jb250cm9sSWQpe24tLTticmVha31vLmNvbnRyb2xDb21wb25lbnQ9PT1wLlZBTFVFJiYoZGVsZXRlIG8uY29udHJvbElkLHMucHVzaChvKSksbisrfXIrPXUocyl9fWVsc2UoIXQudHlwZXx8dC50eXBlPT09YS5URVhUKSYmISgoZj10LmFyZWEpPT1udWxsP3ZvaWQgMDpmLmhpZGUpJiYocis9dC52YWx1ZSk7bisrfXJldHVybiByfWZ1bmN0aW9uIGcoZSl7Y29uc3Qgcj1bXSxuPS9bMC05XS8sYz0vW0EtWmEtel0vLGY9L1xzLztsZXQgdD0hMSxsPSExLHM9IiI7ZnVuY3Rpb24gbygpe3MmJihyLnB1c2gocykscz0iIil9Zm9yKGNvbnN0IGkgb2YgZSljLnRlc3QoaSk/KHR8fG8oKSxzKz1pLHQ9ITAsbD0hMSk6bi50ZXN0KGkpPyhsfHxvKCkscys9aSx0PSExLGw9ITApOihvKCksdD0hMSxsPSExLGYudGVzdChpKXx8ci5wdXNoKGkpKTtyZXR1cm4gbygpLHJ9b25tZXNzYWdlPWU9Pntjb25zdCByPWUuZGF0YSxjPXUocikucmVwbGFjZShuZXcgUmVnRXhwKGBeJHtofWApLCIiKS5yZXBsYWNlKG5ldyBSZWdFeHAoaCwiZyIpLGQpLGY9ZyhjKTtwb3N0TWVzc2FnZShmLmxlbmd0aCl9fSkoKTt9KSgpOwo=";
+const encodedJs$3 = "KCgpPT57KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO3ZhciB1OyhmdW5jdGlvbihuKXtuLlRFWFQ9InRleHQiLG4uVEFCTEU9InRhYmxlIixuLkhZUEVSTElOSz0iaHlwZXJsaW5rIixuLkNPTlRST0w9ImNvbnRyb2wiLG4uTEFURVg9ImxhdGV4In0pKHV8fCh1PXt9KSk7dmFyIGg7KGZ1bmN0aW9uKG4pe24uVkFMVUU9InZhbHVlIn0pKGh8fChoPXt9KSk7Y29uc3QgcD0iXHUyMDBCIixnPWAKYDtmdW5jdGlvbiBjKG4pe3ZhciBsLGY7bGV0IHM9IiIscj0wO2Zvcig7cjxuLmxlbmd0aDspe2NvbnN0IGU9bltyXTtpZihlLnR5cGU9PT11LlRBQkxFKXtpZihlLnRyTGlzdClmb3IobGV0IG89MDtvPGUudHJMaXN0Lmxlbmd0aDtvKyspe2NvbnN0IGk9ZS50ckxpc3Rbb107Zm9yKGxldCB0PTA7dDxpLnRkTGlzdC5sZW5ndGg7dCsrKXtjb25zdCBhPWkudGRMaXN0W3RdO3MrPWMoYS52YWx1ZSl9fX1lbHNlIGlmKGUudHlwZT09PXUuSFlQRVJMSU5LKXtjb25zdCBvPWUuaHlwZXJsaW5rSWQsaT1bXTtmb3IoO3I8bi5sZW5ndGg7KXtjb25zdCB0PW5bcl07aWYobyE9PXQuaHlwZXJsaW5rSWQpe3ItLTticmVha31kZWxldGUgdC50eXBlLGkucHVzaCh0KSxyKyt9cys9YyhpKX1lbHNlIGlmKGUudHlwZT09PXUuTEFURVgpcys9ZS52YWx1ZTtlbHNlIGlmKGUuY29udHJvbElkKXtpZighKChsPWUuY29udHJvbCk9PW51bGw/dm9pZCAwOmwuaGlkZSkpe2NvbnN0IG89ZS5jb250cm9sSWQsaT1bXTtmb3IoO3I8bi5sZW5ndGg7KXtjb25zdCB0PW5bcl07aWYobyE9PXQuY29udHJvbElkKXtyLS07YnJlYWt9dC5jb250cm9sQ29tcG9uZW50PT09aC5WQUxVRSYmKGRlbGV0ZSB0LmNvbnRyb2xJZCxpLnB1c2godCkpLHIrK31zKz1jKGkpfX1lbHNlKCFlLnR5cGV8fGUudHlwZT09PXUuVEVYVCkmJiEoKGY9ZS5hcmVhKT09bnVsbD92b2lkIDA6Zi5oaWRlKSYmKHMrPWUudmFsdWUpO3IrK31yZXR1cm4gc31mdW5jdGlvbiBMKG4pe2NvbnN0IHM9W107bGV0IHI9IiI7Y29uc3QgbD0oKT0+e3ImJihzLnB1c2gocikscj0iIil9LGY9dD0+dDw9MzJ8fHQ9PT0xNjB8fHQ+PTgxOTImJnQ8PTgyMDJ8fHQ9PT04MjM5fHx0PT09MTIyODh8fHQ+PTgyMDMmJnQ8PTgyMDd8fHQ+PTgyMzQmJnQ8PTgyMzh8fHQ9PT04Mjg4fHx0PT09NjUyNzksZT10PT50Pj00OCYmdDw9NTd8fHQ+PTY1JiZ0PD05MHx8dD49OTcmJnQ8PTEyMixvPXQ9PnQ+PTMzJiZ0PD00N3x8dD49NTgmJnQ8PTY0fHx0Pj05MSYmdDw9OTZ8fHQ+PTEyMyYmdDw9MTI2LGk9dD0+dD09PTEyM3x8dD09PTEyNTtmb3IoY29uc3QgdCBvZiBuKXtjb25zdCBhPXQuY2hhckNvZGVBdCgwKTtpZihmKGEpKXtsKCk7Y29udGludWV9aWYoZShhKXx8aShhKXx8byhhKSl7cis9dDtjb250aW51ZX1sKCkscy5wdXNoKHQpfXJldHVybiBsKCksc31vbm1lc3NhZ2U9bj0+e2NvbnN0IHM9bi5kYXRhLGw9YyhzKS5yZXBsYWNlKG5ldyBSZWdFeHAoYF4ke3B9YCksIiIpLnJlcGxhY2UobmV3IFJlZ0V4cChwLCJnIiksZyksZj1MKGwpO3Bvc3RNZXNzYWdlKGYubGVuZ3RoKX19KSgpO30pKCk7Cg==";
 const blob$3 = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs$3)], { type: "text/javascript;charset=utf-8" });
 function WorkerWrapper$3() {
   const objURL = blob$3 && (window.URL || window.webkitURL).createObjectURL(blob$3);
@@ -16333,6 +16408,7 @@ class BaseBlock {
     __publicField(this, "block");
     __publicField(this, "blockContainer");
     __publicField(this, "blockItem");
+    __publicField(this, "positionInfo", null);
     __publicField(this, "blockCache");
     __publicField(this, "resizerMask");
     __publicField(this, "resizerSelection");
@@ -16368,6 +16444,12 @@ class BaseBlock {
   getBlockWidth() {
     return this.element.width || this.element.metrics.width;
   }
+  getIFrameBlock() {
+    return this.block instanceof IFrameBlock ? this.block : null;
+  }
+  getPositionInfo() {
+    return this.positionInfo;
+  }
   _createBlockItem() {
     const { scale, resizerColor } = this.options;
     const blockItem = document.createElement("div");
@@ -16518,7 +16600,7 @@ class BaseBlock {
     this.blockItem.style.height = `${elementHeight}px`;
     evt.preventDefault();
   }
-  snapshot(ctx, x, y) {
+  snapshot(ctx, pageNo, x, y) {
     const block = this.element.block;
     if (block.type === BlockType.VIDEO) {
       this.blockItem.style.display = "none";
@@ -16531,6 +16613,8 @@ class BaseBlock {
         this.draw.getImageObserver().add(promise);
         this.blockCache.set(this.element.id, this.block);
       }
+    } else if (block.type === BlockType.IFRAME) {
+      this.setClientRects(pageNo, x, y);
     }
   }
   render() {
@@ -16553,6 +16637,12 @@ class BaseBlock {
     this.blockItem.style.height = `${metrics.height}px`;
     this.blockItem.style.left = `${x}px`;
     this.blockItem.style.top = `${preY + y}px`;
+    this.positionInfo = { pageNo, x, y };
+  }
+  setStatus() {
+    if (this.block instanceof IFrameBlock) {
+      this.block.setReadonly(this.draw.isReadonly());
+    }
   }
   remove() {
     this.blockItem.remove();
@@ -16561,10 +16651,12 @@ class BaseBlock {
 class BlockParticle {
   constructor(draw) {
     __publicField(this, "draw");
+    __publicField(this, "options");
     __publicField(this, "container");
     __publicField(this, "blockContainer");
     __publicField(this, "blockMap");
     this.draw = draw;
+    this.options = draw.getOptions();
     this.container = draw.getContainer();
     this.blockMap = new Map();
     this.blockContainer = this._createBlockContainer();
@@ -16590,10 +16682,11 @@ class BlockParticle {
       this.blockMap.set(id, cacheBlock);
     }
     if (this.draw.isPrintMode()) {
-      cacheBlock.snapshot(ctx, x, y);
+      cacheBlock.snapshot(ctx, pageNo, x, y);
     } else {
       cacheBlock.setClientRects(pageNo, x, y);
     }
+    cacheBlock.setStatus();
   }
   clear() {
     if (!this.blockMap.size)
@@ -16614,6 +16707,66 @@ class BlockParticle {
       }
     });
   }
+  update() {
+    this.blockMap.forEach((baseBlock) => {
+      var _a, _b, _c, _d, _e;
+      const element = baseBlock.getBlockElement();
+      if (((_a = element.block) == null ? void 0 : _a.type) === BlockType.IFRAME && ((_b = element.block.iframeBlock) == null ? void 0 : _b.srcdoc)) {
+        const iframe = (_e = (_d = (_c = baseBlock.getIFrameBlock) == null ? void 0 : _c.call(baseBlock)) == null ? void 0 : _d.getIframe) == null ? void 0 : _e.call(_d);
+        if (iframe == null ? void 0 : iframe.contentDocument) {
+          element.block.iframeBlock.srcdoc = iframe.contentDocument.documentElement.outerHTML;
+        }
+      }
+    });
+  }
+  async drawIframeToPage(pageList, snapDomFunction) {
+    const tasks = [];
+    this.blockMap.forEach((cacheBlock) => {
+      var _a, _b, _c;
+      if (((_a = cacheBlock.getBlockElement().block) == null ? void 0 : _a.type) !== BlockType.IFRAME)
+        return;
+      const positionInfo = cacheBlock.getPositionInfo();
+      if (!positionInfo)
+        return;
+      const iframe = (_b = cacheBlock.getIFrameBlock()) == null ? void 0 : _b.getIframe();
+      if (!iframe)
+        return;
+      const { pageNo, x, y } = positionInfo;
+      const ctx = (_c = pageList[pageNo]) == null ? void 0 : _c.getContext("2d");
+      if (!ctx)
+        return;
+      const { width, height } = cacheBlock.getBlockElement().metrics;
+      tasks.push(snapDomFunction(iframe).then((base64) => loadImage(base64)).then((img) => ctx.drawImage(img, x, y, width, height)));
+    });
+    await Promise.allSettled(tasks);
+  }
+  pickIframeInfo() {
+    const result = [];
+    const { scale } = this.options;
+    this.blockMap.forEach((cacheBlock) => {
+      var _a;
+      const element = cacheBlock.getBlockElement();
+      if (!((_a = element.block) == null ? void 0 : _a.iframeBlock) || element.block.type !== BlockType.IFRAME) {
+        return;
+      }
+      const positionInfo = cacheBlock.getPositionInfo();
+      if (!positionInfo)
+        return;
+      const { pageNo, x, y } = positionInfo;
+      if (!result[pageNo]) {
+        result[pageNo] = [];
+      }
+      result[pageNo].push({
+        x,
+        y,
+        width: element.metrics.width / scale,
+        height: element.metrics.height / scale,
+        src: element.block.iframeBlock.src,
+        srcdoc: element.block.iframeBlock.srcdoc
+      });
+    });
+    return result;
+  }
 }
 const contextmenu$1 = {
   global: {
@@ -18924,6 +19077,22 @@ class Area {
       isSetCursor: false
     });
   }
+  deleteArea(options = {}) {
+    const areaId = options.id || this.getActiveAreaId();
+    if (!areaId)
+      return;
+    const areaInfo = this.areaInfoMap.get(areaId);
+    if (!areaInfo)
+      return;
+    const { positionList } = areaInfo;
+    const elementList = this.draw.getOriginalMainElementList();
+    this.draw.spliceElementList(elementList, positionList[0].index, positionList.length, [], {
+      isIgnoreDeletedRule: true
+    });
+    this.draw.render({
+      isSetCursor: false
+    });
+  }
 }
 class Badge {
   constructor(draw) {
@@ -19724,6 +19893,9 @@ class Draw {
   getTableParticle() {
     return this.tableParticle;
   }
+  getBlockParticle() {
+    return this.blockParticle;
+  }
   getHeader() {
     return this.header;
   }
@@ -19764,7 +19936,7 @@ class Draw {
     return this.getRowList().length;
   }
   async getDataURL(payload = {}) {
-    const { pixelRatio, mode } = payload;
+    const { pixelRatio, mode, snapDomFunction } = payload;
     if (pixelRatio) {
       this.setPagePixelRatio(pixelRatio);
     }
@@ -19780,6 +19952,9 @@ class Draw {
       isSubmitHistory: false
     });
     await this.imageObserver.allSettled();
+    if (snapDomFunction) {
+      await this.blockParticle.drawIframeToPage(this.pageList, snapDomFunction);
+    }
     const dataUrlList = this.pageList.map((c) => c.toDataURL());
     if (pixelRatio) {
       this.setPagePixelRatio(null);
@@ -19953,6 +20128,7 @@ class Draw {
     if (Number.isInteger(pageNo) && pageNo >= 0 && pageNo < this.pageRowList.length) {
       mainElementList = this.pageRowList[pageNo].flatMap((row) => row.elementList);
     }
+    this.blockParticle.update();
     const data2 = {
       header: this.getHeaderElementList(),
       main: mainElementList,
@@ -21248,6 +21424,7 @@ class Command {
     __publicField(this, "executeInsertArea");
     __publicField(this, "executeSetAreaValue");
     __publicField(this, "executeSetAreaProperties");
+    __publicField(this, "executeDeleteArea");
     __publicField(this, "executeLocationArea");
     __publicField(this, "executeClearGraffiti");
     __publicField(this, "executeAppendElementList");
@@ -21391,6 +21568,7 @@ class Command {
     this.executeInsertArea = adapt.insertArea.bind(adapt);
     this.executeSetAreaValue = adapt.setAreaValue.bind(adapt);
     this.executeSetAreaProperties = adapt.setAreaProperties.bind(adapt);
+    this.executeDeleteArea = adapt.deleteArea.bind(adapt);
     this.executeLocationArea = adapt.locationArea.bind(adapt);
     this.executeClearGraffiti = adapt.clearGraffiti.bind(adapt);
     this.executeInsertElementList = adapt.insertElementList.bind(adapt);
@@ -21490,8 +21668,8 @@ function convertPxToPaperSize(width, height) {
     height: `${height}px`
   };
 }
-function printImageBase64(base64List, options) {
-  const { width, height, direction = PaperDirection.VERTICAL } = options;
+async function print(base64List, options) {
+  const { width, height, direction = PaperDirection.VERTICAL, iframeInfoList = [] } = options;
   const iframe = document.createElement("iframe");
   iframe.style.visibility = "hidden";
   iframe.style.position = "absolute";
@@ -21506,12 +21684,47 @@ function printImageBase64(base64List, options) {
   doc.open();
   const container = document.createElement("div");
   const paperSize = convertPxToPaperSize(width, height);
-  base64List.forEach((base64) => {
+  base64List.forEach((base64, pageIndex) => {
+    const pageWrapper = document.createElement("div");
+    pageWrapper.style.position = "relative";
+    pageWrapper.style.width = direction === PaperDirection.HORIZONTAL ? paperSize.height : paperSize.width;
+    pageWrapper.style.height = direction === PaperDirection.HORIZONTAL ? paperSize.width : paperSize.height;
     const image = document.createElement("img");
-    image.style.width = direction === PaperDirection.HORIZONTAL ? paperSize.height : paperSize.width;
-    image.style.height = direction === PaperDirection.HORIZONTAL ? paperSize.width : paperSize.height;
+    image.style.width = "100%";
+    image.style.height = "100%";
+    image.style.position = "absolute";
+    image.style.left = "0";
+    image.style.top = "0";
     image.src = base64;
-    container.append(image);
+    pageWrapper.append(image);
+    const pageIframes = iframeInfoList[pageIndex] || [];
+    pageIframes.forEach((iframeInfo) => {
+      const iframeEl = document.createElement("iframe");
+      iframeEl.style.position = "absolute";
+      iframeEl.style.left = `${iframeInfo.x}px`;
+      iframeEl.style.top = `${iframeInfo.y}px`;
+      iframeEl.style.width = `${iframeInfo.width}px`;
+      iframeEl.style.height = `${iframeInfo.height}px`;
+      iframeEl.style.border = "none";
+      if (iframeInfo.src) {
+        iframeEl.src = iframeInfo.src;
+      } else if (iframeInfo.srcdoc) {
+        const script = `
+        <script>
+          if (!window.__CUSTOM_CANVAS_EDITOR_LOAD_HOOK__) {
+            window.postMessage({ type: '__LOADED_TO_CANVAS_EDITOR__' }, '*')
+          }
+        <\/script>`;
+        const srcdoc = iframeInfo.srcdoc;
+        if (srcdoc.includes("</body>")) {
+          iframeEl.srcdoc = srcdoc.replace("</body>", `${script}</body>`);
+        } else {
+          iframeEl.srcdoc = srcdoc + script;
+        }
+      }
+      pageWrapper.append(iframeEl);
+    });
+    container.append(pageWrapper);
   });
   const style = document.createElement("style");
   const stylesheet = `
@@ -21524,8 +21737,11 @@ function printImageBase64(base64List, options) {
     size: ${paperSize.size} ${direction === PaperDirection.HORIZONTAL ? `landscape` : `portrait`};
   }`;
   style.append(document.createTextNode(stylesheet));
-  setTimeout(() => {
-    doc.write(`${style.outerHTML}${container.innerHTML}`);
+  doc.write(`${style.outerHTML}${container.innerHTML}`);
+  if (iframeInfoList.length) {
+    await waitIframeLoad(doc);
+  }
+  setTimeout(async () => {
     contentWindow.print();
     doc.close();
     window.addEventListener("mouseover", () => {
@@ -21535,6 +21751,25 @@ function printImageBase64(base64List, options) {
     });
   });
 }
+async function waitIframeLoad(doc) {
+  const iframeList = Array.from(doc.querySelectorAll("iframe"));
+  const iframePromises = iframeList.map((iframe) => {
+    const iframePromise = new Promise((resolve) => {
+      var _a;
+      if (iframe.srcdoc) {
+        (_a = iframe.contentWindow) == null ? void 0 : _a.addEventListener("message", (e) => {
+          if (e.data.type === "__LOADED_TO_CANVAS_EDITOR__") {
+            resolve(true);
+          }
+        });
+      } else {
+        resolve(true);
+      }
+    });
+    return iframePromise;
+  });
+  await Promise.allSettled(iframePromises);
+}
 class CommandAdapt {
   constructor(draw) {
     __publicField(this, "draw");
@@ -22646,10 +22881,11 @@ class CommandAdapt {
       pixelRatio: printPixelRatio,
       mode: EditorMode.PRINT
     });
-    printImageBase64(base64List, {
+    await print(base64List, {
       width,
       height,
-      direction: paperDirection
+      direction: paperDirection,
+      iframeInfoList: this.draw.getBlockParticle().pickIframeInfo()
     });
     if (scale !== 1) {
       this.draw.setPageScale(scale);
@@ -23720,6 +23956,9 @@ class CommandAdapt {
   setAreaProperties(payload) {
     this.draw.getArea().setAreaProperties(payload);
   }
+  deleteArea(options) {
+    this.draw.getArea().deleteArea(options);
+  }
   locationArea(areaId, options) {
     if ((options == null ? void 0 : options.isAppendLastLineBreak) && (options == null ? void 0 : options.position) === LocationPosition.OUTER_AFTER) {
       const elementList = this.draw.getOriginalMainElementList();