@g1cloud/page-builder-editor 1.0.0-alpha.101 → 1.0.0-alpha.103

package/dist/{index-SyHEuk0H.js → index-BsMUbVZy.js}

@@ -3,7 +3,6 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createBlock as createBlock$1, resolveDynamicComponent, withCtx, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, watch, onMounted, onBeforeUnmount, provide, inject, unref, renderList, normalizeProps, mergeProps, normalizeClass, withDirectives, vShow, reactive, defineAsyncComponent, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, createTextVNode, markRaw, toHandlers, Teleport } from "vue";
 import { notNull, vT, BSTextInput, vClickOutside, useModal, BSButton, BSMultiLangTextInput, BSSelect, showNotification, BSTree, useContextMenu, i18n, BSHorizontalLayoutResizer } from "@g1cloud/bluesea";
-import YouTube from "vue3-youtube";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
   const r = create$5();
@@ -7132,8 +7131,8 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$7$1 = ["href", "target"];
-const _hoisted_2$3$1 = ["alt", "src"];
-const _hoisted_3$d = ["alt", "src"];
+const _hoisted_2$4$1 = ["alt", "src"];
+const _hoisted_3$1$1 = ["alt", "src"];
 const _hoisted_4$b = ["alt", "src"];
 const _hoisted_5$8 = ["alt", "src"];
 const _hoisted_6$8 = ["poster"];
@@ -7206,7 +7205,7 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
                     src: ((_a2 = _ctx.part.properties) == null ? void 0 : _a2.media).fileUrl,
                     style: normalizeStyle(style.value),
                     class: "image"
-                  }, null, 12, _hoisted_2$3$1)
+                  }, null, 12, _hoisted_2$4$1)
                 ];
               }),
               _: 1
@@ -7216,7 +7215,7 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
               src: ((_d = _ctx.part.properties) == null ? void 0 : _d.media).fileUrl,
               style: normalizeStyle(style.value),
               class: "image"
-            }, null, 12, _hoisted_3$d))
+            }, null, 12, _hoisted_3$1$1))
           ], 8, _hoisted_1$7$1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             tag.value ? (openBlock(), createBlock$1(resolveDynamicComponent(tag.value), {
               key: 0,
@@ -7310,7 +7309,7 @@ const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$5$1 = ["innerHTML"];
-const _hoisted_2$2$1 = {
+const _hoisted_2$3$1 = {
   key: 1,
   class: "placeholder",
   textContent: "Empty HTML"
@@ -7399,12 +7398,12 @@ const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
         ref: partRef,
         class: "html",
         innerHTML: (_b = html.value) == null ? void 0 : _b.tags
-      }, null, 8, _hoisted_1$5$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_2$2$1)) : createCommentVNode("", true);
+      }, null, 8, _hoisted_1$5$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_2$3$1)) : createCommentVNode("", true);
     };
   }
 });
 const _hoisted_1$4$1 = ["src"];
-const _hoisted_2$1$1 = {
+const _hoisted_2$2$1 = {
   key: 1,
   class: "placeholder",
   textContent: "Empty URL"
@@ -7552,11 +7551,17 @@ const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
         ref: iframeRef,
         src: url.value,
         style: normalizeStyle(style.value)
-      }, null, 12, _hoisted_1$4$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_2$1$1)) : createCommentVNode("", true);
+      }, null, 12, _hoisted_1$4$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_2$2$1)) : createCommentVNode("", true);
     };
   }
 });
 const _hoisted_1$3$1 = {
+  key: 0,
+  class: "youtube-container",
+  style: { width: "100%" }
+};
+const _hoisted_2$1$1 = ["src"];
+const _hoisted_3$d = {
   key: 1,
   class: "placeholder"
 };
