@myissue/vue-website-page-builder 3.2.91 → 3.2.93

package/src/composables/{PageBuilderClass.ts → PageBuilderService.ts}

@@ -14,8 +14,9 @@ import { computed, ref, nextTick } from 'vue'
 import type { ComputedRef } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
 import { delay } from './delay'
+import { isEmptyObject } from '../helpers/isEmptyObject'
 
-class PageBuilderClass {
+export class PageBuilderService {
   // Class properties with types
   private nextTick: Promise<void>
   private containsPagebuilder: Element | null
@@ -23,7 +24,7 @@ class PageBuilderClass {
   private pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>
   private getTextAreaVueModel: ComputedRef<string | null>
   private getLocalStorageItemName: ComputedRef<string | null>
-  private getCurrentImage: ComputedRef<ImageObject>
+  private getApplyImageToSelection: ComputedRef<ImageObject>
   private getHyberlinkEnable: ComputedRef<boolean>
   private getComponents: ComputedRef<ComponentObject[] | null>
   private getComponent: ComputedRef<ComponentObject | null>
@@ -35,10 +36,10 @@ class PageBuilderClass {
   private NoneListernesTags: string[]
   private delay: (ms?: number) => Promise<void>
   private hasStartedEditing: boolean = false
+  private originalComponents: string | null = null
 
   constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>) {
     this.nextTick = nextTick()
-
     this.hasStartedEditing = false
     this.containsPagebuilder = document.querySelector('#contains-pagebuilder')
     this.pageBuilderStateStore = pageBuilderStateStore
@@ -48,7 +49,9 @@ class PageBuilderClass {
       () => this.pageBuilderStateStore.getLocalStorageItemName,
     )
 
-    this.getCurrentImage = computed(() => this.pageBuilderStateStore.getCurrentImage)
+    this.getApplyImageToSelection = computed(
+      () => this.pageBuilderStateStore.getApplyImageToSelection,
+    )
     this.getHyberlinkEnable = computed(() => this.pageBuilderStateStore.getHyberlinkEnable)
     this.getComponents = computed(() => this.pageBuilderStateStore.getComponents)
 
@@ -93,9 +96,138 @@ class PageBuilderClass {
     this.pageBuilderStateStore.setElement(null)
     await this.#removeHoveredAndSelected()
   }
-  // Load existing content from HTML when in update mode
-  applyPageBuilderConfig(data: PageBuilderConfig): void {
-    this.pageBuilderStateStore.applyPageBuilderConfig(data)
+
+  #ensureUpdateOrCreateConfig(config: PageBuilderConfig): void {
+    // Case A: updateOrCreate is missing or an empty object
+    if (!config.updateOrCreate || (config.updateOrCreate && isEmptyObject(config.updateOrCreate))) {
+      const updatedConfig = {
+        ...config,
+        updateOrCreate: {
+          formType: 'create',
+          formName: 'post',
+        },
+      } as const
+
+      this.pageBuilderStateStore.setPageBuilderConfig(updatedConfig)
+      return
+    }
+
+    // Case B: formType is valid ('create' or 'update'), but formName is missing or an empty string
+    if (
+      (config.updateOrCreate &&
+        typeof config.updateOrCreate.formType === 'string' &&
+        (config.updateOrCreate.formType === 'create' ||
+          config.updateOrCreate.formType === 'update') &&
+        typeof config.updateOrCreate.formName !== 'string') ||
+      (typeof config.updateOrCreate.formName === 'string' &&
+        config.updateOrCreate.formName.length === 0)
+    ) {
+      const updatedConfig = {
+        ...config,
+        updateOrCreate: {
+          formType: config.updateOrCreate.formType,
+          formName: 'post',
+        },
+      } as const
+      this.pageBuilderStateStore.setPageBuilderConfig(updatedConfig)
+    }
+
+    // Case C: formType is missing or not a valid string like ('create' or 'update') but formName is valid string
+    if (
+      (config.updateOrCreate && typeof config.updateOrCreate.formType !== 'string') ||
+      (typeof config.updateOrCreate.formType === 'string' &&
+        config.updateOrCreate.formType !== 'create' &&
+        config.updateOrCreate.formType !== 'update' &&
+        typeof config.updateOrCreate.formName === 'string' &&
+        config.updateOrCreate.formName.length !== 0)
+    ) {
+      const updatedConfig = {
+        ...config,
+        updateOrCreate: {
+          formType: 'create',
+          formName: config.updateOrCreate.formName,
+        },
+      } as const
+
+      this.pageBuilderStateStore.setPageBuilderConfig(updatedConfig)
+      return
+    }
+
+    // Case D: formType exists but is not 'create' or 'update', and formName is missing or invalid
+    if (
+      config.updateOrCreate &&
+      typeof config.updateOrCreate.formType === 'string' &&
+      config.updateOrCreate.formType !== 'create' &&
+      config.updateOrCreate.formType !== 'update' &&
+      typeof config.formName !== 'string'
+    ) {
+      const updatedConfig = {
+        ...config,
+        updateOrCreate: {
+          formType: 'create',
+          formName: 'post',
+        },
+      } as const
+
+      this.pageBuilderStateStore.setPageBuilderConfig(updatedConfig)
+    }
+  }
+
+  #validateConfig(config: PageBuilderConfig): void {
+    const defaultConfigValues = {
+      updateOrCreate: {
+        formType: 'create',
+        formName: 'post',
+      },
+    } as const
+
+    // Set config for page builder if not set by user
+    if (!config || (config && Object.keys(config).length === 0 && config.constructor === Object)) {
+      this.pageBuilderStateStore.setPageBuilderConfig(defaultConfigValues)
+    }
+
+    if (config && Object.keys(config).length !== 0 && config.constructor === Object) {
+      this.#ensureUpdateOrCreateConfig(config)
+    }
+  }
+
+  /**
+   * Initializes the Page Builder with the provided configuration.
+   * Handles config validation, local storage, and sets up the builder state.
+   */
+  async startBuilder(config: PageBuilderConfig): Promise<void> {
+    // Show a global loading indicator while initializing
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
+
+    // Wait briefly to ensure UI updates and async processes settle
+    await this.delay(300)
+
+    // Store the provided config in the builder's state store
+    this.pageBuilderStateStore.setPageBuilderConfig(config)
+
+    // 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()
+
+    // If there is a local draft for this resource, mark it in the state
+    if (await this.#hasLocalDraftForUpdate()) {
+      this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
+    }
+
+    // Clean up any old localStorage items related to previous builder sessions
+    this.deleteOldPageBuilderLocalStorage()
+
+    // Clear any selected HTML elements in the builder UI
+    await this.clearHtmlSelection()
+
+    // Attach event listeners to all editable elements in the builder
+    await this.addListenersToEditableElements()
+
+    // Hide the global loading indicator and mark the builder as started
+    this.pageBuilderStateStore.setIsLoadingGlobal(false)
+    this.pageBuilderStateStore.setBuilderStarted(true)
   }
 
   #applyElementClassChanges(
@@ -265,7 +397,7 @@ class PageBuilderClass {
 
   handleAutoSave = async () => {
     this.startEditing()
-    const passedConfig = this.pageBuilderStateStore.getConfigPageBuilder
+    const passedConfig = this.pageBuilderStateStore.getPageBuilderConfig
 
     // Check if config is set
     if (passedConfig && passedConfig.userSettings) {
@@ -280,7 +412,7 @@ class PageBuilderClass {
         try {
           this.pageBuilderStateStore.setIsSaving(true)
           await this.saveComponentsLocalStorage()
-          await this.delay(300)
+          await this.delay(500)
         } catch (err) {
           console.error('Error trying auto save.', err)
         } finally {
@@ -303,7 +435,7 @@ class PageBuilderClass {
 
   handleManualSave = async () => {
     this.startEditing()
-    const passedConfig = this.pageBuilderStateStore.getConfigPageBuilder
+    const passedConfig = this.pageBuilderStateStore.getPageBuilderConfig
 
     // Check if config is set
     if (passedConfig && passedConfig.userSettings) {
@@ -575,7 +707,6 @@ class PageBuilderClass {
     )
   }
 
-  // border color, style & width / start
   handleBorderStyle(borderStyle?: string): void {
     this.#applyElementClassChanges(
       borderStyle,
@@ -611,7 +742,6 @@ class PageBuilderClass {
     this.#applyElementClassChanges(color, tailwindColors.textColorVariables, 'setTextColor')
   }
 
-  // border radius / start
   handleBorderRadiusGlobal(borderRadiusGlobal?: string): void {
     this.#applyElementClassChanges(
       borderRadiusGlobal,
@@ -690,7 +820,7 @@ class PageBuilderClass {
     this.pageBuilderStateStore.setComponents([])
   }
 
-  deleteSelectedComponent() {
+  async deleteSelectedComponent() {
     if (!this.getComponents.value || !this.getComponent.value) return
 
     // Find the index of the component to delete
@@ -706,6 +836,8 @@ class PageBuilderClass {
     // Remove the component from the array
     this.getComponents.value.splice(indexToDelete, 1)
     this.pageBuilderStateStore.setComponents(this.getComponents.value)
+    await nextTick()
+    await this.addListenersToEditableElements()
 
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
@@ -879,16 +1011,16 @@ class PageBuilderClass {
       .replace(/^-+|-+$/g, '') // Remove leading/trailing hyphens
   }
 
-  updateLocalStorageItemName(): void {
+  #updateLocalStorageItemName(): void {
     const updateOrCreate =
-      this.pageBuilderStateStore.getConfigPageBuilder &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType
 
-    const resourceData = this.pageBuilderStateStore.getConfigPageBuilder?.resourceData
+    const resourceData = this.pageBuilderStateStore.getPageBuilderConfig?.resourceData
 
     const resourceFormName =
-      this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formName
+      this.pageBuilderStateStore.getPageBuilderConfig?.updateOrCreate?.formName
 
     // Logic for create resource
     if (updateOrCreate === 'create') {
@@ -906,9 +1038,6 @@ class PageBuilderClass {
     // Logic for create
     // Logic for update and with resource form name
     if (updateOrCreate === 'update') {
-      //
-      //
-      //
       if (typeof resourceFormName === 'string' && resourceFormName.length > 0) {
         //
         //
@@ -1053,14 +1182,16 @@ class PageBuilderClass {
       })
     })
 
-    if (this.getLocalStorageItemName.value) {
-      localStorage.setItem(
-        this.getLocalStorageItemName.value,
-        JSON.stringify({
-          pageBuilderContentSavedAt: new Date().toISOString(),
-          components: componentsToSave,
-        }),
-      )
+    // Save to localStorage with pageBuilderContentSavedAt using the correct key
+    const dataToSave = {
+      components: componentsToSave,
+      pageBuilderContentSavedAt: new Date().toISOString(),
+    }
+
+    const keyForSavingFromDomToLocal = this.getLocalStorageItemName.value
+
+    if (keyForSavingFromDomToLocal && typeof keyForSavingFromDomToLocal === 'string') {
+      localStorage.setItem(keyForSavingFromDomToLocal, JSON.stringify(dataToSave))
     }
 
     // No DOM mutation here!
@@ -1085,10 +1216,10 @@ class PageBuilderClass {
   //
   deleteOldPageBuilderLocalStorage(): void {
     if (
-      this.pageBuilderStateStore.getConfigPageBuilder &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
     ) {
       let oldCountLocalStorages = 0
       const deletedItemsLog: { Number: number; Key: string; SavedAt: string }[] = []
@@ -1137,14 +1268,14 @@ class PageBuilderClass {
     }
   }
 
-  async hasLocalDraftForUpdate(): Promise<boolean> {
+  async #hasLocalDraftForUpdate(): Promise<boolean> {
     if (this.hasStartedEditing) return false
 
     if (
-      this.pageBuilderStateStore.getConfigPageBuilder &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+      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') {
@@ -1152,10 +1283,13 @@ class PageBuilderClass {
         if (draft) {
           try {
             await this.delay(500)
-            const draftParsed = JSON.parse(draft)
-            const dbComponents = this.getComponents.value
-            return JSON.stringify(draftParsed.components) !== JSON.stringify(dbComponents)
-          } catch (e) {
+
+            return true
+            // const dbComponents = this.getComponents.value
+            // const draftParsed = JSON.parse(draft)
+            // return JSON.stringify(draftParsed.components) !== JSON.stringify(dbComponents)
+          } catch (err) {
+            console.error('Unable to mount components to DOM.', err)
             return false
           }
         }
@@ -1169,34 +1303,51 @@ class PageBuilderClass {
     this.hasStartedEditing = true
   }
 
+  //
   async resumeEditingForUpdate() {
     if (
-      this.pageBuilderStateStore.getConfigPageBuilder &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+      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 savedCurrentDesign = localStorage.getItem(key)
-        if (savedCurrentDesign) {
-          try {
-            const parsed = JSON.parse(savedCurrentDesign)
-            if (parsed && Array.isArray(parsed.components)) {
-              this.pageBuilderStateStore.setComponents(parsed.components)
-              localStorage.removeItem(key)
-              await nextTick()
-              await this.addListenersToEditableElements()
-              await this.handleAutoSave()
-            }
-          } catch (e) {
-            console.error('Failed to parse local draft:', e)
-          }
+        const updateDraftFromLocalStorage = localStorage.getItem(key)
+
+        if (typeof updateDraftFromLocalStorage === 'string') {
+          this.pageBuilderStateStore.setIsResumeEditing(true)
+          await delay(500)
+          this.mountComponentsToDOM(updateDraftFromLocalStorage)
+          this.pageBuilderStateStore.setIsResumeEditing(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.pageBuilderStateStore.setIsRestoring(true)
+      await this.delay(300)
+
+      // Restore the original content if available
+      if (this.originalComponents) {
+        this.mountComponentsToDOM(this.originalComponents)
+      }
+
+      await nextTick()
+      await this.addListenersToEditableElements()
+
+      this.pageBuilderStateStore.setIsRestoring(false)
+    }
+  }
+
   getStorageItemNameForResource(): string | null {
     return this.getLocalStorageItemName.value
   }
@@ -1217,39 +1368,56 @@ class PageBuilderClass {
 
     return false
   }
-  //
-  //
-  async updateBasePrimaryImage(): Promise<void> {
+
+  /**
+   * 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)
+  }
+
+  /**
+   * Applies the staged image (set by `stageImageForSelectedElement`) 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> {
     if (!this.getElement.value) return
 
-    // If no data provided, apply current image if available (new simplified usage)
-    if (this.getCurrentImage.value && this.getCurrentImage.value.src) {
+    // Only apply if an image is staged
+    if (this.getApplyImageToSelection.value && this.getApplyImageToSelection.value.src) {
       await this.nextTick
-      this.pageBuilderStateStore.setBasePrimaryImage(`${this.getCurrentImage.value.src}`)
+      this.pageBuilderStateStore.setBasePrimaryImage(`${this.getApplyImageToSelection.value.src}`)
+
       await this.handleAutoSave()
     }
   }
 
-  setBasePrimaryImageFromCurrent() {
+  /**
+   * Inspects the currently selected element and, if it contains exactly one <img> and no <div>,
+   * 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() {
     if (!this.getElement.value) return
 
     const currentImageContainer = document.createElement('div')
-
     currentImageContainer.innerHTML = this.getElement.value.outerHTML
 
     // Get all img and div within the current image container
     const imgElements = currentImageContainer.getElementsByTagName('img')
     const divElements = currentImageContainer.getElementsByTagName('div')
 
-    // Check if there is exactly one img and no div
+    // If exactly one img and no div, set as base primary image
     if (imgElements.length === 1 && divElements.length === 0) {
-      // Return the source of the only img
-
       this.pageBuilderStateStore.setBasePrimaryImage(imgElements[0].src)
-
       return
     }
 
+    // Otherwise, clear the base primary image
     this.pageBuilderStateStore.setBasePrimaryImage(null)
   }
 
@@ -1476,9 +1644,9 @@ class PageBuilderClass {
    * @param data - JSON string (e.g., '[{"html_code":"...","id":"123","title":"..."}]')
    *               OR HTML string (e.g., '<section data-componentid="123">...</section>')
    */
-  setComponentsFromData(data: string): void {
+  #setComponentsFromData(htmlString: string): void {
     // Auto-detect if input is JSON or HTML
-    const trimmedData = data.trim()
+    const trimmedData = htmlString.trim()
 
     if (trimmedData.startsWith('[') || trimmedData.startsWith('{')) {
       // Looks like JSON - parse as JSON
@@ -1492,7 +1660,7 @@ class PageBuilderClass {
   }
 
   // Private method to parse JSON components and save pageBuilderContentSavedAt to localStorage
-  #parseJSONComponents(jsonData: string): void {
+  async #parseJSONComponents(jsonData: string): Promise<void> {
     try {
       const parsedData = JSON.parse(jsonData)
       let componentsArray: ComponentObject[] = []
@@ -1544,18 +1712,8 @@ class PageBuilderClass {
 
       this.pageBuilderStateStore.setComponents(savedCurrentDesign)
 
-      // Save to localStorage with pageBuilderContentSavedAt using the correct key
-      const dataToSave = {
-        pageBuilderContentSavedAt: parsedData.pageBuilderContentSavedAt || new Date().toISOString(),
-        components: savedCurrentDesign,
-      }
-
-      if (
-        this.getLocalStorageItemName.value &&
-        typeof this.getLocalStorageItemName.value === 'string'
-      ) {
-        localStorage.setItem(this.getLocalStorageItemName.value, JSON.stringify(dataToSave))
-      }
+      await this.clearHtmlSelection()
+      await this.addListenersToEditableElements()
     } catch (error) {
       console.error('Error parsing JSON components:', error)
       this.pageBuilderStateStore.setComponents([])
@@ -1602,37 +1760,60 @@ class PageBuilderClass {
     }
   }
 
-  // Load existing content from HTML when in update mode
-  mountComponentsToDOM(data?: string, injectCustomHTMLSections?: boolean): void {
-    this.pageBuilderStateStore.setComponents([])
-
-    if (!this.pageBuilderStateStore.getConfigPageBuilder) return
-
-    if (injectCustomHTMLSections && data !== undefined) {
-      this.setComponentsFromData(data)
+  /**
+   * Mount Components to DOM
+   * @param passedData - HTML/JSON string to inject (optional)
+   * @param preferLocalStorage - if true, always try localStorage first
+   */
+  mountComponentsToDOM(passedData: string): void {
+    // Save the original content only once, in update mode, and only if passedData is provided
+    // Form type Update
+    if (
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update' &&
+      passedData &&
+      !this.originalComponents
+    ) {
+      this.originalComponents = passedData
     }
 
-    const storedData = this.loadStoredComponentsFromStorage()
+    this.pageBuilderStateStore.setComponents([])
+
+    if (!this.pageBuilderStateStore.getPageBuilderConfig) return
 
+    // Form type Update
     if (
-      this.pageBuilderStateStore.getConfigPageBuilder &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'create'
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
     ) {
-      if (storedData) {
-        this.setComponentsFromData(storedData)
+      if (passedData) {
+        this.#setComponentsFromData(passedData)
+        return
       }
     }
 
+    // Form type Create
+    const localStorageData = this.loadStoredComponentsFromStorage()
+
     if (
-      this.pageBuilderStateStore.getConfigPageBuilder &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'create'
     ) {
-      if (data) {
-        this.setComponentsFromData(data)
+      if (localStorageData) {
+        this.#setComponentsFromData(localStorageData)
+        return
+      }
+
+      // If no localStorage, but passedData exists (for demo), use it
+      if (passedData) {
+        this.#setComponentsFromData(passedData)
+        return
       }
     }
   }
@@ -1646,6 +1827,7 @@ class PageBuilderClass {
   }
 
   async initializeElementStyles(): Promise<void> {
+    if (!this.pageBuilderStateStore.getPageBuilderConfig) return
     await new Promise((resolve) => requestAnimationFrame(resolve))
 
     // handle custom URL
@@ -1655,7 +1837,7 @@ class PageBuilderClass {
     // handle BG opacity
     this.handleBackgroundOpacity(undefined)
     // displayed image
-    this.setBasePrimaryImageFromCurrent()
+    this.setBasePrimaryImageFromSelectedElement()
     // border style
     this.handleBorderStyle(undefined)
     // border width
@@ -1699,5 +1881,3 @@ class PageBuilderClass {
     await this.#syncCurrentClasses()
   }
 }
-
-export default PageBuilderClass

package/src/composables/builderInstance.ts

@@ -0,0 +1,25 @@
+// builderInstance.ts
+import { PageBuilderService } from '../composables/PageBuilderService'
+import { sharedPageBuilderStore } from '../stores/shared-store'
+
+// Singleton instance
+let instance: PageBuilderService | null = null
+
+// Used to create and store the single instance
+export function initPageBuilder(): PageBuilderService {
+  if (!instance) {
+    const pageBuilderStateStore = sharedPageBuilderStore
+    instance = new PageBuilderService(pageBuilderStateStore)
+  }
+  return instance
+}
+
+// Used to access the existing instance anywhere else
+export function getPageBuilder(): PageBuilderService {
+  if (!instance) {
+    throw new Error(
+      'PageBuilderService has not been created. Please call createPageBuilder() first in your App.vue or setup file.',
+    )
+  }
+  return instance
+}

package/src/css/app.css

@@ -357,3 +357,18 @@
     @apply pbx-aspect-square pbx-border pbx-border-gray-200 pbx-cursor-pointer pbx-min-h-[1.5rem] pbx-rounded-sm;
   }
 }
+
+/* p {
+  @apply pbx-font-normal lg:pbx-text-base pbx-text-base;
+} */
+
+a {
+  @apply pbx-text-myPrimaryLinkColor;
+}
+
+h2 {
+  @apply pbx-text-3xl pbx-mt-4 pbx-mb-3 pbx-font-medium;
+}
+h3 {
+  @apply pbx-text-2xl pbx-mt-4 pbx-mb-3 pbx-font-medium;
+}