@g1cloud/page-builder-editor 1.0.0-alpha.16 → 1.0.0-alpha.17

package/dist/{index-BcD7YsdY.js → index-rPBXWjSz.js}

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, normalizeClass, createElementVNode, mergeProps, toDisplayString, provide, inject, onMounted, watch, createBlock as createBlock$1, resolveDynamicComponent, normalizeProps, Fragment, renderList, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, onBeforeUnmount, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, Teleport, toHandlers, withCtx } from "vue";
+import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, mergeProps, toDisplayString, onMounted, onBeforeUnmount, provide, inject, watch, createBlock as createBlock$1, resolveDynamicComponent, normalizeProps, createElementVNode, normalizeClass, Fragment, renderList, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, Teleport, toHandlers, withCtx } from "vue";
 import { notNull, BSTextInput, vClickOutside, useContextMenu, useModal, BSSelect, BSTabSheet, BSTree, BSDateRange } from "@g1cloud/bluesea";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
@@ -6892,12 +6892,12 @@ let Model$1 = class Model {
     this.rootPart = ref(new RootPart());
   }
 };
-const _hoisted_1$7$1 = ["data-model-id"];
-const _hoisted_2$3$1 = {
+const _hoisted_1$8$1 = ["data-model-id"];
+const _hoisted_2$5$1 = {
   key: 1,
   class: "pb-nested-widget"
 };
-const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
   __name: "PbWidget",
   props: {
     part: {}
@@ -6919,7 +6919,7 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
           key: 0,
           part: _ctx.part
         }, null, 8, ["part"])) : createCommentVNode("", true),
-        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$3$1, [
+        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$5$1, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
             return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
               key: child.part.partId,
@@ -6927,12 +6927,12 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["part"]);
           }), 128))
         ])) : createCommentVNode("", true)
-      ], 16, _hoisted_1$7$1);
+      ], 16, _hoisted_1$8$1);
     };
   }
 });
-const _hoisted_1$6$1 = ["data-model-id"];
-const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7$1 = ["data-model-id"];
+const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
     part: {}
@@ -6950,17 +6950,17 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
         style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
       }, properties.value), [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
-          return openBlock(), createBlock$1(_sfc_main$9$1, {
+          return openBlock(), createBlock$1(_sfc_main$a$1, {
             key: child.partId,
             part: child
           }, null, 8, ["part"]);
         }), 128))
-      ], 16, _hoisted_1$6$1);
+      ], 16, _hoisted_1$7$1);
     };
   }
 });
-const _hoisted_1$5$1 = { class: "pb-block" };
-const _hoisted_2$2$1 = /* @__PURE__ */ createElementVNode("div", {
+const _hoisted_1$6$1 = { class: "pb-block" };
+const _hoisted_2$4$1 = /* @__PURE__ */ createElementVNode("div", {
   class: "pb-widget",
   style: { "margin": "0 auto" }
 }, [
@@ -6968,22 +6968,22 @@ const _hoisted_2$2$1 = /* @__PURE__ */ createElementVNode("div", {
     /* @__PURE__ */ createElementVNode("h3", null, "Login Design Part")
   ])
 ], -1);
-const _hoisted_3$1$1 = [
-  _hoisted_2$2$1
+const _hoisted_3$4$1 = [
+  _hoisted_2$4$1
 ];
-const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
   __name: "PbLoginDepart",
   props: {
     part: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5$1, _hoisted_3$1$1);
+      return openBlock(), createElementBlock("div", _hoisted_1$6$1, _hoisted_3$4$1);
     };
   }
 });
-const _hoisted_1$4$1 = ["data-model-id"];
-const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5$1 = ["data-model-id"];
+const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
     part: {}
@@ -6999,94 +6999,74 @@ const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
         "data-model-id": _ctx.part.partId,
         style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
       }, properties.value), [
-        ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$7$1, {
+        ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$8$1, {
           key: 0,
           part: _ctx.part
         }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.part.children, (block) => {
-          return openBlock(), createBlock$1(_sfc_main$8$1, {
+          return openBlock(), createBlock$1(_sfc_main$9$1, {
             key: block.partId,
             part: block
           }, null, 8, ["part"]);
         }), 128)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$4$1);
+      ], 16, _hoisted_1$5$1);
     };
   }
 });
-const _hoisted_1$3$1 = { class: "pb-image-widget" };
-const _hoisted_2$1$1 = ["src"];
-const _hoisted_3$h = {
+const _hoisted_1$4$1 = { class: "pb-image-widget" };
+const _hoisted_2$3$1 = ["src"];
+const _hoisted_3$3$1 = {
   key: 1,
-  class: "empty"
+  class: "placeholder"
 };
 const _hoisted_4$e = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "image", -1);
 const _hoisted_5$7 = [
   _hoisted_4$e
 ];
