@g1cloud/page-builder-editor 1.0.0-alpha.81 → 1.0.0-alpha.83

package/dist/{index-tTR7GhuX.js → index-CzWzYmyG.js}

@@ -6816,7 +6816,7 @@ class Part {
         return match;
       }
       const selectors = match.split(",").map((selector) => selector.trim());
-      const modifiedSelectors = selectors.map((selector) => `[data-part-id=${this.partId}] ${selector}`).join(", ");
+      const modifiedSelectors = selectors.map((selector) => `[data-part-id="${this.partId}"] ${selector}`).join(", ");
       return `${modifiedSelectors} `;
     });
   }
@@ -6897,32 +6897,52 @@ const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
       emit("update:visible", value, !!((_a = props.part.properties) == null ? void 0 : _a.hideParentWhenInvisible));
     };
     const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
-    const styleTag = computed(() => props.part.getStyleTag());
     const style = computed(() => ({
       ...props.part.getStyles(),
       ...props.part.getInlineStyles()
     }));
     const thisComponent = computed(() => createPartComponent(props.part));
+    const styleTag = computed(() => props.part.getStyleTag());
+    function ensureStyleTag() {
+      removeStyleTag();
+      if (!styleTag.value) return;
+      let styleEl = document.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (!styleEl) {
+        styleEl = document.createElement("style");
+        styleEl.setAttribute("data-part-style-id", props.part.partId);
+        document.head.appendChild(styleEl);
+      }
+      styleEl.textContent = styleTag.value;
+    }
+    function removeStyleTag() {
+      const styleEl = document.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (styleEl) {
+        document.head.removeChild(styleEl);
+      }
+    }
+    watch(styleTag, () => {
+      ensureStyleTag();
+    });
+    onMounted(() => {
+      ensureStyleTag();
+    });
+    onBeforeUnmount(() => {
+      removeStyleTag();
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        styleTag.value && visible.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
+      return withDirectives((openBlock(), createElementBlock("div", {
+        class: normalizeClass([classNames.value, "pb-widget"]),
+        "data-part-id": _ctx.part.partId,
+        style: normalizeStyle(style.value)
+      }, [
+        thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
           key: 0,
-          innerHTML: styleTag.value
-        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
-        withDirectives(createElementVNode("div", {
-          class: normalizeClass([classNames.value, "pb-widget"]),
-          "data-part-id": _ctx.part.partId,
-          style: normalizeStyle(style.value)
-        }, [
-          thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
-            key: 0,
-            part: _ctx.part,
-            "onUpdate:visible": updateVisible
-          }, null, 40, ["part"])) : createCommentVNode("", true)
-        ], 14, _hoisted_1$a$1), [
-          [vShow, visible.value]
-        ])
-      ], 64);
+          part: _ctx.part,
+          "onUpdate:visible": updateVisible
+        }, null, 40, ["part"])) : createCommentVNode("", true)
+      ], 14, _hoisted_1$a$1)), [
+        [vShow, visible.value]
+      ]);
     };
   }
 });
@@ -6945,33 +6965,53 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
       emit("update:visible", visible.value, hideParentWhenInvisible);
     };
     const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
-    const styleTag = computed(() => props.part.getStyleTag());
     const style = computed(() => ({
       ...props.part.getStyles(props.isMobilePage),
       ...props.part.getInlineStyles()
     }));
+    const styleTag = computed(() => props.part.getStyleTag());
+    function ensureStyleTag() {
+      removeStyleTag();
+      if (!styleTag.value) return;
+      let styleEl = document.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (!styleEl) {
+        styleEl = document.createElement("style");
+        styleEl.setAttribute("data-part-style-id", props.part.partId);
+        document.head.appendChild(styleEl);
+      }
+      styleEl.textContent = styleTag.value;
+    }
+    function removeStyleTag() {
+      const styleEl = document.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (styleEl) {
+        document.head.removeChild(styleEl);
+      }
+    }
+    watch(styleTag, () => {
+      ensureStyleTag();
+    });
+    onMounted(() => {
+      ensureStyleTag();
+    });
+    onBeforeUnmount(() => {
+      removeStyleTag();
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        styleTag.value && visible.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
-          key: 0,
-          innerHTML: styleTag.value
-        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
-        withDirectives(createElementVNode("div", {
-          class: normalizeClass(classNames.value),
-          "data-part-id": _ctx.part.partId,
-          style: normalizeStyle(style.value)
-        }, [
-          _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
-            return openBlock(), createBlock$1(_sfc_main$b$1, {
-              key: child.partId,
-              part: child,
-              "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
-            }, null, 8, ["part"]);
-          }), 128)) : createCommentVNode("", true)
-        ], 14, _hoisted_1$9$1), [
-          [vShow, visible.value]
-        ])
-      ], 64);
+      return withDirectives((openBlock(), createElementBlock("div", {
+        class: normalizeClass(classNames.value),
+        "data-part-id": _ctx.part.partId,
+        style: normalizeStyle(style.value)
+      }, [
+        _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
+          return openBlock(), createBlock$1(_sfc_main$b$1, {
+            key: child.partId,
+            part: child,
+            "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
+          }, null, 8, ["part"]);
+        }), 128)) : createCommentVNode("", true)
+      ], 14, _hoisted_1$9$1)), [
+        [vShow, visible.value]
+      ]);
     };
   }
 });