@@ -7568,87 +7573,72 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const container = ref();
-    const containerWidth = ref(640);
-    const aspectRatio = computed(() => {
-      var _a;
-      const raw = (_a = props.part.properties) == null ? void 0 : _a.aspectRatio;
-      if (!raw) return 16 / 9;
-      const parts = raw.split("/");
-      if (parts.length === 2) {
-        const w = Number(parts[0]);
-        const h = Number(parts[1]);
-        if (w > 0 && h > 0) return w / h;
-      }
-      return 16 / 9;
-    });
-    const playerHeight = computed(() => Math.round(containerWidth.value / aspectRatio.value));
-    const updateWidth = () => {
-      if (container.value) {
-        containerWidth.value = container.value.clientWidth;
+    const extractVideoId = (raw) => {
+      const value = raw.trim();
+      if (!value) return void 0;
+      if (/^[\w-]{11}$/.test(value)) return value;
+      try {
+        const u = new URL(value);
+        const host = u.hostname.replace(/^www\./, "");
+        if (host === "youtu.be") {
+          const id = u.pathname.slice(1).split("/")[0];
+          return id || void 0;
+        }
+        if (host === "youtube.com" || host === "youtube-nocookie.com" || host === "m.youtube.com") {
+          const v = u.searchParams.get("v");
+          if (v) return v;
+          const segs = u.pathname.split("/").filter(Boolean);
+          const idx = segs.findIndex((s) => s === "embed" || s === "shorts" || s === "live" || s === "v");
+          if (idx >= 0 && segs[idx + 1]) return segs[idx + 1];
+        }
+      } catch {
       }
+      return void 0;
     };
-    let resizeObserver;
-    const onReady = () => {
-    };
-    const isYTReady = ref(false);
-    onMounted(() => {
-      if (container.value) {
-        updateWidth();
-        resizeObserver = new ResizeObserver(updateWidth);
-        resizeObserver.observe(container.value);
-      }
-      const interval = setInterval(() => {
-        try {
-          if (window && window.YT && window.YT.Player) {
-            isYTReady.value = true;
-            clearInterval(interval);
-          }
-        } catch (e) {
-        }
-      }, 500);
+    const embedSrc = computed(() => {
+      var _a;
+      const raw = (_a = props.part.properties) == null ? void 0 : _a.url;
+      if (!raw) return void 0;
+      const id = extractVideoId(raw);
+      if (!id) return void 0;
+      return `https://www.youtube-nocookie.com/embed/${id}`;
     });
-    onBeforeUnmount(() => {
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    const aspectRatioCss = computed(() => {
+      var _a;
+      const raw = (_a = props.part.properties) == null ? void 0 : _a.aspectRatio;
+      if (raw) {
+        const parts = raw.split("/");
+        if (parts.length === 2) {
+          const w = Number(parts[0]);
+          const h = Number(parts[1]);
+          if (w > 0 && h > 0) return `${w} / ${h}`;
+        }
+      }
+      return "16 / 9";
     });
+    const iframeStyle = computed(() => ({
+      width: "100%",
+      aspectRatio: aspectRatioCss.value,
+      border: "0",
+      display: "block"
+    }));
     return (_ctx, _cache) => {
-      var _a, _b;
-      return openBlock(), createElementBlock(Fragment, null, [
-        (openBlock(), createBlock$1(resolveDynamicComponent("script"), {
-          id: "youtube-iframe-js-api-script",
-          class: "optanon-category-C0004",
-          src: "https://www.youtube.com/iframe_api"
-        })),
-        ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          ref_key: "container",
-          ref: container,
-          class: "youtube-container"
-        }, [
-          isYTReady.value ? (openBlock(), createBlock$1(unref(YouTube), {
-            key: 0,
-            ref: "youtube",
-            host: "https://www.youtube-nocookie.com",
-            src: ((_b = _ctx.part.properties) == null ? void 0 : _b.url) || "",
-            width: containerWidth.value,
-            height: playerHeight.value,
-            onReady
-          }, null, 8, ["src", "width", "height"])) : createCommentVNode("", true)
-        ], 512)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
-          createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
-        ]))) : createCommentVNode("", true)
-      ], 64);
+      return embedSrc.value ? (openBlock(), createElementBlock("div", _hoisted_1$3$1, [
+        createElementVNode("iframe", {
+          src: embedSrc.value,
+          style: normalizeStyle(iframeStyle.value),
+          frameborder: "0",
+          allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share",
+          allowfullscreen: "",
+          loading: "lazy",
+          title: "YouTube video"
+        }, null, 12, _hoisted_2$1$1)
+      ])) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$d, _cache[0] || (_cache[0] = [
+        createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
+      ]))) : createCommentVNode("", true);
     };
   }
 });