-const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
   __name: "PbImageWidget",
   props: {
     part: {},
-    viewMode: { type: Boolean, default: false }
+    placeholder: { type: Boolean }
   },
   setup(__props) {
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createElementBlock("div", _hoisted_1$3$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4$1, [
         ((_a = _ctx.part.properties) == null ? void 0 : _a.image) ? (openBlock(), createElementBlock("img", {
           key: 0,
           src: (_b = _ctx.part.properties) == null ? void 0 : _b.image,
           alt: "",
           class: "image"
-        }, null, 8, _hoisted_2$1$1)) : !_ctx.viewMode ? (openBlock(), createElementBlock("div", _hoisted_3$h, _hoisted_5$7)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_2$3$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$3$1, _hoisted_5$7)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$2$1 = ["textContent"];
-const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3$1 = { class: "pb-text-widget" };
+const _hoisted_2$2$1 = ["textContent"];
+const _hoisted_3$2$1 = {
+  key: 1,
+  class: "placeholder",
+  textContent: "Empty Text"
+};
+const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
   __name: "PbTextWidget",
   props: {
     part: {},
-    viewMode: { type: Boolean, default: false }
+    placeholder: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
     const pageBuilder = usePageBuilder();
-    const emptyClass = computed(() => {
-      var _a;
-      if (props.viewMode) {
-        return false;
-      } else if ((_a = props.part.properties) == null ? void 0 : _a.text) {
-        if (typeof props.part.properties.text === "string") {
-          return true;
-        } else {
-          return !props.part.properties.text[pageBuilder.locale.value];
-        }
-      } else {
-        return true;
-      }
-    });
     const text = computed(() => {
       var _a;
       if ((_a = props.part.properties) == null ? void 0 : _a.text) {
         if (typeof props.part.properties.text === "string") {
-          if (props.viewMode) {
-            return "";
-          } else {
-            return "Empty text";
-          }
+          return props.part.properties.text;
         } else {
-          const t = props.part.properties.text[pageBuilder.locale.value];
-          if (props.viewMode) {
-            return t || "";
-          } else {
-            return t || "Empty text";
-          }
+          const locale = pageBuilder.getLocale();
+          return props.part.properties.text[locale] || "";
         }
-      } else if (props.viewMode) {
-        return "";
-      } else {
-        return "Empty text";
       }
     });
     const style = computed(() => {
@@ -7099,23 +7079,29 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
       };
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([[emptyClass.value ? "empty" : ""], "pb-text-widget"])
-      }, [
-        createElementVNode("div", mergeProps({ class: "text" }, style.value, {
+      return openBlock(), createElementBlock("div", _hoisted_1$3$1, [
+        text.value ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 0,
+          class: "text"
+        }, style.value, {
           textContent: toDisplayString(text.value)
-        }), null, 16, _hoisted_1$2$1)
-      ], 2);
+        }), null, 16, _hoisted_2$2$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$2$1)) : createCommentVNode("", true)
+      ]);
     };
   }
 });
-const _hoisted_1$1$1 = ["innerHTML"];
-const _hoisted_2$k = { key: 1 };
-const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$2$1 = { class: "pb-html-widget" };
+const _hoisted_2$1$1 = ["innerHTML"];
+const _hoisted_3$1$1 = {
+  key: 1,
+  class: "placeholder",
+  textContent: "Empty HTML"
+};
+const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
   __name: "PbHtmlWidget",
   props: {
     part: {},
-    viewMode: { type: Boolean, default: false }
+    placeholder: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -7142,23 +7128,69 @@ ${_html.style}
       var _a;
       return getHtml((_a = props.part.properties) == null ? void 0 : _a.html);
     });
-    const emptyClass = computed(() => {
-      if (props.viewMode) {
-        return false;
-      } else {
-        return !html.value;
-      }
-    });
+    computed(() => props.placeholder ? !html.value : false);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([[emptyClass.value ? "empty" : ""], "pb-html-widget"])
-      }, [
+      return openBlock(), createElementBlock("div", _hoisted_1$2$1, [
         html.value ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "html",
           innerHTML: html.value
-        }, null, 8, _hoisted_1$1$1)) : (openBlock(), createElementBlock("span", _hoisted_2$k, "Empty HTML"))
-      ], 2);
+        }, null, 8, _hoisted_2$1$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$1$1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$1$1 = { class: "pb-iframe-widget" };
+const _hoisted_2$k = ["src"];
+const _hoisted_3$h = {
+  key: 1,
+  class: "placeholder",
+  textContent: "Empty URL"
+};
+const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
+  __name: "PbIframeWidget",
+  props: {
+    part: {},
+    placeholder: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const pageBuilder = usePageBuilder();
+    const url = computed(() => {
+      var _a;
+      const url2 = (_a = props.part.properties) == null ? void 0 : _a.url;
+      if (!url2)
+        return;
+      if (typeof url2 !== "object")
+        return;
+      const locale = pageBuilder.getLocale();
+      return url2[locale];
+    });
+    const style = computed(() => ({
+      style: {
+        width: "100%",
+        height: `${height.value}px`
+      }
+    }));
+    const height = ref(200);
+    const updateHeight = (event) => {
+      if (event.data && event.data.height) {
+        height.value = event.data.height;
+      }
+    };
+    onMounted(() => {
+      window.addEventListener("message", updateHeight);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("message", updateHeight);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1$1, [
+        url.value ? (openBlock(), createElementBlock("iframe", mergeProps({
+          key: 0,
+          src: url.value
+        }, style.value), null, 16, _hoisted_2$k)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$h)) : createCommentVNode("", true)
+      ]);
     };
   }
 });