@@ -6991,34 +7031,54 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
       }
     };
     const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
-    const styleTag = computed(() => props.part.getStyleTag());
     const style = computed(() => ({
       ...props.part.getStyles(props.isMobilePage),
       ...props.part.getInlineStyles()
     }));
+    const styleTag = computed(() => props.part.getStyleTag());
+    function ensureStyleTag() {
+      removeStyleTag();
+      if (!styleTag.value) return;
+      let styleEl = document.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (!styleEl) {
+        styleEl = document.createElement("style");
+        styleEl.setAttribute("data-part-style-id", props.part.partId);
+        document.head.appendChild(styleEl);
+      }
+      styleEl.textContent = styleTag.value;
+    }
+    function removeStyleTag() {
+      const styleEl = document.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (styleEl) {
+        document.head.removeChild(styleEl);
+      }
+    }
+    watch(styleTag, () => {
+      ensureStyleTag();
+    });
+    onMounted(() => {
+      ensureStyleTag();
+    });
+    onBeforeUnmount(() => {
+      removeStyleTag();
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        styleTag.value && visible.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
-          key: 0,
-          innerHTML: styleTag.value
-        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
-        withDirectives(createElementVNode("div", {
-          class: normalizeClass(classNames.value),
-          "data-part-id": _ctx.part.partId,
-          style: normalizeStyle(style.value)
-        }, [
-          _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
-            return openBlock(), createBlock$1(_sfc_main$a$1, {
-              key: child.partId,
-              "is-mobile-page": _ctx.isMobilePage,
-              part: child,
-              "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
-            }, null, 8, ["is-mobile-page", "part"]);
-          }), 128)) : createCommentVNode("", true)
-        ], 14, _hoisted_1$8$1), [
-          [vShow, visible.value]
-        ])
-      ], 64);
+      return withDirectives((openBlock(), createElementBlock("div", {
+        class: normalizeClass(classNames.value),
+        "data-part-id": _ctx.part.partId,
+        style: normalizeStyle(style.value)
+      }, [
+        _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
+          return openBlock(), createBlock$1(_sfc_main$a$1, {
+            key: child.partId,
+            "is-mobile-page": _ctx.isMobilePage,
+            part: child,
+            "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
+          }, null, 8, ["is-mobile-page", "part"]);
+        }), 128)) : createCommentVNode("", true)
+      ], 14, _hoisted_1$8$1)), [
+        [vShow, visible.value]
+      ]);
     };
   }
 });
@@ -7046,9 +7106,11 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
       return (_a = props.part.properties) == null ? void 0 : _a.media;
     });
     const altText = computed(() => {
-      if (media.value && media.value.altText) {
+      var _a, _b;
+      const _altText = (_b = (_a = props.part.properties) == null ? void 0 : _a.media) == null ? void 0 : _b.altText;
+      if (media.value && _altText) {
         const locale = pageBuilder.getLocale();
-        return media.value.altText[locale] || "";
+        return _altText[locale] || "";
       }
       return "";
     });
@@ -7607,32 +7669,56 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames(), props.isMobilePage ? "mobile" : "pc"]);
-    const styleTag = computed(() => props.part.getStyleTag());
+    const classNames = computed(() => [
+      getPartClassName(props.part),
+      props.part.getClassNames(),
+      props.isMobilePage ? "mobile" : "pc"
+    ]);
     const style = computed(() => ({
       ...props.part.getStyles(props.isMobilePage),
       ...props.part.getInlineStyles()
     }));
