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

package/dist/{PbPropertyEditorColor-B2whCX1d.js → PbPropertyEditorColor-Bti0mVmo.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
 import { vT, BSTextInput } from "@g1cloud/bluesea";
-import { P as PbColorPicker } from "./index-CzWzYmyG.js";
+import { P as PbColorPicker } from "./index-yhrcYaQY.js";
 const _hoisted_1 = { class: "property-editor property-editor-color" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = { class: "bs-layout-horizontal flex-align-center color" };

package/dist/{PbPropertyEditorCssLength-Cq5y3hp5.js → PbPropertyEditorCssLength-BwkrC9am.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
 import { vT, BSTextInput } from "@g1cloud/bluesea";
-import { t as toCssLength } from "./index-CzWzYmyG.js";
+import { t as toCssLength } from "./index-yhrcYaQY.js";
 const _hoisted_1 = { class: "property-editor property-editor-number flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorHtml-DunmjOZP.js → PbPropertyEditorHtml-wnS2l_pT.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, defineAsyncComponent } from "vue";
 import { useModal, vT } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-CzWzYmyG.js";
+import { u as usePageBuilderEditor } from "./index-yhrcYaQY.js";
 const _hoisted_1 = { class: "property-editor property-editor-html flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorImage-CAULnDMs.js → PbPropertyEditorImage-Bv5gVaiP.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, toDisplayString, createVNode, createCommentVNode, Fragment } from "vue";
-import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-CzWzYmyG.js";
+import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-yhrcYaQY.js";
 import { useModal, vT, BSButton, BSMultiLangTextInput, showNotification } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "property-editor property-editor-image" };
 const _hoisted_2 = { class: "title" };

package/dist/{PbPropertyEditorMultilineText-CP-gnrl0.js → PbPropertyEditorMultilineText-BpFMGEOv.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
 import { vT, BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-CzWzYmyG.js";
+import { u as usePageBuilderEditor } from "./index-yhrcYaQY.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorText-BqXqhBvc.js → PbPropertyEditorText-E92cKCb2.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
 import { vT, BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-CzWzYmyG.js";
+import { u as usePageBuilderEditor } from "./index-yhrcYaQY.js";
 const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorYoutube-BM-3CS85.js → PbPropertyEditorYoutube-DRguFXvJ.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref } from "vue";
 import { useModal, vT } from "@g1cloud/bluesea";
-import { s as selectYoutubeVideo } from "./index-CzWzYmyG.js";
+import { s as selectYoutubeVideo } from "./index-yhrcYaQY.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbWidgetAddModal-B0EJiVqs.js → PbWidgetAddModal-_yFu9o2c.js}

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

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

@@ -7236,22 +7236,72 @@ const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
         _html = html2;
       }
       if (!_html) {
-        return "";
+        return;
       }
-      return `${_html.tags}
-<style>
-${_html.style}
-</style>`;
+      return { tags: _html.tags, style: _html.style };
     };
     const html = computed(() => {
       var _a;
       return getHtml((_a = props.part.properties) == null ? void 0 : _a.html);
     });
+    const partRef = ref(null);
+    let observer = null;
+    function ensureStyleTag() {
+      var _a;
+      removeStyleTag();
+      if (!partRef.value) return;
+      const doc = partRef.value.ownerDocument;
+      if (!doc || !((_a = html.value) == null ? void 0 : _a.style)) return;
+      const styleId = `data-part-style-id="${props.part.partId}"`;
+      const apply = () => {
+        var _a2;
+        let styleEl = doc.head.querySelector(`style[${styleId}]`);
+        if (!styleEl) {
+          styleEl = doc.createElement("style");
+          styleEl.setAttribute("data-part-style-id", props.part.partId);
+          doc.head.appendChild(styleEl);
+        }
+        styleEl.textContent = ((_a2 = html.value) == null ? void 0 : _a2.style) || "";
+      };
+      apply();
+      observer = new MutationObserver(() => {
+        const styleExists = doc.head.querySelector(`style[${styleId}]`);
+        if (!styleExists) {
+          apply();
+        }
+      });
+      observer.observe(doc.head, { childList: true, subtree: false });
+    }
+    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);
+      }
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
+    }
+    watch(html, () => {
+      ensureStyleTag();
+    });
+    onMounted(() => {
+      ensureStyleTag();
+    });
+    onBeforeUnmount(() => {
+      removeStyleTag();
+    });
     return (_ctx, _cache) => {
-      return html.value ? (openBlock(), createElementBlock("div", {
+      var _a, _b;
+      return ((_a = html.value) == null ? void 0 : _a.tags) ? (openBlock(), createElementBlock("div", {
         key: 0,
+        ref_key: "partRef",
+        ref: partRef,
         class: "html",
-        innerHTML: html.value
+        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);
     };
   }
@@ -7758,6 +7808,33 @@ const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
         }
       }
     );
+    const styleTag = computed(() => viewer.externalCssContent);
+    function ensureStyleTag() {
+      removeStyleTag();
+      if (!styleTag.value) return;
+      let styleEl = document.head.querySelector(".pb-viewer-style");
+      if (!styleEl) {
+        styleEl = document.createElement("style");
+        styleEl.classList.add("pb-viewer-style");
+        document.head.appendChild(styleEl);
+      }
+      styleEl.textContent = styleTag.value;
+    }
+    function removeStyleTag() {
+      const styleEl = document.head.querySelector(".pb-viewer-style");
+      if (styleEl) {
+        document.head.removeChild(styleEl);
+      }
+    }
+    watch(styleTag, () => {
+      ensureStyleTag();
+    });
+    onMounted(() => {
+      ensureStyleTag();
+    });
+    onBeforeUnmount(() => {
+      removeStyleTag();
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         unref(externalCss) ? (openBlock(), createElementBlock("div", {
@@ -8404,16 +8481,16 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-BJ5qx69O.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BqXqhBvc.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-E92cKCb2.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-CP-gnrl0.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BpFMGEOv.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.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"))
+    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-BwkrC9am.js")),
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-Bti0mVmo.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-Bv5gVaiP.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-wnS2l_pT.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-DRguFXvJ.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -13053,7 +13130,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-B0EJiVqs.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-_yFu9o2c.js")),
     style: {
       width: "80%",
       height: "80%",

package/dist/page-builder-editor.js

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

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

@@ -7237,22 +7237,72 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           _html = html2;
         }
         if (!_html) {
-          return "";
+          return;
         }
-        return `${_html.tags}
-<style>
-${_html.style}
-</style>`;
+        return { tags: _html.tags, style: _html.style };
       };
       const html = vue.computed(() => {
         var _a;
         return getHtml((_a = props.part.properties) == null ? void 0 : _a.html);
       });
+      const partRef = vue.ref(null);
+      let observer = null;
+      function ensureStyleTag() {
+        var _a;
+        removeStyleTag();
+        if (!partRef.value) return;
+        const doc = partRef.value.ownerDocument;
+        if (!doc || !((_a = html.value) == null ? void 0 : _a.style)) return;
+        const styleId = `data-part-style-id="${props.part.partId}"`;
+        const apply = () => {
+          var _a2;
+          let styleEl = doc.head.querySelector(`style[${styleId}]`);
+          if (!styleEl) {
+            styleEl = doc.createElement("style");
+            styleEl.setAttribute("data-part-style-id", props.part.partId);
+            doc.head.appendChild(styleEl);
+          }
+          styleEl.textContent = ((_a2 = html.value) == null ? void 0 : _a2.style) || "";
+        };
+        apply();
+        observer = new MutationObserver(() => {
+          const styleExists = doc.head.querySelector(`style[${styleId}]`);
+          if (!styleExists) {
+            apply();
+          }
+        });
+        observer.observe(doc.head, { childList: true, subtree: false });
+      }
+      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);
+        }
+        if (observer) {
+          observer.disconnect();
+          observer = null;
+        }
+      }
+      vue.watch(html, () => {
+        ensureStyleTag();
+      });
+      vue.onMounted(() => {
+        ensureStyleTag();
+      });
+      vue.onBeforeUnmount(() => {
+        removeStyleTag();
+      });
       return (_ctx, _cache) => {
-        return html.value ? (vue.openBlock(), vue.createElementBlock("div", {
+        var _a, _b;
+        return ((_a = html.value) == null ? void 0 : _a.tags) ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
+          ref_key: "partRef",
+          ref: partRef,
           class: "html",
-          innerHTML: html.value
+          innerHTML: (_b = html.value) == null ? void 0 : _b.tags
         }, null, 8, _hoisted_1$5$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2$1)) : vue.createCommentVNode("", true);
       };
     }
@@ -7759,6 +7809,33 @@ ${_html.style}
           }
         }
       );