@@ -7166,41 +7198,46 @@ const defaultPartDefinitions = {
   "Section": {
     partType: "Section",
     partName: "Section",
-    creator: () => _sfc_main$6$1
+    creator: () => _sfc_main$7$1
   },
   "GlobalDesignPart": {
     partType: "Section",
     partName: "GlobalDesignPart",
-    creator: () => _sfc_main$6$1
+    creator: () => _sfc_main$7$1
   },
   "LocalDesignPart": {
     partType: "Section",
     partName: "LocalDesignPart",
-    creator: () => _sfc_main$6$1
+    creator: () => _sfc_main$7$1
   },
   "LocalMarketingPart": {
     partType: "Section",
     partName: "LocalMarketingPart",
-    creator: () => _sfc_main$6$1
+    creator: () => _sfc_main$7$1
   },
   "Block": {
     partType: "Block",
     partName: "Block",
-    creator: () => _sfc_main$8$1
+    creator: () => _sfc_main$9$1
   },
   "TextWidget": {
     partType: "Widget",
     partName: "TextWidget",
-    creator: () => _sfc_main$4$1
+    creator: () => _sfc_main$5$1
   },
   "ImageWidget": {
     partType: "Widget",
     partName: "ImageWidget",
-    creator: () => _sfc_main$5$1
+    creator: () => _sfc_main$6$1
   },
   "HtmlWidget": {
     partType: "Widget",
     partName: "HtmlWidget",
+    creator: () => _sfc_main$4$1
+  },
+  "IframeWidget": {
+    partType: "Widget",
+    partName: "IframeWidget",
     creator: () => _sfc_main$3$1
   }
 };
@@ -7346,7 +7383,7 @@ const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
           class: normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
         }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section) => {
-            return openBlock(), createBlock$1(_sfc_main$6$1, {
+            return openBlock(), createBlock$1(_sfc_main$7$1, {
               key: section.partId,
               part: section
             }, null, 8, ["part"]);
@@ -8035,12 +8072,12 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BWOKvwD9.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-B5HryveI.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-CleInrev.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-zmUCXJQZ.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-Bw7qz0-r.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-GN536Jw2.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DH2Qep1X.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-DEVkcUND.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DAEVOkpl.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CxPlqBYx.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8765,13 +8802,15 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }, properties.value), [
         thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
           key: 0,
-          part: _ctx.part
+          part: _ctx.part,
+          placeholder: true
         }, null, 8, ["part"])) : createCommentVNode("", true),
         childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$i, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
             return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
               key: child.part.partId,
-              part: child.part
+              part: child.part,
+              placeholder: true
             }, null, 8, ["part"]);
           }), 128))
         ])) : createCommentVNode("", true),
@@ -12041,7 +12080,7 @@ const widgets = [
     },
     localized: true,
     allowsChild: () => false,