+    const styleTag = computed(() => props.part.getStyleTag());
+    function ensureStyleTag() {
+      removeStyleTag();
+      if (!styleTag.value) return;
+      let styleEl = document.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (!styleEl) {
+        styleEl = document.createElement("style");
+        styleEl.setAttribute("data-part-style-id", props.part.partId);
+        document.head.appendChild(styleEl);
+      }
+      styleEl.textContent = styleTag.value;
+    }
+    function removeStyleTag() {
+      const styleEl = document.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (styleEl) {
+        document.head.removeChild(styleEl);
+      }
+    }
+    watch(styleTag, () => {
+      ensureStyleTag();
+    });
+    onMounted(() => {
+      ensureStyleTag();
+    });
+    onBeforeUnmount(() => {
+      removeStyleTag();
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
-          key: 0,
-          innerHTML: styleTag.value
-        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass([classNames.value, "pb-page"]),
-          "data-part-id": _ctx.part.partId,
-          style: normalizeStyle(style.value)
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (section) => {
-            return openBlock(), createBlock$1(_sfc_main$9$1, {
-              key: section.partId,
-              "is-mobile-page": _ctx.isMobilePage,
-              part: section
-            }, null, 8, ["is-mobile-page", "part"]);
-          }), 128))
-        ], 14, _hoisted_1$2$1)
-      ], 64);
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([classNames.value, "pb-page"]),
+        "data-part-id": _ctx.part.partId,
+        style: normalizeStyle(style.value)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (section) => {
+          return openBlock(), createBlock$1(_sfc_main$9$1, {
+            key: section.partId,
+            "is-mobile-page": _ctx.isMobilePage,
+            part: section
+          }, null, 8, ["is-mobile-page", "part"]);
+        }), 128))
+      ], 14, _hoisted_1$2$1);
     };
   }
 });
@@ -8318,16 +8404,16 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-BJ5qx69O.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-CDohV0Yq.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BqXqhBvc.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-v01RFbU-.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-CP-gnrl0.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.js")),
-    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-vEqAkXLy.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-D1Et94Ef.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-CrtSHsie.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-BD1ir-xW.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-gZIWmCbS.js"))
+    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-Cq5y3hp5.js")),
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-B2whCX1d.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-CAULnDMs.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DunmjOZP.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-BM-3CS85.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8630,18 +8716,17 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const mouseTracker = useMouseTracker();
-    const widget = ref(null);
     const draggable = ref(true);
     let dragStartX, dragStartY, initX, initY, initWidth, initHeight;
     const panChild = (event) => {
       draggable.value = false;
       event.stopPropagation();
       event.preventDefault();
-      if (!widget.value) return;
+      if (!partRef.value) return;
       dragStartX = event.clientX;
       dragStartY = event.clientY;
-      initX = widget.value.offsetLeft;
-      initY = widget.value.offsetTop;
+      initX = partRef.value.offsetLeft;
+      initY = partRef.value.offsetTop;
       const _mousemove = (event2) => {
         const dx = event2.clientX - dragStartX;
         const dy = event2.clientY - dragStartY;
@@ -8657,8 +8742,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       draggable.value = false;
       event.stopPropagation();
       event.preventDefault();
-      if (!widget.value) return;
-      const rect = widget.value.getBoundingClientRect();
+      if (!partRef.value) return;
+      const rect = partRef.value.getBoundingClientRect();
       dragStartX = event.clientX;
       dragStartY = event.clientY;
       initWidth = rect.width;
@@ -8685,7 +8770,6 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       selected.value ? "selected" : "",
       props.part.getClassNames()
     ]);
-    const styleTag = computed(() => props.part.getStyleTag());
     const style = computed(() => {
       var _a, _b, _c, _d;
       let style2 = {
@@ -8711,6 +8795,41 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       };
     });
     const component = computed(() => pageBuilder.partManager.createPartComponent(props.part));
