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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.2.92",
+  "version": "v3.2.94",
   "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/DemoComponents/HomeSection.vue

@@ -83,7 +83,12 @@ const configPageBuilder = {
 
 onMounted(async () => {
   await pageBuilderService.startBuilder(configPageBuilder)
-  pageBuilderService.mountComponentsToDOM(JSON.stringify(html))
+  //
+  //
+  //
+  // await pageBuilderService.mountComponentsToDOM(JSON.stringify(html))
+  // await pageBuilderService.mountComponentsToDOM(JSON.stringify(oldhtmlfromdb))
+  await pageBuilderService.mountComponentsToDOM(rawHTML)
 })
 </script>
 

package/src/PageBuilder/PageBuilder.vue

@@ -263,12 +263,17 @@ const ensureBuilderInitialized = function () {
 }
 
 onMounted(async () => {
+  // Try to mount any pending data if #pagebuilder is now present
+  if (pageBuilderService.statuspendingMountData()) {
+    await pageBuilderService.tryMountPendingData()
+  }
+
   // Check if Builder started
-  await delay(5000)
+  await delay(6000)
   ensureBuilderInitialized()
 
   // Re-check if Builder started
-  await delay(5000)
+  await delay(6000)
   ensureBuilderInitialized()
 })
 </script>

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>
@@ -36,7 +36,10 @@ export class PageBuilderService {
   private NoneListernesTags: string[]
   private delay: (ms?: number) => Promise<void>
   private hasStartedEditing: boolean = false
+  // Hold data from Database or Backend for updated post
   private originalComponents: string | null = null
+  // Holds data to be mounted when #pagebuilder is not yet present in the DOM
+  private pendingMountData: string | null = null
 
   constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>) {
     this.nextTick = nextTick()
@@ -49,7 +52,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)
 
@@ -88,7 +93,7 @@ export class PageBuilderService {
     this.delay = delay
   }
 
-  // Load existing content from HTML when in update mode
+  // Deselect any selected or hovered elements in the builder UI
   async clearHtmlSelection(): Promise<void> {
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
@@ -217,11 +222,12 @@ export class PageBuilderService {
     // Clean up any old localStorage items related to previous builder sessions
     this.deleteOldPageBuilderLocalStorage()
 
-    // Clear any selected HTML elements in the builder UI
+    // Deselect any selected or hovered elements in the builder UI
     await this.clearHtmlSelection()
-
-    // Attach event listeners to all editable elements in the builder
-    await this.addListenersToEditableElements()
+    // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
+    await nextTick()
+    // Attach event listeners to all editable elements in the Builder
+    await this.#addListenersToEditableElements()
 
     // Hide the global loading indicator and mark the builder as started
     this.pageBuilderStateStore.setIsLoadingGlobal(false)
@@ -364,16 +370,14 @@ export class PageBuilderService {
    * The function is used to
    * attach event listeners to each element within a 'section'
    */
-  addListenersToEditableElements = async () => {
+  #addListenersToEditableElements = async () => {
     const elementsWithListeners = new WeakSet<Element>()
 
     const pagebuilder = document.querySelector('#pagebuilder')
-
     if (!pagebuilder) return
 
-    // Wait for any pending DOM updates
+    // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
     await nextTick()
-    await new Promise((resolve) => requestAnimationFrame(resolve))
 
     pagebuilder.querySelectorAll('section *').forEach((element) => {
       // exclude NoneListernesTags && additional Tags for not listening
@@ -536,10 +540,7 @@ export class PageBuilderService {
   }
 
   async #removeHoveredAndSelected() {
-    await new Promise((resolve) => requestAnimationFrame(resolve))
-
     const pagebuilder = document.querySelector('#pagebuilder')
-
     if (!pagebuilder) return
 
     const hoveredElement = pagebuilder.querySelector('[hovered]')
@@ -555,8 +556,6 @@ export class PageBuilderService {
   }
 
   async #syncCurrentClasses() {
-    await new Promise((resolve) => requestAnimationFrame(resolve))
-
     // convert classList to array
     const classListArray = Array.from(this.getElement.value?.classList || [])
 
@@ -651,7 +650,10 @@ export class PageBuilderService {
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
 
-    await this.addListenersToEditableElements()
+    // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
+    await nextTick()
+    // Attach event listeners to all editable elements in the Builder
+    await this.#addListenersToEditableElements()
   }
 
   handleFontWeight(userSelectedFontWeight?: string): void {
@@ -834,8 +836,11 @@ export class PageBuilderService {
     // Remove the component from the array
     this.getComponents.value.splice(indexToDelete, 1)
     this.pageBuilderStateStore.setComponents(this.getComponents.value)
+
+    // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
     await nextTick()
-    await this.addListenersToEditableElements()
+    // Attach event listeners to all editable elements in the Builder
+    await this.#addListenersToEditableElements()
 
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
@@ -961,7 +966,6 @@ export class PageBuilderService {
     this.pageBuilderStateStore.setElement(null)
 
     const pagebuilder = document.querySelector('#pagebuilder')
-
     if (!pagebuilder) return
 
     const addedHtmlComponents = ref<string[]>([])
@@ -1339,8 +1343,10 @@ export class PageBuilderService {
         this.mountComponentsToDOM(this.originalComponents)
       }
 
+      // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
       await nextTick()
-      await this.addListenersToEditableElements()
+      // Attach event listeners to all editable elements in the Builder
+      await this.#addListenersToEditableElements()
 
       this.pageBuilderStateStore.setIsRestoring(false)
     }
@@ -1366,39 +1372,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)
   }
 
@@ -1585,9 +1608,11 @@ export class PageBuilderService {
         componentArrayAddMethod: this.getComponentArrayAddMethod.value || 'push',
       })
 
-      // Wait for the DOM to update before setting event listeners
+      // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
       await nextTick()
-      await this.addListenersToEditableElements()
+      // Attach event listeners to all editable elements in the Builder
+      await this.#addListenersToEditableElements()
+
       await this.handleAutoSave()
     } catch (error) {
       console.error('Error adding component:', error)
@@ -1625,18 +1650,18 @@ export class PageBuilderService {
    * @param data - JSON string (e.g., '[{"html_code":"...","id":"123","title":"..."}]')
    *               OR HTML string (e.g., '<section data-componentid="123">...</section>')
    */
-  #setComponentsFromData(htmlString: string): void {
+  async #setComponentsFromData(htmlString: string): Promise<void> {
     // Auto-detect if input is JSON or HTML
     const trimmedData = htmlString.trim()
 
     if (trimmedData.startsWith('[') || trimmedData.startsWith('{')) {
       // Looks like JSON - parse as JSON
-      this.#parseJSONComponents(trimmedData)
+      await this.#parseJSONComponents(trimmedData)
     } else if (trimmedData.startsWith('<')) {
       // Looks like HTML - parse as HTML
-      this.#parseHTMLComponents(trimmedData)
+      await this.#parseHTMLComponents(trimmedData)
     } else {
-      this.#parseJSONComponents(trimmedData)
+      await this.#parseJSONComponents(trimmedData)
     }
   }
 
@@ -1693,15 +1718,17 @@ export class PageBuilderService {
 
       this.pageBuilderStateStore.setComponents(savedCurrentDesign)
 
-      await this.clearHtmlSelection()
-      await this.addListenersToEditableElements()
+      // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
+      await nextTick()
+      // Attach event listeners to all editable elements in the Builder
+      await this.#addListenersToEditableElements()
     } catch (error) {
       console.error('Error parsing JSON components:', error)
       this.pageBuilderStateStore.setComponents([])
     }
   }
   // Private method to parse HTML components
-  #parseHTMLComponents(htmlData: string): void {
+  async #parseHTMLComponents(htmlData: string): Promise<void> {
     try {
       const parser = new DOMParser()
       const doc = parser.parseFromString(htmlData, 'text/html')
@@ -1711,6 +1738,14 @@ export class PageBuilderService {
 
       const extractedSections: ComponentObject[] = []
       sectionElements.forEach((section) => {
+        // Process all elements inside section to add prefix to classes
+        section.querySelectorAll('[class]').forEach((el) => {
+          el.setAttribute(
+            'class',
+            this.#addTailwindPrefixToClasses(el.getAttribute('class') || '', 'pbx-'),
+          )
+        })
+
         const htmlElement = section as HTMLElement
 
         // Ensure data-componentid exists
@@ -1735,6 +1770,13 @@ export class PageBuilderService {
       })
 
       this.pageBuilderStateStore.setComponents(extractedSections)
+
+      // Deselect any selected or hovered elements in the builder UI
+      await this.clearHtmlSelection()
+      // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
+      await nextTick()
+      // Attach event listeners to all editable elements in the Builder
+      await this.#addListenersToEditableElements()
     } catch (error) {
       console.error('Error parsing HTML components:', error)
       this.pageBuilderStateStore.setComponents([])
@@ -1746,9 +1788,21 @@ export class PageBuilderService {
    * @param passedData - HTML/JSON string to inject (optional)
    * @param preferLocalStorage - if true, always try localStorage first
    */
-  mountComponentsToDOM(passedData: string): void {
-    // Save the original content only once, in update mode, and only if passedData is provided
-    // Form type Update
+  async mountComponentsToDOM(passedData: string): Promise<void> {
+    const pagebuilder = document.querySelector('#pagebuilder')
+
+    // If #pagebuilder is not present, cache the data and exit
+    if (!pagebuilder) {
+      this.pendingMountData = passedData
+      return
+    }
+
+    // Clear the cache if we are mounting now
+    this.pendingMountData = null
+
+    this.pageBuilderStateStore.setComponents([])
+
+    // On from type update Save Original Post
     if (
       this.pageBuilderStateStore.getPageBuilderConfig &&
       this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
@@ -1760,10 +1814,6 @@ export class PageBuilderService {
       this.originalComponents = passedData
     }
 
-    this.pageBuilderStateStore.setComponents([])
-
-    if (!this.pageBuilderStateStore.getPageBuilderConfig) return
-
     // Form type Update
     if (
       this.pageBuilderStateStore.getPageBuilderConfig &&
@@ -1772,7 +1822,7 @@ export class PageBuilderService {
       this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
     ) {
       if (passedData) {
-        this.#setComponentsFromData(passedData)
+        await this.#setComponentsFromData(passedData)
         return
       }
     }
@@ -1787,29 +1837,47 @@ export class PageBuilderService {
       this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'create'
     ) {
       if (localStorageData) {
-        this.#setComponentsFromData(localStorageData)
+        await this.#setComponentsFromData(localStorageData)
         return
       }
 
       // If no localStorage, but passedData exists (for demo), use it
       if (passedData) {
-        this.#setComponentsFromData(passedData)
+        await this.#setComponentsFromData(passedData)
         return
       }
     }
   }
 
+  statuspendingMountData(): string | null {
+    return this.pendingMountData
+  }
+
+  // Try re-mounting
+  async tryMountPendingData() {
+    if (this.pendingMountData && document.querySelector('#pagebuilder')) {
+      await this.mountComponentsToDOM(this.pendingMountData)
+      this.pendingMountData = null
+    }
+  }
+
   async toggleTipTapModal(status: boolean): Promise<void> {
     this.pageBuilderStateStore.setShowModalTipTap(status)
 
+    // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
+    await nextTick()
+    // Attach event listeners to all editable elements in the Builder
+    await this.#addListenersToEditableElements()
+
     if (!status) {
       await this.handleAutoSave()
     }
   }
 
   async initializeElementStyles(): Promise<void> {
-    if (!this.pageBuilderStateStore.getPageBuilderConfig) return
-    await new Promise((resolve) => requestAnimationFrame(resolve))
+    // Wait for Vue to finish DOM updates before attaching event listeners.
+    // This ensure elements exist in the DOM.
+    await nextTick()
 
     // handle custom URL
     this.handleHyperlink(undefined, null, false)
@@ -1818,7 +1886,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/composables/builderInstance.ts

@@ -18,7 +18,7 @@ export function initPageBuilder(): PageBuilderService {
 export function getPageBuilder(): PageBuilderService {
   if (!instance) {
     throw new Error(
-      'PageBuilderService has not been created. Please call createPageBuilder() first in your App.vue or setup file.',
+      'PageBuilderService has not been created. Please call initPageBuilder() first in your App.vue or setup file.',
     )
   }
   return instance

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