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

package/src/composables/PageBuilderService.ts

@@ -39,9 +39,9 @@ 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.hasStartedEditing = false
@@ -175,36 +175,80 @@ export class PageBuilderService {
     }
   }
 
-  #validateUserProvidedComponents(components: BuilderResourceData) {
-    // Must be an array
-    if (!Array.isArray(components)) {
+  #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,
-        reason: "'components' must be an array.",
+        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',
       }
     }
 
-    // If empty array, that's acceptable
-    if (components.length === 0) {
-      return { error: false }
+    // 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]
 
-    const isObject = typeof first === 'object' && first !== null
-    const hasHtmlCodeKey = 'html_code' in first
+    // 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 (!isObject || !hasHtmlCodeKey) {
+    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,
-        reason: "Each component must be an object and include an 'html_code' key.",
+        error: true as const,
+        reason: "The 'html_code' property in the first object must be a string.",
       }
     }
 
-    return {
-      message: 'Everything looks good. Components structure is valid.',
+    // 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 {
@@ -225,6 +269,101 @@ 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() {
+    // Always clear DOM and store before mounting new resource
+    this.deleteAllComponentsFromDOM()
+
+    const localStorageData = this.loadStoredComponentsFromStorage()
+
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
+    await delay(200)
+    const config = this.pageBuilderStateStore.getPageBuilderConfig
+    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
+
+    //
+    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.
@@ -237,62 +376,101 @@ export class PageBuilderService {
    */
   async startBuilder(
     config: PageBuilderConfig,
-    components?: BuilderResourceData,
+    passedComponentsArray?: 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)
+    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
+    try {
+      this.originalComponents = passedComponentsArray
+      this.pageBuilderStateStore.setPageBuilderConfig(config)
+      // Validate and normalize the config (ensure required fields are present)
+      this.#validateConfig(config)
 
-    // Store the provided config in the builder's state store
-    this.pageBuilderStateStore.setPageBuilderConfig(config)
+      validation = this.#validateUserProvidedComponents(passedComponentsArray)
 
-    // Validate and normalize the config (ensure required fields are present)
-    this.#validateConfig(config)
+      // Update the localStorage key name based on the config/resource
+      this.#updateLocalStorageItemName()
 
-    // Update the localStorage key name based on the config/resource
-    this.#updateLocalStorageItemName()
+      // 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() {
-    console.log('complete builder..')
-    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()
@@ -376,6 +554,8 @@ export class PageBuilderService {
     e.preventDefault()
     e.stopPropagation()
 
+    await this.handleAutoSave()
+
     const pagebuilder = document.querySelector('#pagebuilder')
 
     if (!pagebuilder) return
@@ -480,7 +660,7 @@ export class PageBuilderService {
           // Deselect any selected or hovered elements in the builder UI
           //
           this.#saveDomComponentsToLocalStorage()
-          await this.delay(500)
+          await this.delay(300)
         } catch (err) {
           console.error('Error trying auto save.', err)
         } finally {
@@ -1113,21 +1293,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
       }
@@ -1138,15 +1322,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
           }
@@ -1161,7 +1345,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
             }
@@ -1173,7 +1357,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
             }
@@ -1189,7 +1373,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
             }
@@ -1197,11 +1381,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) {
@@ -1304,6 +1485,7 @@ export class PageBuilderService {
    * Saves the current DOM state (components) to localStorage.
    */
   #saveDomComponentsToLocalStorage() {
+    this.#updateLocalStorageItemName()
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
@@ -1338,6 +1520,7 @@ export class PageBuilderService {
   }
 
   async removeCurrentComponentsFromLocalStorage() {
+    this.#updateLocalStorageItemName()
     await nextTick()
 
     const key = this.getLocalStorageItemName.value
@@ -1348,12 +1531,10 @@ export class PageBuilderService {
 
   //
   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 }[] = []
 
@@ -1401,38 +1582,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
@@ -1440,40 +1589,49 @@ 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
+    this.#updateLocalStorageItemName()
+    const config = this.pageBuilderStateStore.getPageBuilderConfig
+    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
+
+    if (formType !== 'update') return
+    //
+    //
+    //
 
-      if (typeof key === 'string') {
-        const updateDraftFromLocalStorage = localStorage.getItem(key)
+    const key = this.getLocalStorageItemName.value
 
-        if (typeof updateDraftFromLocalStorage === 'string') {
-          this.pageBuilderStateStore.setIsLoadingResumeEditing(true)
-          await delay(500)
-          this.mountComponentsToDOM(updateDraftFromLocalStorage)
-          this.pageBuilderStateStore.setIsLoadingResumeEditing(false)
-        }
+    if (typeof key === 'string') {
+      const updateDraftFromLocalStorage = localStorage.getItem(key)
+
+      if (typeof updateDraftFromLocalStorage === 'string') {
+        this.pageBuilderStateStore.setIsLoadingResumeEditing(true)
+        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'
-    ) {
+    this.#updateLocalStorageItemName()
+    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.
@@ -1490,6 +1648,7 @@ export class PageBuilderService {
   }
 
   loadStoredComponentsFromStorage() {
+    this.#updateLocalStorageItemName()
     if (!this.getLocalStorageItemName.value) return false
 
     if (
@@ -1784,19 +1943,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
@@ -1917,145 +2079,6 @@ export class PageBuilderService {
     }
   }
 
-  async mountComponentsToDOM(passedData: string): Promise<void> {
-    const config = this.pageBuilderStateStore.getPageBuilderConfig
-    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
-
-    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
-      }
-    }
-  }
-
-  // --- Private helpers ---
-
-  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
-  }
-
-  #handleOriginalComponentsForUpdate(passedData: string, formType: string) {
-    if (formType === 'update' && passedData && !this.originalComponents) {
-      console.log('mountComponentsToDOM ran: m3')
-      this.originalComponents = passedData
-    }
-  }
-
-  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()
-  }
-
-  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
-    }
-  }
-
-  #isCreateFormType(formType: string): boolean {
-    return formType === 'create'
-  }
-
-  #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 ensureBuilderInitializedForUpdate() {
-    const pagebuilder = document.querySelector('#pagebuilder')
-    if (!pagebuilder) return
-
-    const config = this.pageBuilderStateStore.getPageBuilderConfig
-    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
-
-    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('')
-    }
-  }
-
   async toggleTipTapModal(status: boolean): Promise<void> {
     this.pageBuilderStateStore.setShowModalTipTap(status)