@g1cloud/page-builder-editor 1.0.0-alpha.33 → 1.0.0-alpha.35

package/dist/page-builder-editor.umd.cjs

@@ -6671,6 +6671,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     isNestedWidget() {
       return false;
     }
+    isParentOf(part) {
+      if (!part) return false;
+      let parent = part.parent;
+      while (parent) {
+        if (parent === this || parent.partId === this.partId) return true;
+        parent = parent.parent;
+      }
+      return false;
+    }
+    isChildOf(part) {
+      if (!part) return false;
+      let parent = this.parent;
+      while (parent) {
+        if (parent === part || parent.partId === part.partId) return true;
+        parent = parent.parent;
+      }
+      return false;
+    }
     getName() {
       var _a;
       return (_a = this.properties) == null ? void 0 : _a.name;
@@ -6684,80 +6702,87 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return ((_a = this.properties) == null ? void 0 : _a.classNames) || "";
     }
     getAlignStyleValue(align) {
-      if (align === "left") return "flex-start";
-      if (align === "right") return "flex-end";
-      return "center";
+      switch (align) {
+        case "start":
+          return "flex-start";
+        case "end":
+          return "flex-end";
+        case "center":
+          return "center";
+        case "between":
+          return "space-between";
+        default:
+          return;
+      }
     }
     getStyles(isMobilePage) {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q;
       const style = {};
-      const align = ((_a = this.properties) == null ? void 0 : _a.align) || "center";
-      if (this.isWidget()) {
-        style.alignSelf = this.getAlignStyleValue(align);
-      } else if (this.isPage()) {
-        style.display = "flex";
-        style.flexDirection = "column";
-        style.alignItems = this.getAlignStyleValue(align);
+      if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
+        style.flexDirection = "row";
       } else {
-        const direction = isMobilePage ? (_b = this.properties) == null ? void 0 : _b.directionSm : (_c = this.properties) == null ? void 0 : _c.directionLg;
-        if (direction === "horizontal") {
-          style.display = "flex";
-          style.flexDirection = "row";
-          style.justifyContent = this.getAlignStyleValue(align);
-        } else if (direction === "vertical") {
-          style.display = "flex";
-          style.flexDirection = "column";
-          style.alignItems = this.getAlignStyleValue(align);
-        }
-      }
-      if (((_d = this.properties) == null ? void 0 : _d.wrap) === "wrap") {
+        style.flexDirection = "column";
+      }
+      if (((_b = this.properties) == null ? void 0 : _b.wrap) === "wrap") {
         style.flexWrap = "wrap";
       }
-      if ((_e = this.properties) == null ? void 0 : _e.margin) style.margin = this.properties.margin;
-      if ((_f = this.properties) == null ? void 0 : _f.marginLeft) style.marginLeft = this.properties.marginLeft;
-      if ((_g = this.properties) == null ? void 0 : _g.marginRight) style.marginRight = this.properties.marginRight;
-      if ((_h = this.properties) == null ? void 0 : _h.marginTop) style.marginTop = this.properties.marginTop;
-      if ((_i = this.properties) == null ? void 0 : _i.marginBottom) style.marginBottom = this.properties.marginBottom;
-      if ((_j = this.properties) == null ? void 0 : _j.padding) style.padding = this.properties.padding;
-      if ((_k = this.properties) == null ? void 0 : _k.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
-      if ((_l = this.properties) == null ? void 0 : _l.paddingRight) style.paddingRight = this.properties.paddingRight;
-      if ((_m = this.properties) == null ? void 0 : _m.paddingTop) style.paddingTop = this.properties.paddingTop;
-      if ((_n = this.properties) == null ? void 0 : _n.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
-      if ((_o = this.properties) == null ? void 0 : _o.left) style.left = this.properties.left;
-      if ((_p = this.properties) == null ? void 0 : _p.right) style.right = this.properties.right;
-      if ((_q = this.properties) == null ? void 0 : _q.top) style.top = this.properties.top;
-      if ((_r = this.properties) == null ? void 0 : _r.bottom) style.bottom = this.properties.bottom;
-      if ((_s = this.properties) == null ? void 0 : _s.width) style.width = this.properties.width;
-      if ((_t = this.properties) == null ? void 0 : _t.height) style.height = this.properties.height;
-      if ((_u = this.properties) == null ? void 0 : _u.maxWidth) style.maxWidth = this.properties.maxWidth;
-      if ((_v = this.properties) == null ? void 0 : _v.maxHeight) style.maxHeight = this.properties.maxHeight;
-      if ((_w = this.properties) == null ? void 0 : _w.minWidth) style.minWidth = this.properties.minWidth;
-      if ((_x = this.properties) == null ? void 0 : _x.minHeight) style.minHeight = this.properties.minHeight;
-      if ((_y = this.properties) == null ? void 0 : _y.textAlign) style.textAlign = this.properties.textAlign;
-      if ((_z = this.properties) == null ? void 0 : _z.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
-      if ((_A = this.properties) == null ? void 0 : _A.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
-      if ((_B = this.properties) == null ? void 0 : _B.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
-      if ((_C = this.properties) == null ? void 0 : _C.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
-      if ((_D = this.properties) == null ? void 0 : _D.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
-      if ((_E = this.properties) == null ? void 0 : _E.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
-      if ((_F = this.properties) == null ? void 0 : _F.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
-      if ((_G = this.properties) == null ? void 0 : _G.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
-      if ((_H = this.properties) == null ? void 0 : _H.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
-      if (((_I = this.properties) == null ? void 0 : _I.borderColor) && style.borderLeftWidth) {
+      const alignItems = this.getAlignStyleValue((_c = this.properties) == null ? void 0 : _c.alignItems);
+      const justifyContent = this.getAlignStyleValue((_d = this.properties) == null ? void 0 : _d.justifyContent);
+      const alignSelf = this.getAlignStyleValue((_e = this.properties) == null ? void 0 : _e.alignSelf);
+      if (this.isWidget()) {
+        if (alignSelf) style.alignSelf = alignSelf;
+      } else if (this.isPage()) {
+        if (alignItems) style.alignItems = alignItems;
+      } else {
+        if (alignItems) style.alignItems = alignItems;
+        if (justifyContent) style.justifyContent = justifyContent;
+        if (alignSelf) style.alignSelf = alignSelf;
+      }
+      if ((_f = this.properties) == null ? void 0 : _f.margin) style.margin = this.properties.margin;
+      if ((_g = this.properties) == null ? void 0 : _g.marginLeft) style.marginLeft = this.properties.marginLeft;
+      if ((_h = this.properties) == null ? void 0 : _h.marginRight) style.marginRight = this.properties.marginRight;
+      if ((_i = this.properties) == null ? void 0 : _i.marginTop) style.marginTop = this.properties.marginTop;
+      if ((_j = this.properties) == null ? void 0 : _j.marginBottom) style.marginBottom = this.properties.marginBottom;
+      if ((_k = this.properties) == null ? void 0 : _k.padding) style.padding = this.properties.padding;
+      if ((_l = this.properties) == null ? void 0 : _l.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
+      if ((_m = this.properties) == null ? void 0 : _m.paddingRight) style.paddingRight = this.properties.paddingRight;
+      if ((_n = this.properties) == null ? void 0 : _n.paddingTop) style.paddingTop = this.properties.paddingTop;
+      if ((_o = this.properties) == null ? void 0 : _o.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
+      if ((_p = this.properties) == null ? void 0 : _p.left) style.left = this.properties.left;
+      if ((_q = this.properties) == null ? void 0 : _q.right) style.right = this.properties.right;
+      if ((_r = this.properties) == null ? void 0 : _r.top) style.top = this.properties.top;
+      if ((_s = this.properties) == null ? void 0 : _s.bottom) style.bottom = this.properties.bottom;
+      if ((_t = this.properties) == null ? void 0 : _t.width) style.width = this.properties.width;
+      if ((_u = this.properties) == null ? void 0 : _u.height) style.height = this.properties.height;
+      if ((_v = this.properties) == null ? void 0 : _v.maxWidth) style.maxWidth = this.properties.maxWidth;
+      if ((_w = this.properties) == null ? void 0 : _w.maxHeight) style.maxHeight = this.properties.maxHeight;
+      if ((_x = this.properties) == null ? void 0 : _x.minWidth) style.minWidth = this.properties.minWidth;
+      if ((_y = this.properties) == null ? void 0 : _y.minHeight) style.minHeight = this.properties.minHeight;
+      if ((_z = this.properties) == null ? void 0 : _z.textAlign) style.textAlign = this.properties.textAlign;
+      if ((_A = this.properties) == null ? void 0 : _A.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
+      if ((_B = this.properties) == null ? void 0 : _B.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
+      if ((_C = this.properties) == null ? void 0 : _C.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
+      if ((_D = this.properties) == null ? void 0 : _D.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
+      if ((_E = this.properties) == null ? void 0 : _E.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
+      if ((_F = this.properties) == null ? void 0 : _F.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
+      if ((_G = this.properties) == null ? void 0 : _G.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
+      if ((_H = this.properties) == null ? void 0 : _H.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
+      if ((_I = this.properties) == null ? void 0 : _I.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
+      if (((_J = this.properties) == null ? void 0 : _J.borderColor) && style.borderLeftWidth) {
         style.borderLeftStyle = "solid";
-        style.borderLeftColor = (_J = this.properties) == null ? void 0 : _J.borderColor;
+        style.borderLeftColor = (_K = this.properties) == null ? void 0 : _K.borderColor;
       }
-      if (((_K = this.properties) == null ? void 0 : _K.borderColor) && style.borderRightWidth) {
+      if (((_L = this.properties) == null ? void 0 : _L.borderColor) && style.borderRightWidth) {
         style.borderRightStyle = "solid";
-        style.borderRightColor = (_L = this.properties) == null ? void 0 : _L.borderColor;
+        style.borderRightColor = (_M = this.properties) == null ? void 0 : _M.borderColor;
       }
-      if (((_M = this.properties) == null ? void 0 : _M.borderColor) && style.borderTopWidth) {
+      if (((_N = this.properties) == null ? void 0 : _N.borderColor) && style.borderTopWidth) {
         style.borderTopStyle = "solid";
-        style.borderTopColor = (_N = this.properties) == null ? void 0 : _N.borderColor;
+        style.borderTopColor = (_O = this.properties) == null ? void 0 : _O.borderColor;
       }
-      if (((_O = this.properties) == null ? void 0 : _O.borderColor) && style.borderBottomWidth) {
+      if (((_P = this.properties) == null ? void 0 : _P.borderColor) && style.borderBottomWidth) {
         style.borderBottomStyle = "solid";
-        style.borderBottomColor = (_P = this.properties) == null ? void 0 : _P.borderColor;
+        style.borderBottomColor = (_Q = this.properties) == null ? void 0 : _Q.borderColor;
       }
       return style;
     }
@@ -7535,8 +7560,7 @@ ${_html.style}
       const pageBuilder = usePageBuilder();
       const comp = vue.computed(() => pageBuilder.getCustomWidgetComponent(props.part));
       const bind = vue.computed(() => ({
-        ...props.part.properties || {},
-        placeholder: props.placeholder
+        ...props.part.properties || {}
       }));
       return (_ctx, _cache) => {
         return comp.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(comp.value), vue.normalizeProps(vue.mergeProps({ key: 0 }, bind.value)), null, 16)) : vue.createCommentVNode("", true);
@@ -8181,6 +8205,7 @@ ${_html.style}
     el.onmousedown = async (event) => {
       if (event.button === 0) {
         setTimeout(() => {
+          if (pageBuilder.context.isSelected(part)) return;
           if (event.shiftKey) {
             pageBuilder.context.addSelection([part]);
           } else {
@@ -8199,9 +8224,8 @@ ${_html.style}
       const eventAny = event;
       if (eventAny._partContextMenuHandled) return;
       else eventAny._partContextMenuHandled = true;
-      if (!pageBuilder.context.isSelected(part)) {
-        pageBuilder.context.setSelection([part]);
-      }
+      if (pageBuilder.context.isSelected(part)) return;
+      pageBuilder.context.setSelection([part]);
     };
   };
   const createPositionMark = () => {
@@ -8370,11 +8394,7 @@ ${_html.style}
     style.height = height || "";
   };
   const getLayoutDirection = (isMobilePage, properties) => {
-    if (isMobilePage) {
-      return properties && properties.directionSm || "vertical";
-    } else {
-      return properties && properties.directionLg || "horizontal";
-    }
+    return properties && properties.direction || (isMobilePage ? "vertical" : "horizontal");
   };
   const _export_sfc = (sfc, props) => {
     const target = sfc.__vccOpts || sfc;
@@ -8872,7 +8892,8 @@ ${_html.style}
     __name: "PbBlock",
     props: {
       part: {},
-      isMobilePage: { type: Boolean }
+      isMobilePage: { type: Boolean },
+      placeholder: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
@@ -9096,7 +9117,8 @@ ${_html.style}
     __name: "PbSection",
     props: {
       part: {},
-      isMobilePage: { type: Boolean }
+      isMobilePage: { type: Boolean },
+      placeholder: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
@@ -11942,14 +11964,8 @@ ${_html.style}
       caption: "Layout",
       properties: [
         {
-          propertyName: "directionSm",
-          caption: "Direction for Mobile (<= 768px)",
-          propertyType: "select",
-          params: "vertical,horizontal"
-        },
-        {
-          propertyName: "directionLg",
-          caption: "Direction for PC (> 768px)",
+          propertyName: "direction",
+          caption: "Layout",
           propertyType: "select",
           params: "vertical,horizontal"
         },
@@ -11968,10 +11984,50 @@ ${_html.style}
       caption: "Align",
       properties: [
         {
-          propertyName: "align",
-          caption: "Align",
+          propertyName: "alignItems",
+          caption: "Align Items",
+          propertyType: "select",
+          params: "start,center,end"
+        },
+        {
+          propertyName: "justifyContent",
+          caption: "Justify Content",
+          propertyType: "select",
+          params: "start,center,end,between"
+        },
+        {
+          propertyName: "alignSelf",
+          caption: "Align Self",
           propertyType: "select",
-          params: "left,center,right"
+          params: "start,center,end"
+        }
+      ]
+    };
+  };
+  const alignItemsGroup = () => {
+    return {
+      groupName: "align",
+      caption: "Align",
+      properties: [
+        {
+          propertyName: "alignItems",
+          caption: "Align Items",
+          propertyType: "select",
+          params: "start,center,end"
+        }
+      ]
+    };
+  };
+  const alignSelfGroup = () => {
+    return {
+      groupName: "align",
+      caption: "Align",
+      properties: [
+        {
+          propertyName: "alignSelf",
+          caption: "Align Self",
+          propertyType: "select",
+          params: ",start,center,end"
         }
       ]
     };
@@ -12053,7 +12109,7 @@ ${_html.style}
     return [layoutGroup(), alignGroup(), sizeGroup(), marginGroup(), paddingGroup(), backgroundGroup(), commonGroup()];
   };
   const defaultWidgetPropertyGroups = () => {
-    return [alignGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
+    return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
   };
   const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     __name: "PbContainerWidget",
@@ -12104,13 +12160,13 @@ ${_html.style}
             }
           ]
         },
-        alignGroup(),
+        alignItemsGroup(),
         paddingGroup(),
         backgroundGroup(),
         commonGroup()
       ],
       initialProperties: {
-        align: "center"
+        alignItems: "center"
       },
       allowsChild: () => true,
       creator: () => _sfc_main$z
@@ -12127,9 +12183,9 @@ ${_html.style}
         ...defaultPropertyGroups()
       ],
       initialProperties: {
-        directionSm: "horizontal",
-        directionLg: "horizontal",
-        align: "center"
+        direction: "horizontal",
+        alignItems: "start",
+        justifyContent: "start"
       },
       allowsChild: () => true,
       creator: () => _sfc_main$z
@@ -12146,9 +12202,9 @@ ${_html.style}
         ...defaultPropertyGroups()
       ],
       initialProperties: {
-        directionSm: "vertical",
-        directionLg: "vertical",
-        align: "center"
+        direction: "vertical",
+        alignItems: "start",
+        justifyContent: "start"
       },
       allowsChild: () => true,
       creator: () => _sfc_main$B
@@ -12466,12 +12522,38 @@ ${_html.style}
     });
   };
   const findInsertTargetAndIndex = (pageBuilder, partType) => {
-    var _a;
+    var _a, _b, _c;
     const selected = pageBuilder.context.getSelectedParts()[0];
-    pageBuilder.context.getSelectedPage();
-    const target = pageBuilder.partManager.findNearestAvailableParentPart(selected, partType);
-    const index = selected === target || !(target == null ? void 0 : target.children) ? ((_a = target == null ? void 0 : target.children) == null ? void 0 : _a.length) || 0 : target.children.indexOf(selected) + 1;
-    return { target, index };
+    const page = pageBuilder.context.getSelectedPage();
+    if (!page) return {};
+    if (partType === SECTION_TYPE) {
+      const section = pageBuilder.partManager.findNearestSection(selected);
+      return {
+        target: page,
+        index: section ? page.children.indexOf(section) + 1 : (_a = page.children) == null ? void 0 : _a.length
+      };
+    } else if (partType === BLOCK_TYPE) {
+      let section = pageBuilder.partManager.findNearestSection(selected);
+      let block = pageBuilder.partManager.findNearestBlock(selected);
+      if (!section) {
+        section = page.children[page.children.length - 1];
+      }
+      return {
+        target: section,
+        index: block ? section.children.indexOf(block) + 1 : (_b = section.children) == null ? void 0 : _b.length
+      };
+    } else {
+      let block = pageBuilder.partManager.findNearestBlock(selected);
+      let widget = selected.parent.isWidget() ? selected.parent : selected;
+      if (!block) {
+        const section = page.children[page.children.length - 1];
+        block = section.children[section.children.length - 1];
+      }
+      return {
+        target: block,
+        index: widget ? block.children.indexOf(widget) + 1 : (_c = block.children) == null ? void 0 : _c.length
+      };
+    }
   };
   const createPartWithDefinition = (def, properties) => {
     const part = createPart(def.partType, def.partName, def.initialProperties);
@@ -12538,9 +12620,14 @@ ${_html.style}
       if (args && args.page) {
         addSectionToPage(pageBuilder, args.page);
       } else {
-        const def = pageBuilder.partManager.getSectionDefinition();
-        if (!def) return;
-        addPart(pageBuilder, def);
+        const selected = pageBuilder.context.getSelectedParts()[0];
+        if (selected && selected.isPage()) {
+          addSectionToPage(pageBuilder, selected);
+        } else {
+          const def = pageBuilder.partManager.getSectionDefinition();
+          if (!def) return;
+          addPart(pageBuilder, def);
+        }
       }
     }
   };
@@ -12932,11 +13019,20 @@ ${_html.style}
       __publicField(this, "caption", _DeletePartCommand.CAPTION);
     }
     execute(pageBuilder) {
-      const partIds = pageBuilder.context.getSelectedParts().map((part) => part.partId);
-      const param = {
-        delete: partIds
-      };
-      pageBuilder.model.updateModel(param);
+      const selected = pageBuilder.context.getSelectedParts();
+      if (selected.length === 0) return;
+      let partIds;
+      if (selected[0].isPage()) {
+        const page = selected[0];
+        const partsToDelete = page.children || [];
+        if (partsToDelete.length === 0) return;
+        partIds = partsToDelete.map((part) => part.partId);
+      } else {
+        partIds = selected.filter((part) => {
+          return !selected.some((v) => part.isChildOf(v));
+        }).map((part) => part.partId);
+      }
+      pageBuilder.model.updateModel({ delete: partIds });
     }
   };
   __publicField(_DeletePartCommand, "COMMAND_ID", "DeletePart");
@@ -12958,7 +13054,11 @@ ${_html.style}
       __publicField(this, "commandId", _CopyPartCommand.COMMAND_ID);
     }
     async execute(pageBuilder) {
-      const partIds = pageBuilder.context.getSelectedParts().map((part) => part.partId);
+      const selected = pageBuilder.context.getSelectedParts();
+      if (selected.length === 0) return;
+      const partIds = selected.filter((part) => {
+        return !selected.some((v) => part.isChildOf(v));
+      }).map((part) => part.partId);
       if (partIds.length > 0) {
         const json = pageBuilder.model.serializeParts(partIds);
         await navigator.clipboard.writeText(json);
@@ -12983,13 +13083,14 @@ ${_html.style}
       __publicField(this, "commandId", _PastePartCommand.COMMAND_ID);
     }
     async execute(pageBuilder) {
+      var _a;
       const json = await navigator.clipboard.readText();
       const object = JSON.parse(json);
       if (object.partType === ROOT_TYPE) {
         const rootPart = partFromJsonObject(object, true);
         if (!rootPart) throw new Error("Invalid data format");
         let partIdsToDelete = void 0;
-        if (pageBuilder.model.rootPart.children && pageBuilder.model.rootPart.children.length) {
+        if ((_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a.length) {
           partIdsToDelete = pageBuilder.model.rootPart.children.map((v) => v.partId);
         }
         const param = {
@@ -13003,13 +13104,88 @@ ${_html.style}
           ]
         };
         pageBuilder.model.updateModel(param);
+      } else if (Array.isArray(object) && object[0] && object[0].partType === PAGE_TYPE) {
+        const newPages = pageBuilder.model.parseParts(json);
+        if (!newPages) throw new Error("Invalid data format");
+        const newPage = newPages[0];
+        const selectedPage = pageBuilder.context.getSelectedPage();
+        if (!selectedPage) return;
+        const pages = pageBuilder.model.rootPart.children;
+        if (!pages) return;
+        let index = 0;
+        if (pages.length == 1) {
+          newPage.properties = {
+            ...newPage.properties || {},
+            name: "Page"
+          };
+        } else if (selectedPage === pages[0]) {
+          newPage.properties = {
+            ...newPage.properties || {},
+            name: "Page (Mobile)"
+          };
+        } else if (selectedPage === pages[1]) {
+          newPage.properties = {
+            ...newPage.properties || {},
+            name: "Page (PC)"
+          };
+          index = 1;
+        }
+        const param = {
+          delete: [selectedPage.partId],
+          insert: [
+            {
+              partId: pageBuilder.model.getRootPartId(),
+              index,
+              parts: [newPage]
+            }
+          ]
+        };
+        pageBuilder.model.updateModel(param);
       } else {
-        const { target, index = 0 } = findInsertTargetAndIndex(pageBuilder);
-        if (target) {
-          const parts = pageBuilder.model.parseParts(json);
-          if (parts) {
-            insertParts(pageBuilder, target.partId, index, parts, false);
+        const parts = pageBuilder.model.parseParts(json);
+        if (!parts) return;
+        let pasteType = "";
+        parts.forEach((part) => {
+          if (part.partType === SECTION_TYPE) pasteType = SECTION_TYPE;
+          else if (part.partType === BLOCK_TYPE && (!pasteType || pasteType === WIDGET_TYPE)) pasteType = BLOCK_TYPE;
+          else if (part.partType === WIDGET_TYPE && !pasteType) pasteType = WIDGET_TYPE;
+        });
+        if (!pasteType) return;
+        const partsToInsert = parts.map((part) => {
+          if (pasteType === SECTION_TYPE) {
+            if (part.partType === SECTION_TYPE) {
+              return part;
+            } else if (part.partType === BLOCK_TYPE) {
+              const section = createSection(pageBuilder);
+              if (!section) return;
+              section.children = [part];
+              return section;
+            } else {
+              const block = createBlock(pageBuilder);
+              if (!block) return;
+              block.children = [part];
+              const section = createSection(pageBuilder);
+              if (!section) return;
+              section.children = [block];
+              return section;
+            }
+          } else if (pasteType === BLOCK_TYPE) {
+            if (part.partType === BLOCK_TYPE) {
+              return part;
+            } else {
+              const block = createBlock(pageBuilder);
+              if (!block) return;
+              block.children = [part];
+              return block;
+            }
+          } else {
+            return part;
           }
+        }).filter(bluesea.notNull);
+        const targetType = pasteType === SECTION_TYPE ? SECTION_TYPE : pasteType === BLOCK_TYPE ? BLOCK_TYPE : WIDGET_TYPE;
+        const { target, index } = findInsertTargetAndIndex(pageBuilder, targetType);
+        if (target && index !== void 0 && partsToInsert) {
+          insertParts(pageBuilder, target.partId, index, partsToInsert, false);
         }
       }
     }
@@ -13385,6 +13561,7 @@ ${_html.style}
       }
     }
     addSelection(parts) {
+      if (parts && !parts.length) return;
       parts.forEach((part) => this.selection.push(part));
     }
     removeSelection(parts) {
@@ -14261,7 +14438,6 @@ ${_html.style}
       const style = vue.computed(() => {
         var _a, _b;
         return {
-          // width: `${props.width || 420}px`,
           minHeight: ((_b = (_a = props.part) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
         };
       });
@@ -14282,7 +14458,7 @@ ${_html.style}
       const contextMenu = bluesea.useContextMenu();
       const handleClick = (event) => {
         if (event.button === 0) {
-          pageBuilder.context.clearSelection();
+          pageBuilder.context.setSelection([props.part]);
         }
       };
       const showContextMenu = (event) => {
@@ -14335,8 +14511,8 @@ ${_html.style}
       };
     }
   });
-  const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  width: 100%;\n  margin: 0 auto;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n  outline: none;\n}\n\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  pointer-events: auto !important;\n}\n\n.pb-widget * {\n  pointer-events: none;\n}\n\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n  pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n  pointer-events: auto !important;\n}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-image-widget {\n  width: 100%;\n}\n\n.pb-image-widget .image {\n  width: 100%;\n}\n\n.pb-image-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
-  const _hoisted_1$g = ["height", "width"];
+  const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n  outline: none;\n}\n\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  pointer-events: auto !important;\n}\n\n.pb-widget * {\n  pointer-events: none;\n}\n\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n  pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n  pointer-events: auto !important;\n}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-image-widget {\n  width: 100%;\n}\n\n.pb-image-widget .image {\n  width: 100%;\n}\n\n.pb-image-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
+  const _hoisted_1$g = ["width"];
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPageFrame",
     props: {
@@ -14397,35 +14573,41 @@ ${_html.style}
         }
       );
       const width = vue.ref(props.width);
-      const height = vue.ref(200);
+      vue.ref(200);
       const isMobilePage = vue.computed(() => width.value <= 768);
       const style = vue.computed(() => ({
         // width: `${width.value}px`,
         // height: `${height.value}px`,
       }));
       let resizeObserver;
+      let mutationObserver;
       const updateIframeHeight = () => {
-        setTimeout(() => {
+        requestAnimationFrame(() => {
           if (!iframeRef.value || !iframeRef.value.contentDocument) return;
           const iframeBody = iframeRef.value.contentDocument.body;
           if (iframeBody) {
-            height.value = iframeBody.scrollHeight;
+            iframeRef.value.style.height = "1px";
+            const newHeight = iframeBody.scrollHeight;
+            iframeRef.value.style.height = `${newHeight}px`;
           }
-        }, 100);
+        });
       };
       vue.onMounted(() => {
         if (!iframeRef.value || !iframeRef.value.contentDocument) return;
         const iframeBody = iframeRef.value.contentDocument.body;
-        resizeObserver = new ResizeObserver(() => {
-          updateIframeHeight();
-        });
+        resizeObserver = new ResizeObserver(updateIframeHeight);
         resizeObserver.observe(iframeBody, {});
+        mutationObserver = new MutationObserver(updateIframeHeight);
+        mutationObserver.observe(iframeBody, { childList: true, subtree: true });
         iframeRef.value.onload = updateIframeHeight;
       });
       vue.onBeforeUnmount(() => {
         if (resizeObserver) {
           resizeObserver.disconnect();
         }
+        if (mutationObserver) {
+          mutationObserver.disconnect();
+        }
       });
       return (_ctx, _cache) => {
         var _a, _b, _c, _d;
@@ -14447,7 +14629,6 @@ ${_html.style}
           vue.createElementVNode("iframe", {
             ref_key: "iframeRef",
             ref: iframeRef,
-            height: `${height.value}px`,
             style: vue.normalizeStyle(style.value),
             width: `${width.value}px`,
             class: "page-frame mt-12"