@myissue/vue-website-page-builder 3.3.64 → 3.3.67

package/src/services/PageBuilderService.ts

@@ -1,14 +1,13 @@
-import { LocalStorageManager } from './LocalStorageManager'
-
-// Type definitions
 import type {
   BuilderResourceData,
   ComponentObject,
   ImageObject,
   PageBuilderConfig,
+  PageSettings,
   StartBuilderResult,
 } from '../types'
 import type { usePageBuilderStateStore } from '../stores/page-builder-state'
+// import { i18n } from '../i18n' // i18n is now async and must be passed in, not imported
 
 import tailwindFontSizes from '../utils/builder/tailwind-font-sizes'
 import tailwindColors from '../utils/builder/tailwaind-colors'
@@ -24,7 +23,36 @@ import { delay } from '../composables/delay'
 import { isEmptyObject } from '../helpers/isEmptyObject'
 import { extractCleanHTMLFromPageBuilder } from '../composables/extractCleanHTMLFromPageBuilder'
 
+// Define available languages as a type and an array for easy iteration and type safety
+export type AvailableLanguage =
+  | 'en'
+  | 'zh-Hans'
+  | 'fr'
+  | 'ja'
+  | 'ru'
+  | 'es'
+  | 'pt'
+  | 'de'
+  | 'ar'
+  | 'hi'
+
+export const AVAILABLE_LANGUAGES: AvailableLanguage[] = [
+  'en',
+  'zh-Hans',
+  'fr',
+  'ja',
+  'ru',
+  'es',
+  'pt',
+  'de',
+  'ar',
+  'hi',
+]
+
+import type { I18n } from 'vue-i18n'
+
 export class PageBuilderService {
+  private i18n: I18n
   // Class properties with types
   private fontSizeRegex =
     /^(sm:|md:|lg:|xl:|2xl:)?pbx-text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/
@@ -44,26 +72,21 @@ export class PageBuilderService {
   private hasStartedEditing: boolean = false
   // Hold data from Database or Backend for updated post
   private originalComponents: BuilderResourceData | undefined = undefined
-  // Holds data to be mounted when #pagebuilder is not yet present in the DOM
-  private pendingMountData: BuilderResourceData | null = null
+  // Holds data to be mounted when pagebuilder is not yet present in the DOM
+  private savedMountComponents: BuilderResourceData | null = null
+  private pendingMountComponents: BuilderResourceData | null = null
   private isPageBuilderMissingOnStart: boolean = false
-  private localStorageManager: LocalStorageManager
 
-  constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>) {
-    this.localStorageManager = new LocalStorageManager(
-      pageBuilderStateStore,
-      this.sanitizeForLocalStorage,
-    )
+  constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>, i18n: I18n) {
+    this.i18n = i18n
     this.hasStartedEditing = false
     this.pageBuilderStateStore = pageBuilderStateStore
-
-    this.getLocalStorageItemName = computed(
-      () => this.pageBuilderStateStore.getLocalStorageItemName,
-    )
-
     this.getApplyImageToSelection = computed(
       () => this.pageBuilderStateStore.getApplyImageToSelection,
     )
+    this.getLocalStorageItemName = computed(
+      () => this.pageBuilderStateStore.getLocalStorageItemName,
+    )
     this.getHyberlinkEnable = computed(() => this.pageBuilderStateStore.getHyberlinkEnable)
     this.getComponents = computed(() => this.pageBuilderStateStore.getComponents)
 
@@ -97,17 +120,28 @@ export class PageBuilderService {
       'SPAN',
       'BLOCKQUOTE',
       'BR',
+      'PRE',
+      'CODE',
+      'MARK',
+      'DEL',
+      'INS',
+      'U',
+      'FIGURE',
+      'FIGCAPTION',
     ]
   }
 
+  public availableLanguage(): AvailableLanguage[] {
+    return AVAILABLE_LANGUAGES
+  }
   // Deselect any selected or hovered elements in the builder UI
   async clearHtmlSelection(): Promise<void> {
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
-    await this.#removeHoveredAndSelected()
+    await this.removeHoveredAndSelected()
   }
 
-  #ensureUpdateOrCreateConfig(config: PageBuilderConfig): void {
+  private ensureUpdateOrCreateConfig(config: PageBuilderConfig): void {
     // Case A: updateOrCreate is missing or an empty object
     if (!config.updateOrCreate || (config.updateOrCreate && isEmptyObject(config.updateOrCreate))) {
       const updatedConfig = {
@@ -183,7 +217,7 @@ export class PageBuilderService {
     }
   }
 
-  #validateUserProvidedComponents(components: unknown) {
+  private validateUserProvidedComponents(components: unknown) {
     const formType =
       this.pageBuilderStateStore.getPageBuilderConfig &&
       this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
@@ -235,7 +269,56 @@ export class PageBuilderService {
     return
   }
 
-  #validateConfig(config: PageBuilderConfig): void {
+  private ensureLanguage(config: PageBuilderConfig): void {
+    // Set default language config if missing, empty, or language missing/empty
+    const defaultLang = 'en'
+    const defaultEnable = ['en', 'zh-Hans', 'fr', 'ja', 'ru', 'es', 'pt', 'de', 'ar', 'hi'] as const
+
+    let needsDefault = false
+    const userSettings = config.userSettings
+    const language = userSettings && userSettings.language
+
+    if (!userSettings || isEmptyObject(userSettings)) {
+      needsDefault = true
+    } else if (!language || isEmptyObject(language)) {
+      needsDefault = true
+    }
+
+    if (needsDefault) {
+      const updatedLanguage = {
+        ...config,
+        userSettings: {
+          ...userSettings,
+          language: {
+            default: defaultLang,
+            enable: defaultEnable as typeof defaultEnable,
+          },
+        },
+      } as const
+      this.pageBuilderStateStore.setPageBuilderConfig(updatedLanguage)
+      return
+    }
+
+    // Ensure default is in enable array
+    if (language && Array.isArray(language.enable) && language.default) {
+      if (!language.enable.includes(language.default)) {
+        const updatedEnable = [...language.enable, language.default]
+        const updatedLanguage = {
+          ...config,
+          userSettings: {
+            ...userSettings,
+            language: {
+              ...language,
+              enable: updatedEnable,
+            },
+          },
+        } as const
+        this.pageBuilderStateStore.setPageBuilderConfig(updatedLanguage)
+      }
+    }
+  }
+
+  private validateConfig(config: PageBuilderConfig): void {
     const defaultConfigValues = {
       updateOrCreate: {
         formType: 'create',
@@ -249,7 +332,53 @@ export class PageBuilderService {
     }
 
     if (config && Object.keys(config).length !== 0 && config.constructor === Object) {
-      this.#ensureUpdateOrCreateConfig(config)
+      this.ensureUpdateOrCreateConfig(config)
+    }
+
+    this.ensureLanguage(config)
+  }
+
+  public saveBuilderConfigToLocalStorage(specificConfig: PageBuilderConfig) {
+    // Only save userSettings to localStorage
+    if (specificConfig && specificConfig.userSettings) {
+      localStorage.setItem(
+        'pageBuilderConfig',
+        JSON.stringify({ userSettings: specificConfig.userSettings }),
+      )
+    }
+  }
+
+  private checkBuilderConfigToLocalStorage(currentConfig: PageBuilderConfig) {
+    const savedConfigRaw = localStorage.getItem('pageBuilderConfig')
+
+    if (savedConfigRaw) {
+      try {
+        const savedConfig = JSON.parse(savedConfigRaw)
+        // Deep merge: prefer all keys from savedConfig, fallback to currentConfig
+        const mergedConfig = {
+          ...currentConfig,
+          ...savedConfig,
+          userSettings: {
+            ...currentConfig.userSettings,
+            ...savedConfig.userSettings,
+          },
+        }
+
+        this.pageBuilderStateStore.setPageBuilderConfig(mergedConfig)
+
+        const saveLang =
+          this.pageBuilderStateStore.getPageBuilderConfig &&
+          this.pageBuilderStateStore.getPageBuilderConfig.userSettings &&
+          this.pageBuilderStateStore.getPageBuilderConfig.userSettings.language &&
+          this.pageBuilderStateStore.getPageBuilderConfig.userSettings.language.default
+
+        if (saveLang) {
+          this.i18n.global.locale = saveLang
+        }
+        return
+      } catch (e) {
+        console.warn('Failed to parse saved pageBuilderConfig from localStorage:', e)
+      }
     }
   }
 
@@ -271,25 +400,42 @@ export class PageBuilderService {
     // Prevents builder actions to prevent errors caused by missing DOM .
     this.pageBuilderStateStore.setBuilderStarted(true)
     const pagebuilder = document.querySelector('#pagebuilder')
-    let validation
 
+    let validation
     try {
       this.originalComponents = passedComponentsArray
       this.pageBuilderStateStore.setPageBuilderConfig(config)
       // Validate and normalize the config (ensure required fields are present)
-      this.#validateConfig(config)
+      this.validateConfig(config)
 
-      validation = this.#validateUserProvidedComponents(passedComponentsArray)
+      if (
+        this.pageBuilderStateStore.getPageBuilderConfig &&
+        this.pageBuilderStateStore.getPageBuilderConfig.userSettings &&
+        this.pageBuilderStateStore.getPageBuilderConfig.userSettings.language &&
+        this.pageBuilderStateStore.getPageBuilderConfig.userSettings.language.default
+      ) {
+        this.i18n.global.locale =
+          this.pageBuilderStateStore.getPageBuilderConfig.userSettings.language.default
+      }
+
+      if (this.pageBuilderStateStore.getPageBuilderConfig) {
+        this.checkBuilderConfigToLocalStorage(this.pageBuilderStateStore.getPageBuilderConfig)
+      }
+
+      validation = this.validateUserProvidedComponents(passedComponentsArray)
 
       // Update the localStorage key name based on the config/resource
-      this.localStorageManager.updateLocalStorageItemName()
+      this.updateLocalStorageItemName()
 
+      if (passedComponentsArray) {
+        this.savedMountComponents = passedComponentsArray
+      }
       // Page Builder is not Present in the DOM but Components have been passed to the Builder
       if (!pagebuilder) {
         this.isPageBuilderMissingOnStart = true
       }
       if (passedComponentsArray && !pagebuilder) {
-        this.pendingMountData = passedComponentsArray
+        this.pendingMountComponents = passedComponentsArray
       }
       // Page Builder is Present in the DOM & Components have been passed to the Builder
       if (pagebuilder) {
@@ -297,9 +443,7 @@ export class PageBuilderService {
       }
 
       // result to end user
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const result: any = {
+      const result: StartBuilderResult = {
         message: 'Page builder started successfully.',
       }
 
@@ -307,7 +451,7 @@ export class PageBuilderService {
         result.validation = validation
       }
 
-      // passedComponentsArray
+      // PassedComponentsArray
       if (Array.isArray(passedComponentsArray) && passedComponentsArray.length >= 0) {
         result.passedComponentsArray = passedComponentsArray
       }
@@ -323,7 +467,10 @@ export class PageBuilderService {
     }
   }
 
-  async completeBuilderInitialization(passedComponentsArray?: BuilderResourceData): Promise<void> {
+  async completeBuilderInitialization(
+    passedComponentsArray?: BuilderResourceData,
+    internalPageBuilderCall?: boolean,
+  ): Promise<void> {
     this.pageBuilderStateStore.setIsLoadingGlobal(true)
     await delay(400)
 
@@ -333,63 +480,78 @@ export class PageBuilderService {
     const config = this.pageBuilderStateStore.getPageBuilderConfig
     const formType = config && config.updateOrCreate && config.updateOrCreate.formType
 
-    const localStorageData = this.loadStoredComponentsFromStorage()
+    const localStorageData = this.getSavedPageHtml()
 
     // Deselect any selected or hovered elements in the builder UI
     await this.clearHtmlSelection()
 
-    //
     if (formType === 'update' || formType === 'create') {
-      if (!this.pendingMountData) {
-        //
-        //
-        if (!passedComponentsArray && !this.isPageBuilderMissingOnStart && localStorageData) {
-          await this.#completeMountProcess(localStorageData)
+      if (!this.pendingMountComponents) {
+        // Page Builder Is initially present in DOM
+        if (!passedComponentsArray && this.isPageBuilderMissingOnStart && localStorageData) {
+          console.log('1111:', internalPageBuilderCall)
+          await this.completeMountProcess(localStorageData)
           return
         }
         if (passedComponentsArray && !localStorageData) {
-          await this.#completeMountProcess(JSON.stringify(passedComponentsArray), true)
+          console.log('2222:', internalPageBuilderCall)
+          await this.completeMountProcess(JSON.stringify(passedComponentsArray), true)
+          this.saveDomComponentsToLocalStorage()
           return
         }
 
         if (passedComponentsArray && localStorageData) {
+          console.log('3333:', internalPageBuilderCall)
           this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
-
-          await this.#completeMountProcess(JSON.stringify(passedComponentsArray), true)
+          await this.completeMountProcess(JSON.stringify(passedComponentsArray), true)
           return
         }
-
-        if (!passedComponentsArray && localStorageData && this.isPageBuilderMissingOnStart) {
-          await this.#completeMountProcess(localStorageData)
+        if (!passedComponentsArray && localStorageData && !this.savedMountComponents) {
+          console.log('4444:', internalPageBuilderCall)
+          await this.completeMountProcess(localStorageData)
+          return
+        }
+        if (!passedComponentsArray && this.savedMountComponents && localStorageData) {
+          console.log('5555:', internalPageBuilderCall)
+          await this.completeMountProcess(JSON.stringify(this.savedMountComponents))
           return
         }
 
         if (!passedComponentsArray && !localStorageData && this.isPageBuilderMissingOnStart) {
-          await this.#completeMountProcess(JSON.stringify([]))
+          console.log('6666:', internalPageBuilderCall)
+          await this.completeMountProcess(JSON.stringify([]))
           return
         }
 
         if (!this.isPageBuilderMissingOnStart && !localStorageData && !passedComponentsArray) {
-          await this.#completeMountProcess(JSON.stringify([]))
+          console.log('7777:', internalPageBuilderCall)
+          await this.completeMountProcess(JSON.stringify([]))
           return
         }
       }
 
-      // FOCUS ON: pendingMountData
-      if (this.pendingMountData) {
+      // FOCUS ON: pendingMountComponents
+      if (this.pendingMountComponents) {
+        // No Page Builder Is  present in DOM initially
         if (localStorageData && this.isPageBuilderMissingOnStart) {
+          console.log('8888:', internalPageBuilderCall)
+          await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
+          await delay(3000)
           this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
-          await this.#completeMountProcess(JSON.stringify(this.pendingMountData), true)
-          this.pendingMountData = null
+          this.pendingMountComponents = null
           return
         }
         if (!localStorageData && passedComponentsArray && this.isPageBuilderMissingOnStart) {
-          await this.#completeMountProcess(JSON.stringify(this.pendingMountData), true)
+          console.log('9999:', internalPageBuilderCall)
+          await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
+          this.saveDomComponentsToLocalStorage()
           return
         }
 
         if (!passedComponentsArray && !localStorageData && this.isPageBuilderMissingOnStart) {
-          await this.#completeMountProcess(JSON.stringify(this.pendingMountData), true)
+          console.log('XXXX:', internalPageBuilderCall)
+          await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
+          this.saveDomComponentsToLocalStorage()
           return
         }
       }
@@ -397,21 +559,22 @@ export class PageBuilderService {
     //
   }
 
-  async #completeMountProcess(html: string, usePassedPageSettings?: boolean) {
-    await this.#mountComponentsToDOM(html, usePassedPageSettings)
-    // 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()
+  private async completeMountProcess(html: string, usePassedPageSettings?: boolean) {
+    await this.mountComponentsToDOM(html, usePassedPageSettings)
 
     // Clean up any old localStorage items related to previous builder sessions
     this.deleteOldPageBuilderLocalStorage()
 
     this.pageBuilderStateStore.setIsRestoring(false)
     this.pageBuilderStateStore.setIsLoadingGlobal(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()
   }
 
-  #applyElementClassChanges(
+  private applyElementClassChanges(
     cssUserSelection: string | undefined,
     CSSArray: string[],
     mutationName: string,
@@ -461,7 +624,7 @@ export class PageBuilderService {
     return currentCSS
   }
 
-  async clearClassesFromPage() {
+  public async clearClassesFromPage() {
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
@@ -470,7 +633,7 @@ export class PageBuilderService {
     this.initializeElementStyles()
     await nextTick()
   }
-  async clearInlineStylesFromPagee() {
+  public async clearInlineStylesFromPagee() {
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
@@ -480,7 +643,7 @@ export class PageBuilderService {
     await nextTick()
   }
 
-  async globalPageStyles() {
+  public async globalPageStyles() {
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
@@ -496,19 +659,19 @@ export class PageBuilderService {
     await nextTick()
   }
 
-  handleFontWeight(userSelectedFontWeight?: string): void {
-    this.#applyElementClassChanges(
+  public handleFontWeight(userSelectedFontWeight?: string): void {
+    this.applyElementClassChanges(
       userSelectedFontWeight,
       tailwindFontStyles.fontWeight,
       'setFontWeight',
     )
   }
 
-  handleFontSizeBase(userSelectedFontSize?: string): void {
-    this.#applyElementClassChanges(userSelectedFontSize, tailwindFontSizes.fontBase, 'setFontBase')
+  public handleFontSizeBase(userSelectedFontSize?: string): void {
+    this.applyElementClassChanges(userSelectedFontSize, tailwindFontSizes.fontBase, 'setFontBase')
   }
 
-  handleFontSizeDesktop(userSelectedFontSize?: string): void {
+  public handleFontSizeDesktop(userSelectedFontSize?: string): void {
     const currentHTMLElement = this.getElement.value
     if (!currentHTMLElement) return
 
@@ -563,12 +726,8 @@ export class PageBuilderService {
     }
   }
 
-  #applyHelperCSSToElements(element: HTMLElement): void {
-    this.#wrapElementInDivIfExcluded(element)
-
-    if (element.tagName === 'IMG') {
-      element.classList.add('smooth-transition')
-    }
+  private applyHelperCSSToElements(element: HTMLElement): void {
+    this.wrapElementInDivIfExcluded(element)
 
     // If this is a DIV and its only/main child is a heading, apply font size classes to the DIV
     if (
@@ -594,20 +753,20 @@ export class PageBuilderService {
     }
   }
 
-  async toggleTipTapModal(status: boolean): Promise<void> {
+  public async toggleTipTapModal(status: boolean): Promise<void> {
     this.pageBuilderStateStore.setShowModalTipTap(status)
 
     // 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()
+    await this.addListenersToEditableElements()
 
     if (!status) {
       await this.handleAutoSave()
     }
   }
 
-  #wrapElementInDivIfExcluded(element: HTMLElement): void {
+  private wrapElementInDivIfExcluded(element: HTMLElement): void {
     if (!element) return
 
     if (
@@ -621,7 +780,7 @@ export class PageBuilderService {
     }
   }
 
-  #handleElementClick = async (e: Event, element: HTMLElement): Promise<void> => {
+  private handleElementClick = async (e: Event, element: HTMLElement): Promise<void> => {
     e.preventDefault()
     e.stopPropagation()
 
@@ -645,7 +804,7 @@ export class PageBuilderService {
     this.pageBuilderStateStore.setElement(element)
   }
 
-  #handleMouseOver = (e: Event, element: HTMLElement): void => {
+  private handleMouseOver = (e: Event, element: HTMLElement): void => {
     e.preventDefault()
     e.stopPropagation()
 
@@ -663,7 +822,7 @@ export class PageBuilderService {
     }
   }
 
-  #handleMouseLeave = (e: Event): void => {
+  private handleMouseLeave = (e: Event): void => {
     e.preventDefault()
     e.stopPropagation()
 
@@ -676,7 +835,7 @@ export class PageBuilderService {
     }
   }
 
-  isEditableElement(el: Element | null): boolean {
+  public isEditableElement(el: Element | null): boolean {
     if (!el) return false
     return !this.NoneListernesTags.includes(el.tagName)
   }
@@ -685,7 +844,7 @@ export class PageBuilderService {
    * The function is used to
    * attach event listeners to each element within a 'section'
    */
-  #addListenersToEditableElements = async () => {
+  private addListenersToEditableElements = async () => {
     const elementsWithListeners = new WeakSet<Element>()
 
     const pagebuilder = document.querySelector('#pagebuilder')
@@ -702,9 +861,9 @@ export class PageBuilderService {
           // Type assertion to HTMLElement since we know these are DOM elements
           const htmlElement = element as HTMLElement
           // Attach event listeners directly to individual elements
-          htmlElement.addEventListener('click', (e) => this.#handleElementClick(e, htmlElement))
-          htmlElement.addEventListener('mouseover', (e) => this.#handleMouseOver(e, htmlElement))
-          htmlElement.addEventListener('mouseleave', (e) => this.#handleMouseLeave(e))
+          htmlElement.addEventListener('click', (e) => this.handleElementClick(e, htmlElement))
+          htmlElement.addEventListener('mouseover', (e) => this.handleMouseOver(e, htmlElement))
+          htmlElement.addEventListener('mouseleave', (e) => this.handleMouseLeave(e))
         }
       }
 
@@ -712,7 +871,7 @@ export class PageBuilderService {
     })
   }
 
-  handleAutoSave = async () => {
+  public handleAutoSave = async () => {
     this.startEditing()
     const passedConfig = this.pageBuilderStateStore.getPageBuilderConfig
 
@@ -730,7 +889,7 @@ export class PageBuilderService {
           this.pageBuilderStateStore.setIsSaving(true)
           // Deselect any selected or hovered elements in the builder UI
           //
-          this.#saveDomComponentsToLocalStorage()
+          this.saveDomComponentsToLocalStorage()
           await delay(400)
         } catch (err) {
           console.error('Error trying auto save.', err)
@@ -742,7 +901,7 @@ export class PageBuilderService {
     if (passedConfig && !passedConfig.userSettings) {
       try {
         this.pageBuilderStateStore.setIsSaving(true)
-        this.#saveDomComponentsToLocalStorage()
+        this.saveDomComponentsToLocalStorage()
         await delay(400)
       } catch (err) {
         console.error('Error trying saving.', err)
@@ -752,43 +911,21 @@ export class PageBuilderService {
     }
   }
 
-  handleManualSave = async () => {
+  public handleManualSave = async () => {
     this.startEditing()
-    const passedConfig = this.pageBuilderStateStore.getPageBuilderConfig
-
-    // Check if config is set
-    if (passedConfig && passedConfig.userSettings) {
-      //
-      //
-      // Enabled auto save
-      if (
-        (typeof passedConfig.userSettings.autoSave === 'boolean' &&
-          !passedConfig.userSettings.autoSave) ||
-        (typeof passedConfig.userSettings.autoSave === 'boolean' &&
-          passedConfig.userSettings.autoSave)
-      ) {
-        this.pageBuilderStateStore.setIsSaving(true)
-        this.#saveDomComponentsToLocalStorage()
-        await delay(400)
 
-        this.pageBuilderStateStore.setIsSaving(false)
-      }
-    }
-    if (passedConfig && !passedConfig.userSettings) {
-      this.pageBuilderStateStore.setIsSaving(true)
-      this.#saveDomComponentsToLocalStorage()
-      await delay(400)
-
-      this.pageBuilderStateStore.setIsSaving(false)
-    }
+    this.pageBuilderStateStore.setIsSaving(true)
+    this.saveDomComponentsToLocalStorage()
+    await delay(400)
+    this.pageBuilderStateStore.setIsSaving(false)
   }
 
-  cloneCompObjForDOMInsertion(componentObject: ComponentObject): ComponentObject {
+  public cloneCompObjForDOMInsertion(componentObject: ComponentObject): ComponentObject {
     // Deep clone clone component
     const clonedComponent = { ...componentObject }
 
-    const pageBuilder = document.querySelector('#contains-pagebuilder')
-    //  scoll to top or bottom # end
+    const pageBuilder = document.querySelector('#pagebuilder')
+    //  scoll to top or bottom
     if (pageBuilder) {
       // push to top
       if (this.getComponentArrayAddMethod.value === 'unshift') {
@@ -809,7 +946,7 @@ export class PageBuilderService {
     const elements = doc.querySelectorAll('*')
 
     elements.forEach((element) => {
-      this.#applyHelperCSSToElements(element as HTMLElement)
+      this.applyHelperCSSToElements(element as HTMLElement)
     })
 
     // Add the component id to the section element
@@ -819,7 +956,7 @@ export class PageBuilderService {
       section.querySelectorAll('[class]').forEach((el) => {
         el.setAttribute(
           'class',
-          this.#addTailwindPrefixToClasses(el.getAttribute('class') || '', 'pbx-'),
+          this.addTailwindPrefixToClasses(el.getAttribute('class') || '', 'pbx-'),
         )
       })
 
@@ -843,7 +980,7 @@ export class PageBuilderService {
     return clonedComponent
   }
 
-  async #removeHoveredAndSelected() {
+  private async removeHoveredAndSelected() {
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
@@ -859,7 +996,7 @@ export class PageBuilderService {
     }
   }
 
-  async #syncCurrentClasses() {
+  private async syncCurrentClasses() {
     // convert classList to array
     const classListArray = Array.from(this.getElement.value?.classList || [])
 
@@ -867,7 +1004,17 @@ export class PageBuilderService {
     this.pageBuilderStateStore.setCurrentClasses(classListArray)
   }
 
-  handleAddClasses(userSelectedClass: string): void {
+  private async syncCurrentStyles() {
+    const style = this.getElement.value?.getAttribute('style')
+    if (style) {
+      const stylesObject = this.parseStyleString(style)
+      this.pageBuilderStateStore.setCurrentStyles(stylesObject)
+    } else {
+      this.pageBuilderStateStore.setCurrentStyles({})
+    }
+  }
+
+  public handleAddClasses(userSelectedClass: string): void {
     if (
       typeof userSelectedClass === 'string' &&
       userSelectedClass.trim() !== '' &&
@@ -886,66 +1033,83 @@ export class PageBuilderService {
       this.pageBuilderStateStore.setClass(prefixedClass)
     }
   }
-  handleFontFamily(userSelectedFontFamily?: string): void {
-    this.#applyElementClassChanges(
+
+  public handleAddStyle(property: string, value: string): void {
+    const element = this.getElement.value
+    if (!element || !property || !value) return
+
+    element.style.setProperty(property, value)
+    this.pageBuilderStateStore.setElement(element)
+  }
+
+  public handleRemoveStyle(property: string): void {
+    const element = this.getElement.value
+    if (!element || !property) return
+
+    element.style.removeProperty(property)
+    this.pageBuilderStateStore.setElement(element)
+  }
+
+  public handleFontFamily(userSelectedFontFamily?: string): void {
+    this.applyElementClassChanges(
       userSelectedFontFamily,
       tailwindFontStyles.fontFamily,
       'setFontFamily',
     )
   }
-  handleFontStyle(userSelectedFontStyle?: string): void {
-    this.#applyElementClassChanges(
+  public handleFontStyle(userSelectedFontStyle?: string): void {
+    this.applyElementClassChanges(
       userSelectedFontStyle,
       tailwindFontStyles.fontStyle,
       'setFontStyle',
     )
   }
-  handleVerticalPadding(userSelectedVerticalPadding?: string): void {
-    this.#applyElementClassChanges(
+  public handleVerticalPadding(userSelectedVerticalPadding?: string): void {
+    this.applyElementClassChanges(
       userSelectedVerticalPadding,
       tailwindPaddingAndMargin.verticalPadding,
       'setFontVerticalPadding',
     )
   }
-  handleHorizontalPadding(userSelectedHorizontalPadding?: string): void {
-    this.#applyElementClassChanges(
+  public handleHorizontalPadding(userSelectedHorizontalPadding?: string): void {
+    this.applyElementClassChanges(
       userSelectedHorizontalPadding,
       tailwindPaddingAndMargin.horizontalPadding,
       'setFontHorizontalPadding',
     )
   }
 
-  handleVerticalMargin(userSelectedVerticalMargin?: string): void {
-    this.#applyElementClassChanges(
+  public handleVerticalMargin(userSelectedVerticalMargin?: string): void {
+    this.applyElementClassChanges(
       userSelectedVerticalMargin,
       tailwindPaddingAndMargin.verticalMargin,
       'setFontVerticalMargin',
     )
   }
-  handleHorizontalMargin(userSelectedHorizontalMargin?: string): void {
-    this.#applyElementClassChanges(
+  public handleHorizontalMargin(userSelectedHorizontalMargin?: string): void {
+    this.applyElementClassChanges(
       userSelectedHorizontalMargin,
       tailwindPaddingAndMargin.horizontalMargin,
       'setFontHorizontalMargin',
     )
   }
 
-  handleBorderStyle(borderStyle?: string): void {
-    this.#applyElementClassChanges(
+  public handleBorderStyle(borderStyle?: string): void {
+    this.applyElementClassChanges(
       borderStyle,
       tailwindBorderStyleWidthPlusColor.borderStyle,
       'setBorderStyle',
     )
   }
-  handleBorderWidth(borderWidth?: string): void {
-    this.#applyElementClassChanges(
+  public handleBorderWidth(borderWidth?: string): void {
+    this.applyElementClassChanges(
       borderWidth,
       tailwindBorderStyleWidthPlusColor.borderWidth,
       'setBorderWidth',
     )
   }
-  handleBorderColor(borderColor?: string): void {
-    this.#applyElementClassChanges(
+  public handleBorderColor(borderColor?: string): void {
+    this.applyElementClassChanges(
       borderColor,
       tailwindBorderStyleWidthPlusColor.borderColor,
       'setBorderColor',
@@ -953,48 +1117,48 @@ export class PageBuilderService {
   }
   // border color, style & width / end
 
-  handleBackgroundColor(color?: string): void {
-    this.#applyElementClassChanges(
+  public handleBackgroundColor(color?: string): void {
+    this.applyElementClassChanges(
       color,
       tailwindColors.backgroundColorVariables,
       'setBackgroundColor',
     )
   }
 
-  handleTextColor(color?: string): void {
-    this.#applyElementClassChanges(color, tailwindColors.textColorVariables, 'setTextColor')
+  public handleTextColor(color?: string): void {
+    this.applyElementClassChanges(color, tailwindColors.textColorVariables, 'setTextColor')
   }
 
   handleBorderRadiusGlobal(borderRadiusGlobal?: string): void {
-    this.#applyElementClassChanges(
+    this.applyElementClassChanges(
       borderRadiusGlobal,
       tailwindBorderRadius.roundedGlobal,
       'setBorderRadiusGlobal',
     )
   }
   handleBorderRadiusTopLeft(borderRadiusTopLeft?: string): void {
-    this.#applyElementClassChanges(
+    this.applyElementClassChanges(
       borderRadiusTopLeft,
       tailwindBorderRadius.roundedTopLeft,
       'setBorderRadiusTopLeft',
     )
   }
   handleBorderRadiusTopRight(borderRadiusTopRight?: string): void {
-    this.#applyElementClassChanges(
+    this.applyElementClassChanges(
       borderRadiusTopRight,
       tailwindBorderRadius.roundedTopRight,
       'setBorderRadiusTopRight',
     )
   }
   handleBorderRadiusBottomleft(borderRadiusBottomleft?: string): void {
-    this.#applyElementClassChanges(
+    this.applyElementClassChanges(
       borderRadiusBottomleft,
       tailwindBorderRadius.roundedBottomLeft,
       'setBorderRadiusBottomleft',
     )
   }
   handleBorderRadiusBottomRight(borderRadiusBottomRight?: string): void {
-    this.#applyElementClassChanges(
+    this.applyElementClassChanges(
       borderRadiusBottomRight,
       tailwindBorderRadius.roundedBottomRight,
       'setBorderRadiusBottomRight',
@@ -1003,14 +1167,14 @@ export class PageBuilderService {
   // border radius / end
 
   handleFontSizeTablet(userSelectedFontSize?: string): void {
-    this.#applyElementClassChanges(
+    this.applyElementClassChanges(
       userSelectedFontSize,
       tailwindFontSizes.fontTablet,
       'setFontTablet',
     )
   }
   handleFontSizeMobile(userSelectedFontSize?: string): void {
-    this.#applyElementClassChanges(
+    this.applyElementClassChanges(
       userSelectedFontSize,
       tailwindFontSizes.fontMobile,
       'setFontMobile',
@@ -1018,14 +1182,14 @@ export class PageBuilderService {
   }
 
   handleBackgroundOpacity(opacity?: string): void {
-    this.#applyElementClassChanges(
+    this.applyElementClassChanges(
       opacity,
       tailwindOpacities.backgroundOpacities,
       'setBackgroundOpacity',
     )
   }
   handleOpacity(opacity?: string): void {
-    this.#applyElementClassChanges(opacity, tailwindOpacities.opacities, 'setOpacity')
+    this.applyElementClassChanges(opacity, tailwindOpacities.opacities, 'setOpacity')
   }
 
   /**
@@ -1038,7 +1202,7 @@ export class PageBuilderService {
    *
    */
 
-  deleteAllComponentsFromDOM() {
+  private deleteAllComponentsFromDOM() {
     // Clear the store
     this.pageBuilderStateStore.setComponents([])
 
@@ -1052,8 +1216,8 @@ export class PageBuilderService {
     }
   }
 
-  async deleteComponentFromDOM() {
-    this.#syncDomToStoreOnly()
+  public async deleteComponentFromDOM() {
+    this.syncDomToStoreOnly()
     await nextTick()
 
     const components = this.getComponents.value
@@ -1089,7 +1253,7 @@ export class PageBuilderService {
 
     // Wait for Vue to finish DOM updates before attaching event listeners.
     await nextTick()
-    await this.#addListenersToEditableElements()
+    await this.addListenersToEditableElements()
 
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
@@ -1098,7 +1262,7 @@ export class PageBuilderService {
     await this.handleAutoSave()
   }
 
-  async deleteElementFromDOM() {
+  public async deleteElementFromDOM() {
     const element = this.getElement.value
     if (!element) return
 
@@ -1129,10 +1293,10 @@ export class PageBuilderService {
     // 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()
+    await this.addListenersToEditableElements()
   }
 
-  async restoreDeletedElementToDOM() {
+  public async restoreDeletedElementToDOM() {
     // Restore the previously deleted element to the DOM
     const restoredHTML = this.getRestoredElement.value
     const parent = this.getParentElement.value
@@ -1158,10 +1322,10 @@ export class PageBuilderService {
 
     // Wait for Vue to finish DOM updates before attaching event listeners
     await nextTick()
-    await this.#addListenersToEditableElements()
+    await this.addListenersToEditableElements()
   }
 
-  handleRemoveClasses(userSelectedClass: string): void {
+  public handleRemoveClasses(userSelectedClass: string): void {
     // remove selected class from element
     if (this.getElement.value?.classList.contains(userSelectedClass)) {
       this.getElement.value?.classList.remove(userSelectedClass)
@@ -1173,7 +1337,7 @@ export class PageBuilderService {
 
   // move component
   // runs when html components are rearranged
-  reorderComponent(direction: number): void {
+  public reorderComponent(direction: number): void {
     if (!this.getComponents.value || !this.getComponent.value) return
 
     if (this.getComponents.value.length <= 1) return
@@ -1203,7 +1367,7 @@ export class PageBuilderService {
     this.getComponents.value.splice(newIndex, 0, componentToMove)
   }
 
-  ensureTextAreaHasContent = () => {
+  public ensureTextAreaHasContent = () => {
     if (!this.getElement.value) return
 
     // text content
@@ -1227,7 +1391,7 @@ export class PageBuilderService {
     }
   }
 
-  handleTextInput = async (textContentVueModel: string): Promise<void> => {
+  public handleTextInput = async (textContentVueModel: string): Promise<void> => {
     if (typeof this.getElement.value?.innerHTML !== 'string') {
       return
     }
@@ -1248,7 +1412,7 @@ export class PageBuilderService {
 
   //
   //
-  ElOrFirstChildIsIframe() {
+  public ElOrFirstChildIsIframe() {
     if (
       this.getElement.value?.tagName === 'IFRAME' ||
       this.getElement.value?.firstElementChild?.tagName === 'IFRAME'
@@ -1261,7 +1425,7 @@ export class PageBuilderService {
   //
   //
   //
-  isSelectedElementValidText() {
+  public isSelectedElementValidText() {
     let reachedElseStatement = false
 
     // Get all child elements of the parentDiv
@@ -1287,7 +1451,7 @@ export class PageBuilderService {
     return reachedElseStatement
   }
 
-  previewCurrentDesign() {
+  public previewCurrentDesign() {
     this.pageBuilderStateStore.setElement(null)
 
     const pagebuilder = document.querySelector('#pagebuilder')
@@ -1324,7 +1488,7 @@ export class PageBuilderService {
    * removed from itself and all descendants. Does NOT mutate the live DOM.
    * @param element The HTMLElement to clone and sanitize
    */
-  #cloneAndRemoveSelectionAttributes(element: HTMLElement): HTMLElement {
+  private cloneAndRemoveSelectionAttributes(element: HTMLElement): HTMLElement {
     // Deep clone the element
     const clone = element.cloneNode(true) as HTMLElement
 
@@ -1342,14 +1506,14 @@ export class PageBuilderService {
    * Syncs the current DOM state into the in-memory store (getComponents),
    * but does NOT save to localStorage.
    */
-  #syncDomToStoreOnly() {
+  private 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)
+      const sanitizedSection = this.cloneAndRemoveSelectionAttributes(section as HTMLElement)
       componentsToSave.push({
         html_code: sanitizedSection.outerHTML,
         id: sanitizedSection.getAttribute('data-componentid'),
@@ -1363,8 +1527,8 @@ export class PageBuilderService {
   /**
    * Saves the current DOM state (components) to localStorage.
    */
-  #saveDomComponentsToLocalStorage() {
-    this.localStorageManager.updateLocalStorageItemName()
+  private saveDomComponentsToLocalStorage() {
+    this.updateLocalStorageItemName()
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
@@ -1373,14 +1537,13 @@ export class PageBuilderService {
       hoveredElement.removeAttribute('hovered')
     }
 
-    const componentsToSave: { html_code: string; id: string | null; title: string }[] = []
+    const componentsToSave: { html_code: string; title: string }[] = []
 
     pagebuilder.querySelectorAll('section[data-componentid]').forEach((section) => {
-      const sanitizedSection = this.#cloneAndRemoveSelectionAttributes(section as HTMLElement)
+      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',
       })
     })
@@ -1402,8 +1565,8 @@ export class PageBuilderService {
       localStorage.setItem(keyForSavingFromDomToLocal, JSON.stringify(dataToSave))
     }
   }
-  async removeCurrentComponentsFromLocalStorage() {
-    this.localStorageManager.updateLocalStorageItemName()
+  private async removeCurrentComponentsFromLocalStorage() {
+    this.updateLocalStorageItemName()
     await nextTick()
 
     const key = this.getLocalStorageItemName.value
@@ -1412,7 +1575,26 @@ export class PageBuilderService {
     }
   }
 
-  //
+  public async handleFormSubmission() {
+    await this.removeCurrentComponentsFromLocalStorage()
+    this.deleteAllComponentsFromDOM()
+  }
+
+  private parseStyleString(style: string): Record<string, string> {
+    return style
+      .split(';')
+      .map((s) => s.trim())
+      .filter(Boolean)
+      .reduce(
+        (acc, rule) => {
+          const [key, value] = rule.split(':').map((str) => str.trim())
+          if (key && value) acc[key] = value
+          return acc
+        },
+        {} as Record<string, string>,
+      )
+  }
+
   deleteOldPageBuilderLocalStorage(): void {
     const config = this.pageBuilderStateStore.getPageBuilderConfig
     const formType = config && config.updateOrCreate && config.updateOrCreate.formType
@@ -1466,33 +1648,33 @@ export class PageBuilderService {
   }
 
   // Call this when the user starts editing (e.g., on first change or when resuming a draft)
-  startEditing() {
+  public startEditing() {
     this.hasStartedEditing = true
   }
 
   //
-  async resumeEditingFromDraft() {
-    this.localStorageManager.updateLocalStorageItemName()
+  public async resumeEditingFromDraft() {
+    this.updateLocalStorageItemName()
 
-    const localStorageData = this.loadStoredComponentsFromStorage()
+    const localStorageData = this.getSavedPageHtml()
 
     if (localStorageData) {
-      this.pageBuilderStateStore.setIsLoadingResumeEditing(true)
       await delay(400)
-      await this.#mountComponentsToDOM(localStorageData)
+      this.pageBuilderStateStore.setIsLoadingResumeEditing(true)
+      await this.mountComponentsToDOM(localStorageData)
       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()
+    await this.addListenersToEditableElements()
     // set loading to false
     this.pageBuilderStateStore.setIsLoadingResumeEditing(false)
   }
 
-  async restoreOriginalContent() {
-    this.localStorageManager.updateLocalStorageItemName()
+  public async restoreOriginalContent() {
+    this.updateLocalStorageItemName()
 
     this.pageBuilderStateStore.setIsRestoring(true)
     await delay(400)
@@ -1501,56 +1683,52 @@ export class PageBuilderService {
     if (Array.isArray(this.originalComponents)) {
       await this.clearClassesFromPage()
       await this.clearInlineStylesFromPagee()
-      await this.#mountComponentsToDOM(JSON.stringify(this.originalComponents), true)
+      await this.mountComponentsToDOM(JSON.stringify(this.originalComponents), true)
       this.removeCurrentComponentsFromLocalStorage()
     }
 
     // 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()
+    await this.addListenersToEditableElements()
 
     this.pageBuilderStateStore.setIsRestoring(false)
   }
 
-  getStorageItemNameForResource(): string | null {
+  public getStorageItemNameForResource(): string | null {
     return this.getLocalStorageItemName.value
   }
 
-  loadStoredComponentsFromStorage() {
-    this.localStorageManager.updateLocalStorageItemName()
+  public getSavedPageHtml() {
     if (!this.getLocalStorageItemName.value) return false
 
-    if (
-      this.getLocalStorageItemName.value &&
-      localStorage.getItem(this.getLocalStorageItemName.value)
-    ) {
-      const savedCurrentDesign = localStorage.getItem(this.getLocalStorageItemName.value)
+    const key = this.getLocalStorageItemName.value
+    if (!key) return false
 
-      if (savedCurrentDesign) {
-        return savedCurrentDesign
-      }
-    }
+    const raw = localStorage.getItem(key)
+    if (!raw) return false
 
-    return false
-  }
+    const parsed = JSON.parse(raw)
 
-  /**
-   * Sets the image selected from the media library as the "pending" image
-   * to be applied to the currently selected element in the builder.
-   * This does not update the DOM immediately—call `applyPendingImageToSelectedElement` to commit.
-   * @param image - The image object to be staged for application
-   */
-  stageImageForSelectedElement(image: ImageObject) {
-    this.pageBuilderStateStore.setApplyImageToSelection(image)
+    // Object with components and pageSettings
+    if (parsed && Array.isArray(parsed.components)) {
+      const classes = (parsed.pageSettings && parsed.pageSettings.classes) || ''
+      const style = (parsed.pageSettings && parsed.pageSettings.style) || ''
+
+      const sectionsHtml = parsed.components.map((c: ComponentObject) => c.html_code).join('\n')
+      return `<div id="pagebuilder" class="${classes}" style="${style}">\n${sectionsHtml}\n</div>`
+    }
+    return false
   }
 
   /**
-   * Applies the staged image (set by `stageImageForSelectedElement`) to the currently selected element.
+   * Applies the staged image to the currently selected element.
    * This updates the builder state and triggers an auto-save.
    * If no element is selected or no image is staged, nothing happens.
    */
-  async applyPendingImageToSelectedElement(): Promise<void> {
+  public async applySelectedImage(image: ImageObject): Promise<void> {
+    this.pageBuilderStateStore.setApplyImageToSelection(image)
+
     if (!this.getElement.value) return
 
     // Only apply if an image is staged
@@ -1567,7 +1745,7 @@ export class PageBuilderService {
    * sets that image's src as the base primary image in the builder state.
    * If the element does not meet these criteria, clears the base primary image.
    */
-  setBasePrimaryImageFromSelectedElement() {
+  private setBasePrimaryImageFromSelectedElement() {
     if (!this.getElement.value) return
 
     const currentImageContainer = document.createElement('div')
@@ -1587,7 +1765,7 @@ export class PageBuilderService {
     this.pageBuilderStateStore.setBasePrimaryImage(null)
   }
 
-  #addHyperlinkToElement(
+  private addHyperlinkToElement(
     hyperlinkEnable: boolean,
     urlInput: string | null,
     openHyperlinkInNewTab: boolean,
@@ -1683,7 +1861,7 @@ export class PageBuilderService {
     }
   }
 
-  #checkForHyperlink() {
+  private checkForHyperlink() {
     if (!this.getElement.value) return
 
     const hyperlink = this.getElement.value.querySelector('a')
@@ -1711,7 +1889,7 @@ export class PageBuilderService {
     this.pageBuilderStateStore.setHyberlinkEnable(false)
   }
 
-  handleHyperlink(
+  public handleHyperlink(
     hyperlinkEnable?: boolean,
     urlInput?: string | null,
     openHyperlinkInNewTab?: boolean,
@@ -1749,15 +1927,15 @@ export class PageBuilderService {
     }
 
     if (hyperlinkEnable === undefined) {
-      this.#checkForHyperlink()
+      this.checkForHyperlink()
       return
     }
 
-    this.#addHyperlinkToElement(hyperlinkEnable, urlInput || null, openHyperlinkInNewTab || false)
+    this.addHyperlinkToElement(hyperlinkEnable, urlInput || null, openHyperlinkInNewTab || false)
   }
 
   // Helper method for custom components to easily add components
-  async addComponent(componentObject: ComponentObject): Promise<void> {
+  public async addComponent(componentObject: ComponentObject): Promise<void> {
     try {
       const clonedComponent = this.cloneCompObjForDOMInsertion({
         html_code: componentObject.html_code,
@@ -1772,8 +1950,8 @@ export class PageBuilderService {
           : 'push',
       })
 
-      const pageBuilder = document.querySelector('#contains-pagebuilder')
-      //  scoll to top or bottom # end
+      const pageBuilder = document.querySelector('#pagebuilder')
+      //  scoll to top or bottom
       if (pageBuilder) {
         // push to bottom
         if (this.getComponentArrayAddMethod.value === 'push') {
@@ -1787,7 +1965,7 @@ export class PageBuilderService {
       // 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()
+      await this.addListenersToEditableElements()
 
       await this.handleAutoSave()
     } catch (error) {
@@ -1800,7 +1978,7 @@ export class PageBuilderService {
    * process each element’s class attribute and update the classes accordingly.
    */
 
-  #addTailwindPrefixToClasses(classList: string, prefix = 'pbx-'): string {
+  private addTailwindPrefixToClasses(classList: string, prefix = 'pbx-'): string {
     return classList
       .split(/\s+/)
       .map((cls) => {
@@ -1814,7 +1992,7 @@ export class PageBuilderService {
       .join(' ')
   }
 
-  #convertStyleObjectToString(
+  private convertStyleObjectToString(
     styleObj: string | Record<string, string> | null | undefined,
   ): string {
     if (!styleObj) return ''
@@ -1828,6 +2006,114 @@ export class PageBuilderService {
       .join(' ')
   }
 
+  /**
+   * Parses a string of HTML and extracts builder components and global page settings.
+   *
+   * ⚠️ **Important:**
+   * - This method expects an **HTML string** containing one or more `<section>...</section>` elements (such as the output from `getSavedPageHtml()` or a previously saved builder HTML string).
+   * - **Do NOT pass a JSON string** (such as the result of `JSON.stringify(componentsArray)`) to this method. Passing a JSON string to `DOMParser.parseFromString(..., 'text/html')` will not produce valid DOM nodes. Instead, it will treat the JSON as plain text, resulting in a `<html><head></head><body>{...json...}</body></html>` structure, not real HTML elements.
+   * - If you pass a JSON string, you will see lots of `\n` and strange HTML, because the parser is just wrapping your JSON in a `<body>` tag as text.
+   *
+   * Why only HTML?
+   * - It enforces a single source of truth for builder state (HTML).
+   * - It prevents misuse (e.g., passing JSON to a DOM parser, which is always a bug).
+   * - It makes your documentation and support much simpler.
+   *
+   * @param htmlString - The HTML string to parse (must contain `<section>...</section>` elements, not JSON).
+   * @returns An object with `components` (array of builder components) and `pageSettings` (global styles for the page).
+   */
+  public parsePageBuilderHTML(htmlString: string): {
+    components: ComponentObject[]
+    pageSettings: PageSettings
+  } {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(htmlString, 'text/html')
+
+    // Prefix all classes in the document
+    doc.querySelectorAll('[class]').forEach((element) => {
+      const currentClasses = element.getAttribute('class') || ''
+      const prefixedClasses = this.addTailwindPrefixToClasses(currentClasses)
+      element.setAttribute('class', prefixedClasses)
+    })
+
+    const pagebuilderDiv = doc.querySelector('#pagebuilder')
+    let pageSettings: PageSettings = {
+      classes: '',
+      style: {},
+    }
+
+    if (pagebuilderDiv) {
+      const rawStyle = pagebuilderDiv.getAttribute('style') || ''
+      pageSettings = {
+        classes: pagebuilderDiv.className || '',
+        style: this.parseStyleString(rawStyle),
+      }
+    }
+
+    // Always assign sectionNodes before use
+    let sectionNodes: NodeListOf<HTMLElement> = doc.querySelectorAll('section')
+    if (pagebuilderDiv) {
+      sectionNodes = pagebuilderDiv.querySelectorAll('section')
+    }
+
+    // Only use top-level (non-nested) sections as components
+    const topLevelSections = Array.from(sectionNodes).filter(
+      (section) =>
+        !section.parentElement || section.parentElement.tagName.toLowerCase() !== 'section',
+    )
+
+    let components: ComponentObject[] = []
+
+    if (topLevelSections.length > 0) {
+      components = topLevelSections.map((section) => ({
+        id: null,
+        html_code: section.outerHTML.trim(),
+        title:
+          section.getAttribute('data-component-title') ||
+          section.getAttribute('title') ||
+          'Untitled Component',
+      }))
+    }
+    if (topLevelSections.length === 0) {
+      // No <section> found: treat each first-level child as a component, wrapped in a section
+      const parent = pagebuilderDiv || doc.body
+      const children = Array.from(parent.children)
+      if (children.length > 0) {
+        components = children.map((child) => {
+          // Wrap in a section with data-componentid and data-component-title
+          const section = doc.createElement('section')
+          section.setAttribute('data-component-title', 'Untitled Component')
+          // Optionally: generate a uuid for data-componentid if needed
+          // section.setAttribute('data-componentid', uuidv4())
+          section.innerHTML = child.outerHTML.trim()
+          return {
+            id: null,
+            html_code: section.outerHTML.trim(),
+            title: 'Untitled Component',
+          }
+        })
+      }
+      if (children.length === 0) {
+        // No children: wrap the entire content in a <section> as a single component
+        const section = doc.createElement('section')
+        section.setAttribute('data-component-title', 'Untitled Component')
+        section.innerHTML = parent.innerHTML.trim()
+        components = [
+          {
+            id: null,
+            html_code: section.outerHTML.trim(),
+            title: 'Untitled Component',
+          },
+        ]
+      }
+    }
+
+    return {
+      components,
+      pageSettings,
+    }
+  }
+
   /**
    * Parse and set components from JSON or HTML data
    *
@@ -1840,56 +2126,74 @@ 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 #mountComponentsToDOM(htmlString: string, usePassedPageSettings?: boolean): Promise<void> {
-    // Auto-detect if input is JSON or HTML
+  private async mountComponentsToDOM(
+    htmlString: string,
+    usePassedPageSettings?: boolean,
+  ): Promise<void> {
+    /**
+     * Mounts builder components to the DOM from either JSON or HTML input.
+     *
+     * Input format detection:
+     * - If the input starts with `[` or `{`, it is treated as JSON (array or object).
+     * - If the input starts with `<`, it is treated as HTML.
+     *
+     * When to use which format:
+     *
+     * 1. JSON input (from localStorage, API, or internal state like pina):
+     *    - Use when restoring builder state from localStorage, an API, or a previously saved draft.
+     *    - Example: `localStorage.getItem(...)` or API returns a JSON stringified array/object of components.
+     *    - This is the most common format for drafts, autosave, and programmatic state management.
+     *    - Example usage:
+     *      await this.mountComponentsToDOM(JSON.stringify(getComponents))
+     *
+     * 2. HTML input (from HTML snapshot, import, or published output):
+     *    - Use when restoring from a published HTML snapshot, importing a static HTML export, or loading the builder from a previously published HTML string.
+     *    - Example: output from `getSavedPageHtml()` or a static HTML export.
+     *    - This is used for restoring the builder from a published state, importing, or previewing published content.
+     *    - Example usage:
+     *      await this.mountComponentsToDOM(savedHtmlString)
+     *
+     * Best practice:
+     * - Use JSON for local storage drafts, autosave, and API-driven workflows.
+     * - Use HTML for published/imported content from DB or when restoring from a static HTML snapshot.
+     *
+     * The method auto-detects the format and calls the appropriate parser.
+     */
     const trimmedData = htmlString.trim()
 
     if (trimmedData.startsWith('[') || trimmedData.startsWith('{')) {
-      // Looks like JSON - parse as JSON
-      await this.#parseJSONComponents(trimmedData, usePassedPageSettings)
+      // JSON input: Use this when restoring from localStorage, API, or internal builder state (drafts, autosave, etc.)
+      await this.parseJSONComponents(trimmedData, usePassedPageSettings)
       return
     }
     if (trimmedData.startsWith('<')) {
-      // Looks like HTML - parse as HTML
-      await this.#parseHTMLComponents(trimmedData, usePassedPageSettings)
+      // HTML input: Use this when restoring from a published HTML snapshot, import, or static HTML export
+      await this.parseHTMLComponents(trimmedData, usePassedPageSettings)
       return
     }
 
-    await this.#parseJSONComponents(trimmedData, usePassedPageSettings)
+    // Fallback: If format is unknown, default to JSON parser (defensive)
+    await this.parseJSONComponents(trimmedData, usePassedPageSettings)
   }
 
   // Private method to parse JSON components and save pageBuilderContentSavedAt to localStorage
-  async #parseJSONComponents(jsonData: string, usePassedPageSettings?: boolean): Promise<void> {
-    const storedPageSettings =
+  private async parseJSONComponents(
+    jsonData: string,
+    usePassedPageSettings?: boolean,
+  ): Promise<void> {
+    const pageSettings =
       this.pageBuilderStateStore.getPageBuilderConfig &&
       this.pageBuilderStateStore.getPageBuilderConfig.pageSettings
 
+    const userPageSettings = usePassedPageSettings ? pageSettings : null
     try {
       const parsedData = JSON.parse(jsonData)
       let componentsArray: ComponentObject[] = []
 
-      // Decide which pageSettings to use
-      const pageSettings = usePassedPageSettings
-        ? storedPageSettings
-        : parsedData && parsedData.pageSettings
-          ? parsedData.pageSettings
-          : null
-
-      // Restore page-level settings like class and style
-      if (pageSettings) {
-        const pagebuilder = document.querySelector('#pagebuilder') as HTMLElement
-        if (pagebuilder) {
-          pagebuilder.removeAttribute('class')
-          pagebuilder.removeAttribute('style')
-          pagebuilder.className = pageSettings.classes || ''
-          pagebuilder.setAttribute('style', this.#convertStyleObjectToString(pageSettings.style))
-        }
-      }
-
-      // Support both old and new structure
       if (Array.isArray(parsedData)) {
         componentsArray = parsedData
-      } else if (parsedData && Array.isArray(parsedData.components)) {
+      }
+      if (parsedData && Array.isArray(parsedData.components)) {
         componentsArray = parsedData.components
       }
 
@@ -1906,7 +2210,7 @@ export class PageBuilderService {
             section.querySelectorAll('[class]').forEach((el) => {
               el.setAttribute(
                 'class',
-                this.#addTailwindPrefixToClasses(el.getAttribute('class') || '', 'pbx-'),
+                this.addTailwindPrefixToClasses(el.getAttribute('class') || '', 'pbx-'),
               )
             })
 
@@ -1933,14 +2237,28 @@ export class PageBuilderService {
       this.pageBuilderStateStore.setComponents(savedCurrentDesign)
 
       await nextTick()
-      await this.#addListenersToEditableElements()
+      await this.addListenersToEditableElements()
+
+      if (userPageSettings && pageSettings) {
+        const pagebuilder = document.querySelector('#pagebuilder') as HTMLElement
+        if (pagebuilder) {
+          pagebuilder.removeAttribute('class')
+          pagebuilder.removeAttribute('style')
+          pagebuilder.className = pageSettings.classes || ''
+          pagebuilder.setAttribute('style', this.convertStyleObjectToString(pageSettings.style))
+        }
+      }
     } catch (error) {
       console.error('Error parsing JSON components:', error)
       this.deleteAllComponentsFromDOM()
     }
   }
+
   // Private method to parse HTML components
-  async #parseHTMLComponents(htmlData: string, usePassedPageSettings?: boolean): Promise<void> {
+  private async parseHTMLComponents(
+    htmlData: string,
+    usePassedPageSettings?: boolean,
+  ): Promise<void> {
     try {
       const parser = new DOMParser()
       const doc = parser.parseFromString(htmlData, 'text/html')
@@ -1971,10 +2289,7 @@ export class PageBuilderService {
           livePageBuilder.removeAttribute('class')
           livePageBuilder.removeAttribute('style')
           livePageBuilder.className = pageSettings.classes || ''
-          livePageBuilder.setAttribute(
-            'style',
-            this.#convertStyleObjectToString(pageSettings.style),
-          )
+          livePageBuilder.setAttribute('style', this.convertStyleObjectToString(pageSettings.style))
         }
       }
 
@@ -1987,7 +2302,7 @@ export class PageBuilderService {
         section.querySelectorAll('[class]').forEach((el) => {
           el.setAttribute(
             'class',
-            this.#addTailwindPrefixToClasses(el.getAttribute('class') || '', 'pbx-'),
+            this.addTailwindPrefixToClasses(el.getAttribute('class') || '', 'pbx-'),
           )
         })
 
@@ -2019,67 +2334,192 @@ export class PageBuilderService {
       // Clear selections and re-bind events
       await this.clearHtmlSelection()
       await nextTick()
-      await this.#addListenersToEditableElements()
+      await this.addListenersToEditableElements()
     } catch (error) {
       console.error('Error parsing HTML components:', error)
       this.deleteAllComponentsFromDOM()
     }
   }
 
-  async initializeElementStyles(): Promise<void> {
+  private updateLocalStorageItemName(): void {
+    const formtype =
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType
+
+    const formname =
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formName
+
+    const resourceData =
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.resourceData
+
+    // Logic for create resource
+    if (formtype === 'create') {
+      if (formname && formname.length > 0) {
+        this.pageBuilderStateStore.setLocalStorageItemName(
+          `page-builder-create-resource-${this.sanitizeForLocalStorage(formname)}`,
+        )
+        return
+      }
+
+      this.pageBuilderStateStore.setLocalStorageItemName(`page-builder-create-resource`)
+      return
+    }
+
+    // Logic for create
+    // Logic for update and with resource form name
+    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(formname)}`,
+            )
+            return
+          }
+        }
+
+        // Runs when resourceData has title but no ID
+        if (resourceData && resourceData != null) {
+          if (
+            resourceData.title &&
+            typeof resourceData.title === 'string' &&
+            resourceData.title.length > 0
+          ) {
+            if (!resourceData.id || typeof resourceData.id === 'string') {
+              this.pageBuilderStateStore.setLocalStorageItemName(
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}-${this.sanitizeForLocalStorage(resourceData.title)}`,
+              )
+              return
+            }
+          }
+        }
+
+        // Runs when resourceData has ID but no title
+        if (resourceData && resourceData != null) {
+          if (!resourceData.title && typeof resourceData.title !== 'string') {
+            if (resourceData.id || typeof resourceData.id === 'number') {
+              this.pageBuilderStateStore.setLocalStorageItemName(
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
+              )
+              return
+            }
+          }
+        }
+
+        // Runs when resourceData has both title and ID
+        if (resourceData && resourceData != null) {
+          if (
+            resourceData.title &&
+            typeof resourceData.title === 'string' &&
+            resourceData.title.length > 0
+          ) {
+            if (resourceData.id || typeof resourceData.id === 'number') {
+              this.pageBuilderStateStore.setLocalStorageItemName(
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}-${this.sanitizeForLocalStorage(resourceData.title)}-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
+              )
+              return
+            }
+          }
+        }
+      }
+
+      // Logic for update without without formname
+      if (!formname || (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`)
+            return
+          }
+        }
+
+        // Runs when resourceData has title but no ID
+        if (resourceData && resourceData != null) {
+          if (
+            resourceData.title &&
+            typeof resourceData.title === 'string' &&
+            resourceData.title.length > 0
+          ) {
+            if (!resourceData.id || typeof resourceData.id === 'string') {
+              this.pageBuilderStateStore.setLocalStorageItemName(
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(resourceData.title)}`,
+              )
+              return
+            }
+          }
+        }
+
+        // Runs when resourceData has ID but no title
+        if (resourceData && resourceData != null) {
+          if (!resourceData.title && typeof resourceData.title !== 'string') {
+            if (resourceData.id || typeof resourceData.id === 'number') {
+              this.pageBuilderStateStore.setLocalStorageItemName(
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
+              )
+              return
+            }
+          }
+        }
+
+        // Runs when resourceData has both title and ID
+        if (resourceData && resourceData != null) {
+          if (
+            resourceData.title &&
+            typeof resourceData.title === 'string' &&
+            resourceData.title.length > 0
+          ) {
+            if (resourceData.id || typeof resourceData.id === 'number') {
+              this.pageBuilderStateStore.setLocalStorageItemName(
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(resourceData.title)}-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
+              )
+              return
+            }
+          }
+        }
+      }
+    }
+  }
+
+  public async initializeElementStyles(): Promise<void> {
     // Wait for Vue to finish DOM updates before attaching event listeners.
     // This ensure elements exist in the DOM.
     await nextTick()
 
-    // handle custom URL
     this.handleHyperlink(undefined, null, false)
-    // handle opacity
     this.handleOpacity(undefined)
-    // handle BG opacity
     this.handleBackgroundOpacity(undefined)
-    // displayed image
     this.setBasePrimaryImageFromSelectedElement()
-    // border style
     this.handleBorderStyle(undefined)
-    // border width
     this.handleBorderWidth(undefined)
-    // border color
     this.handleBorderColor(undefined)
-    // border radius
     this.handleBorderRadiusGlobal(undefined)
-    // border radius
     this.handleBorderRadiusTopLeft(undefined)
-    // border radius
     this.handleBorderRadiusTopRight(undefined)
-    // border radius
     this.handleBorderRadiusBottomleft(undefined)
-    // border radius
     this.handleBorderRadiusBottomRight(undefined)
-    // handle font size
     this.handleFontSizeBase(undefined)
     this.handleFontSizeDesktop(undefined)
     this.handleFontSizeTablet(undefined)
     this.handleFontSizeMobile(undefined)
-    // handle font weight
     this.handleFontWeight(undefined)
-    // handle font family
-
     this.handleFontFamily(undefined)
-    // handle font style
     this.handleFontStyle(undefined)
-    // handle vertical padding
     this.handleVerticalPadding(undefined)
-    // handle horizontal padding
     this.handleHorizontalPadding(undefined)
-    // handle vertical margin
     this.handleVerticalMargin(undefined)
-    // handle horizontal margin
     this.handleHorizontalMargin(undefined)
-    // handle color
     this.handleBackgroundColor(undefined)
-    // handle text color
     this.handleTextColor(undefined)
-    // handle classes
-    await this.#syncCurrentClasses()
+    await this.syncCurrentClasses()
+    await this.syncCurrentStyles()
   }
 }