@myissue/vue-website-page-builder 3.2.96 → 3.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.2.96",
+  "version": "v3.3.1",
   "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,12 +83,9 @@ const configPageBuilder = {
 
 onMounted(async () => {
   await pageBuilderService.startBuilder(configPageBuilder)
-  //
-  //
-  //
-  // await pageBuilderService.mountComponentsToDOM(JSON.stringify(html))
+  await pageBuilderService.mountComponentsToDOM(JSON.stringify(html))
   // await pageBuilderService.mountComponentsToDOM(JSON.stringify(oldhtmlfromdb))
-  await pageBuilderService.mountComponentsToDOM(rawHTML)
+  // await pageBuilderService.mountComponentsToDOM(rawHTML)
 })
 </script>
 

package/src/PageBuilder/PageBuilder.vue

@@ -169,9 +169,6 @@ const getIsSaving = computed(() => {
 })
 
 const getIsLoadingResumeEditing = computed(() => {
-  if (pageBuilderStateStore.getIsLoadingResumeEditing) {
-    handlerRumeEditingForUpdate()
-  }
   return pageBuilderStateStore.getIsLoadingResumeEditing
 })
 const getIsRestoring = computed(() => {
@@ -269,11 +266,11 @@ onMounted(async () => {
   }
 
   // Check if Builder started
-  await delay(6000)
+  await delay(10000)
   ensureBuilderInitialized()
 
   // Re-check if Builder started
-  await delay(6000)
+  await delay(10000)
   ensureBuilderInitialized()
 })
 </script>

package/src/composables/PageBuilderService.ts

@@ -195,10 +195,20 @@ export class PageBuilderService {
   }
 
   /**
-   * Initializes the Page Builder with the provided configuration.
-   * Handles config validation, local storage, and sets up the builder state.
+   * - Entry point for initializing the Page Builder.
+   * - Sets the builder as started in the state store.
+   * - Shows a global loading indicator.
+   * - Stores and validates the provided configuration.
+   * - Updates the localStorage key name based on the config/resource.
+   * - Completes builder initialization if the DOM is ready.
+   *
+   * @param config - The configuration object for the Page Builder.
    */
   async startBuilder(config: PageBuilderConfig): Promise<void> {
+    // Reactive flag signals to the UI that the builder has been successfully initialized
+    // Prevents builder actions to prevent errors caused by missing DOM .
+    this.pageBuilderStateStore.setBuilderStarted(true)
+
     // Show a global loading indicator while initializing
     this.pageBuilderStateStore.setIsLoadingGlobal(true)
 
@@ -213,25 +223,30 @@ export class PageBuilderService {
     // Update the localStorage key name based on the config/resource
     this.#updateLocalStorageItemName()
 
-    this.#completeBuilderInitialization()
+    this.completeBuilderInitialization()
   }
 
-  async #completeBuilderInitialization() {
-    this.pageBuilderStateStore.setIsLoadingGlobal(true)
-
+  async completeBuilderInitialization() {
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
+    // Deselect any selected or hovered elements in the builder UI
+    await this.clearHtmlSelection()
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
     await this.delay(300)
 
     // Hide the global loading indicator and mark the builder as started
     this.pageBuilderStateStore.setIsLoadingGlobal(false)
-    this.pageBuilderStateStore.setBuilderStarted(true)
 
-    // If there is a local draft for this resource, mark it in the state
     if (await this.hasLocalDraftForUpdate()) {
       this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
     }
+
+    // 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()
+
     // Clean up any old localStorage items related to previous builder sessions
     this.deleteOldPageBuilderLocalStorage()
   }
@@ -415,6 +430,8 @@ export class PageBuilderService {
 
         try {
           this.pageBuilderStateStore.setIsSaving(true)
+          // Deselect any selected or hovered elements in the builder UI
+          //
           await this.saveComponentsLocalStorage()
           await this.delay(500)
         } catch (err) {
@@ -1163,7 +1180,26 @@ export class PageBuilderService {
   }
 
   /**
-   * Components from DOM → JS (not JS → DOM).
+   * Returns a clone of the given element with [hovered] and [selected] attributes
+   * removed from itself and all descendants. Does NOT mutate the live DOM.
+   * @param element The HTMLElement to clone and sanitize
+   */
+  #cloneAndRemoveSelectionAttributes(element: HTMLElement): HTMLElement {
+    // Deep clone the element
+    const clone = element.cloneNode(true) as HTMLElement
+
+    // Remove [hovered] and [selected] from the clone and all descendants
+    clone.querySelectorAll('[hovered]').forEach((el) => el.removeAttribute('hovered'))
+    clone.querySelectorAll('[selected]').forEach((el) => el.removeAttribute('selected'))
+    // Also remove from the root element itself if present
+    clone.removeAttribute('hovered')
+    clone.removeAttribute('selected')
+
+    return clone
+  }
+
+  /**
+   * Components from DOM → JS (not JS → DOM). øøø
    * Saving the current DOM state into JS this.getComponents (for example, before saving to localStorage).
    * This function Only copies the current DOM HTML into JS this.getComponents (component.html_code).
    */
@@ -1179,10 +1215,12 @@ export class PageBuilderService {
     const componentsToSave: { html_code: string; id: string | null; title: string }[] = []
 
     pagebuilder.querySelectorAll('section[data-componentid]').forEach((section) => {
+      const sanitizedSection = this.#cloneAndRemoveSelectionAttributes(section as HTMLElement)
+
       componentsToSave.push({
-        html_code: section.outerHTML,
-        id: section.getAttribute('data-componentid'),
-        title: section.getAttribute('data-component-title') || 'Untitled Component',
+        html_code: sanitizedSection.outerHTML,
+        id: sanitizedSection.getAttribute('data-componentid'),
+        title: sanitizedSection.getAttribute('data-component-title') || 'Untitled Component',
       })
     })
 
@@ -1291,8 +1329,8 @@ export class PageBuilderService {
         const draft = localStorage.getItem(key)
         if (draft) {
           try {
-            await this.delay(1000)
-
+            await this.delay(500)
+            this.pageBuilderStateStore.setHasLocalDraftForUpdate(false)
             return true
           } catch (err) {
             console.error('Unable to mount components to DOM.', err)
@@ -1359,6 +1397,7 @@ export class PageBuilderService {
   getStorageItemNameForResource(): string | null {
     return this.getLocalStorageItemName.value
   }
+
   loadStoredComponentsFromStorage() {
     if (!this.getLocalStorageItemName.value) return false
 
@@ -1862,7 +1901,7 @@ export class PageBuilderService {
     if (this.pendingMountData && document.querySelector('#pagebuilder')) {
       await this.mountComponentsToDOM(this.pendingMountData)
       this.pendingMountData = null
-      this.#completeBuilderInitialization()
+      this.completeBuilderInitialization()
     }
   }