+    const styleTag = computed(() => props.part.getStyleTag());
+    const partRef = ref(null);
+    function ensureStyleTag() {
+      removeStyleTag();
+      if (!partRef.value) return;
+      const doc = partRef.value.ownerDocument;
+      if (!doc || !styleTag.value) return;
+      let styleEl = doc.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (!styleEl) {
+        styleEl = document.createElement("style");
+        styleEl.setAttribute("data-part-style-id", props.part.partId);
+        doc.head.appendChild(styleEl);
+      }
+      styleEl.textContent = styleTag.value;
+    }
+    function removeStyleTag() {
+      if (!partRef.value) return;
+      const doc = partRef.value.ownerDocument;
+      if (!doc) return;
+      const styleEl = doc.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (styleEl) {
+        doc.head.removeChild(styleEl);
+      }
+    }
+    watch(styleTag, () => {
+      ensureStyleTag();
+    });
+    onMounted(() => {
+      if (partRef.value) {
+        ensureStyleTag();
+      }
+    });
+    onBeforeUnmount(() => {
+      removeStyleTag();
+    });
     const locatePositionMark = (mark, target, mouseOffsetX, mouseOffsetY, draggingPart2, event) => {
       if (props.part.isNestedWidget()) {
         if (draggingPart2.isWidget())
@@ -8726,11 +8845,11 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
     const locateSection = (mark, target, mouseOffsetX, mouseOffsetY, draggingPart2, event) => {
       mark.style.background = "#e67e22";
-      const widget2 = props.part;
+      const widget = props.part;
       const widgetElement = target;
-      const block = widget2.parent;
+      const block = widget.parent;
       const blockElement = widgetElement.parentElement;
-      const widgetIndex = block.children.indexOf(widget2);
+      const widgetIndex = block.children.indexOf(widget);
       const isFirstWidget = widgetIndex === 0;
       const isLastWidget = widgetIndex === block.children.length - 1;
       const section = block.parent;
@@ -8825,9 +8944,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }
       mark.style.background = "#27ae60";
       const isNestedWidget = props.part.isNestedWidget();
-      const widget2 = isNestedWidget ? props.part.parent : props.part;
+      const widget = isNestedWidget ? props.part.parent : props.part;
       const widgetElement = isNestedWidget ? target.parentElement.parentElement : target;
-      const block = widget2.parent;
+      const block = widget.parent;
       const centerX = widgetElement.offsetWidth / 2;
       const centerY = widgetElement.offsetHeight / 2;
       const quaterX = centerX / 2;
@@ -8880,10 +8999,10 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
     const acceptSection = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
       var _a;
-      const widget2 = props.part;
+      const widget = props.part;
       const widgetElement = target;
-      const block = widget2.parent;
-      const widgetIndex = block.children.indexOf(widget2);
+      const block = widget.parent;
+      const widgetIndex = block.children.indexOf(widget);
       const isFirstWidget = widgetIndex === 0;
       const isLastWidget = widgetIndex === block.children.length - 1;
       const section = block.parent;
@@ -8920,10 +9039,10 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
     const acceptBlock = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
       var _a;
-      const widget2 = props.part;
+      const widget = props.part;
       const widgetElement = target;
-      const block = widget2.parent;
-      const widgetIndex = block.children.indexOf(widget2);
+      const block = widget.parent;
+      const widgetIndex = block.children.indexOf(widget);
       const isFirstWidget = widgetIndex === 0;
       const isLastWidget = widgetIndex === block.children.length - 1;
       const section = block.parent;
@@ -8957,9 +9076,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
     const acceptWidget = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
       const isNestedWidget = props.part.isNestedWidget();
-      const widget2 = isNestedWidget ? props.part.parent : props.part;
-      const block = widget2.parent;
-      const widgetIndex = block.children.indexOf(widget2) || 0;
+      const widget = isNestedWidget ? props.part.parent : props.part;
+      const block = widget.parent;
+      const widgetIndex = block.children.indexOf(widget) || 0;
       const centerY = target.offsetHeight / 2;
       const centerX = target.offsetWidth / 2;
       const quaterX = centerX / 2;
@@ -8973,7 +9092,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           index = widgetIndex + 1;
         } else {
           if (pageBuilder2.partManager.isChildAllowed(props.part)) {
-            acceptWidgetInside(widget2, droppedPart, pageBuilder2);
+            acceptWidgetInside(widget, droppedPart, pageBuilder2);
           }
           return;
         }
@@ -8984,7 +9103,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           index = widgetIndex + 1;
         } else {
           if (pageBuilder2.partManager.isChildAllowed(props.part)) {
-            acceptWidgetInside(widget2, droppedPart, pageBuilder2);
+            acceptWidgetInside(widget, droppedPart, pageBuilder2);
           }
           return;
         }
