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

package/dist/{PbPropertyEditorColor-D7_bQLN4.js → PbPropertyEditorColor-Cb7qpN96.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
 import { BSTextInput } from "@g1cloud/bluesea";
-import { P as PbColorPicker } from "./index-BaB2TtF-.js";
+import { P as PbColorPicker } from "./index-EsPg-Em5.js";
 const _hoisted_1 = { class: "property-editor property-editor-color" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorHtml-BSfmWiwq.js → PbPropertyEditorHtml-DRmHv8Gm.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, defineAsyncComponent } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BaB2TtF-.js";
+import { u as usePageBuilderEditor } from "./index-EsPg-Em5.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorImage-CeAWWLQE.js → PbPropertyEditorImage-BG7rGnU3.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
-import { u as usePageBuilderEditor } from "./index-BaB2TtF-.js";
+import { u as usePageBuilderEditor } from "./index-EsPg-Em5.js";
 import { useModal } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };

package/dist/{PbPropertyEditorMultilineText-yHnhkc9I.js → PbPropertyEditorMultilineText-BqEprlZ-.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
 import { BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BaB2TtF-.js";
+import { u as usePageBuilderEditor } from "./index-EsPg-Em5.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorText-BcsUyRxP.js → PbPropertyEditorText-bXscT9jE.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
 import { BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BaB2TtF-.js";
+import { u as usePageBuilderEditor } from "./index-EsPg-Em5.js";
 const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorYoutube-Bn0DdIOD.js → PbPropertyEditorYoutube-Bz_UU0kC.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { s as selectYoutubeVideo } from "./index-BaB2TtF-.js";
+import { s as selectYoutubeVideo } from "./index-EsPg-Em5.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbWidgetAddModal-BzG-lkZp.js → PbWidgetAddModal-Cfhjs6Z4.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
 import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
-import { w as widgetPartDefinitions } from "./index-BaB2TtF-.js";
+import { w as widgetPartDefinitions } from "./index-EsPg-Em5.js";
 const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
 const _hoisted_2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
 const _hoisted_3 = ["onClick", "textContent"];

package/dist/components/part/PbBlock.vue.d.ts

@@ -3,9 +3,11 @@ import { IPart } from '@g1cloud/page-builder-viewer';
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     part: IPart;
     isMobilePage: boolean;
+    placeholder?: boolean | undefined;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     part: IPart;
     isMobilePage: boolean;
+    placeholder?: boolean | undefined;
 }>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/components/part/PbSection.vue.d.ts

@@ -3,9 +3,11 @@ import { IPart } from '@g1cloud/page-builder-viewer';
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     part: IPart;
     isMobilePage: boolean;
+    placeholder?: boolean | undefined;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     part: IPart;
     isMobilePage: boolean;
+    placeholder?: boolean | undefined;
 }>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/{index-BaB2TtF-.js → index-EsPg-Em5.js}

@@ -6670,6 +6670,24 @@ class Part {
   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;
@@ -7541,8 +7559,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const pageBuilder = usePageBuilder();
     const comp = computed(() => pageBuilder.getCustomWidgetComponent(props.part));
     const bind = computed(() => ({
-      ...props.part.properties || {},
-      placeholder: props.placeholder
+      ...props.part.properties || {}
     }));
     return (_ctx, _cache) => {
       return comp.value ? (openBlock(), createBlock$1(resolveDynamicComponent(comp.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : createCommentVNode("", true);
@@ -8128,15 +8145,15 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BcsUyRxP.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-bXscT9jE.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-TTgo0zbQ.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-C7-iSAtn.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-yHnhkc9I.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BqEprlZ-.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-D7_bQLN4.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-CeAWWLQE.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-BSfmWiwq.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-Bn0DdIOD.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-Cb7qpN96.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BG7rGnU3.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DRmHv8Gm.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-Bz_UU0kC.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8187,6 +8204,7 @@ const setSelectHandler = (el, binding) => {
   el.onmousedown = async (event) => {
     if (event.button === 0) {
       setTimeout(() => {
+        if (pageBuilder.context.isSelected(part)) return;
         if (event.shiftKey) {
           pageBuilder.context.addSelection([part]);
         } else {
@@ -8205,9 +8223,8 @@ const setContextMenuHandler = (el, binding) => {
     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 = () => {
@@ -8874,7 +8891,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
     part: {},
-    isMobilePage: { type: Boolean }
+    isMobilePage: { type: Boolean },
+    placeholder: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -9098,7 +9116,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
     part: {},
-    isMobilePage: { type: Boolean }
+    isMobilePage: { type: Boolean },
+    placeholder: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -12468,7 +12487,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BzG-lkZp.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-Cfhjs6Z4.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -12502,12 +12521,38 @@ const openWidgetAddModal = (modal, args, callback) => {
   });
 };
 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);
@@ -12574,9 +12619,14 @@ const _AddSectionCommand = class _AddSectionCommand {
     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);
+      }
     }
   }
 };
@@ -12968,11 +13018,20 @@ const _DeletePartCommand = class _DeletePartCommand {
     __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");
@@ -12994,7 +13053,11 @@ const _CopyPartCommand = class _CopyPartCommand {
     __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);
@@ -13019,13 +13082,14 @@ const _PastePartCommand = class _PastePartCommand {
     __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 = {
@@ -13039,13 +13103,88 @@ const _PastePartCommand = class _PastePartCommand {
         ]
       };
       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(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);
       }
     }
   }
@@ -13421,6 +13560,7 @@ class PageBuilderContextImpl {
     }
   }
   addSelection(parts) {
+    if (parts && !parts.length) return;
     parts.forEach((part) => this.selection.push(part));
   }
   removeSelection(parts) {
@@ -14297,7 +14437,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const style = 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"
       };
     });
@@ -14318,7 +14457,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const contextMenu = useContextMenu();
     const handleClick = (event) => {
       if (event.button === 0) {
-        pageBuilder.context.clearSelection();
+        pageBuilder.context.setSelection([props.part]);
       }
     };
     const showContextMenu = (event) => {
@@ -14372,7 +14511,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 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$2 = ["height", "width"];
+const _hoisted_1$2 = ["width"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "PbPageFrame",
   props: {
@@ -14433,35 +14572,41 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     );
     const width = ref(props.width);
-    const height = ref(200);
+    ref(200);
     const isMobilePage = computed(() => width.value <= 768);
     const style = 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);
+      });
     };
     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;
     });
     onBeforeUnmount(() => {
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
+      if (mutationObserver) {
+        mutationObserver.disconnect();
+      }
     });
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
@@ -14483,7 +14628,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         createElementVNode("iframe", {
           ref_key: "iframeRef",
           ref: iframeRef,
-          height: `${height.value}px`,
           style: normalizeStyle(style.value),
           width: `${width.value}px`,
           class: "page-frame mt-12"

package/dist/model/context.d.ts

@@ -44,6 +44,8 @@ export declare class PageBuilderContextImpl implements PageBuilderContext {
         isBlock: () => boolean;
         isWidget: () => boolean;
         isNestedWidget: () => boolean;
+        isParentOf: (part: IPart | undefined) => boolean;
+        isChildOf: (part: IPart | undefined) => boolean;
         getName: () => string | undefined;
         getProperty: (propertyName: string) => import('@g1cloud/page-builder-viewer').MultiLangText | undefined;
         getClassNames: () => string;
@@ -64,6 +66,8 @@ export declare class PageBuilderContextImpl implements PageBuilderContext {
         isBlock: () => boolean;
         isWidget: () => boolean;
         isNestedWidget: () => boolean;
+        isParentOf: (part: IPart | undefined) => boolean;
+        isChildOf: (part: IPart | undefined) => boolean;
         getName: () => string | undefined;
         getProperty: (propertyName: string) => import('@g1cloud/page-builder-viewer').MultiLangText | undefined;
         getClassNames: () => string;
@@ -84,6 +88,8 @@ export declare class PageBuilderContextImpl implements PageBuilderContext {
         isBlock: () => boolean;
         isWidget: () => boolean;
         isNestedWidget: () => boolean;
+        isParentOf: (part: IPart | undefined) => boolean;
+        isChildOf: (part: IPart | undefined) => boolean;
         getName: () => string | undefined;
         getProperty: (propertyName: string) => import('@g1cloud/page-builder-viewer').MultiLangText | undefined;
         getClassNames: () => string;

package/dist/page-builder-editor.js

@@ -1,4 +1,4 @@
-import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, t, v, x, y, z, A, C } from "./index-BaB2TtF-.js";
+import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, t, v, x, y, z, A, C } from "./index-EsPg-Em5.js";
 export {
   B as BLOCK_TYPE,
   b as Block,

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;
@@ -7542,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);
@@ -8188,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 {
@@ -8206,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 = () => {
@@ -8875,7 +8892,8 @@ ${_html.style}
     __name: "PbBlock",
     props: {
       part: {},
-      isMobilePage: { type: Boolean }
+      isMobilePage: { type: Boolean },
+      placeholder: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
@@ -9099,7 +9117,8 @@ ${_html.style}
     __name: "PbSection",
     props: {
       part: {},
-      isMobilePage: { type: Boolean }
+      isMobilePage: { type: Boolean },
+      placeholder: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
@@ -12503,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);
@@ -12575,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);
+        }
       }
     }
   };
@@ -12969,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");
@@ -12995,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);
@@ -13020,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 = {
@@ -13040,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);
         }
       }
     }
