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

package/package.json

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

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

@@ -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()
@@ -90,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)
@@ -219,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)
@@ -366,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
@@ -538,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]')
@@ -557,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 || [])
 
@@ -653,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 {
@@ -836,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)
@@ -963,7 +966,6 @@ export class PageBuilderService {
     this.pageBuilderStateStore.setElement(null)
 
     const pagebuilder = document.querySelector('#pagebuilder')
-
     if (!pagebuilder) return
 
     const addedHtmlComponents = ref<string[]>([])
@@ -1341,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)
     }
@@ -1604,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)
@@ -1644,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)
     }
   }
 
@@ -1712,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')
@@ -1730,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
@@ -1754,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([])
@@ -1765,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 &&
@@ -1779,10 +1814,6 @@ export class PageBuilderService {
       this.originalComponents = passedData
     }
 
-    this.pageBuilderStateStore.setComponents([])
-
-    if (!this.pageBuilderStateStore.getPageBuilderConfig) return
-
     // Form type Update
     if (
       this.pageBuilderStateStore.getPageBuilderConfig &&
@@ -1791,7 +1822,7 @@ export class PageBuilderService {
       this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
     ) {
       if (passedData) {
-        this.#setComponentsFromData(passedData)
+        await this.#setComponentsFromData(passedData)
         return
       }
     }
@@ -1806,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)

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/types/index.ts

@@ -1,4 +1,4 @@
-import type PageBuilderService from '../composables/PageBuilderService.ts'
+import type { PageBuilderService } from '../composables/PageBuilderService.ts'
 
 export interface PageBuilderState {
   // ...other state properties...