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

package/src/composables/PageBuilderService.ts

@@ -1,5 +1,11 @@
 // Type definitions
-import type { ComponentObject, ImageObject, PageBuilderConfig } from '../types'
+import type {
+  BuilderResourceData,
+  ComponentObject,
+  ImageObject,
+  PageBuilderConfig,
+  StartBuilderResult,
+} from '../types'
 
 import type { usePageBuilderStateStore } from '../stores/page-builder-state'
 
@@ -18,11 +24,7 @@ import { isEmptyObject } from '../helpers/isEmptyObject'
 
 export class PageBuilderService {
   // Class properties with types
-  private nextTick: Promise<void>
-  private containsPagebuilder: Element | null
-  // private pageBuilder: Element | null
   private pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>
-  private getTextAreaVueModel: ComputedRef<string | null>
   private getLocalStorageItemName: ComputedRef<string | null>
   private getApplyImageToSelection: ComputedRef<ImageObject>
   private getHyberlinkEnable: ComputedRef<boolean>
@@ -42,12 +44,9 @@ export class PageBuilderService {
   private pendingMountData: string | null = null
 
   constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>) {
-    this.nextTick = nextTick()
     this.hasStartedEditing = false
-    this.containsPagebuilder = document.querySelector('#contains-pagebuilder')
     this.pageBuilderStateStore = pageBuilderStateStore
 
-    this.getTextAreaVueModel = computed(() => this.pageBuilderStateStore.getTextAreaVueModel)
     this.getLocalStorageItemName = computed(
       () => this.pageBuilderStateStore.getLocalStorageItemName,
     )
@@ -176,6 +175,38 @@ export class PageBuilderService {
     }
   }
 
+  #validateUserProvidedComponents(components: BuilderResourceData) {
+    // Must be an array
+    if (!Array.isArray(components)) {
+      return {
+        error: true,
+        reason: "'components' must be an array.",
+      }
+    }
+
+    // If empty array, that's acceptable
+    if (components.length === 0) {
+      return { error: false }
+    }
+
+    // Check that the first item looks like a component
+    const first = components[0]
+
+    const isObject = typeof first === 'object' && first !== null
+    const hasHtmlCodeKey = 'html_code' in first
+
+    if (!isObject || !hasHtmlCodeKey) {
+      return {
+        error: true,
+        reason: "Each component must be an object and include an 'html_code' key.",
+      }
+    }
+
+    return {
+      message: 'Everything looks good. Components structure is valid.',
+    }
+  }
+
   #validateConfig(config: PageBuilderConfig): void {
     const defaultConfigValues = {
       updateOrCreate: {
@@ -204,7 +235,19 @@ export class PageBuilderService {
    *
    * @param config - The configuration object for the Page Builder.
    */
-  async startBuilder(config: PageBuilderConfig): Promise<void> {
+  async startBuilder(
+    config: PageBuilderConfig,
+    components?: BuilderResourceData,
+  ): Promise<StartBuilderResult> {
+    console.log('start builder ran..', components)
+    if (components) {
+      this.#validateUserProvidedComponents(components)
+    }
+
+    return {
+      message: 'Page builder started successfully with valid components.',
+    }
+
     // 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)
@@ -223,15 +266,14 @@ export class PageBuilderService {
     // Update the localStorage key name based on the config/resource
     this.#updateLocalStorageItemName()
 
-    this.completeBuilderInitialization()
-
     const formType = config.updateOrCreate && config.updateOrCreate.formType
     if (formType === 'create') {
       await this.mountComponentsToDOM('')
     }
   }
 
-  async completeBuilderInitialization() {
+  async #completeBuilderInitialization() {
+    console.log('complete builder..')
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
@@ -437,7 +479,7 @@ export class PageBuilderService {
           this.pageBuilderStateStore.setIsSaving(true)
           // Deselect any selected or hovered elements in the builder UI
           //
-          await this.saveComponentsLocalStorage()
+          this.#saveDomComponentsToLocalStorage()
           await this.delay(500)
         } catch (err) {
           console.error('Error trying auto save.', err)
@@ -449,7 +491,7 @@ export class PageBuilderService {
     if (passedConfig && !passedConfig.userSettings) {
       try {
         this.pageBuilderStateStore.setIsSaving(true)
-        await this.saveComponentsLocalStorage()
+        this.#saveDomComponentsToLocalStorage()
         await this.delay(300)
       } catch (err) {
         console.error('Error trying saving.', err)
@@ -475,7 +517,7 @@ export class PageBuilderService {
           passedConfig.userSettings.autoSave)
       ) {
         this.pageBuilderStateStore.setIsSaving(true)
-        await this.saveComponentsLocalStorage()
+        this.#saveDomComponentsToLocalStorage()
         await this.delay(300)
 
         this.pageBuilderStateStore.setIsSaving(false)
@@ -483,7 +525,7 @@ export class PageBuilderService {
     }
     if (passedConfig && !passedConfig.userSettings) {
       this.pageBuilderStateStore.setIsSaving(true)
-      await this.saveComponentsLocalStorage()
+      this.#saveDomComponentsToLocalStorage()
       await this.delay(300)
 
       this.pageBuilderStateStore.setIsSaving(false)
@@ -494,15 +536,16 @@ export class PageBuilderService {
     // Deep clone clone component
     const clonedComponent = { ...componentObject }
 
+    const pageBuilder = document.querySelector('#contains-pagebuilder')
     //  scoll to top or bottom # end
-    if (this.containsPagebuilder) {
+    if (pageBuilder) {
       if (
         this.getComponentArrayAddMethod.value === 'unshift' ||
         this.getComponentArrayAddMethod.value === 'push'
       ) {
         // push to top
         if (this.getComponentArrayAddMethod.value === 'unshift') {
-          this.containsPagebuilder.scrollTo({
+          pageBuilder.scrollTo({
             top: 0,
             behavior: 'smooth',
           })
@@ -510,9 +553,8 @@ export class PageBuilderService {
 
         // push to bottom
         if (this.getComponentArrayAddMethod.value === 'push') {
-          const maxHeight = this.containsPagebuilder.scrollHeight
-          this.containsPagebuilder.scrollTo({
-            top: maxHeight,
+          pageBuilder.scrollTo({
+            top: 0,
             behavior: 'smooth',
           })
         }
@@ -606,80 +648,6 @@ export class PageBuilderService {
     }
   }
 
-  handleRemoveClasses(userSelectedClass: string): void {
-    // remove selected class from element
-    if (this.getElement.value?.classList.contains(userSelectedClass)) {
-      this.getElement.value?.classList.remove(userSelectedClass)
-
-      this.pageBuilderStateStore.setElement(this.getElement.value)
-      this.pageBuilderStateStore.removeClass(userSelectedClass)
-    }
-  }
-
-  handleDeleteElement() {
-    // Get the element to be deleted
-    const element = this.getElement.value
-
-    if (!element) return
-
-    if (!element?.parentNode) {
-      this.pageBuilderStateStore.setComponent(null)
-      this.pageBuilderStateStore.setElement(null)
-      return
-    }
-
-    // Store the parent of the deleted element
-    // if parent element tag is section remove the hole component
-    if (element.parentElement?.tagName !== 'SECTION') {
-      this.pageBuilderStateStore.setParentElement(element.parentNode as HTMLElement)
-
-      // Store the outerHTML of the deleted element
-      this.pageBuilderStateStore.setRestoredElement(element.outerHTML)
-
-      // Store the next sibling of the deleted element
-      this.pageBuilderStateStore.setNextSibling(element.nextSibling as HTMLElement | null)
-    }
-
-    // if parent element tag is section remove the hole component
-    if (element.parentElement?.tagName === 'SECTION') {
-      this.deleteSelectedComponent()
-    }
-
-    // Remove the element from the DOM
-    element.remove()
-    this.pageBuilderStateStore.setComponent(null)
-    this.pageBuilderStateStore.setElement(null)
-  }
-
-  async handleRestoreElement() {
-    // Get the stored deleted element and its parent
-    if (this.getRestoredElement.value && this.getParentElement.value) {
-      // Create a new element from the stored outerHTML
-      const newElement = document.createElement('div')
-      // Fixed type conversion issue
-      newElement.innerHTML = this.getRestoredElement.value
-
-      // Append the restored element to its parent
-      // Insert the restored element before its next sibling in its parent
-      if (newElement.firstChild && this.getParentElement.value) {
-        // insertBefore can accept null as second parameter (will append to end)
-        this.getParentElement.value.insertBefore(newElement.firstChild, this.getNextSibling.value)
-      }
-    }
-
-    // Clear
-    this.pageBuilderStateStore.setParentElement(null)
-    this.pageBuilderStateStore.setRestoredElement(null)
-    this.pageBuilderStateStore.setNextSibling(null)
-    this.pageBuilderStateStore.setComponent(null)
-    this.pageBuilderStateStore.setElement(null)
-
-    // 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 {
     this.#applyElementClassChanges(
       userSelectedFontWeight,
@@ -840,15 +808,40 @@ export class PageBuilderService {
     this.#applyElementClassChanges(opacity, tailwindOpacities.opacities, 'setOpacity')
   }
 
-  deleteAllComponents() {
+  /**
+   * Removes all components from both the builder state and the DOM.
+   *
+   * - First clears the components array in the store.
+   * - Then, as a defensive measure, also manually removes all sections elements from the DOM.
+   *
+   * This manual DOM clearing is only optional
+   *
+   */
+
+  deleteAllComponentsFromDOM() {
+    // Clear the store
     this.pageBuilderStateStore.setComponents([])
+
+    // Also clear the DOM
+    const pagebuilder = document.querySelector('#pagebuilder')
+    if (pagebuilder) {
+      // Remove all section elements (assuming each component is a <section>)
+      pagebuilder
+        .querySelectorAll('section[data-componentid]')
+        .forEach((section) => section.remove())
+    }
   }
 
-  async deleteSelectedComponent() {
-    if (!this.getComponents.value || !this.getComponent.value) return
+  async deleteComponentFromDOM() {
+    this.#syncDomToStoreOnly()
+    await nextTick()
+
+    const components = this.getComponents.value
+
+    if (!components) return
 
     // Find the index of the component to delete
-    const indexToDelete = this.getComponents.value.findIndex(
+    const indexToDelete = components.findIndex(
       (component) => component.id === this.getComponent.value?.id,
     )
 
@@ -857,17 +850,99 @@ export class PageBuilderService {
       return
     }
 
-    // Remove the component from the array
-    this.getComponents.value.splice(indexToDelete, 1)
-    this.pageBuilderStateStore.setComponents(this.getComponents.value)
+    // Create a new array without the deleted component (avoid mutating original array)
+    const newComponents = [
+      ...components.slice(0, indexToDelete),
+      ...components.slice(indexToDelete + 1),
+    ]
 
-    // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
+    this.pageBuilderStateStore.setComponents(newComponents)
+
+    // Remove the section from the DOM as well
+    const pagebuilder = document.querySelector('#pagebuilder')
+    if (pagebuilder && this.getComponent.value?.id) {
+      const section = pagebuilder.querySelector(
+        `section[data-componentid="${this.getComponent.value.id}"]`,
+      )
+      if (section) section.remove()
+    }
+
+    // Wait for Vue to finish DOM updates before attaching event listeners.
     await nextTick()
-    // Attach event listeners to all editable elements in the Builder
     await this.#addListenersToEditableElements()
 
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
+
+    // Optional: auto-save after deletion
+    await this.handleAutoSave()
+  }
+
+  async deleteElementFromDOM() {
+    const element = this.getElement.value
+    if (!element) return
+
+    if (!element.parentNode) {
+      this.pageBuilderStateStore.setComponent(null)
+      this.pageBuilderStateStore.setElement(null)
+      return
+    }
+
+    // If the element is inside a section, but not the section itself, store info for undo/restore
+    if (element.parentElement?.tagName !== 'SECTION') {
+      this.pageBuilderStateStore.setParentElement(element.parentNode as HTMLElement)
+      this.pageBuilderStateStore.setRestoredElement(element.outerHTML)
+      this.pageBuilderStateStore.setNextSibling(element.nextSibling as HTMLElement | null)
+      // Remove only the element itself from the DOM
+      element.remove()
+    } else {
+      // If the element's parent is a section, remove the whole component (section)
+      await this.deleteComponentFromDOM()
+      // No need to call element.remove() here, as the section is already removed
+    }
+
+    // Clear selection state
+    this.pageBuilderStateStore.setComponent(null)
+    this.pageBuilderStateStore.setElement(null)
+  }
+
+  async restoreDeletedElementToDOM() {
+    // Restore the previously deleted element to the DOM
+    const restoredHTML = this.getRestoredElement.value
+    const parent = this.getParentElement.value
+    const nextSibling = this.getNextSibling.value
+
+    if (restoredHTML && parent) {
+      // Create a container and parse the HTML
+      const container = document.createElement('div')
+      container.innerHTML = restoredHTML
+
+      // Insert the restored element before its next sibling (or append if null)
+      if (container.firstChild) {
+        parent.insertBefore(container.firstChild, nextSibling)
+      }
+    }
+
+    // Clear restore-related state
+    this.pageBuilderStateStore.setParentElement(null)
+    this.pageBuilderStateStore.setRestoredElement(null)
+    this.pageBuilderStateStore.setNextSibling(null)
+    this.pageBuilderStateStore.setComponent(null)
+    this.pageBuilderStateStore.setElement(null)
+
+    // Wait for Vue to finish DOM updates before attaching event listeners
+    await nextTick()
+    await this.#addListenersToEditableElements()
+  }
+
+  handleRemoveClasses(userSelectedClass: string): void {
+    // remove selected class from element
+    if (this.getElement.value?.classList.contains(userSelectedClass)) {
+      this.getElement.value?.classList.remove(userSelectedClass)
+
+      this.pageBuilderStateStore.setElement(this.getElement.value)
+      this.pageBuilderStateStore.removeClass(userSelectedClass)
+    }
   }
 
   // move component
@@ -932,7 +1007,7 @@ export class PageBuilderService {
     }
 
     if (typeof this.getElement.value.innerHTML === 'string') {
-      await this.nextTick
+      await nextTick()
 
       // Update text content
       this.getElement.value.textContent = textContentVueModel
@@ -1204,11 +1279,31 @@ export class PageBuilderService {
   }
 
   /**
-   * 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).
+   * Syncs the current DOM state into the in-memory store (getComponents),
+   * but does NOT save to localStorage.
+   */
+  #syncDomToStoreOnly() {
+    const pagebuilder = document.querySelector('#pagebuilder')
+    if (!pagebuilder) return
+
+    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: sanitizedSection.outerHTML,
+        id: sanitizedSection.getAttribute('data-componentid'),
+        title: sanitizedSection.getAttribute('data-component-title') || 'Untitled Component',
+      })
+    })
+
+    this.pageBuilderStateStore.setComponents(componentsToSave)
+  }
+
+  /**
+   * Saves the current DOM state (components) to localStorage.
    */
-  #domToComponentsSync = async () => {
+  #saveDomComponentsToLocalStorage() {
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
@@ -1240,23 +1335,14 @@ export class PageBuilderService {
     if (keyForSavingFromDomToLocal && typeof keyForSavingFromDomToLocal === 'string') {
       localStorage.setItem(keyForSavingFromDomToLocal, JSON.stringify(dataToSave))
     }
-
-    // No DOM mutation here!
-    await new Promise<void>((resolve) => resolve())
-  }
-
-  // save to local storage
-  async saveComponentsLocalStorage() {
-    await this.nextTick
-
-    await this.#domToComponentsSync()
   }
 
-  async removeItemComponentsLocalStorage() {
-    await this.nextTick
+  async removeCurrentComponentsFromLocalStorage() {
+    await nextTick()
 
-    if (this.getLocalStorageItemName.value) {
-      localStorage.removeItem(this.getLocalStorageItemName.value)
+    const key = this.getLocalStorageItemName.value
+    if (key) {
+      localStorage.removeItem(key)
     }
   }
 
@@ -1441,7 +1527,7 @@ export class PageBuilderService {
 
     // Only apply if an image is staged
     if (this.getApplyImageToSelection.value && this.getApplyImageToSelection.value.src) {
-      await this.nextTick
+      await nextTick()
       this.pageBuilderStateStore.setBasePrimaryImage(`${this.getApplyImageToSelection.value.src}`)
 
       await this.handleAutoSave()
@@ -1772,7 +1858,7 @@ export class PageBuilderService {
       await this.#addListenersToEditableElements()
     } catch (error) {
       console.error('Error parsing JSON components:', error)
-      this.pageBuilderStateStore.setComponents([])
+      this.deleteAllComponentsFromDOM()
     }
   }
   // Private method to parse HTML components
@@ -1827,111 +1913,146 @@ export class PageBuilderService {
       await this.#addListenersToEditableElements()
     } catch (error) {
       console.error('Error parsing HTML components:', error)
-      this.pageBuilderStateStore.setComponents([])
+      this.deleteAllComponentsFromDOM()
     }
   }
 
-  /**
-   * Mount Components to DOM
-   * @param passedData - HTML/JSON string to inject (optional)
-   * @param preferLocalStorage - if true, always try localStorage first
-   */
   async mountComponentsToDOM(passedData: string): Promise<void> {
-    const pagebuilder = document.querySelector('#pagebuilder')
+    const config = this.pageBuilderStateStore.getPageBuilderConfig
+    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
 
-    // If #pagebuilder is not present, cache the data and exit
-    if (!pagebuilder) {
-      // 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
+    if (formType) {
+      const pagebuilder = document.querySelector('#pagebuilder')
+      const localStorageData = this.loadStoredComponentsFromStorage()
+
+      if (!pagebuilder) {
+        await this.#handlePageBuilderNotPresent(passedData, formType)
+        return
+      }
+
+      this.#handleOriginalComponentsForUpdate(passedData, formType)
+
+      if (this.#isCreateFormType(formType)) {
+        await this.#handleCreateFormType(passedData, localStorageData)
+        return
+      }
+
+      if (this.#isUpdateFormType(formType)) {
+        await this.#handleUpdateFormType(passedData, localStorageData)
+        return
       }
-      return
     }
+  }
 
-    // Clear the cache if we are mounting now
-    this.pendingMountData = null
+  // --- Private helpers ---
 
-    this.pageBuilderStateStore.setComponents([])
+  async #handlePageBuilderNotPresent(passedData: string, formType: string) {
+    if (formType === 'create') {
+      console.log('mountComponentsToDOM ran: m0')
+      this.pendingMountData = ''
+      return
+    }
+    console.log('mountComponentsToDOM ran: m1:')
+    this.pendingMountData = passedData
+  }
 
-    // On from type update Save Original Post
-    if (
-      this.pageBuilderStateStore.getPageBuilderConfig &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update' &&
-      passedData &&
-      !this.originalComponents
-    ) {
+  #handleOriginalComponentsForUpdate(passedData: string, formType: string) {
+    if (formType === 'update' && passedData && !this.originalComponents) {
+      console.log('mountComponentsToDOM ran: m3')
       this.originalComponents = passedData
     }
+  }
 
-    // Form type Update
-    if (
-      this.pageBuilderStateStore.getPageBuilderConfig &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
-    ) {
-      if (passedData) {
-        await this.#setComponentsFromData(passedData)
-        return
-      }
+  async #handleUpdateFormType(passedData: string, localStorageData: string | false) {
+    if (passedData) {
+      console.log('mountComponentsToDOM ran: m4')
+      await this.#setComponentsFromData(passedData)
+      return
+    }
+    if (localStorageData) {
+      console.log('mountComponentsToDOM ran: m5')
+      await this.#setComponentsFromData(localStorageData)
+      return
     }
+    // If nothing, clear components
+    console.log('mountComponentsToDOM ran: m6')
+    this.deleteAllComponentsFromDOM()
+  }
 
-    // Form type Create
-    const localStorageData = this.loadStoredComponentsFromStorage()
+  async #handleCreateFormType(passedData: string, localStorageData: string | false) {
+    if (localStorageData) {
+      console.log('mountComponentsToDOM ran: m7')
+      await this.#setComponentsFromData(localStorageData)
+      return
+    }
+    if (passedData) {
+      console.log('mountComponentsToDOM ran: m8')
+      await this.#setComponentsFromData(passedData)
+      return
+    }
+  }
 
-    if (
-      this.pageBuilderStateStore.getPageBuilderConfig &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'create'
-    ) {
-      if (localStorageData) {
-        await this.#setComponentsFromData(localStorageData)
-        return
-      }
+  #isCreateFormType(formType: string): boolean {
+    return formType === 'create'
+  }
 
-      // If no localStorage, but passedData exists (for demo), use it
-      if (passedData) {
-        await this.#setComponentsFromData(passedData)
+  #isUpdateFormType(formType: string): boolean {
+    return formType === 'update'
+  }
+
+  async ensureBuilderInitializedForCreate() {
+    const pagebuilder = document.querySelector('#pagebuilder')
+    if (!pagebuilder) return
+
+    const config = this.pageBuilderStateStore.getPageBuilderConfig
+    console.log('den er:', config)
+    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
+
+    if (formType === 'create') {
+      this.#completeBuilderInitialization()
+      await nextTick()
+
+      if (
+        formType === 'create' &&
+        (!this.getComponents.value ||
+          (Array.isArray(this.getComponents.value) && this.getComponents.value.length === 0))
+      ) {
+        console.log('ensureBuilderInitializedForCreate e1')
+        await this.mountComponentsToDOM('')
+        this.pendingMountData = null
         return
       }
+
+      console.log('ensureBuilderInitializedForCreate e2:')
+      await this.mountComponentsToDOM('')
+      await nextTick()
+      // Attach event listeners to all editable elements in the Builder
+      await this.#addListenersToEditableElements()
     }
   }
 
-  async tryMountPendingData() {
+  async ensureBuilderInitializedForUpdate() {
     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()
-      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))
-    ) {
+    if (formType === 'update') {
+      this.#completeBuilderInitialization()
+
+      // Only for update/draft/demo: mount if pendingMountData is a non-empty string
+      if (this.pendingMountData && typeof this.pendingMountData === 'string') {
+        console.log('ensureBuilderInitializedForUpdate t1:')
+        await this.mountComponentsToDOM(this.pendingMountData)
+        this.pendingMountData = null
+        return
+      }
+
+      console.log('ensureBuilderInitializedForUpdate t2:')
+      await nextTick()
+      // Always try to load latest from localStorage or fallback
       await this.mountComponentsToDOM('')
-      this.pendingMountData = null
-      this.completeBuilderInitialization()
-      return
     }
   }