+      const styleTag = vue.computed(() => viewer.externalCssContent);
+      function ensureStyleTag() {
+        removeStyleTag();
+        if (!styleTag.value) return;
+        let styleEl = document.head.querySelector(".pb-viewer-style");
+        if (!styleEl) {
+          styleEl = document.createElement("style");
+          styleEl.classList.add("pb-viewer-style");
+          document.head.appendChild(styleEl);
+        }
+        styleEl.textContent = styleTag.value;
+      }
+      function removeStyleTag() {
+        const styleEl = document.head.querySelector(".pb-viewer-style");
+        if (styleEl) {
+          document.head.removeChild(styleEl);
+        }
+      }
+      vue.watch(styleTag, () => {
+        ensureStyleTag();
+      });
+      vue.onMounted(() => {
+        ensureStyleTag();
+      });
+      vue.onBeforeUnmount(() => {
+        removeStyleTag();
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
           vue.unref(externalCss) ? (vue.openBlock(), vue.createElementBlock("div", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.83",
+  "version": "1.0.0-alpha.85",
   "engins": {
     "node": ">= 20.0.0"
   },
@@ -31,7 +31,7 @@
     "vue-router": "^4.4.3",
     "vue3-click-away": "^1.2.4",
     "yjs": "^13.6.14",
-    "@g1cloud/page-builder-viewer": "1.0.0-alpha.83"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.85"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",