-const _export_sfc$1 = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const PbYoutubeWidget = /* @__PURE__ */ _export_sfc$1(_sfc_main$4$1, [["__scopeId", "data-v-675477df"]]);
 const defaultPartDefinitions = {
   "Section": {
     partType: "Section",
@@ -7690,7 +7680,7 @@ const defaultPartDefinitions = {
     partType: "Widget",
     partName: "YoutubeWidget",
     className: "pb-youtube-widget",
-    creator: () => PbYoutubeWidget
+    creator: () => _sfc_main$4$1
   }
   /*
    * BSP에서 사용안함
@@ -8628,16 +8618,16 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-BJ5qx69O.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-mWOJ1KrX.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-C1ktcMVa.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-Bp2vUVha.js")),
-    "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.js")),
-    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-s--C0dHZ.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-BsPFj_3N.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DbbK_0WV.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-WoyBfORQ.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-BCiZmiWV.js"))
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-705l-6cb.js")),
+    "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-DkXgwpK8.js")),
+    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-7sBhgyiM.js")),
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-0zFwhnJp.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DCOGVu0_.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-Cz33ZrZp.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-R2dUexOc.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8657,7 +8647,7 @@ const isCursorInElement = (event, element) => {
 };
 const selectYoutubeVideo = (modal, url, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbYoutubeModal-BaL5gsKK.js")),
+    component: defineAsyncComponent(() => import("./PbYoutubeModal-BJuyyip-.js")),
     style: {
       minWidth: "500px",
       minHeight: "400px"
@@ -13324,7 +13314,7 @@ const widgets = [
     ],
     initialProperties: {},
     allowsChild: () => false,
-    creator: () => PbYoutubeWidget
+    creator: () => _sfc_main$4$1
   }
   /*
    * BSP에서 사용안함
@@ -13435,7 +13425,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-0p7a4pVO.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-CNblLmnp.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -15609,6 +15599,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 });
 const canvasStyle = '.pb-page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  overflow-x: hidden;\n}\n.pb-page .pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-section .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}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .text {\n  display: block;\n  color: #333;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-media-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image-container {\n  margin: 0;\n  padding: 0;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .video {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-container-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.pb-page .pb-section .pb-block .mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-page .pb-section .pb-block .pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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.pb-page * {\n  box-sizing: border-box;\n}\n.pb-viewer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  overflow-y: auto;\n}\n.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: #fff;\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.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  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n}\n.pb-section:empty {\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\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.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::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.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  min-height: 50px;\n}\n.pb-widget * {\n  pointer-events: none;\n}\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\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.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  pointer-events: auto !important;\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}\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: var(--color-canvas-frame-bg);\n  overflow: hidden;\n}\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\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  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  font-style: normal;\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 = ["width"];
+const iframeSrcdoc = "<!doctype html><html><head></head><body></body></html>";
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "PbPageFrame",
   props: {
@@ -15619,41 +15610,41 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const pageBuilderEditor = usePageBuilderEditor();
     const iframeRef = ref();
+    const ready = ref(false);
     provideMouseTracker(iframeRef);
-    const stopIframeWatch = watch(
-      () => {
-        var _a, _b;
-        return (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
-      },
-      () => {
-        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 externalCss = pageBuilderEditor.getExternalCss();
-          const head = (_e = (_d = iframeRef.value) == null ? void 0 : _d.contentWindow) == null ? void 0 : _e.document.head;
-          head.innerHTML = `
-          <meta charset="UTF-8"/>
-          <link
-            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
-            rel="stylesheet"/>
-          ${externalCss}
-          <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) {
-              console.log(event)
-              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();
-        }
-      }
-    );
+    const onIframeLoad = () => {
+      var _a, _b;
+      if (ready.value) return;
+      const doc = (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
+      if (!(doc == null ? void 0 : doc.head)) return;
+      const externalCss = pageBuilderEditor.getExternalCss();
+      doc.head.innerHTML = `
+    <meta charset="UTF-8"/>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
+      rel="stylesheet"/>
+    ${externalCss}
+    <style>${canvasStyle}</style>
+  `;
+      const script2 = doc.createElement("script");
+      script2.innerHTML = `
+    function forwardPostMessage(event) {
+      if (event.data) {
+        console.log(event)
+        window.parent.postMessage(event.data, '*');
+      }
+    }
+    window.addEventListener('message', forwardPostMessage);
+  `;
+      doc.head.appendChild(script2);
+      pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(doc.body);
+      ready.value = true;
+      resizeObserver = new ResizeObserver(updateIframeHeight);
+      resizeObserver.observe(doc.body, {});
+      mutationObserver = new MutationObserver(updateIframeHeight);
+      mutationObserver.observe(doc.body, { childList: true, subtree: true });
+      updateIframeHeight();
+    };
     const width = ref(props.width);
     ref(200);
     const isMobilePage = computed(() => width.value <= 768);
@@ -15678,15 +15669,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         }
       });
     };
-    onMounted(() => {
-      if (!iframeRef.value || !iframeRef.value.contentDocument) return;
-      const iframeBody = iframeRef.value.contentDocument.body;
-      resizeObserver = new ResizeObserver(updateIframeHeight);
-      resizeObserver.observe(iframeBody, {});
-      mutationObserver = new MutationObserver(updateIframeHeight);
-      mutationObserver.observe(iframeBody, { childList: true, subtree: true });
-      iframeRef.value.onload = updateIframeHeight;
-    });
     onBeforeUnmount(() => {
       if (resizeObserver) {
         resizeObserver.disconnect();
@@ -15715,11 +15697,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         createElementVNode("iframe", {
           ref_key: "iframeRef",
           ref: iframeRef,
+          srcdoc: iframeSrcdoc,
           style: normalizeStyle(style.value),
           width: `${width.value}px`,
-          class: "page-frame mt-12"
-        }, null, 12, _hoisted_1$2),
-        ((_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document.body) ? (openBlock(), createBlock$1(Teleport, {
+          class: "page-frame mt-12",
+          onLoad: onIframeLoad
+        }, null, 44, _hoisted_1$2),
+        ready.value && ((_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document.body) ? (openBlock(), createBlock$1(Teleport, {
           key: 0,
           to: (_d = (_c = iframeRef.value) == null ? void 0 : _c.contentWindow) == null ? void 0 : _d.document.body
         }, [
@@ -17577,10 +17561,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        (openBlock(), createBlock$1(resolveDynamicComponent("script"), {
-          id: "youtube-iframe-js-api-script",
-          src: "https://www.youtube.com/iframe_api"
-        })),
         createVNode(_sfc_main$9, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
         createElementVNode("div", _hoisted_2, [
           createVNode(_sfc_main$8, { class: "w-240 min-w-120" }),
@@ -17620,7 +17600,7 @@ export {
   _sfc_main$5$1 as l,
   _sfc_main$8$1 as m,
   _sfc_main$7$1 as n,
-  PbYoutubeWidget as o,
+  _sfc_main$4$1 as o,
   RootPart as p,
   Section as q,
   Widget as r,

package/dist/model/part-property.d.ts

@@ -10,6 +10,7 @@ export type PartProperty = {
     params?: any;
     propertyEditor?: PartPropertyEditor;
     readonly?: boolean;
+    disabled?: boolean;
     multiLang?: boolean;
     propertyConstraint?: Record<string, unknown>;
 };

package/dist/page-builder-editor.js

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