-    creator: () => _sfc_main$4$1
+    creator: () => _sfc_main$5$1
   },
   {
     partType: "Widget",
@@ -12067,7 +12106,7 @@ const widgets = [
     initialProperties: {},
     localized: true,
     allowsChild: () => false,
-    creator: () => _sfc_main$5$1
+    creator: () => _sfc_main$6$1
   },
   {
     partType: "Widget",
@@ -12094,6 +12133,33 @@ const widgets = [
     initialProperties: {},
     localized: true,
     allowsChild: () => false,
+    creator: () => _sfc_main$4$1
+  },
+  {
+    partType: "Widget",
+    partName: "IframeWidget",
+    caption: "IFrame",
+    icon: "code",
+    propertyGroups: [
+      {
+        groupName: "iframe",
+        caption: "Iframe",
+        properties: [
+          {
+            propertyName: "url",
+            caption: "URL",
+            propertyType: "text",
+            params: "",
+            localized: true,
+            multiLang: true
+          }
+        ]
+      },
+      ...defaultWidgetPropertyGroups()
+    ],
+    initialProperties: {},
+    localized: true,
+    allowsChild: () => false,
     creator: () => _sfc_main$3$1
   }
 ];
@@ -12223,7 +12289,7 @@ const openPartAddModal = (modal, args, callback) => {
 };
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-Zpo-ZeNH.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-DoR8HJUd.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -13622,7 +13688,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\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.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\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.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\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.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.pb-section-static .pb-widget {\n  outline: none;\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.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\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}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\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}\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}\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.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget.empty .text {\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-html-widget.empty {\n  padding: 4px 0;\n  font-size: 18px;\n  color: #999;\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.pb-product-list-widget .product-wrapper {\n  width: 25%;\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.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\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@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\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.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\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.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.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\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.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
+const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\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.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\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.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\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.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.pb-section-static .pb-widget {\n  outline: none;\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.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\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}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\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}\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}\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.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\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.pb-product-list-widget .product-wrapper {\n  width: 25%;\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.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\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@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\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.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\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.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.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\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.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
 const _hoisted_1$a = { class: "pb-canvas-frame" };
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "PbCanvasFrame",
@@ -13636,7 +13702,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         return (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
       },
       () => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if ((_c = (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document) == null ? void 0 : _c.head) {
           const head = (_e = (_d = iframeRef.value) == null ? void 0 : _d.contentWindow) == null ? void 0 : _e.document.head;
           head.innerHTML = `
@@ -13659,6 +13725,16 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet" />
           <style>${canvasStyle}</style>
         `;
+          const script2 = (_g = (_f = iframeRef.value) == null ? void 0 : _f.contentWindow) == null ? void 0 : _g.document.createElement("script");
+          script2.innerHTML = `
+          function forwardPostMessage(event) {
+            if (event.data) {
+              window.parent.postMessage(event.data, '*');
+            }
+          }
+          window.addEventListener('message', forwardPostMessage);
+        `;
+          (_h = iframeRef.value) == null ? void 0 : _h.contentWindow.document.head.appendChild(script2);
           pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(iframeRef.value.contentWindow.document.body);
           stopIframeWatch();
         }
@@ -14448,19 +14524,20 @@ export {
   PageBuilderViewerEvent as g,
   Part as h,
   _sfc_main$q as i,
-  _sfc_main$3$1 as j,
-  _sfc_main$5$1 as k,
-  _sfc_main$4$1 as l,
-  RootPart as m,
-  Section as n,
-  Widget as o,
-  createPageBuilderViewer as p,
-  createPartComponent as q,
-  createPartComponents as r,
-  providePageBuilder as s,
-  providePageBuilderViewer as t,
+  _sfc_main$4$1 as j,
+  _sfc_main$3$1 as k,
+  _sfc_main$6$1 as l,
+  _sfc_main$5$1 as m,
+  RootPart as n,
+  Section as o,
+  Widget as p,
+  createPageBuilderViewer as q,
+  createPartComponent as r,
+  createPartComponents as s,
+  providePageBuilder as t,
   usePageBuilderEditor as u,
-  usePageBuilder as v,
+  providePageBuilderViewer as v,
   widgetPartDefinitions as w,
-  usePageBuilderViewer as x
+  usePageBuilder as x,
+  usePageBuilderViewer as y
 };

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, R, m, S, n, W, o, p, q, r, s, t, v, x } from "./index-BcD7YsdY.js";
+import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, R, n, S, o, W, p, q, r, s, t, v, x, y } from "./index-rPBXWjSz.js";
 export {
   B as BLOCK_TYPE,
   b as Block,
@@ -13,19 +13,20 @@ export {
   h as Part,
   i as PbCustomWidget,
   j as PbHtmlWidget,
-  k as PbImageWidget,
-  l as PbTextWidget,
+  k as PbIframeWidget,
+  l as PbImageWidget,
+  m as PbTextWidget,
   R as ROOT_TYPE,
-  m as RootPart,
+  n as RootPart,
   S as SECTION_TYPE,
-  n as Section,
+  o as Section,
   W as WIDGET_TYPE,
-  o as Widget,
-  p as createPageBuilderViewer,
-  q as createPartComponent,
-  r as createPartComponents,
-  s as providePageBuilder,
-  t as providePageBuilderViewer,
-  v as usePageBuilder,
-  x as usePageBuilderViewer
+  p as Widget,
+  q as createPageBuilderViewer,
+  r as createPartComponent,
+  s as createPartComponents,
+  t as providePageBuilder,
+  v as providePageBuilderViewer,
+  x as usePageBuilder,
+  y as usePageBuilderViewer
 };