@@ -13422,6 +13561,7 @@ ${_html.style}
       }
     }
     addSelection(parts) {
+      if (parts && !parts.length) return;
       parts.forEach((part) => this.selection.push(part));
     }
     removeSelection(parts) {
@@ -14298,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"
         };
       });
@@ -14319,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) => {
@@ -14373,7 +14512,7 @@ ${_html.style}
     }
   });
   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 = ["height", "width"];
+  const _hoisted_1$g = ["width"];
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPageFrame",
     props: {
@@ -14434,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;
@@ -14484,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"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.34",
+  "version": "1.0.0-alpha.35",
   "engins": {
     "node": ">= 20.0.0"
   },
@@ -16,7 +16,7 @@
   "author": "zag@g1project.net",
   "license": "LicenseRef-LICENSE",
   "peerDependencies": {
-    "@g1cloud/bluesea": "5.0.0-alpha.76",
+    "@g1cloud/bluesea": "5.0.0-alpha.78",
     "vue3-youtube": "^0.1.9"
   },
   "dependencies": {
@@ -30,7 +30,7 @@
     "vue-router": "^4.4.3",
     "vue3-click-away": "^1.2.4",
     "yjs": "^13.6.14",
-    "@g1cloud/page-builder-viewer": "1.0.0-alpha.34"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.35"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",