@@ -9001,10 +9120,10 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }];
       pageBuilder2.model.moveElements(droppedPart.partId, block.partId, index, update);
     };
-    const acceptWidgetInside = (widget2, droppedPart, pageBuilder2) => {
+    const acceptWidgetInside = (widget, droppedPart, pageBuilder2) => {
       var _a, _b;
-      const index = ((_a = widget2.children) == null ? void 0 : _a.length) || 0;
-      if (((_b = widget2.children) == null ? void 0 : _b.indexOf(droppedPart)) !== index) {
+      const index = ((_a = widget.children) == null ? void 0 : _a.length) || 0;
+      if (((_b = widget.children) == null ? void 0 : _b.indexOf(droppedPart)) !== index) {
         const update = [{
           partId: droppedPart.partId,
           properties: {
@@ -9013,7 +9132,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             width: "50%"
           }
         }];
-        pageBuilder2.model.moveElements(droppedPart.partId, widget2.partId, index, update);
+        pageBuilder2.model.moveElements(droppedPart.partId, widget.partId, index, update);
       }
     };
     const calculateDropIndex = (part, target, mouseOffsetX, mouseOffsetY, _event) => {
@@ -9034,34 +9153,28 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       return index;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
-          key: 0,
-          innerHTML: styleTag.value
-        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
-        withDirectives((openBlock(), createElementBlock("div", {
-          ref_key: "widget",
-          ref: widget,
-          class: normalizeClass([classNames.value, "pb-widget"]),
-          "data-part-id": _ctx.part.partId,
-          draggable: draggable.value,
-          style: normalizeStyle(style.value)
-        }, [
-          component.value ? (openBlock(), createBlock$1(resolveDynamicComponent(component.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : (openBlock(), createElementBlock("div", _hoisted_2$h)),
-          selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
-            key: 2,
-            class: "pan-handle",
-            onMousedown: panChild
-          }, null, 32)) : createCommentVNode("", true),
-          selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
-            key: 3,
-            class: "resize-handle",
-            onMousedown: resizeChild
-          }, null, 32)) : createCommentVNode("", true)
-        ], 14, _hoisted_1$s)), [
-          [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
-        ])
-      ], 64);
+      return withDirectives((openBlock(), createElementBlock("div", {
+        ref_key: "partRef",
+        ref: partRef,
+        class: normalizeClass([classNames.value, "pb-widget"]),
+        "data-part-id": _ctx.part.partId,
+        draggable: draggable.value,
+        style: normalizeStyle(style.value)
+      }, [
+        component.value ? (openBlock(), createBlock$1(resolveDynamicComponent(component.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : (openBlock(), createElementBlock("div", _hoisted_2$h)),
+        selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: "pan-handle",
+          onMousedown: panChild
+        }, null, 32)) : createCommentVNode("", true),
+        selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
+          key: 3,
+          class: "resize-handle",
+          onMousedown: resizeChild
+        }, null, 32)) : createCommentVNode("", true)
+      ], 14, _hoisted_1$s)), [
+        [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
+      ]);
     };
   }
 });
@@ -9082,6 +9195,40 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       props.part.getClassNames()
     ]);
     const styleTag = computed(() => props.part.getStyleTag());
