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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.2.92",
+  "version": "v3.2.93",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/DemoComponents/DemoUnsplash.vue

@@ -17,7 +17,7 @@ const getIsLoadingImage = ref(false)
 const getSearchTerm = ref('')
 const getCurrentPageNumber = ref(1)
 const getOrientationValue = ref('')
-const getCurrentImage = ref('')
+const getApplyImageToSelection = ref('')
 const getCurrentUser = ref('')
 
 const getUnsplashImages = ref([])
@@ -72,7 +72,7 @@ const handleImageClick = async function (data) {
   }
 
   await delay(100)
-  getCurrentImage.value = data.url || ''
+  getApplyImageToSelection.value = data.url || ''
 
   getIsLoadingImage.value = false
 }
@@ -100,11 +100,11 @@ const nextPage = async function () {
 
 const applySelectedImage = async function (imageURL) {
   // Ensure the current image is set in the store with proper structure
-  pageBuilderStateStore.setCurrentImage({
+  pageBuilderService.stageImageForSelectedElement({
     src: `${imageURL}`,
   })
 
-  await pageBuilderService.updateBasePrimaryImage()
+  await pageBuilderService.applyPendingImageToSelectedElement()
 
   closeMediaLibraryModal()
 }
@@ -341,10 +341,10 @@ onMounted(async () => {
                 </div>
               </div>
             </template>
-            <template v-if="getCurrentImage && !getIsLoadingImage">
+            <template v-if="getApplyImageToSelection && !getIsLoadingImage">
               <img
                 class="pbx-mx-auto pbx-block pbx-w-full pbx-object-cover pbx-object-center pbx-cursor-pointer"
-                :src="`${getCurrentImage}`"
+                :src="`${getApplyImageToSelection}`"
                 alt="file"
               />
               <div class="md:pbx-px-3 pbx-px-2">
@@ -392,8 +392,8 @@ onMounted(async () => {
             Close
           </button>
           <button
-            v-if="getCurrentImage && typeof getCurrentImage === 'string'"
-            @click="applySelectedImage(getCurrentImage)"
+            v-if="getApplyImageToSelection && typeof getApplyImageToSelection === 'string'"
+            @click="applySelectedImage(getApplyImageToSelection)"
             class="pbx-myPrimaryButton"
             type="button"
           >

package/src/composables/PageBuilderService.ts

@@ -24,7 +24,7 @@ export class PageBuilderService {
   private pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>
   private getTextAreaVueModel: ComputedRef<string | null>
   private getLocalStorageItemName: ComputedRef<string | null>
-  private getCurrentImage: ComputedRef<ImageObject>
+  private getApplyImageToSelection: ComputedRef<ImageObject>
   private getHyberlinkEnable: ComputedRef<boolean>
   private getComponents: ComputedRef<ComponentObject[] | null>
   private getComponent: ComputedRef<ComponentObject | null>
@@ -49,7 +49,9 @@ export class PageBuilderService {
       () => this.pageBuilderStateStore.getLocalStorageItemName,
     )
 
-    this.getCurrentImage = computed(() => this.pageBuilderStateStore.getCurrentImage)
+    this.getApplyImageToSelection = computed(
+      () => this.pageBuilderStateStore.getApplyImageToSelection,
+    )
     this.getHyberlinkEnable = computed(() => this.pageBuilderStateStore.getHyberlinkEnable)
     this.getComponents = computed(() => this.pageBuilderStateStore.getComponents)
 
@@ -1366,39 +1368,56 @@ export class PageBuilderService {
 
     return false
   }
-  //
-  //
-  async updateBasePrimaryImage(): Promise<void> {
+
+  /**
+   * 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(image: ImageObject) {
+    this.pageBuilderStateStore.setApplyImageToSelection(image)
+  }
+
+  /**
+   * 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(): Promise<void> {
     if (!this.getElement.value) return
 
-    // If no data provided, apply current image if available (new simplified usage)
-    if (this.getCurrentImage.value && this.getCurrentImage.value.src) {
+    // Only apply if an image is staged
+    if (this.getApplyImageToSelection.value && this.getApplyImageToSelection.value.src) {
       await this.nextTick
-      this.pageBuilderStateStore.setBasePrimaryImage(`${this.getCurrentImage.value.src}`)
+      this.pageBuilderStateStore.setBasePrimaryImage(`${this.getApplyImageToSelection.value.src}`)
+
       await this.handleAutoSave()
     }
   }
 
-  setBasePrimaryImageFromCurrent() {
+  /**
+   * 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 currentImageContainer = document.createElement('div')
-
     currentImageContainer.innerHTML = this.getElement.value.outerHTML
 
     // Get all img and div within the current image container
     const imgElements = currentImageContainer.getElementsByTagName('img')
     const divElements = currentImageContainer.getElementsByTagName('div')
 
-    // Check if there is exactly one img and no div
+    // If exactly one img and no div, set as base primary image
     if (imgElements.length === 1 && divElements.length === 0) {
-      // Return the source of the only img
-
       this.pageBuilderStateStore.setBasePrimaryImage(imgElements[0].src)
-
       return
     }
 
+    // Otherwise, clear the base primary image
     this.pageBuilderStateStore.setBasePrimaryImage(null)
   }
 
@@ -1818,7 +1837,7 @@ export class PageBuilderService {
     // handle BG opacity
     this.handleBackgroundOpacity(undefined)
     // displayed image
-    this.setBasePrimaryImageFromCurrent()
+    this.setBasePrimaryImageFromSelectedElement()
     // border style
     this.handleBorderStyle(undefined)
     // border width

package/src/stores/page-builder-state.ts

@@ -56,7 +56,7 @@ interface PageBuilderState {
   configPageBuilder: PageBuilderConfig | null
 
   // Media Library State
-  currentImage: ImageObject
+  applyImageToSelection: ImageObject
   currentPreviewImage: string | null
 
   // User State
@@ -117,7 +117,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     configPageBuilder: null,
 
     // Media Library State
-    currentImage: { src: '' },
+    applyImageToSelection: { src: '' },
     currentPreviewImage: null,
 
     // User State
@@ -264,10 +264,10 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
       return state.configPageBuilder
     },
 
-    // Media Library Getters
-    getCurrentImage(state: PageBuilderState): ImageObject {
-      return state.currentImage
+    getApplyImageToSelection(state: PageBuilderState): ImageObject {
+      return state.applyImageToSelection
     },
+
     getCurrentPreviewImage(state: PageBuilderState): string | null {
       return state.currentPreviewImage
     },
@@ -455,9 +455,8 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
       this.configPageBuilder = payload
     },
 
-    // Media Library Actions
-    setCurrentImage(payload: ImageObject): void {
-      this.currentImage = payload
+    setApplyImageToSelection(payload: ImageObject): void {
+      this.applyImageToSelection = payload
     },
     setCurrentPreviewImage(payload: string | null): void {
       this.currentPreviewImage = payload

package/src/types/index.ts

@@ -83,7 +83,7 @@ export interface PageBuilderStateStore {
   setTextColor: (color: string) => void
   setBackgroundOpacity: (opacity: string) => void
   setOpacity: (opacity: string) => void
-  getCurrentImage: ImageObject | null
+  getApplyImageToSelection: ImageObject | null
   setCurrentImage: (image: ImageObject) => void
   getCurrentPreviewImage: string | null
   setCurrentPreviewImage: (url: string | null) => void