@myissue/vue-website-page-builder 3.2.92 → 3.2.93

package/dist/vue-website-page-builder.js

@@ -1368,7 +1368,7 @@ class uh {
     xt(this, "pageBuilderStateStore");
     xt(this, "getTextAreaVueModel");
     xt(this, "getLocalStorageItemName");
-    xt(this, "getCurrentImage");
+    xt(this, "getApplyImageToSelection");
     xt(this, "getHyberlinkEnable");
     xt(this, "getComponents");
     xt(this, "getComponent");
@@ -1480,7 +1480,9 @@ class uh {
     });
     this.nextTick = Dt(), this.hasStartedEditing = !1, this.containsPagebuilder = document.querySelector("#contains-pagebuilder"), this.pageBuilderStateStore = t, this.getTextAreaVueModel = R(() => this.pageBuilderStateStore.getTextAreaVueModel), this.getLocalStorageItemName = R(
       () => this.pageBuilderStateStore.getLocalStorageItemName
-    ), this.getCurrentImage = R(() => this.pageBuilderStateStore.getCurrentImage), this.getHyberlinkEnable = R(() => this.pageBuilderStateStore.getHyberlinkEnable), this.getComponents = R(() => this.pageBuilderStateStore.getComponents), this.getComponent = R(() => this.pageBuilderStateStore.getComponent), this.getElement = R(() => this.pageBuilderStateStore.getElement), this.getNextSibling = R(() => this.pageBuilderStateStore.getNextSibling), this.getParentElement = R(() => this.pageBuilderStateStore.getParentElement), this.getRestoredElement = R(() => this.pageBuilderStateStore.getRestoredElement), this.getComponentArrayAddMethod = R(
+    ), this.getApplyImageToSelection = R(
+      () => this.pageBuilderStateStore.getApplyImageToSelection
+    ), this.getHyberlinkEnable = R(() => this.pageBuilderStateStore.getHyberlinkEnable), this.getComponents = R(() => this.pageBuilderStateStore.getComponents), this.getComponent = R(() => this.pageBuilderStateStore.getComponent), this.getElement = R(() => this.pageBuilderStateStore.getElement), this.getNextSibling = R(() => this.pageBuilderStateStore.getNextSibling), this.getParentElement = R(() => this.pageBuilderStateStore.getParentElement), this.getRestoredElement = R(() => this.pageBuilderStateStore.getRestoredElement), this.getComponentArrayAddMethod = R(
       () => this.pageBuilderStateStore.getComponentArrayAddMethod
     ), this.NoneListernesTags = [
       "P",
@@ -1764,12 +1766,29 @@ class uh {
     }
     return !1;
   }
