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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.2.95",
+  "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/Components/PageBuilder/ToolbarOption/ToolbarOption.vue

@@ -188,12 +188,7 @@ const openHTMLSettings = function () {
 
             <!-- Delete Layout Start -->
             <button
-              @click="
-                () => {
-                  pageBuilderService.clearHtmlSelection()
-                  deleteAllComponents()
-                }
-              "
+              @click="deleteAllComponents"
               class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-font-normal pbx-w-max pbx-border-none pbx-m-0 pbx-bg-myPrimaryErrorColor pbx-text-white"
               type="button"
             >

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

@@ -102,10 +102,6 @@ const handleAddComponent = async function () {
   // end modal
 }
 
-const getHasLocalDraftForUpdate = computed(() => {
-  return pageBuilderStateStore.getHasLocalDraftForUpdate
-})
-
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
@@ -114,6 +110,10 @@ const getComponents = computed(() => {
   return pageBuilderStateStore.getComponents
 })
 
+const getHasLocalDraftForUpdate = computed(() => {
+  return pageBuilderStateStore.getHasLocalDraftForUpdate
+})
+
 watch(getHasLocalDraftForUpdate, (newVal) => {
   if (newVal) {
     handlerRumeEditingForUpdate()
@@ -168,11 +168,8 @@ const getIsSaving = computed(() => {
   return pageBuilderStateStore.getIsSaving
 })
 
-const getIsResumeEditing = computed(() => {
-  if (pageBuilderStateStore.getIsResumeEditing) {
-    handlerRumeEditingForUpdate()
-  }
-  return pageBuilderStateStore.getIsResumeEditing
+const getIsLoadingResumeEditing = computed(() => {
+  return pageBuilderStateStore.getIsLoadingResumeEditing
 })
 const getIsRestoring = computed(() => {
   return pageBuilderStateStore.getIsRestoring
@@ -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>
@@ -340,7 +337,7 @@ onMounted(async () => {
 
     <DynamicModalBuilder
       :showDynamicModalBuilder="showModalResumeEditing"
-      :isLoading="getIsResumeEditing"
+      :isLoading="getIsLoadingResumeEditing"
       :type="typeModal"
       :gridColumnAmount="gridColumnModalResumeEditing"
       :title="titleModalResumeEditing"

package/src/composables/PageBuilderService.ts

@@ -195,15 +195,24 @@ 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)
 
     // Wait briefly to ensure UI updates and async processes settle
-    await this.delay(300)
 
     // Store the provided config in the builder's state store
     this.pageBuilderStateStore.setPageBuilderConfig(config)
@@ -214,24 +223,32 @@ export class PageBuilderService {
     // Update the localStorage key name based on the config/resource
     this.#updateLocalStorageItemName()
 
-    // If there is a local draft for this resource, mark it in the state
-    if (await this.#hasLocalDraftForUpdate()) {
-      this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
-    }
+    this.completeBuilderInitialization()
+  }
 
-    // Clean up any old localStorage items related to previous builder sessions
-    this.deleteOldPageBuilderLocalStorage()
+  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)
+
+    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()
 
-    // Hide the global loading indicator and mark the builder as started
-    this.pageBuilderStateStore.setIsLoadingGlobal(false)
-    this.pageBuilderStateStore.setBuilderStarted(true)
+    // Clean up any old localStorage items related to previous builder sessions
+    this.deleteOldPageBuilderLocalStorage()
   }
 
   #applyElementClassChanges(
@@ -413,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) {
@@ -1161,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).
    */
@@ -1177,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',
       })
     })
 
@@ -1270,7 +1310,12 @@ export class PageBuilderService {
     }
   }
 
-  async #hasLocalDraftForUpdate(): Promise<boolean> {
+  async hasLocalDraftForUpdate(): Promise<boolean> {
+    const pagebuilder = document.querySelector('#pagebuilder')
+    if (!pagebuilder) {
+      return true
+    }
+
     if (this.hasStartedEditing) return false
 
     if (
@@ -1285,11 +1330,8 @@ export class PageBuilderService {
         if (draft) {
           try {
             await this.delay(500)
-
+            this.pageBuilderStateStore.setHasLocalDraftForUpdate(false)
             return true
-            // const dbComponents = this.getComponents.value
-            // const draftParsed = JSON.parse(draft)
-            // return JSON.stringify(draftParsed.components) !== JSON.stringify(dbComponents)
           } catch (err) {
             console.error('Unable to mount components to DOM.', err)
             return false
@@ -1319,10 +1361,10 @@ export class PageBuilderService {
         const updateDraftFromLocalStorage = localStorage.getItem(key)
 
         if (typeof updateDraftFromLocalStorage === 'string') {
-          this.pageBuilderStateStore.setIsResumeEditing(true)
+          this.pageBuilderStateStore.setIsLoadingResumeEditing(true)
           await delay(500)
           this.mountComponentsToDOM(updateDraftFromLocalStorage)
-          this.pageBuilderStateStore.setIsResumeEditing(false)
+          this.pageBuilderStateStore.setIsLoadingResumeEditing(false)
         }
       }
     }
@@ -1355,6 +1397,7 @@ export class PageBuilderService {
   getStorageItemNameForResource(): string | null {
     return this.getLocalStorageItemName.value
   }
+
   loadStoredComponentsFromStorage() {
     if (!this.getLocalStorageItemName.value) return false
 
@@ -1858,6 +1901,7 @@ export class PageBuilderService {
     if (this.pendingMountData && document.querySelector('#pagebuilder')) {
       await this.mountComponentsToDOM(this.pendingMountData)
       this.pendingMountData = null
+      this.completeBuilderInitialization()
     }
   }
 

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

@@ -277,7 +277,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     getIsLoadingGlobal: (state: PageBuilderState): boolean => state.isLoadingGlobal,
     getIsSaving: (state: PageBuilderState): boolean => state.isSaving,
     getHasLocalDraftForUpdate: (state: PageBuilderState): boolean => state.hasLocalDraftForUpdate,
-    getIsResumeEditing: (state: PageBuilderState): boolean => state.isResumeEditing,
+    getIsLoadingResumeEditing: (state: PageBuilderState): boolean => state.isResumeEditing,
     getIsRestoring: (state: PageBuilderState): boolean => state.isRestoring,
   },
   actions: {
@@ -475,7 +475,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     setHasLocalDraftForUpdate(payload: boolean): void {
       this.hasLocalDraftForUpdate = payload
     },
-    setIsResumeEditing(payload: boolean): void {
+    setIsLoadingResumeEditing(payload: boolean): void {
       this.isResumeEditing = payload
     },
     setIsRestoring(payload: boolean): void {