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

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>
@@ -37,17 +39,14 @@ export class PageBuilderService {
   private delay: (ms?: number) => Promise<void>
   private hasStartedEditing: boolean = false
   // Hold data from Database or Backend for updated post
-  private originalComponents: string | null = null
+  private originalComponents: BuilderResourceData | undefined = undefined
   // Holds data to be mounted when #pagebuilder is not yet present in the DOM
-  private pendingMountData: string | null = null
+  private pendingMountData: BuilderResourceData | 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,82 @@ export class PageBuilderService {
     }
   }
 
+  #validateUserProvidedComponents(components: unknown) {
+    const formType =
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType
+
+    if (Array.isArray(components) && components.length === 0) {
+      return { error: false as const, message: 'No components provided (empty array).' }
+    }
+
+    if (
+      Array.isArray(components) &&
+      components.length >= 1 &&
+      formType === 'create' &&
+      components
+    ) {
+      return {
+        error: true as const,
+        warning:
+          'You cannot set formType to create in your configuration while also passing a components data array to the Page Builder. Please set formType to update.',
+        status: 'validation_failed',
+      }
+    }
+    if (formType === 'create' && components) {
+      return {
+        error: true as const,
+        warning:
+          'You cannot set formType to create in your configuration while also passing a components data array to the Page Builder. Please set formType to update.',
+        status: 'validation_failed',
+      }
+    }
+
+    // Must be an array
+    if (!Array.isArray(components)) {
+      return {
+        error: true as const,
+        reason: 'Components data must be an array.',
+      }
+    }
+
+    // Check that the first item looks like a component
+    const first = components[0]
+
+    // Check that the first item is not an empty object
+    if (isEmptyObject(first)) {
+      console.error(
+        'The first object in the array is empty. Each component must be a non-empty object and include an html_code key.',
+      )
+      return {
+        error: true as const,
+        reason:
+          "The first object in the array is empty. Each component must be a non-empty object and include an 'html_code' key.",
+      }
+    }
+
+    if (first && 'html_code' in first && typeof first.html_code !== 'string') {
+      console.error("The 'html_code' property in the first object must be a string.")
+      return {
+        error: true as const,
+        reason: "The 'html_code' property in the first object must be a string.",
+      }
+    }
+
+    // Check that the first item has an 'html_code' key
+    if (!first || !('html_code' in first)) {
+      console.error("The first object in the array must include an 'html_code' key.")
+      return {
+        error: true as const,
+        reason: "The first object in the array must include an 'html_code' key.",
+      }
+    }
+
+    // No errors found
+    return { error: false as const }
+  }
+
   #validateConfig(config: PageBuilderConfig): void {
     const defaultConfigValues = {
       updateOrCreate: {
@@ -194,6 +269,96 @@ export class PageBuilderService {
     }
   }
 
+  #handlePageBuilderNotPresent(passedDataComponents: BuilderResourceData) {
+    this.pendingMountData = passedDataComponents
+  }
+
+  async #mountPassedComponentsToDOM(components?: BuilderResourceData): Promise<void> {
+    const config = this.pageBuilderStateStore.getPageBuilderConfig
+    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
+    const localStorageData = this.loadStoredComponentsFromStorage()
+
+    let dataToPass: string
+    if (typeof components === 'string') {
+      dataToPass = components
+    } else if (components !== undefined) {
+      dataToPass = JSON.stringify(components)
+    } else {
+      dataToPass = ''
+    }
+
+    await this.#updateComponentsFromString(dataToPass)
+  }
+
+  async tryMountPendingComponents() {
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
+    await delay(200)
+    const config = this.pageBuilderStateStore.getPageBuilderConfig
+    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
+    const localStorageData = this.loadStoredComponentsFromStorage()
+    //
+    if (!config) return
+    //
+    if (
+      config &&
+      formType === 'update' &&
+      localStorageData &&
+      typeof localStorageData === 'string' &&
+      this.pendingMountData
+    ) {
+      this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
+    }
+    //
+    //
+    //
+    //
+    if (config && formType === 'update') {
+      if (this.pendingMountData) {
+        this.#completeBuilderInitialization(this.pendingMountData)
+        return
+      }
+
+      // Pending data for mount is null at this stage
+      if (typeof localStorageData === 'string') {
+        await this.#updateComponentsFromString(localStorageData)
+        this.#completeBuilderInitialization()
+        return
+      }
+
+      //
+      //
+      //
+      //
+      // 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()
+
+      this.pageBuilderStateStore.setIsRestoring(false)
+      this.pageBuilderStateStore.setIsLoadingGlobal(false)
+    }
+
+    if (config && formType === 'create') {
+      // Pending data for mount is null at this stage
+      if (typeof localStorageData === 'string') {
+        await this.#updateComponentsFromString(localStorageData)
+        this.#completeBuilderInitialization()
+        return
+      }
+
+      //
+      //
+      //
+      //
+      // 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()
+
+      this.pageBuilderStateStore.setIsRestoring(false)
+      this.pageBuilderStateStore.setIsLoadingGlobal(false)
+    }
+  }
   /**
    * - Entry point for initializing the Page Builder.
    * - Sets the builder as started in the state store.
@@ -204,53 +369,103 @@ export class PageBuilderService {
    *
    * @param config - The configuration object for the Page Builder.
    */