-  //
-  //
-  async updateBasePrimaryImage() {
-    this.getElement.value && this.getCurrentImage.value && this.getCurrentImage.value.src && (await this.nextTick, this.pageBuilderStateStore.setBasePrimaryImage(`${this.getCurrentImage.value.src}`), await this.handleAutoSave());
+  /**
+   * Sets the image selected from the media library as the "pending" image
+   * to be applied to the currently selected element in the builder.
+   * This does not update the DOM immediately—call `applyPendingImageToSelectedElement` to commit.
+   * @param image - The image object to be staged for application
+   */
+  stageImageForSelectedElement(t) {
+    this.pageBuilderStateStore.setApplyImageToSelection(t);
   }
-  setBasePrimaryImageFromCurrent() {
+  /**
+   * Applies the staged image (set by `stageImageForSelectedElement`) to the currently selected element.
+   * This updates the builder state and triggers an auto-save.
+   * If no element is selected or no image is staged, nothing happens.
+   */
+  async applyPendingImageToSelectedElement() {
+    this.getElement.value && this.getApplyImageToSelection.value && this.getApplyImageToSelection.value.src && (await this.nextTick, this.pageBuilderStateStore.setBasePrimaryImage(`${this.getApplyImageToSelection.value.src}`), await this.handleAutoSave());
+  }
+  /**
+   * Inspects the currently selected element and, if it contains exactly one <img> and no <div>,
+   * sets that image's src as the base primary image in the builder state.
+   * If the element does not meet these criteria, clears the base primary image.
+   */
+  setBasePrimaryImageFromSelectedElement() {
     if (!this.getElement.value) return;
     const t = document.createElement("div");
     t.innerHTML = this.getElement.value.outerHTML;
@@ -1835,7 +1854,7 @@ class uh {
     this.pageBuilderStateStore.setShowModalTipTap(t), t || await this.handleAutoSave();
   }
   async initializeElementStyles() {
-    this.pageBuilderStateStore.getPageBuilderConfig && (await new Promise((t) => requestAnimationFrame(t)), this.handleHyperlink(void 0, null, !1), this.handleOpacity(void 0), this.handleBackgroundOpacity(void 0), this.setBasePrimaryImageFromCurrent(), this.handleBorderStyle(void 0), this.handleBorderWidth(void 0), this.handleBorderColor(void 0), this.handleBorderRadiusGlobal(void 0), this.handleBorderRadiusTopLeft(void 0), this.handleBorderRadiusTopRight(void 0), this.handleBorderRadiusBottomleft(void 0), this.handleBorderRadiusBottomRight(void 0), this.handleFontSizeBase(void 0), this.handleFontSizeDesktop(void 0), this.handleFontSizeTablet(void 0), this.handleFontSizeMobile(void 0), this.handleFontWeight(void 0), this.handleFontFamily(void 0), this.handleFontStyle(void 0), this.handleVerticalPadding(void 0), this.handleHorizontalPadding(void 0), this.handleVerticalMargin(void 0), this.handleHorizontalMargin(void 0), this.handleBackgroundColor(void 0), this.handleTextColor(void 0), await Q(this, W, Ac).call(this));
+    this.pageBuilderStateStore.getPageBuilderConfig && (await new Promise((t) => requestAnimationFrame(t)), this.handleHyperlink(void 0, null, !1), this.handleOpacity(void 0), this.handleBackgroundOpacity(void 0), this.setBasePrimaryImageFromSelectedElement(), this.handleBorderStyle(void 0), this.handleBorderWidth(void 0), this.handleBorderColor(void 0), this.handleBorderRadiusGlobal(void 0), this.handleBorderRadiusTopLeft(void 0), this.handleBorderRadiusTopRight(void 0), this.handleBorderRadiusBottomleft(void 0), this.handleBorderRadiusBottomRight(void 0), this.handleFontSizeBase(void 0), this.handleFontSizeDesktop(void 0), this.handleFontSizeTablet(void 0), this.handleFontSizeMobile(void 0), this.handleFontWeight(void 0), this.handleFontFamily(void 0), this.handleFontStyle(void 0), this.handleVerticalPadding(void 0), this.handleHorizontalPadding(void 0), this.handleVerticalMargin(void 0), this.handleHorizontalMargin(void 0), this.handleBackgroundColor(void 0), this.handleTextColor(void 0), await Q(this, W, Ac).call(this));
   }
 }
 W = new WeakSet(), Ec = function(t) {
@@ -3100,7 +3119,7 @@ const jh = /* @__PURE__ */ Hh("pageBuilderState", {
     basePrimaryImage: null,
     configPageBuilder: null,
     // Media Library State
-    currentImage: { src: "" },
+    applyImageToSelection: { src: "" },
     currentPreviewImage: null,
     // User State
     builderStarted: !1,
@@ -3244,9 +3263,8 @@ const jh = /* @__PURE__ */ Hh("pageBuilderState", {
     getPageBuilderConfig(r) {
       return r.configPageBuilder;
     },
-    // Media Library Getters
-    getCurrentImage(r) {
-      return r.currentImage;
+    getApplyImageToSelection(r) {
+      return r.applyImageToSelection;
     },
     getCurrentPreviewImage(r) {
       return r.currentPreviewImage;
@@ -3415,9 +3433,8 @@ const jh = /* @__PURE__ */ Hh("pageBuilderState", {
     setPageBuilderConfig(r) {
       this.configPageBuilder = r;
     },
-    // Media Library Actions
-    setCurrentImage(r) {
-      this.currentImage = r;
+    setApplyImageToSelection(r) {
+      this.applyImageToSelection = r;
     },
     setCurrentPreviewImage(r) {
       this.currentPreviewImage = r;
@@ -23145,7 +23162,7 @@ const ck = ["src"], uk = {
 }, K3 = { class: "pbx-overflow-hidden pbx-shadow pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 md:pbx-rounded-lg" }, G3 = { class: "pbx-overflow-x-auto" }, J3 = { class: "pbx-w-max" }, Y3 = { class: "pbx-bg-white pbx-divide-y pbx-divide-gray-200" }, X3 = { class: "pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500" }, Q3 = { class: "pbx-min-w-[30rem] pbx-w-max" }, Z3 = { key: 0 }, t4 = { key: 1 }, e4 = { key: 0 }, r4 = { class: "pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500" }, o4 = { class: "pbx-min-w-[30rem] pbx-w-max" }, n4 = { class: "pbx-inline-flex pbx-items-center pbx-px-2.5 pbx-py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium" }, i4 = { class: "pbx-mt-4 pbx-mb-4 pbx-py-8 pbx-border-b pbx-border-myPrimbryLightGrayColor" }, a4 = { class: "pbx-mt-4 pbx-whitespace-pre-wrap pbx-text-white pbx-overflow-hidden pbx-bg-gray-900" }, s4 = { class: "pbx-px-4 pbx-pb-8 pbx-pt-4 pbx-text-white pbx-text-xs pbx-break-all" }, l4 = { class: "pbx-myPrimaryParagraph pbx-text-xs pbx-text-white" }, p4 = {
   __name: "PageBuilderSettings",
   setup(r) {
-    const t = "v3.2.92", e = Et, o = S(null), n = R(() => e.getPageBuilderConfig), i = R(() => e.getComponents), a = function(l, p) {
+    const t = "v3.2.93", e = Et, o = S(null), n = R(() => e.getPageBuilderConfig), i = R(() => e.getComponents), a = function(l, p) {
       const d = document.createElement("a");
       d.setAttribute(
         "href",