+    const partRef = ref(null);
+    function ensureStyleTag() {
+      removeStyleTag();
+      if (!partRef.value) return;
+      const doc = partRef.value.ownerDocument;
+      if (!doc || !styleTag.value) return;
+      let styleEl = doc.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (!styleEl) {
+        styleEl = document.createElement("style");
+        styleEl.setAttribute("data-part-style-id", props.part.partId);
+        doc.head.appendChild(styleEl);
+      }
+      styleEl.textContent = styleTag.value;
+    }
+    function removeStyleTag() {
+      if (!partRef.value) return;
+      const doc = partRef.value.ownerDocument;
+      if (!doc) return;
+      const styleEl = doc.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (styleEl) {
+        doc.head.removeChild(styleEl);
+      }
+    }
+    watch(styleTag, () => {
+      ensureStyleTag();
+    });
+    onMounted(() => {
+      if (partRef.value) {
+        ensureStyleTag();
+      }
+    });
+    onBeforeUnmount(() => {
+      removeStyleTag();
+    });
     const properties = computed(() => ({
       style: {
         ...props.part.getStyles(props.isMobilePage),
@@ -9242,30 +9389,26 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createElementBlock(Fragment, null, [
-        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
+      return withDirectives((openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "partRef",
+        ref: partRef,
+        class: [classNames.value, "pb-block"],
+        "data-part-id": _ctx.part.partId,
+        style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
+      }, properties.value), [
+        !_ctx.part.children || ((_b = _ctx.part.children) == null ? void 0 : _b.length) === 0 ? (openBlock(), createBlock$1(PbAddWidgetButton, {
           key: 0,
-          innerHTML: styleTag.value
-        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
-        withDirectives((openBlock(), createElementBlock("div", mergeProps({
-          class: [classNames.value, "pb-block"],
-          "data-part-id": _ctx.part.partId,
-          style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-        }, properties.value), [
-          !_ctx.part.children || ((_b = _ctx.part.children) == null ? void 0 : _b.length) === 0 ? (openBlock(), createBlock$1(PbAddWidgetButton, {
-            key: 0,
-            onAddWidget: addWidget
-          })) : createCommentVNode("", true),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
-            return openBlock(), createBlock$1(_sfc_main$o, {
-              key: child.partId,
-              part: child
-            }, null, 8, ["part"]);
-          }), 128))
-        ], 16, _hoisted_1$r)), [
-          [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
-        ])
-      ], 64);
+          onAddWidget: addWidget
+        })) : createCommentVNode("", true),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
+          return openBlock(), createBlock$1(_sfc_main$o, {
+            key: child.partId,
+            part: child
+          }, null, 8, ["part"]);
+        }), 128))
+      ], 16, _hoisted_1$r)), [
+        [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
+      ]);
     };
   }
 });
@@ -9310,6 +9453,40 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       ];
     });
     const styleTag = computed(() => props.part.getStyleTag());
+    const partRef = ref(null);
+    function ensureStyleTag() {
+      removeStyleTag();
+      if (!partRef.value) return;
+      const doc = partRef.value.ownerDocument;
+      if (!doc || !styleTag.value) return;
+      let styleEl = doc.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (!styleEl) {
+        styleEl = document.createElement("style");
+        styleEl.setAttribute("data-part-style-id", props.part.partId);
+        doc.head.appendChild(styleEl);
+      }
+      styleEl.textContent = styleTag.value;
+    }
+    function removeStyleTag() {
+      if (!partRef.value) return;
+      const doc = partRef.value.ownerDocument;
+      if (!doc) return;
+      const styleEl = doc.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (styleEl) {
+        doc.head.removeChild(styleEl);
+      }
+    }
+    watch(styleTag, () => {
+      ensureStyleTag();
+    });
+    onMounted(() => {
+      if (partRef.value) {
+        ensureStyleTag();
+      }
+    });
+    onBeforeUnmount(() => {
+      removeStyleTag();
+    });
     const properties = computed(() => ({
       style: {
         ...props.part.getStyles(props.isMobilePage),
@@ -9391,37 +9568,33 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       var _a, _b, _c;
-      return openBlock(), createElementBlock(Fragment, null, [
-        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
-          key: 0,
-          innerHTML: styleTag.value
-        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
-        withDirectives((openBlock(), createElementBlock("div", mergeProps({
-          class: [classNames.value, "pb-section"],
-          "data-part-id": _ctx.part.partId,
-          style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-        }, properties.value), [
-          ((_b = _ctx.part.properties) == null ? void 0 : _b.sectionType) === "static" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$m, {
-              key: 0,
-              part: _ctx.part
-            }, null, 8, ["part"])) : createCommentVNode("", true)
-          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (block) => {
-              return openBlock(), createBlock$1(_sfc_main$n, {
-                key: block.partId,
-                "is-mobile-page": _ctx.isMobilePage,
-                part: block
-              }, null, 8, ["is-mobile-page", "part"]);
-            }), 128)) : (openBlock(), createBlock$1(PbAddWidgetButton, {
-              key: 1,
-              onAddWidget: addWidget
-            }))
-          ], 64))
-        ], 16, _hoisted_1$p)), [
-          [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
-        ])
-      ], 64);
+      return withDirectives((openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "partRef",
+        ref: partRef,
+        class: [classNames.value, "pb-section"],
+        "data-part-id": _ctx.part.partId,
+        style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
+      }, properties.value), [
+        ((_b = _ctx.part.properties) == null ? void 0 : _b.sectionType) === "static" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$m, {
+            key: 0,
+            part: _ctx.part
+          }, null, 8, ["part"])) : createCommentVNode("", true)
+        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (block) => {
+            return openBlock(), createBlock$1(_sfc_main$n, {
+              key: block.partId,
+              "is-mobile-page": _ctx.isMobilePage,
+              part: block
+            }, null, 8, ["is-mobile-page", "part"]);
+          }), 128)) : (openBlock(), createBlock$1(PbAddWidgetButton, {
+            key: 1,
+            onAddWidget: addWidget
+          }))
+        ], 64))
+      ], 16, _hoisted_1$p)), [
+        [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
+      ]);
     };
   }
 });