-  async startBuilder(config: PageBuilderConfig): Promise<void> {
+  async startBuilder(
+    config: PageBuilderConfig,
+    passedComponentsArray?: BuilderResourceData,
+  ): Promise<StartBuilderResult> {
     // 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)
+    const pagebuilder = document.querySelector('#pagebuilder')
+    let validation
 
-    // Show a global loading indicator while initializing
-    this.pageBuilderStateStore.setIsLoadingGlobal(true)
-
-    // Wait briefly to ensure UI updates and async processes settle
-
-    // Store the provided config in the builder's state store
-    this.pageBuilderStateStore.setPageBuilderConfig(config)
+    try {
+      this.originalComponents = passedComponentsArray
+      this.pageBuilderStateStore.setPageBuilderConfig(config)
+      // Validate and normalize the config (ensure required fields are present)
+      this.#validateConfig(config)
 
-    // Validate and normalize the config (ensure required fields are present)
-    this.#validateConfig(config)
+      validation = this.#validateUserProvidedComponents(passedComponentsArray)
 
-    // Update the localStorage key name based on the config/resource
-    this.#updateLocalStorageItemName()
+      // Update the localStorage key name based on the config/resource
+      this.#updateLocalStorageItemName()
 
-    this.completeBuilderInitialization()
+      // Page Builder is not Present in the DOM but Components have been passed to the Builder
+      if (passedComponentsArray && !pagebuilder) {
+        this.#handlePageBuilderNotPresent(passedComponentsArray)
+      }
+      // Page Builder is Present in the DOM & Components have been passed to the Builder
+      if (pagebuilder) {
+        this.#completeBuilderInitialization(passedComponentsArray)
+      }
 
-    const formType = config.updateOrCreate && config.updateOrCreate.formType
-    if (formType === 'create') {
-      await this.mountComponentsToDOM('')
+      // Return both the success message and validation info if present
+      return {
+        message: 'Page builder started successfully.',
+        ...(validation || {}),
+      }
+    } catch (err) {
+      console.error('Not able to start the Page Builder', err)
+      this.pageBuilderStateStore.setIsLoadingGlobal(false)
+      return {
+        error: true as const,
+        reason: 'Failed to start the Page Builder due to an unexpected error.',
+      }
     }
   }
 
-  async completeBuilderInitialization() {
-    const pagebuilder = document.querySelector('#pagebuilder')
-    if (!pagebuilder) return
+  async #completeBuilderInitialization(passedComponentsArray?: BuilderResourceData): Promise<void> {
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
+    const localStorageData = this.loadStoredComponentsFromStorage()
+
+    await this.delay(300)
 
     // 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 (passedComponentsArray) {
+      // Prefer components from local storage if available for this resource
+      if (!this.pendingMountData && localStorageData && typeof localStorageData === 'string') {
+        await this.#updateComponentsFromString(localStorageData)
+      } else {
+        // If no local storage is found, use the components array provided by the user
+        await this.#mountPassedComponentsToDOM(passedComponentsArray)
+        this.pendingMountData = null
+      }
+    }
 
-    if (await this.hasLocalDraftForUpdate()) {
-      this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
+    //
+    //
+    //
+    if (!passedComponentsArray) {
+      // Prefer components from local storage if available for this resource
+      if (localStorageData && typeof localStorageData === 'string') {
+        await this.#updateComponentsFromString(localStorageData)
+      } else {
+        // If no local storage is found, use the components array provided by the user
+        await this.#mountPassedComponentsToDOM([])
+      }
     }
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
 
     // 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()
+    // Show a global loading indicator while initializing
+    this.pageBuilderStateStore.setIsLoadingGlobal(false)
 
     // Clean up any old localStorage items related to previous builder sessions
     this.deleteOldPageBuilderLocalStorage()
@@ -437,8 +652,8 @@ export class PageBuilderService {
           this.pageBuilderStateStore.setIsSaving(true)
           // Deselect any selected or hovered elements in the builder UI
           //
-          await this.saveComponentsLocalStorage()
-          await this.delay(500)
+          this.#saveDomComponentsToLocalStorage()
+          await this.delay(300)
         } catch (err) {
           console.error('Error trying auto save.', err)
         } finally {
@@ -449,7 +664,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 +690,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 +698,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 +709,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 +726,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 +821,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 +981,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 +1023,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 +1180,7 @@ export class PageBuilderService {
     }
 
     if (typeof this.getElement.value.innerHTML === 'string') {
-      await this.nextTick
+      await nextTick()
 
       // Update text content
       this.getElement.value.textContent = textContentVueModel
@@ -1038,21 +1286,25 @@ export class PageBuilderService {
   }
 
   #updateLocalStorageItemName(): void {
-    const updateOrCreate =
+    const formtype =
       this.pageBuilderStateStore.getPageBuilderConfig &&
       this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
       this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType
 
-    const resourceData = this.pageBuilderStateStore.getPageBuilderConfig?.resourceData
+    const formname =
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formName
 
-    const resourceFormName =
-      this.pageBuilderStateStore.getPageBuilderConfig?.updateOrCreate?.formName
+    const resourceData =
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.resourceData
 
     // Logic for create resource
-    if (updateOrCreate === 'create') {
-      if (resourceFormName && resourceFormName.length > 0) {
+    if (formtype === 'create') {
+      if (formname && formname.length > 0) {
         this.pageBuilderStateStore.setLocalStorageItemName(
-          `page-builder-create-resource-${this.sanitizeForLocalStorage(resourceFormName)}`,
+          `page-builder-create-resource-${this.sanitizeForLocalStorage(formname)}`,
         )
         return
       }
@@ -1063,15 +1315,15 @@ export class PageBuilderService {
 
     // Logic for create
     // Logic for update and with resource form name
-    if (updateOrCreate === 'update') {
-      if (typeof resourceFormName === 'string' && resourceFormName.length > 0) {
+    if (formtype === 'update') {
+      if (typeof formname === 'string' && formname.length > 0) {
         //
         //
         if (resourceData && resourceData != null && !resourceData.title) {
           // Check if id is missing, null, undefined, or an empty string (after trimming)
           if (!resourceData.id || typeof resourceData.id === 'string') {
             this.pageBuilderStateStore.setLocalStorageItemName(
-              `page-builder-update-resource-${this.sanitizeForLocalStorage(resourceFormName)}`,
+              `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}`,
             )
             return
           }
@@ -1086,7 +1338,7 @@ export class PageBuilderService {
           ) {
             if (!resourceData.id || typeof resourceData.id === 'string') {
               this.pageBuilderStateStore.setLocalStorageItemName(
-                `page-builder-update-resource-${this.sanitizeForLocalStorage(resourceFormName)}-${this.sanitizeForLocalStorage(resourceData.title)}`,
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}-${this.sanitizeForLocalStorage(resourceData.title)}`,
               )
               return
             }
@@ -1098,7 +1350,7 @@ export class PageBuilderService {
           if (!resourceData.title && typeof resourceData.title !== 'string') {
             if (resourceData.id || typeof resourceData.id === 'number') {
               this.pageBuilderStateStore.setLocalStorageItemName(
-                `page-builder-update-resource-${this.sanitizeForLocalStorage(resourceFormName)}-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
               )
               return
             }
@@ -1114,7 +1366,7 @@ export class PageBuilderService {
           ) {
             if (resourceData.id || typeof resourceData.id === 'number') {
               this.pageBuilderStateStore.setLocalStorageItemName(
-                `page-builder-update-resource-${this.sanitizeForLocalStorage(resourceFormName)}-${this.sanitizeForLocalStorage(resourceData.title)}-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}-${this.sanitizeForLocalStorage(resourceData.title)}-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
               )
               return
             }
@@ -1122,11 +1374,8 @@ export class PageBuilderService {
         }
       }
 
-      // Logic for update without without resourceFormName
-      if (
-        !resourceFormName ||
-        (typeof resourceFormName === 'string' && resourceFormName.length === 0)
-      ) {
+      // Logic for update without without formname
+      if (!formname || (typeof formname === 'string' && formname.length === 0)) {
         //
         //
         if (resourceData && resourceData != null && !resourceData.title) {
@@ -1204,11 +1453,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,34 +1509,23 @@ 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)
     }
   }
 
   //
   deleteOldPageBuilderLocalStorage(): void {
-    if (
-      this.pageBuilderStateStore.getPageBuilderConfig &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
-    ) {
+    const config = this.pageBuilderStateStore.getPageBuilderConfig
+    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
+
+    if (formType === 'update') {
       let oldCountLocalStorages = 0
       const deletedItemsLog: { Number: number; Key: string; SavedAt: string }[] = []
 
@@ -1315,38 +1573,6 @@ export class PageBuilderService {
     }
   }
 
-  async hasLocalDraftForUpdate(): Promise<boolean> {
-    const pagebuilder = document.querySelector('#pagebuilder')
-    if (!pagebuilder) {
-      return true
-    }
-
-    if (this.hasStartedEditing) return false
-
-    if (
-      this.pageBuilderStateStore.getPageBuilderConfig &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
-    ) {
-      const key = this.getLocalStorageItemName.value
-      if (typeof key === 'string') {
-        const draft = localStorage.getItem(key)
-        if (draft) {
-          try {
-            await this.delay(500)
-            this.pageBuilderStateStore.setHasLocalDraftForUpdate(false)
-            return true
-          } catch (err) {
-            console.error('Unable to mount components to DOM.', err)
-            return false
-          }
-        }
-      }
-    }
-    return false
-  }
-
   // Call this when the user starts editing (e.g., on first change or when resuming a draft)
   startEditing() {
     this.hasStartedEditing = true
@@ -1354,40 +1580,48 @@ export class PageBuilderService {
 
   //
   async resumeEditingForUpdate() {
-    if (
-      this.pageBuilderStateStore.getPageBuilderConfig &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
-    ) {
-      const key = this.getLocalStorageItemName.value
+    const config = this.pageBuilderStateStore.getPageBuilderConfig
+    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
 
-      if (typeof key === 'string') {
-        const updateDraftFromLocalStorage = localStorage.getItem(key)
+    if (formType !== 'update') return
+    //
+    //
+    //
 
-        if (typeof updateDraftFromLocalStorage === 'string') {
-          this.pageBuilderStateStore.setIsLoadingResumeEditing(true)
-          await delay(500)
-          this.mountComponentsToDOM(updateDraftFromLocalStorage)
-          this.pageBuilderStateStore.setIsLoadingResumeEditing(false)
-        }
+    const key = this.getLocalStorageItemName.value
+
+    if (typeof key === 'string') {
+      const updateDraftFromLocalStorage = localStorage.getItem(key)
+
+      if (typeof updateDraftFromLocalStorage === 'string') {
+        this.pageBuilderStateStore.setIsLoadingResumeEditing(true)
+        localStorage.removeItem(key)
+        await delay(300)
+        await this.#updateComponentsFromString(updateDraftFromLocalStorage)
+        this.pageBuilderStateStore.setIsLoadingResumeEditing(false)
       }
     }
+
+    // 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()
+    // set loading to false
+    this.pageBuilderStateStore.setIsLoadingResumeEditing(false)
   }
 
   async restoreOriginalContent() {
-    if (
-      this.pageBuilderStateStore.getPageBuilderConfig &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
-    ) {
+    const config = this.pageBuilderStateStore.getPageBuilderConfig
+    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
+
+    if (formType === 'update') {
       this.pageBuilderStateStore.setIsRestoring(true)
       await this.delay(300)
 
       // Restore the original content if available
-      if (this.originalComponents) {
-        this.mountComponentsToDOM(this.originalComponents)
+      if (Array.isArray(this.originalComponents)) {
+        await this.#mountPassedComponentsToDOM(this.originalComponents)
+        this.removeCurrentComponentsFromLocalStorage()
       }
 
       // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
@@ -1441,7 +1675,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()
@@ -1698,19 +1932,22 @@ export class PageBuilderService {
    * @param data - JSON string (e.g., '[{"html_code":"...","id":"123","title":"..."}]')
    *               OR HTML string (e.g., '<section data-componentid="123">...</section>')
    */
-  async #setComponentsFromData(htmlString: string): Promise<void> {
+  async #updateComponentsFromString(htmlString: string): Promise<void> {
     // Auto-detect if input is JSON or HTML
     const trimmedData = htmlString.trim()
 
     if (trimmedData.startsWith('[') || trimmedData.startsWith('{')) {
       // Looks like JSON - parse as JSON
       await this.#parseJSONComponents(trimmedData)
-    } else if (trimmedData.startsWith('<')) {
+      return
+    }
+    if (trimmedData.startsWith('<')) {
       // Looks like HTML - parse as HTML
       await this.#parseHTMLComponents(trimmedData)
-    } else {
-      await this.#parseJSONComponents(trimmedData)
+      return
     }
+
+    await this.#parseJSONComponents(trimmedData)
   }
 
   // Private method to parse JSON components and save pageBuilderContentSavedAt to localStorage
@@ -1772,7 +2009,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 +2064,7 @@ export class PageBuilderService {
       await this.#addListenersToEditableElements()
     } catch (error) {
       console.error('Error parsing HTML components:', error)
-      this.pageBuilderStateStore.setComponents([])
-    }
-  }
-
-  /**
-   * 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')
-
-    // 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
-      }
-      return
-    }
-
-    // Clear the cache if we are mounting now
-    this.pendingMountData = null
-
-    this.pageBuilderStateStore.setComponents([])
-
-    // 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
-    ) {
-      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
-      }
-    }
-
-    // Form type Create
-    const localStorageData = this.loadStoredComponentsFromStorage()
-
-    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
-      }
-
-      // If no localStorage, but passedData exists (for demo), use it
-      if (passedData) {
-        await this.#setComponentsFromData(passedData)
-        return
-      }
-    }
-  }
-
-  async tryMountPendingData() {
-    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))
-    ) {
-      await this.mountComponentsToDOM('')
-      this.pendingMountData = null
-      this.completeBuilderInitialization()
-      return
+      this.deleteAllComponentsFromDOM()
     }
   }