@g1cloud/page-builder-editor 1.0.0-alpha.31 → 1.0.0-alpha.32

package/css/page-section.scss

@@ -1,5 +1,6 @@
 .pb-section {
   position: relative;
+  width: 100%;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: cover;

package/dist/{PbPropertyEditorColor-CnF04lLw.js → PbPropertyEditorColor-CQqLwB4B.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-Cu4Pt-wp.js";
+import { P as PbColorPicker } from "./index-iOtzsn-m.js";
 const _hoisted_1 = { class: "property-editor property-editor-color" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorHtml-DGWhLeBV.js → PbPropertyEditorHtml-CeCp8qgN.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-Cu4Pt-wp.js";
+import { u as usePageBuilderEditor } from "./index-iOtzsn-m.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-wnD2ZhtY.js → PbPropertyEditorImage-BIxdt8XI.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
-import { u as usePageBuilderEditor } from "./index-Cu4Pt-wp.js";
+import { u as usePageBuilderEditor } from "./index-iOtzsn-m.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-BupCrg8y.js → PbPropertyEditorMultilineText-4sF6PJTE.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-Cu4Pt-wp.js";
+import { u as usePageBuilderEditor } from "./index-iOtzsn-m.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorText-DPMCCfN3.js → PbPropertyEditorText-9hf9BTum.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-Cu4Pt-wp.js";
+import { u as usePageBuilderEditor } from "./index-iOtzsn-m.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-CyyNcDAu.js → PbPropertyEditorYoutube-B-pIw-m5.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { s as selectYoutubeVideo } from "./index-Cu4Pt-wp.js";
+import { s as selectYoutubeVideo } from "./index-iOtzsn-m.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-CpkklmlZ.js → PbWidgetAddModal-CFwyR_Bq.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-Cu4Pt-wp.js";
+import { w as widgetPartDefinitions } from "./index-iOtzsn-m.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/{index-Cu4Pt-wp.js → index-iOtzsn-m.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { ref, defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, toDisplayString, onMounted, onBeforeUnmount, createBlock as createBlock$1, unref, provide, inject, watch, Fragment, renderList, resolveDynamicComponent, normalizeProps, mergeProps, normalizeClass, reactive, defineAsyncComponent, withDirectives, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, toHandlers, Teleport } from "vue";
+import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, onMounted, onBeforeUnmount, createBlock as createBlock$1, unref, provide, inject, watch, renderList, resolveDynamicComponent, normalizeProps, mergeProps, normalizeClass, reactive, defineAsyncComponent, withDirectives, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, toHandlers, Teleport } from "vue";
 import { notNull, BSTextInput, vClickOutside, useModal, BSSelect, BSTree, useContextMenu } from "@g1cloud/bluesea";
 import YouTube from "vue3-youtube";
 const create$5 = () => /* @__PURE__ */ new Map();
@@ -6693,6 +6693,10 @@ class Part {
     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);
     } else {
       const direction = isMobilePage ? (_b = this.properties) == null ? void 0 : _b.directionSm : (_c = this.properties) == null ? void 0 : _c.directionLg;
       if (direction === "horizontal") {
@@ -6724,10 +6728,10 @@ class Part {
     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.width = this.properties.maxWidth;
-    if ((_v = this.properties) == null ? void 0 : _v.maxHeight) style.height = this.properties.maxHeight;
-    if ((_w = this.properties) == null ? void 0 : _w.minWidth) style.width = this.properties.minWidth;
-    if ((_x = this.properties) == null ? void 0 : _x.minHeight) style.height = this.properties.minHeight;
+    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;
@@ -6981,8 +6985,10 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7$1 = ["alt", "src"];
-const _hoisted_2$4$1 = {
+const _hoisted_1$7$1 = ["href", "target"];
+const _hoisted_2$4$1 = ["alt", "src"];
+const _hoisted_3$d = ["alt", "src"];
+const _hoisted_4$a = {
   key: 1,
   class: "placeholder"
 };
@@ -7015,14 +7021,27 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
       return {};
     });
     return (_ctx, _cache) => {
-      var _a, _b;
-      return ((_a = _ctx.part.properties) == null ? void 0 : _a.media) ? (openBlock(), createElementBlock("img", {
-        key: 0,
-        alt: altText.value,
-        src: ((_b = _ctx.part.properties) == null ? void 0 : _b.media).url,
-        style: normalizeStyle(style.value),
-        class: "image"
-      }, null, 12, _hoisted_1$7$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_2$4$1, _cache[0] || (_cache[0] = [
+      var _a, _b, _c, _d, _e, _f;
+      return ((_a = _ctx.part.properties) == null ? void 0 : _a.media) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        ((_b = _ctx.part.properties) == null ? void 0 : _b.link) ? (openBlock(), createElementBlock("a", {
+          key: 0,
+          href: (_c = _ctx.part.properties) == null ? void 0 : _c.link,
+          target: (_d = _ctx.part.properties) == null ? void 0 : _d.linkTarget
+        }, [
+          createElementVNode("img", {
+            alt: altText.value,
+            src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).url,
+            style: normalizeStyle(style.value),
+            class: "image"
+          }, null, 12, _hoisted_2$4$1)
+        ], 8, _hoisted_1$7$1)) : (openBlock(), createElementBlock("img", {
+          key: 1,
+          alt: altText.value,
+          src: ((_f = _ctx.part.properties) == null ? void 0 : _f.media).url,
+          style: normalizeStyle(style.value),
+          class: "image"
+        }, null, 12, _hoisted_3$d))
+      ], 64)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_4$a, _cache[0] || (_cache[0] = [
         createElementVNode("span", { class: "font-icon" }, "image", -1)
       ]))) : createCommentVNode("", true);
     };
@@ -8102,14 +8121,14 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DPMCCfN3.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-9hf9BTum.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-DrxTz2s1.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BupCrg8y.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-4sF6PJTE.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-CnF04lLw.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-wnD2ZhtY.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DGWhLeBV.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-CyyNcDAu.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-CQqLwB4B.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BIxdt8XI.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CeCp8qgN.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-B-pIw-m5.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -9320,7 +9339,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const updateWidth = (value) => updatePropertyValue({ width: value });
     const updateHeight = (value) => updatePropertyValue({ height: value });
     const updateMaxWidth = (value) => updatePropertyValue({ maxWidth: value });
-    const updateMaxHeight = (value) => updatePropertyValue({ maxWeight: value });
+    const updateMaxHeight = (value) => updatePropertyValue({ maxHeight: value });
     const updateMinWidth = (value) => updatePropertyValue({ minWidth: value });
     const updateMinHeight = (value) => updatePropertyValue({ minHeight: value });
     return (_ctx, _cache) => {
@@ -11796,22 +11815,22 @@ const sizeGroup = () => {
         propertyType: "text"
       },
       {
-        propertyName: "min-width",
+        propertyName: "minWidth",
         caption: "Min Width",
         propertyType: "text"
       },
       {
-        propertyName: "min-height",
+        propertyName: "minHeight",
         caption: "Min Height",
         propertyType: "text"
       },
       {
-        propertyName: "max-width",
+        propertyName: "maxWidth",
         caption: "Max Width",
         propertyType: "text"
       },
       {
-        propertyName: "max-height",
+        propertyName: "maxHeight",
         caption: "Max Height",
         propertyType: "text"
       }
@@ -12071,6 +12090,18 @@ const pageParts = [
     icon: "draft",
     className: "pb-page",
     propertyGroups: [
+      {
+        groupName: "size",
+        caption: "Size",
+        properties: [
+          {
+            propertyName: "maxWidth",
+            caption: "Max Width",
+            propertyType: "text",
+            params: ""
+          }
+        ]
+      },
       alignGroup(),
       paddingGroup(),
       backgroundGroup(),
@@ -12196,6 +12227,18 @@ const widgets = [
             caption: "Image",
             propertyType: "image",
             params: ""
+          },
+          {
+            propertyName: "link",
+            caption: "Link",
+            propertyType: "text",
+            params: ""
+          },
+          {
+            propertyName: "linkTarget",
+            caption: "Link Target",
+            propertyType: "text",
+            params: ""
           }
         ]
       },
@@ -12387,7 +12430,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-CpkklmlZ.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-CFwyR_Bq.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -14290,7 +14333,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  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  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 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$2 = ["height", "width"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "PbPageFrame",
@@ -14358,7 +14401,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       // width: `${width.value}px`,
       // height: `${height.value}px`,
     }));
-    let iframeObserver;
+    let resizeObserver;
     const updateIframeHeight = () => {
       setTimeout(() => {
         if (!iframeRef.value || !iframeRef.value.contentDocument) return;
@@ -14371,13 +14414,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       if (!iframeRef.value || !iframeRef.value.contentDocument) return;
       const iframeBody = iframeRef.value.contentDocument.body;
-      iframeObserver = new MutationObserver(updateIframeHeight);
-      iframeObserver.observe(iframeBody, { childList: true, subtree: true });
+      resizeObserver = new ResizeObserver(() => {
+        updateIframeHeight();
+      });
+      resizeObserver.observe(iframeBody, {});
       iframeRef.value.onload = updateIframeHeight;
     });
     onBeforeUnmount(() => {
-      if (iframeObserver) {
-        iframeObserver.disconnect();
+      if (resizeObserver) {
+        resizeObserver.disconnect();
       }
     });
     return (_ctx, _cache) => {

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-Cu4Pt-wp.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-iOtzsn-m.js";
 export {
   B as BLOCK_TYPE,
   b as Block,

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

@@ -6694,6 +6694,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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);
       } else {
         const direction = isMobilePage ? (_b = this.properties) == null ? void 0 : _b.directionSm : (_c = this.properties) == null ? void 0 : _c.directionLg;
         if (direction === "horizontal") {
@@ -6725,10 +6729,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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.width = this.properties.maxWidth;
-      if ((_v = this.properties) == null ? void 0 : _v.maxHeight) style.height = this.properties.maxHeight;
-      if ((_w = this.properties) == null ? void 0 : _w.minWidth) style.width = this.properties.minWidth;
-      if ((_x = this.properties) == null ? void 0 : _x.minHeight) style.height = this.properties.minHeight;
+      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;
@@ -6982,8 +6986,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$7$1 = ["alt", "src"];
-  const _hoisted_2$4$1 = {
+  const _hoisted_1$7$1 = ["href", "target"];
+  const _hoisted_2$4$1 = ["alt", "src"];
+  const _hoisted_3$o = ["alt", "src"];
+  const _hoisted_4$e = {
     key: 1,
     class: "placeholder"
   };
@@ -7016,14 +7022,27 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         return {};
       });
       return (_ctx, _cache) => {
-        var _a, _b;
-        return ((_a = _ctx.part.properties) == null ? void 0 : _a.media) ? (vue.openBlock(), vue.createElementBlock("img", {
-          key: 0,
-          alt: altText.value,
-          src: ((_b = _ctx.part.properties) == null ? void 0 : _b.media).url,
-          style: vue.normalizeStyle(style.value),
-          class: "image"
-        }, null, 12, _hoisted_1$7$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4$1, _cache[0] || (_cache[0] = [
+        var _a, _b, _c, _d, _e, _f;
+        return ((_a = _ctx.part.properties) == null ? void 0 : _a.media) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          ((_b = _ctx.part.properties) == null ? void 0 : _b.link) ? (vue.openBlock(), vue.createElementBlock("a", {
+            key: 0,
+            href: (_c = _ctx.part.properties) == null ? void 0 : _c.link,
+            target: (_d = _ctx.part.properties) == null ? void 0 : _d.linkTarget
+          }, [
+            vue.createElementVNode("img", {
+              alt: altText.value,
+              src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).url,
+              style: vue.normalizeStyle(style.value),
+              class: "image"
+            }, null, 12, _hoisted_2$4$1)
+          ], 8, _hoisted_1$7$1)) : (vue.openBlock(), vue.createElementBlock("img", {
+            key: 1,
+            alt: altText.value,
+            src: ((_f = _ctx.part.properties) == null ? void 0 : _f.media).url,
+            style: vue.normalizeStyle(style.value),
+            class: "image"
+          }, null, 12, _hoisted_3$o))
+        ], 64)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$e, _cache[0] || (_cache[0] = [
           vue.createElementVNode("span", { class: "font-icon" }, "image", -1)
         ]))) : vue.createCommentVNode("", true);
       };
@@ -9321,7 +9340,7 @@ ${_html.style}
       const updateWidth = (value) => updatePropertyValue({ width: value });
       const updateHeight = (value) => updatePropertyValue({ height: value });
       const updateMaxWidth = (value) => updatePropertyValue({ maxWidth: value });
-      const updateMaxHeight = (value) => updatePropertyValue({ maxWeight: value });
+      const updateMaxHeight = (value) => updatePropertyValue({ maxHeight: value });
       const updateMinWidth = (value) => updatePropertyValue({ minWidth: value });
       const updateMinHeight = (value) => updatePropertyValue({ minHeight: value });
       return (_ctx, _cache) => {
@@ -11797,22 +11816,22 @@ ${_html.style}
           propertyType: "text"
         },
         {
-          propertyName: "min-width",
+          propertyName: "minWidth",
           caption: "Min Width",
           propertyType: "text"
         },
         {
-          propertyName: "min-height",
+          propertyName: "minHeight",
           caption: "Min Height",
           propertyType: "text"
         },
         {
-          propertyName: "max-width",
+          propertyName: "maxWidth",
           caption: "Max Width",
           propertyType: "text"
         },
         {
-          propertyName: "max-height",
+          propertyName: "maxHeight",
           caption: "Max Height",
           propertyType: "text"
         }
@@ -12072,6 +12091,18 @@ ${_html.style}
       icon: "draft",
       className: "pb-page",
       propertyGroups: [
+        {
+          groupName: "size",
+          caption: "Size",
+          properties: [
+            {
+              propertyName: "maxWidth",
+              caption: "Max Width",
+              propertyType: "text",
+              params: ""
+            }
+          ]
+        },
         alignGroup(),
         paddingGroup(),
         backgroundGroup(),
@@ -12197,6 +12228,18 @@ ${_html.style}
               caption: "Image",
               propertyType: "image",
               params: ""
+            },
+            {
+              propertyName: "link",
+              caption: "Link",
+              propertyType: "text",
+              params: ""
+            },
+            {
+              propertyName: "linkTarget",
+              caption: "Link Target",
+              propertyType: "text",
+              params: ""
             }
           ]
         },
@@ -14291,7 +14334,7 @@ ${_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  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 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$f = ["height", "width"];
   const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPageFrame",
@@ -14359,7 +14402,7 @@ ${_html.style}
         // width: `${width.value}px`,
         // height: `${height.value}px`,
       }));
-      let iframeObserver;
+      let resizeObserver;
       const updateIframeHeight = () => {
         setTimeout(() => {
           if (!iframeRef.value || !iframeRef.value.contentDocument) return;
@@ -14372,13 +14415,15 @@ ${_html.style}
       vue.onMounted(() => {
         if (!iframeRef.value || !iframeRef.value.contentDocument) return;
         const iframeBody = iframeRef.value.contentDocument.body;
-        iframeObserver = new MutationObserver(updateIframeHeight);
-        iframeObserver.observe(iframeBody, { childList: true, subtree: true });
+        resizeObserver = new ResizeObserver(() => {
+          updateIframeHeight();
+        });
+        resizeObserver.observe(iframeBody, {});
         iframeRef.value.onload = updateIframeHeight;
       });
       vue.onBeforeUnmount(() => {
-        if (iframeObserver) {
-          iframeObserver.disconnect();
+        if (resizeObserver) {
+          resizeObserver.disconnect();
         }
       });
       return (_ctx, _cache) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.31",
+  "version": "1.0.0-alpha.32",
   "engins": {
     "node": ">= 20.0.0"
   },
@@ -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.31"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.32"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",