@@ -12366,7 +12539,7 @@ const _hoisted_3$1 = {
   key: 0,
   class: "title mt-12"
 };
-const _hoisted_4 = { class: "mt-8" };
+const _hoisted_4 = { class: "url mt-8" };
 const _hoisted_5 = { class: "title mt-12" };
 const _hoisted_6 = { class: "title mt-12" };
 const _hoisted_7 = { class: "title mt-12" };
@@ -12386,13 +12559,16 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       if (imageProvider) {
         imageProvider({ modal }, (media2) => {
           if (media2.mediaType === "Image") {
-            updateProperty({ media: media2, altText: media2.altText, thumbnail: "" });
+            updateProperty({ media: media2, thumbnail: "" });
           } else if (media2.mediaType === "Video") {
-            updateProperty({ media: media2, altText: media2.altText, link: "", linkTarget: "" });
+            updateProperty({ media: media2, link: "", linkTarget: "" });
           }
         });
       }
     };
+    const updateAltText = (value) => {
+      updateProperty({ media: { ...media.value, altText: value } });
+    };
     const updateProperty = (properties) => {
       pageBuilder.commandRegistry.executeCommand(ChangePropertyCommand.COMMAND_ID, { properties, targetParts: part });
     };
@@ -12402,8 +12578,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.media;
     });
     const altText = computed(() => {
-      var _a, _b;
-      return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.altText;
+      var _a, _b, _c;
+      return (_c = (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.media) == null ? void 0 : _c.altText;
     });
     const link = computed(() => {
       var _a, _b;
@@ -12439,7 +12615,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           ])
         ]),
         ((_a = media.value) == null ? void 0 : _a.fileUrl) ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-          _cache[4] || (_cache[4] = createElementVNode("label", null, "URL", -1)),
+          _cache[3] || (_cache[3] = createElementVNode("label", null, "URL", -1)),
           createElementVNode("div", _hoisted_4, [
             createTextVNode(toDisplayString((_b = media.value) == null ? void 0 : _b.fileUrl) + " ", 1),
             withDirectives(createVNode(unref(BSButton), {
@@ -12467,7 +12643,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               locales: locales.value,
               "model-value": altText.value,
               width: "100%",
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => updateProperty({ altText: value }))
+              "onUpdate:modelValue": updateAltText
             }, null, 8, ["locales", "model-value"])
           ]),
           createElementVNode("div", _hoisted_6, [
@@ -12479,7 +12655,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             createVNode(unref(BSTextInput), {
               "model-value": link.value,
               width: "100%",
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => updateProperty({ link: value }))
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => updateProperty({ link: value }))
             }, null, 8, ["model-value"])
           ]),
           createElementVNode("div", _hoisted_7, [
@@ -12491,7 +12667,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             createVNode(unref(BSTextInput), {
               "model-value": linkTarget.value,
               width: "100%",
-              "onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => updateProperty({ linkTarget: value }))
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => updateProperty({ linkTarget: value }))
             }, null, 8, ["model-value"])
           ])
         ], 64)) : createCommentVNode("", true),
@@ -12505,7 +12681,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             createVNode(unref(BSTextInput), {
               "model-value": thumbnail.value,
               width: "100%",
-              "onUpdate:modelValue": _cache[3] || (_cache[3] = (value) => updateProperty({ thumbnail: value }))
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => updateProperty({ thumbnail: value }))
             }, null, 8, ["model-value"])
           ])
         ], 64)) : createCommentVNode("", true)
@@ -12658,12 +12834,6 @@ const widgets = [
             caption: "Media",
             propertyType: "media"
           },
