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

package/package.json

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

package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue

@@ -17,7 +17,7 @@
     </div>
     <div
       :class="[expanded ? 'pbx-block' : 'pbx-hidden']"
-      class="pbx-px-4 pbx-ease-linear pbx-duration-75"
+      class="pbx-px-4 pbx-ease-linear pbx-duration-75 pbx-pb-8"
     >
       <slot name="content" />
     </div>

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(() => {
@@ -263,17 +260,14 @@ const ensureBuilderInitialized = function () {
 }
 
 onMounted(async () => {
-  // Try to mount any pending data if #pagebuilder is now present
-  if (pageBuilderService.statuspendingMountData()) {
-    await pageBuilderService.tryMountPendingData()
-  }
+  await pageBuilderService.tryMountPendingData()
 
   // 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,35 @@ 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)
+    const formType = config.updateOrCreate && config.updateOrCreate.formType
+    if (formType === 'create') {
+      await this.mountComponentsToDOM('')
+    }
+  }
 
+  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 +435,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 +1185,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 +1220,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 +1334,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 +1402,7 @@ export class PageBuilderService {
   getStorageItemNameForResource(): string | null {
     return this.getLocalStorageItemName.value
   }
+
   loadStoredComponentsFromStorage() {
     if (!this.getLocalStorageItemName.value) return false
 
@@ -1797,7 +1841,14 @@ export class PageBuilderService {
 
     // If #pagebuilder is not present, cache the data and exit
     if (!pagebuilder) {
-      this.pendingMountData = passedData
+      // For 'create', set pendingMountData to '' (empty string)
+      const config = this.pageBuilderStateStore.getPageBuilderConfig
+      const formType = config && config.updateOrCreate && config.updateOrCreate.formType
+      if (formType === 'create') {
+        this.pendingMountData = ''
+      } else {
+        this.pendingMountData = passedData
+      }
       return
     }
 
@@ -1853,16 +1904,34 @@ export class PageBuilderService {
     }
   }
 
-  statuspendingMountData(): string | null {
-    return this.pendingMountData
-  }
-
-  // Try re-mounting
   async tryMountPendingData() {
-    if (this.pendingMountData && document.querySelector('#pagebuilder')) {
+    const pagebuilder = document.querySelector('#pagebuilder')
+
+    // Only run if #pagebuilder exists
+    if (!pagebuilder) return
+
+    // If pendingMountData is a non-empty string (update or demo), always mount
+    if (this.pendingMountData && typeof this.pendingMountData === 'string') {
       await this.mountComponentsToDOM(this.pendingMountData)
       this.pendingMountData = null
-      this.#completeBuilderInitialization()
+      this.completeBuilderInitialization()
+      return
+    }
+
+    // If pendingMountData is exactly '', and formType is 'create', and no components are mounted, mount for create
+    const config = this.pageBuilderStateStore.getPageBuilderConfig
+    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
+    const components = this.pageBuilderStateStore.getComponents
+
+    if (
+      this.pendingMountData === '' &&
+      formType === 'create' &&
+      (!components || (Array.isArray(components) && components.length === 0))
+    ) {
+      await this.mountComponentsToDOM('')
+      this.pendingMountData = null
+      this.completeBuilderInitialization()
+      return
     }
   }