@myissue/vue-website-page-builder 3.3.56 → 3.3.58

package/src/composables/PageBuilderService.ts

@@ -21,6 +21,7 @@ import type { ComputedRef } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
 import { delay } from './delay'
 import { isEmptyObject } from '../helpers/isEmptyObject'
+import { extractCleanHTMLFromPageBuilder } from './extractCleanHTMLFromPageBuilder'
 
 export class PageBuilderService {
   // Class properties with types
@@ -245,79 +246,6 @@ export class PageBuilderService {
     }
   }
 
-  #handlePageBuilderNotPresent(passedDataComponents: BuilderResourceData) {
-    this.pendingMountData = passedDataComponents
-  }
-
-  async #mountPassedComponentsToDOM(components?: BuilderResourceData): Promise<void> {
-    const config = this.pageBuilderStateStore.getPageBuilderConfig
-    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
-    const localStorageData = this.loadStoredComponentsFromStorage()
-
-    let dataToPass: string
-    if (typeof components === 'string') {
-      dataToPass = components
-    } else if (components !== undefined) {
-      dataToPass = JSON.stringify(components)
-    } else {
-      dataToPass = ''
-    }
-
-    await this.#updateComponentsFromString(dataToPass)
-  }
-
-  async tryMountPendingComponents() {
-    this.pageBuilderStateStore.setIsLoadingGlobal(true)
-    await delay(400)
-
-    // Always clear DOM and store before mounting new resource
-    this.deleteAllComponentsFromDOM()
-    const localStorageData = this.loadStoredComponentsFromStorage()
-
-    const config = this.pageBuilderStateStore.getPageBuilderConfig
-    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
-
-    //
-    if (config) {
-      if (formType === 'update') {
-        //
-        if (localStorageData && typeof localStorageData === 'string') {
-          this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
-        }
-
-        if (this.pendingMountData) {
-          this.#completeBuilderInitialization(this.pendingMountData)
-        }
-
-        // Pending data for mount is null at this stage
-        if (typeof localStorageData === 'string' && !this.pendingMountData) {
-          await this.#updateComponentsFromString(localStorageData)
-          this.#completeBuilderInitialization()
-        }
-      }
-
-      if (formType === 'create') {
-        // Pending data for mount is null at this stage
-        if (typeof localStorageData === 'string') {
-          await this.#updateComponentsFromString(localStorageData)
-          this.#completeBuilderInitialization()
-        }
-      }
-
-      //
-      //
-      //
-      //
-      //
-      // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
-      await nextTick()
-      // Attach event listeners to all editable elements in the Builder
-      await this.#addListenersToEditableElements()
-
-      this.pageBuilderStateStore.setIsRestoring(false)
-      this.pageBuilderStateStore.setIsLoadingGlobal(false)
-    }
-  }
   /**
    * - Entry point for initializing the Page Builder.
    * - Sets the builder as started in the state store.
@@ -351,11 +279,11 @@ export class PageBuilderService {
 
       // Page Builder is not Present in the DOM but Components have been passed to the Builder
       if (passedComponentsArray && !pagebuilder) {
-        this.#handlePageBuilderNotPresent(passedComponentsArray)
+        this.pendingMountData = passedComponentsArray
       }
       // Page Builder is Present in the DOM & Components have been passed to the Builder
       if (pagebuilder) {
-        this.#completeBuilderInitialization(passedComponentsArray)
+        this.completeBuilderInitialization(passedComponentsArray)
       }
 
       // result to end user
@@ -385,45 +313,90 @@ export class PageBuilderService {
     }
   }
 
-  async #completeBuilderInitialization(passedComponentsArray?: BuilderResourceData): Promise<void> {
+  async completeBuilderInitialization(passedComponentsArray?: BuilderResourceData): Promise<void> {
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
+    await delay(400)
+
+    // Always clear DOM and store before mounting new resource
+    this.deleteAllComponentsFromDOM()
+
+    const config = this.pageBuilderStateStore.getPageBuilderConfig
+    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
+
     const localStorageData = this.loadStoredComponentsFromStorage()
 
     // Deselect any selected or hovered elements in the builder UI
     await this.clearHtmlSelection()
 
-    if (passedComponentsArray) {
-      // Prefer components from local storage if available for this resource
-      if (!this.pendingMountData && localStorageData && typeof localStorageData === 'string') {
-        await this.#updateComponentsFromString(localStorageData)
-      } else {
-        // If no local storage is found, use the components array provided by the user
-        await this.#mountPassedComponentsToDOM(passedComponentsArray)
-        this.pendingMountData = null
-      }
-    }
-
     //
     //
     //
-    if (!passedComponentsArray) {
-      // Prefer components from local storage if available for this resource
-      if (localStorageData && typeof localStorageData === 'string') {
-        await this.#updateComponentsFromString(localStorageData)
-      } else {
-        // If no local storage is found, use the components array provided by the user
-        await this.#mountPassedComponentsToDOM([])
+    if (formType === 'update' || formType === 'create') {
+      if (!this.pendingMountData) {
+        // FOCUS ON: passedComponentsArray
+        if (passedComponentsArray && !localStorageData) {
+          await this.#completeMountProcess(JSON.stringify(passedComponentsArray))
+          return
+        }
+        if (passedComponentsArray && localStorageData) {
+          this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
+
+          await this.#completeMountProcess(JSON.stringify(passedComponentsArray))
+          return
+        }
+
+        if (passedComponentsArray && localStorageData) {
+          this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
+
+          await this.#completeMountProcess(JSON.stringify(passedComponentsArray))
+          return
+        }
+
+        if (localStorageData && !passedComponentsArray) {
+          await this.#completeMountProcess(localStorageData)
+          return
+        }
+        if (!passedComponentsArray && !localStorageData) {
+          await this.#completeMountProcess(JSON.stringify([]))
+          return
+        }
+      }
+
+      // FOCUS ON: pendingMountData
+      if (this.pendingMountData) {
+        if (localStorageData) {
+          this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
+          await this.#completeMountProcess(JSON.stringify(this.pendingMountData))
+          this.pendingMountData = null
+          return
+        }
+        if (!localStorageData && passedComponentsArray) {
+          await this.#completeMountProcess(JSON.stringify(this.pendingMountData))
+          this.pendingMountData = null
+          return
+        }
+
+        if (!passedComponentsArray && !localStorageData) {
+          await this.#completeMountProcess(JSON.stringify([]))
+          return
+        }
       }
     }
     //
+  }
 
+  async #completeMountProcess(html: string) {
+    await this.#mountComponentsToDOM(html)
     // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
     await nextTick()
     // Attach event listeners to all editable elements in the Builder
     await this.#addListenersToEditableElements()
-    // Show a global loading indicator while initializing
 
     // Clean up any old localStorage items related to previous builder sessions
     this.deleteOldPageBuilderLocalStorage()
+
+    this.pageBuilderStateStore.setIsRestoring(false)
+    this.pageBuilderStateStore.setIsLoadingGlobal(false)
   }
 
   #applyElementClassChanges(
@@ -476,6 +449,22 @@ export class PageBuilderService {
     return currentCSS
   }
 
+  async globalPageStyles() {
+    const pagebuilder = document.querySelector('#pagebuilder')
+    if (!pagebuilder) return
+
+    // Deselect any selected or hovered elements in the builder UI
+    await this.clearHtmlSelection()
+    //
+    // Set the element in the store
+    this.pageBuilderStateStore.setElement(pagebuilder as HTMLElement)
+
+    // Add the data attribute for styling
+    pagebuilder.setAttribute('data-global-selected', 'true')
+
+    await nextTick()
+  }
+
   handleFontWeight(userSelectedFontWeight?: string): void {
     this.#applyElementClassChanges(
       userSelectedFontWeight,
@@ -860,8 +849,6 @@ export class PageBuilderService {
       // Add prefix if missing
       const prefixedClass = cleanedClass.startsWith('pbx-') ? cleanedClass : 'pbx-' + cleanedClass
 
-      console.log('Adding class:', prefixedClass)
-
       this.getElement.value?.classList.add(prefixedClass)
 
       this.pageBuilderStateStore.setElement(this.getElement.value)
@@ -1275,40 +1262,21 @@ export class PageBuilderService {
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
-    const addedHtmlComponents = ref<string[]>([])
-    // preview current design in external browser tab
-    // iterate over each top-level section component within pagebuilder only
-    pagebuilder.querySelectorAll('section:not(section section)').forEach((section) => {
-      // remove hovered and selected
-
-      // remove hovered
-      const hoveredElement = section.querySelector('[hovered]')
-      if (hoveredElement) {
-        hoveredElement.removeAttribute('hovered')
-      }
-
-      // remove selected
-      const selectedElement = section.querySelector('[selected]')
-      if (selectedElement) {
-        selectedElement.removeAttribute('selected')
-      }
-
-      // push outer html into the array
-      addedHtmlComponents.value.push(section.outerHTML)
-    })
-
-    // stringify added html components
-    const stringifiedComponents = JSON.stringify(addedHtmlComponents.value)
-
-    // commit
-    this.pageBuilderStateStore.setCurrentLayoutPreview(stringifiedComponents)
+    if (pagebuilder) {
+      // Get cleaned HTML from entire builder
+      const cleanedHTML = extractCleanHTMLFromPageBuilder(
+        pagebuilder as HTMLElement,
+        this.pageBuilderStateStore.getPageBuilderConfig
+          ? this.pageBuilderStateStore.getPageBuilderConfig
+          : undefined,
+      )
 
-    // set added html components back to empty array
-    addedHtmlComponents.value = []
+      // Store as array with one string (as your preview expects an array)
+      const previewData = JSON.stringify([cleanedHTML])
 
-    //
+      this.pageBuilderStateStore.setCurrentLayoutPreview(previewData)
+    }
   }
-
   // Helper function to sanitize title for localStorage key
   private sanitizeForLocalStorage(input: string): string {
     return input
@@ -1534,10 +1502,15 @@ export class PageBuilderService {
       })
     })
 
-    // Save to localStorage with pageBuilderContentSavedAt using the correct key
+    const pageSettings = {
+      classes: pagebuilder.className || '',
+      style: pagebuilder.getAttribute('style') || '',
+    }
+
     const dataToSave = {
       components: componentsToSave,
       pageBuilderContentSavedAt: new Date().toISOString(),
+      pageSettings,
     }
 
     const keyForSavingFromDomToLocal = this.getLocalStorageItemName.value
@@ -1546,7 +1519,6 @@ export class PageBuilderService {
       localStorage.setItem(keyForSavingFromDomToLocal, JSON.stringify(dataToSave))
     }
   }
-
   async removeCurrentComponentsFromLocalStorage() {
     this.#updateLocalStorageItemName()
     await nextTick()
@@ -1616,12 +1588,11 @@ export class PageBuilderService {
   }
 
   //
-  async resumeEditingForUpdate() {
+  async resumeEditingFromDraft() {
     this.#updateLocalStorageItemName()
     const config = this.pageBuilderStateStore.getPageBuilderConfig
     const formType = config && config.updateOrCreate && config.updateOrCreate.formType
 
-    if (formType !== 'update') return
     //
     //
     //
@@ -1634,7 +1605,7 @@ export class PageBuilderService {
       if (typeof updateDraftFromLocalStorage === 'string') {
         this.pageBuilderStateStore.setIsLoadingResumeEditing(true)
         await delay(400)
-        await this.#updateComponentsFromString(updateDraftFromLocalStorage)
+        await this.#mountComponentsToDOM(updateDraftFromLocalStorage)
         this.pageBuilderStateStore.setIsLoadingResumeEditing(false)
       }
     }
@@ -1658,7 +1629,7 @@ export class PageBuilderService {
 
       // Restore the original content if available
       if (Array.isArray(this.originalComponents)) {
-        await this.#mountPassedComponentsToDOM(this.originalComponents)
+        await this.#mountComponentsToDOM(JSON.stringify(this.originalComponents))
         this.removeCurrentComponentsFromLocalStorage()
       }
 
@@ -1973,6 +1944,20 @@ export class PageBuilderService {
       .join(' ')
   }
 
+  #convertStyleObjectToString(
+    styleObj: string | Record<string, string> | null | undefined,
+  ): string {
+    if (!styleObj) return ''
+    if (typeof styleObj === 'string') return styleObj
+
+    return Object.entries(styleObj)
+      .map(([key, value]) => {
+        const kebabKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+        return `${kebabKey}: ${value};`
+      })
+      .join(' ')
+  }
+
   /**
    * Parse and set components from JSON or HTML data
    *
@@ -1985,7 +1970,7 @@ 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 #updateComponentsFromString(htmlString: string): Promise<void> {
+  async #mountComponentsToDOM(htmlString: string): Promise<void> {
     // Auto-detect if input is JSON or HTML
     const trimmedData = htmlString.trim()
 
@@ -2003,11 +1988,27 @@ export class PageBuilderService {
     await this.#parseJSONComponents(trimmedData)
   }
 
+  // Private method to parse JSON components and save pageBuilderContentSavedAt to localStorage
   // Private method to parse JSON components and save pageBuilderContentSavedAt to localStorage
   async #parseJSONComponents(jsonData: string): Promise<void> {
     try {
       const parsedData = JSON.parse(jsonData)
       let componentsArray: ComponentObject[] = []
+
+      // Fallback to store-based config if not provided in imported JSON
+      const pageSettings =
+        this.pageBuilderStateStore.getPageBuilderConfig &&
+        this.pageBuilderStateStore.getPageBuilderConfig.pageSettings
+
+      // Restore page-level settings like class and style
+      if (pageSettings) {
+        const pagebuilder = document.querySelector('#pagebuilder') as HTMLElement
+        if (pagebuilder) {
+          pagebuilder.className = pageSettings.classes || ''
+          pagebuilder.setAttribute('style', this.#convertStyleObjectToString(pageSettings.style))
+        }
+      }
+
       // Support both old and new structure
       if (Array.isArray(parsedData)) {
         componentsArray = parsedData
@@ -2024,7 +2025,7 @@ export class PageBuilderService {
           const section = doc.querySelector('section')
 
           if (section) {
-            // Process all elements inside section to add prefix to classes
+            // Prefix Tailwind classes
             section.querySelectorAll('[class]').forEach((el) => {
               el.setAttribute(
                 'class',
@@ -2032,7 +2033,7 @@ export class PageBuilderService {
               )
             })
 
-            // Ensure data-componentid exists
+            // Ensure IDs & titles
             if (!section.hasAttribute('data-componentid')) {
               const newId = uuidv4()
               section.setAttribute('data-componentid', newId)
@@ -2041,24 +2042,20 @@ export class PageBuilderService {
               component.id = section.getAttribute('data-componentid')!
             }
 
-            // Ensure data-component-title exists
             const title = component.title || 'Untitled Component'
             section.setAttribute('data-component-title', title)
             component.title = title
 
-            // Update html_code with modified section
+            // Update html_code
             component.html_code = section.outerHTML
           }
-
           return component
         })
       }
 
       this.pageBuilderStateStore.setComponents(savedCurrentDesign)
 
-      // 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()
     } catch (error) {
       console.error('Error parsing JSON components:', error)
@@ -2071,12 +2068,37 @@ export class PageBuilderService {
       const parser = new DOMParser()
       const doc = parser.parseFromString(htmlData, 'text/html')
 
-      // Select all <section> elements (with or without data-componentid)
+      const importedPageBuilder = doc.querySelector('#pagebuilder') as HTMLElement | null
+      const livePageBuilder = document.querySelector('#pagebuilder') as HTMLElement | null
+
+      if (livePageBuilder) {
+        if (importedPageBuilder) {
+          livePageBuilder.className = importedPageBuilder.className || ''
+          const style = importedPageBuilder.getAttribute('style')
+          if (style !== null) {
+            livePageBuilder.setAttribute('style', style)
+          } else {
+            livePageBuilder.removeAttribute('style')
+          }
+        } else {
+          // Fallback: inject settings from store if not present in HTML
+          const fallbackSettings = this.pageBuilderStateStore.getPageBuilderConfig?.pageSettings
+          if (fallbackSettings) {
+            livePageBuilder.className = fallbackSettings.classes || ''
+            livePageBuilder.setAttribute(
+              'style',
+              this.#convertStyleObjectToString(fallbackSettings.style),
+            )
+          }
+        }
+      }
+
+      // Select all <section> elements
       const sectionElements = doc.querySelectorAll('section')
 
       const extractedSections: ComponentObject[] = []
       sectionElements.forEach((section) => {
-        // Process all elements inside section to add prefix to classes
+        // Prefix all classes inside section
         section.querySelectorAll('[class]').forEach((el) => {
           el.setAttribute(
             'class',
@@ -2109,11 +2131,9 @@ export class PageBuilderService {
 
       this.pageBuilderStateStore.setComponents(extractedSections)
 
-      // Deselect any selected or hovered elements in the builder UI
+      // Clear selections and re-bind events
       await this.clearHtmlSelection()
-      // 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()
     } catch (error) {
       console.error('Error parsing HTML components:', error)

package/src/composables/extractCleanHTMLFromPageBuilder.ts

@@ -0,0 +1,58 @@
+import type { PageBuilderConfig } from '@/types'
+
+export function extractCleanHTMLFromPageBuilder(
+  pagebuilder: HTMLElement | null,
+  config?: PageBuilderConfig,
+): string {
+  if (!pagebuilder) {
+    console.warn('No valid pagebuilder element passed')
+    return ''
+  }
+
+  const clone = pagebuilder.cloneNode(true) as HTMLElement
+  clone.removeAttribute('id')
+
+  // Remove custom attributes
+  const elementsWithAttrs = clone.querySelectorAll<HTMLElement>(
+    '[data-componentid], [data-component-title], #page-builder-editor-editable-area',
+  )
+
+  elementsWithAttrs.forEach((el) => {
+    el.removeAttribute('data-componentid')
+    el.removeAttribute('data-component-title')
+    if (el.id === 'page-builder-editor-editable-area') {
+      el.removeAttribute('id')
+    }
+  })
+
+  if (config && config.pageSettings && typeof config.pageSettings.imageUrlPrefix === 'string') {
+    const imageUrlPrefix = config.pageSettings.imageUrlPrefix
+    const imgs = clone.querySelectorAll<HTMLImageElement>('img')
+    imgs.forEach((img) => {
+      const src = img.getAttribute('src') || ''
+      if (
+        !src.startsWith('http') &&
+        imageUrlPrefix && // extra safety
+        !src.startsWith(imageUrlPrefix)
+      ) {
+        img.setAttribute('src', imageUrlPrefix + src.replace(/^\/+/, ''))
+      }
+    })
+  }
+
+  // Recursively remove all comment nodes
+  const removeComments = (node: Node): void => {
+    for (let i = node.childNodes.length - 1; i >= 0; i--) {
+      const child = node.childNodes[i]
+      if (child.nodeType === Node.COMMENT_NODE) {
+        node.removeChild(child)
+      } else if (child.nodeType === Node.ELEMENT_NODE) {
+        removeComments(child)
+      }
+    }
+  }
+
+  removeComments(clone)
+
+  return clone.outerHTML
+}

package/src/css/app.css

@@ -550,3 +550,10 @@
   border-radius: 25px;
   border: none;
 }
+
+#pagebuilder[data-global-selected] {
+  outline: 3px dashed #b91010 !important;
+  outline-offset: -2px !important;
+  box-shadow: 0 0 0 2px #fbbf24;
+  /* Or any style you want */
+}

package/src/types/index.ts

@@ -201,6 +201,12 @@ export interface PageBuilderUser {
   image: string
 }
 
+export interface PageSettings {
+  classes: string
+  style?: Record<string, string>
+  imageUrlPrefix?: string
+}
+
 // Page Builder Configuration interface
 export interface PageBuilderConfig {
   updateOrCreate: {
@@ -209,7 +215,7 @@ export interface PageBuilderConfig {
   }
   pageBuilderLogo?: { src: string } | null
   resourceData?: { title: string; id?: number } | null
-  userForPageBuilder?: { name: string } | null
+  userForPageBuilder?: PageBuilderUser
   [key: string]: unknown
   userSettings?: {
     theme?: 'light' | 'dark' | 'auto'
@@ -221,6 +227,7 @@ export interface PageBuilderConfig {
     brandColor?: string
     [key: string]: unknown
   } | null
+  pageSettings?: PageSettings
 }
 // Tailwind utility interfaces
 export interface TailwindColors {