-          {
-            propertyName: "altText",
-            caption: "Alt Text",
-            propertyType: "text",
-            multiLang: true
-          },
           {
             propertyName: "link",
             caption: "Link",
@@ -12883,7 +13053,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-CetSlzPe.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-B0EJiVqs.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -14946,7 +15116,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         props.part.getClassNames()
       ];
     });
-    const styleTag = computed(() => props.part.getStyleTag());
     const style = computed(() => {
       var _a, _b;
       return {
@@ -14960,6 +15129,41 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         ...(_b = props.part) == null ? void 0 : _b.getInlineStyles()
       };
     });
+    const styleTag = computed(() => props.part.getStyleTag());
+    const partRef = ref(null);
+    function ensureStyleTag() {
+      removeStyleTag();
+      if (!partRef.value) return;
+      const doc = partRef.value.ownerDocument;
+      if (!doc || !styleTag.value) return;
+      let styleEl = doc.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (!styleEl) {
+        styleEl = document.createElement("style");
+        styleEl.setAttribute("data-part-style-id", props.part.partId);
+        doc.head.appendChild(styleEl);
+      }
+      styleEl.textContent = styleTag.value;
+    }
+    function removeStyleTag() {
+      if (!partRef.value) return;
+      const doc = partRef.value.ownerDocument;
+      if (!doc) return;
+      const styleEl = doc.head.querySelector(`style[data-part-style-id="${props.part.partId}"]`);
+      if (styleEl) {
+        doc.head.removeChild(styleEl);
+      }
+    }
+    watch(styleTag, () => {
+      ensureStyleTag();
+    });
+    onMounted(() => {
+      if (partRef.value) {
+        ensureStyleTag();
+      }
+    });
+    onBeforeUnmount(() => {
+      removeStyleTag();
+    });
     const selected = computed(() => !!props.part && editor.context.isSelected(props.part));
     const addSection = () => {
       editor.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID, { page: props.part });
@@ -14989,39 +15193,35 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createElementBlock(Fragment, null, [
-        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
-          key: 0,
-          innerHTML: styleTag.value
-        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+      return openBlock(), createElementBlock("div", {
+        ref_key: "partRef",
+        ref: partRef,
+        class: normalizeClass([classNames.value, "pb-page"]),
+        "data-part-id": (_a = _ctx.part) == null ? void 0 : _a.partId,
+        style: normalizeStyle(style.value),
+        onContextmenu: showContextMenu,
+        onMousedown: withModifiers(handleClick, ["stop"])
+      }, [
         createElementVNode("div", {
-          class: normalizeClass([classNames.value, "pb-page"]),
-          "data-part-id": (_a = _ctx.part) == null ? void 0 : _a.partId,
-          style: normalizeStyle(style.value),
-          onContextmenu: showContextMenu,
-          onMousedown: withModifiers(handleClick, ["stop"])
+          class: normalizeClass([selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]),
+          style: normalizeStyle(contentStyle.value)
         }, [
-          createElementVNode("div", {
-            class: normalizeClass([selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]),
-            style: normalizeStyle(contentStyle.value)
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList((_b = _ctx.part) == null ? void 0 : _b.children, (section, index) => {
-              return openBlock(), createBlock$1(_sfc_main$l, {
-                key: section.partId,
-                "is-mobile-page": _ctx.isMobilePage,
-                part: section
-              }, null, 8, ["is-mobile-page", "part"]);
-            }), 128))
-          ], 6),
-          createElementVNode("div", {
-            title: "Add Section",
-            class: "pb-add-section-handle bottom",
-            onClick: addSection
-          }, _cache[0] || (_cache[0] = [
-            createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1)
-          ]))
-        ], 46, _hoisted_1$3)
-      ], 64);
+          (openBlock(true), createElementBlock(Fragment, null, renderList((_b = _ctx.part) == null ? void 0 : _b.children, (section, index) => {
+            return openBlock(), createBlock$1(_sfc_main$l, {
+              key: section.partId,
+              "is-mobile-page": _ctx.isMobilePage,
+              part: section
+            }, null, 8, ["is-mobile-page", "part"]);
+          }), 128))
+        ], 6),
+        createElementVNode("div", {
+          title: "Add Section",
+          class: "pb-add-section-handle bottom",
+          onClick: addSection
+        }, _cache[0] || (_cache[0] = [
+          createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1)
+        ]))
+      ], 46, _hoisted_1$3);
     };
   }
 });