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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.2.94",
+  "version": "v3.2.96",
   "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/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,11 @@ const getIsSaving = computed(() => {
   return pageBuilderStateStore.getIsSaving
 })
 
-const getIsResumeEditing = computed(() => {
-  if (pageBuilderStateStore.getIsResumeEditing) {
+const getIsLoadingResumeEditing = computed(() => {
+  if (pageBuilderStateStore.getIsLoadingResumeEditing) {
     handlerRumeEditingForUpdate()
   }
-  return pageBuilderStateStore.getIsResumeEditing
+  return pageBuilderStateStore.getIsLoadingResumeEditing
 })
 const getIsRestoring = computed(() => {
   return pageBuilderStateStore.getIsRestoring
@@ -340,7 +340,7 @@ onMounted(async () => {
 
     <DynamicModalBuilder
       :showDynamicModalBuilder="showModalResumeEditing"
-      :isLoading="getIsResumeEditing"
+      :isLoading="getIsLoadingResumeEditing"
       :type="typeModal"
       :gridColumnAmount="gridColumnModalResumeEditing"
       :title="titleModalResumeEditing"

package/src/composables/PageBuilderService.ts

@@ -203,7 +203,6 @@ export class PageBuilderService {
     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 +213,27 @@ 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() {
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
 
-    // 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()
+    const pagebuilder = document.querySelector('#pagebuilder')
+    if (!pagebuilder) return
+
+    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)
+    }
+    // Clean up any old localStorage items related to previous builder sessions
+    this.deleteOldPageBuilderLocalStorage()
   }
 
   #applyElementClassChanges(
@@ -1270,7 +1272,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 (
@@ -1284,12 +1291,9 @@ export class PageBuilderService {
         const draft = localStorage.getItem(key)
         if (draft) {
           try {
-            await this.delay(500)
+            await this.delay(1000)
 
             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 +1323,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)
         }
       }
     }
@@ -1858,6 +1862,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 {

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...