@myissue/vue-website-page-builder 3.3.96 → 3.3.98

package/src/services/PageBuilderService.ts

@@ -984,7 +984,6 @@ export class PageBuilderService {
     await this.handleAutoSave()
   }
 
-  private historyIndex: number = -1
   private getHistoryBaseKey(): string | null {
     return this.getLocalStorageItemName.value
   }
@@ -993,7 +992,8 @@ export class PageBuilderService {
     const baseKey = this.getHistoryBaseKey()
     if (baseKey) {
       const history = LocalStorageManager.getHistory(baseKey)
-      this.historyIndex = history.length - 1
+      this.pageBuilderStateStore.setHistoryIndex(history.length - 1)
+      this.pageBuilderStateStore.setHistoryLength(history.length)
     }
   }
 
@@ -1043,9 +1043,11 @@ export class PageBuilderService {
   /**
    * Manually saves the current page builder content to local storage.
    */
-  public handleManualSave = async () => {
+  public handleManualSave = async (doNoClearHTML?: boolean) => {
     this.pageBuilderStateStore.setIsSaving(true)
-    this.clearHtmlSelection()
+    if (!doNoClearHTML) {
+      this.clearHtmlSelection()
+    }
     this.startEditing()
     this.saveDomComponentsToLocalStorage()
     await delay(300)
@@ -1458,9 +1460,9 @@ export class PageBuilderService {
     if (!baseKey) return
 
     const history = LocalStorageManager.getHistory(baseKey)
-    if (history.length > 1 && this.historyIndex > 0) {
-      this.historyIndex--
-      const data = history[this.historyIndex]
+    if (history.length > 1 && this.pageBuilderStateStore.getHistoryIndex > 0) {
+      this.pageBuilderStateStore.setHistoryIndex(this.pageBuilderStateStore.getHistoryIndex - 1)
+      const data = history[this.pageBuilderStateStore.getHistoryIndex]
       const htmlString = this.renderComponentsToHtml(data.components)
       await this.mountComponentsToDOM(htmlString)
     }
@@ -1474,9 +1476,9 @@ export class PageBuilderService {
     if (!baseKey) return
 
     const history = LocalStorageManager.getHistory(baseKey)
-    if (history.length > 0 && this.historyIndex < history.length - 1) {
-      this.historyIndex++
-      const data = history[this.historyIndex]
+    if (history.length > 0 && this.pageBuilderStateStore.getHistoryIndex < history.length - 1) {
+      this.pageBuilderStateStore.setHistoryIndex(this.pageBuilderStateStore.getHistoryIndex + 1)
+      const data = history[this.pageBuilderStateStore.getHistoryIndex]
       const htmlString = this.renderComponentsToHtml(data.components)
       await this.mountComponentsToDOM(htmlString)
     }
@@ -1632,7 +1634,7 @@ export class PageBuilderService {
    * Reorders the currently selected component up or down in the component list.
    * @param {number} direction - The direction to move the component (-1 for up, 1 for down).
    */
-  public reorderComponent(direction: number): void {
+  public async reorderComponent(direction: number): Promise<void> {
     if (!this.getComponents.value || !this.getComponent.value) return
 
     if (this.getComponents.value.length <= 1) return
@@ -1660,6 +1662,74 @@ export class PageBuilderService {
     // Move the component to the new position in the array.
     this.getComponents.value.splice(currentIndex, 1)
     this.getComponents.value.splice(newIndex, 0, componentToMove)
+
+    // Wait for the DOM to update after reordering
+    await nextTick()
+
+    // Scroll to the moved component
+    const pageBuilderWrapper = document.querySelector(
+      '#page-builder-wrapper',
+    ) as HTMLElement | null
+    const movedComponentElement = pageBuilderWrapper?.querySelector(
+      `section[data-componentid="${componentToMove.id}"]`,
+    ) as HTMLElement
+
+    if (movedComponentElement) {
+      // Apply highlight to the moved element
+      movedComponentElement.classList.add('pbx-reorder-highlight')
+
+      // Highlight its new neighbors (if they exist)
+      const prevSibling = movedComponentElement.previousElementSibling as HTMLElement
+      const nextSibling = movedComponentElement.nextElementSibling as HTMLElement
+
+      if (prevSibling && prevSibling.tagName === 'SECTION') {
+        prevSibling.classList.add('pbx-sibling-highlight')
+      }
+      if (nextSibling && nextSibling.tagName === 'SECTION') {
+        nextSibling.classList.add('pbx-sibling-highlight')
+      }
+
+      if (pageBuilderWrapper) {
+        // Scroll to the moved component
+        const topPos = movedComponentElement.offsetTop - pageBuilderWrapper.offsetTop
+        pageBuilderWrapper.scrollTop = topPos - pageBuilderWrapper.clientHeight / 2
+
+        // Remove highlights after a delay
+        setTimeout(() => {
+          movedComponentElement.classList.remove('pbx-reorder-highlight')
+          if (prevSibling && prevSibling.tagName === 'SECTION') {
+            prevSibling.classList.remove('pbx-sibling-highlight')
+          }
+          if (nextSibling && nextSibling.tagName === 'SECTION') {
+            nextSibling.classList.remove('pbx-sibling-highlight')
+          }
+        }, 200)
+      }
+    }
+  }
+
+  /**
+   * Checks if the currently selected component can be moved up.
+   * @returns {boolean} True if the component can be moved up, false otherwise.
+   */
+  public canMoveUp(): boolean {
+    if (!this.getComponents.value || !this.getComponent.value) return false
+    const currentIndex = this.getComponents.value.findIndex(
+      (component) => component.id === this.getComponent.value?.id,
+    )
+    return currentIndex > 0
+  }
+
+  /**
+   * Checks if the currently selected component can be moved down.
+   * @returns {boolean} True if the component can be moved down, false otherwise.
+   */
+  public canMoveDown(): boolean {
+    if (!this.getComponents.value || !this.getComponent.value) return false
+    const currentIndex = this.getComponents.value.findIndex(
+      (component) => component.id === this.getComponent.value?.id,
+    )
+    return currentIndex < this.getComponents.value.length - 1
   }
 
   /**
@@ -1857,6 +1927,9 @@ export class PageBuilderService {
     pagebuilder.querySelectorAll('section[data-componentid]').forEach((section) => {
       const sanitizedSection = this.cloneAndRemoveSelectionAttributes(section as HTMLElement)
 
+      // Remove the data-componentid attribute
+      sanitizedSection.removeAttribute('data-componentid')
+
       componentsToSave.push({
         html_code: sanitizedSection.outerHTML,
         title: sanitizedSection.getAttribute('data-component-title') || 'Untitled Component',
@@ -1875,7 +1948,29 @@ export class PageBuilderService {
     }
 
     const baseKey = this.getHistoryBaseKey()
+
     if (baseKey) {
+      const currentDataRaw = localStorage.getItem(baseKey)
+      if (currentDataRaw) {
+        const currentData = JSON.parse(currentDataRaw)
+
+        // Compare components
+        const currentComponents = currentData.components || []
+        const newComponents = dataToSave.components || []
+
+        const hasChanges = newComponents.some((newComponent, index) => {
+          const currentComponent = currentComponents[index]
+          return (
+            !currentComponent || // New component added
+            currentComponent.html_code !== newComponent.html_code // Component HTML changed
+          )
+        })
+
+        if (!hasChanges) {
+          return
+        }
+      }
+
       localStorage.setItem(baseKey, JSON.stringify(dataToSave))
       let history = LocalStorageManager.getHistory(baseKey)
 
@@ -1890,15 +1985,16 @@ export class PageBuilderService {
         }
       }
 
-      if (this.historyIndex < history.length - 1) {
-        history = history.slice(0, this.historyIndex + 1)
+      if (this.pageBuilderStateStore.getHistoryIndex < history.length - 1) {
+        history = history.slice(0, this.pageBuilderStateStore.getHistoryIndex + 1)
       }
       history.push(dataToSave)
       if (history.length > 10) {
         history = history.slice(history.length - 10)
       }
       localStorage.setItem(baseKey + '-history', JSON.stringify(history))
-      this.historyIndex = history.length - 1
+      this.pageBuilderStateStore.setHistoryIndex(history.length - 1)
+      this.pageBuilderStateStore.setHistoryLength(history.length)
     }
   }
   /**
@@ -2524,6 +2620,134 @@ export class PageBuilderService {
     }
   }
 
+  /**
+   * Applies modified components by mounting them to the DOM and attaching listeners.
+   * @param htmlString - The HTML string to apply
+   * @returns {Promise<string | null>} - Returns error message if failed, otherwise null
+   */
+  public async applyModifiedHTML(htmlString: string): Promise<string | null> {
+    if (!htmlString || (typeof htmlString === 'string' && htmlString.length === 0)) {
+      return 'No HTML content was provided. Please ensure a valid HTML string is passed.'
+    }
+
+    // Check if the htmlString contains any <section> tags
+    if (/<section[\s>]/i.test(htmlString)) {
+      return 'Error: The <section> tag cannot be used as it is already included inside this component.'
+    }
+
+    const tempDiv = document.createElement('div')
+    tempDiv.innerHTML = htmlString.trim()
+
+    const parsedElement = tempDiv.firstElementChild as HTMLElement | null
+
+    if (!parsedElement) {
+      return 'Could not parse element from HTML string.'
+    }
+
+    // Replace the actual DOM element
+    const oldElement = this.pageBuilderStateStore.getElement
+
+    if (oldElement && oldElement.parentElement) {
+      oldElement.replaceWith(parsedElement)
+
+      // Update the element in the store (now referencing the new one)
+      this.pageBuilderStateStore.setElement(parsedElement)
+    }
+
+    await this.addListenersToEditableElements()
+    await nextTick()
+    return null
+  }
+
+  private validateMountingHTML(
+    htmlString: string,
+    options?: { logError?: boolean },
+  ): string | null {
+    // Trim HTML string
+    const trimmedData = htmlString.trim()
+    const openingSectionMatches = htmlString.match(/<section\b[^>]*>/gi) || []
+    const closingSectionMatches = htmlString.match(/<\/section>/gi) || []
+
+    if (!htmlString || htmlString.trim().length === 0) {
+      const error = 'No HTML content was provided. Please ensure a valid HTML string is passed.'
+      if (options && options.logError) {
+        console.error(error)
+        // Behavior
+        return error
+      }
+      // default behavior
+      return error
+    }
+
+    if (openingSectionMatches.length !== closingSectionMatches.length) {
+      const error =
+        'Uneven <section> tags detected in the provided HTML. Each component must be wrapped in its own properly paired <section>...</section>. ' +
+        'Ensure that all <section> tags have a matching closing </section> tag.'
+
+      if (options && options.logError) {
+        console.error(error)
+        return error
+      }
+
+      return error
+    }
+
+    const tempDiv = document.createElement('div')
+    tempDiv.innerHTML = trimmedData
+    const nestedSection = tempDiv.querySelector('section section')
+    if (nestedSection) {
+      const error =
+        'Nested <section> tags are not allowed. Please ensure that no <section> is placed inside another <section>.'
+      if (options && options.logError) {
+        console.error(error)
+        return error
+      }
+      return error
+    }
+
+    // Return error since JSON data has been passed to mount HTML to DOM
+    if (trimmedData.startsWith('[') || trimmedData.startsWith('{')) {
+      const error =
+        'Brackets [] or curly braces {} are not valid HTML. They are used for data formats like JSON.'
+      if (options && options.logError) {
+        console.error(error)
+        return error
+      }
+
+      return error
+    }
+
+    return null
+  }
+
+  /**
+   * Applies modified components by mounting them to the DOM and attaching listeners.
+   * @param htmlString - The HTML string to apply
+   * @returns {Promise<string | null>} - Returns error message if failed, otherwise null
+   */
+  public async applyModifiedComponents(htmlString: string): Promise<string | null> {
+    // Trim HTML string
+    const trimmedData = htmlString.trim()
+
+    const openingSectionMatches = htmlString.match(/<section\b[^>]*>/gi) || []
+
+    if (openingSectionMatches.length === 0) {
+      const error = 'No <section> tags found. Each component must be wrapped in a <section> tag.'
+      if (error) {
+        return error
+      }
+    }
+
+    const validationError = this.validateMountingHTML(trimmedData)
+    if (validationError) return validationError
+
+    // also fixed to use `trimmedData`
+    await this.mountComponentsToDOM(trimmedData)
+    await this.addListenersToEditableElements()
+    await nextTick()
+    return null
+  }
+
   /**
    * Mounts builder components to the DOM from an HTML string.
    *
@@ -2542,13 +2766,11 @@ export class PageBuilderService {
     htmlString: string,
     usePassedPageSettings?: boolean,
   ): Promise<void> {
+    // Trim HTML string
     const trimmedData = htmlString.trim()
 
-    // Return error since JSON data has been passed to mount HTML to DOM
-    if (trimmedData.startsWith('[') || trimmedData.startsWith('{')) {
-      console.error('Error: JSON data passed to mountComponentsToDOM for the Page Builder Package.')
-      return
-    }
+    const validationError = this.validateMountingHTML(trimmedData, { logError: true })
+    if (validationError) return
 
     // HTML string
     try {
@@ -2787,57 +3009,6 @@ export class PageBuilderService {
     }
   }
 
-  /**
-   * Applies modified components by mounting them to the DOM and attaching listeners.
-   * @param htmlString - The HTML string to apply
-   * @returns {Promise<string | null>} - Returns error message if failed, otherwise null
-   */
-  public async applyModifiedHTML(htmlString: string): Promise<string | null> {
-    if (!htmlString || (typeof htmlString === 'string' && htmlString.length === 0)) {
-      return 'No HTML content was provided. Please ensure a valid HTML string is passed.'
-    }
-
-    const tempDiv = document.createElement('div')
-    tempDiv.innerHTML = htmlString.trim()
-
-    const parsedElement = tempDiv.firstElementChild as HTMLElement | null
-
-    if (!parsedElement) {
-      return 'Could not parse element from HTML string.'
-    }
-
-    // Replace the actual DOM element
-    const oldElement = this.pageBuilderStateStore.getElement
-
-    if (oldElement && oldElement.parentElement) {
-      oldElement.replaceWith(parsedElement)
-
-      // Update the element in the store (now referencing the new one)
-      this.pageBuilderStateStore.setElement(parsedElement)
-    }
-
-    await this.addListenersToEditableElements()
-    await nextTick()
-    return null
-  }
-
-  /**
-   * Applies modified components by mounting them to the DOM and attaching listeners.
-   * @param htmlString - The HTML string to apply
-   * @returns {Promise<string | null>} - Returns error message if failed, otherwise null
-   */
-  public async applyModifiedComponents(htmlString: string): Promise<string | null> {
-    if (!htmlString || (typeof htmlString === 'string' && htmlString.length === 0)) {
-      return 'No HTML content was provided. Please ensure a valid HTML string is passed.'
-    }
-
-    await this.mountComponentsToDOM(htmlString)
-
-    await this.addListenersToEditableElements()
-    await nextTick()
-    return null
-  }
-
   /**
    * Initializes the styles for the currently selected element.
    */

package/src/stores/page-builder-state.ts

@@ -65,6 +65,8 @@ interface PageBuilderState {
   isResumeEditing: boolean
   isRestoring: boolean
   currentLanguage: string | null
+  historyIndex: number
+  historyLength: number
 }
 
 export const usePageBuilderStateStore = defineStore('pageBuilderState', {
@@ -125,6 +127,8 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     isResumeEditing: false,
     isRestoring: false,
     currentLanguage: null,
+    historyIndex: -1,
+    historyLength: 0,
   }),
   getters: {
     // Core Page Builder Getters
@@ -273,6 +277,8 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     getIsLoadingResumeEditing: (state: PageBuilderState): boolean => state.isResumeEditing,
     getIsRestoring: (state: PageBuilderState): boolean => state.isRestoring,
     getCurrentLanguage: (state: PageBuilderState): string | null => state.currentLanguage,
+    getHistoryIndex: (state: PageBuilderState): number => state.historyIndex,
+    getHistoryLength: (state: PageBuilderState): number => state.historyLength,
   },
   actions: {
     setComponentArrayAddMethod(payload: string | null): void {
@@ -473,5 +479,11 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     setCurrentLanguage(payload: string): void {
       this.currentLanguage = payload
     },
+    setHistoryIndex(payload: number): void {
+      this.historyIndex = payload
+    },
+    setHistoryLength(payload: number): void {
+      this.historyLength = payload
+    },
   },
 })

package/src/tests/DefaultComponents/DefaultBuilderComponents.vue

@@ -147,7 +147,7 @@ const getSvgPreview = (title: string) => {
             v-for="category in categories"
             :key="category"
             @click="selectedCategory = category"
-            class="pbx-mySecondaryButton pbx-px-2 pbx-text-xs"
+            class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
             :class="{ active: selectedCategory === category }"
           >
             {{ translate(category) }}

package/src/tests/PageBuilderTest.vue

@@ -3,7 +3,7 @@ import FullWidthElement from '../Components/Layouts/FullWidthElement.vue'
 import PageBuilder from '../PageBuilder/PageBuilder.vue'
 import DemoMediaLibraryComponentTest from '../tests/TestComponents/DemoMediaLibraryComponentTest.vue'
 import DemoBuilderComponentsTest from '../tests/TestComponents/DemoBuilderComponentsTest.vue'
-import { onMounted, computed, watch } from 'vue'
+import { computed, watch } from 'vue'
 import componentsArray from '../tests/componentsArray.test.json'
 import { getPageBuilder } from '../composables/builderInstance'
 import { useTranslations } from '../composables/useTranslations'

package/src/tests/componentsArray.test.json

@@ -1,61 +1,61 @@
 [
   {
-    "html_code": "<section data-componentid=\"ba0e9774-3779-467c-9c9f-5c95dd47fa6d\" data-component-title=\"Header H2\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-text-6xl lg:pbx-text-8xl pbx-font-medium\"><h2>{{ translate('Demo Content') }}</h2></div></div></div></section>",
+    "html_code": "<section data-component-title=\"Header H2\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-text-6xl lg:pbx-text-8xl pbx-font-medium\"><h2>{{ translate('Demo Content') }}</h2></div></div></div></section>",
     "id": "ba0e9774-3779-467c-9c9f-5c95dd47fa6d",
     "title": "Header H2"
   },
   {
-    "html_code": "<section data-componentid=\"d9fe6bdb-60df-45e4-bed5-1a6f8edf28e5\" data-component-title=\"Text\">\n    <div class=\"pbx-relative pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n    <div><p>{{ translate('Demo Description') }}</p></div>\n    </div>\n    </div>\n    </section>",
+    "html_code": "<section data-component-title=\"Text\">\n    <div class=\"pbx-relative pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n    <div><p>{{ translate('Demo Description') }}</p></div>\n    </div>\n    </div>\n    </section>",
     "id": "d9fe6bdb-60df-45e4-bed5-1a6f8edf28e5",
     "title": "Text"
   },
   {
-    "html_code": "<section data-componentid=\"0bb012a0-631a-497f-9b7f-832313b64a2b\" data-component-title=\"Three Vertical Images\">\n<div class=\"pbx-w-full md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2 pbx-bg-black\"><div class=\"pbx-mx-auto pbx-max-w-7xl pbx-m\"><div class=\"pbx-myPrimaryGap pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-3 lg:pbx-grid-cols-3\"> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16]  pbx-rounded-tl-full\" src=\"https://images.unsplash.com/photo-1632765866070-3fadf25d3d5b?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"b2fb2e61-c916-4195-9cd2-c1d25747b4f7\">  </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16]  pbx-rounded-full\" src=\"https://images.unsplash.com/photo-1542513217-0b0eedf7005d?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"fdf36a14-f7ef-4025-942f-c87b20b18005\">  </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16]  pbx-rounded-br-full\" src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"618a74a7-5d41-4dce-937c-130dd7490569\"></div></div> </div></div>\n</section>",
+    "html_code": "<section data-component-title=\"Three Vertical Images\">\n<div class=\"pbx-w-full md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2 pbx-bg-black\"><div class=\"pbx-mx-auto pbx-max-w-7xl pbx-m\"><div class=\"pbx-myPrimaryGap pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-3 lg:pbx-grid-cols-3\"> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16]  pbx-rounded-tl-full\" src=\"https://images.unsplash.com/photo-1632765866070-3fadf25d3d5b?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"b2fb2e61-c916-4195-9cd2-c1d25747b4f7\">  </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16]  pbx-rounded-full\" src=\"https://images.unsplash.com/photo-1542513217-0b0eedf7005d?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"fdf36a14-f7ef-4025-942f-c87b20b18005\">  </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16]  pbx-rounded-br-full\" src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"618a74a7-5d41-4dce-937c-130dd7490569\"></div></div> </div></div>\n</section>",
     "id": "0bb012a0-631a-497f-9b7f-832313b64a2b",
     "title": "Three Vertical Images"
   },
   {
-    "html_code": "<section data-componentid=\"cd7e27ac-b152-4714-a5f7-5ad660f183bf\" data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-mt-6 pbx-font-medium pbx-text-2xl lg:pbx-text-4xl\"><h3>{{ translate('Demo Title') }}</h3></div></div></div></section>",
+    "html_code": "<section data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-mt-6 pbx-font-medium pbx-text-2xl lg:pbx-text-4xl\"><h3>{{ translate('Demo Title') }}</h3></div></div></div></section>",
     "id": "cd7e27ac-b152-4714-a5f7-5ad660f183bf",
     "title": "Header H3"
   },
   {
-    "html_code": "<section data-componentid=\"b1e75d09-0e72-4c61-a207-a97277cbbfed\" data-component-title=\"Text\">\n    <div class=\"pbx-relative pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n    <div><p>{{ translate('Demo Description Two') }}</p></div>\n    </div>\n    </div>\n    </section>",
+    "html_code": "<section data-component-title=\"Text\">\n    <div class=\"pbx-relative pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n    <div><p>{{ translate('Demo Description Two') }}</p></div>\n    </div>\n    </div>\n    </section>",
     "id": "b1e75d09-0e72-4c61-a207-a97277cbbfed",
     "title": "Text"
   },
   {
-    "html_code": "<section data-componentid=\"d3b5a3e4-29a3-4b03-88b6-1f77d319af74\" data-component-title=\"Two Vertical Images\">\n<div class=\"pbx-w-full md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-mx-auto pbx-max-w-7xl\"><div class=\"pbx-myPrimaryGap pbx-grid pbx-grid-cols-2 sm:pbx-grid-cols-2 lg:pbx-grid-cols-2\"> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] \" src=\"https://images.unsplash.com/photo-1592966719124-2ca2978ba325?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxraW5mb2xrfGVufDB8fHx8MTc0OTgzMTAzM3ww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"536340a5-c7e1-479d-a2ae-a85e6dacc2df\">  </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] \" src=\"https://images.unsplash.com/photo-1549298222-1c31e8915347?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxtYWdhemluZSUyMGZhc2hpb258ZW58MHx8fHwxNzQ5ODMxNTEwfDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"41655496-4742-4cc6-bc3c-abe7c2b241fb\">  </div>   </div> </div> </div>\n</section>",
+    "html_code": "<section data-component-title=\"Two Vertical Images\">\n<div class=\"pbx-w-full md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-mx-auto pbx-max-w-7xl\"><div class=\"pbx-myPrimaryGap pbx-grid pbx-grid-cols-2 sm:pbx-grid-cols-2 lg:pbx-grid-cols-2\"> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] \" src=\"https://images.unsplash.com/photo-1592966719124-2ca2978ba325?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxraW5mb2xrfGVufDB8fHx8MTc0OTgzMTAzM3ww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"536340a5-c7e1-479d-a2ae-a85e6dacc2df\">  </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] \" src=\"https://images.unsplash.com/photo-1549298222-1c31e8915347?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxtYWdhemluZSUyMGZhc2hpb258ZW58MHx8fHwxNzQ5ODMxNTEwfDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"41655496-4742-4cc6-bc3c-abe7c2b241fb\">  </div>   </div> </div> </div>\n</section>",
     "id": "d3b5a3e4-29a3-4b03-88b6-1f77d319af74",
     "title": "Two Vertical Images"
   },
   {
-    "html_code": "<section data-componentid=\"f164929b-4460-4b17-9933-119b47e8bbef\" data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-mt-6 pbx-font-medium pbx-text-2xl lg:pbx-text-4xl\"><h3>{{ translate('Demo Title Two') }}</h3></div></div></div></section>",
+    "html_code": "<section data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-mt-6 pbx-font-medium pbx-text-2xl lg:pbx-text-4xl\"><h3>{{ translate('Demo Title Two') }}</h3></div></div></div></section>",
     "id": "f164929b-4460-4b17-9933-119b47e8bbef",
     "title": "Header H3"
   },
   {
-    "html_code": "<section data-componentid=\"fa721207-2444-4892-9de3-5260d576a34b\" data-component-title=\"Text\">\n    <div class=\"pbx-relative pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n    <div class=\"\"><p>{{ translate('Demo Description Three') }}</p></div>\n    </div>\n    </div>\n    </section>",
+    "html_code": "<section data-component-title=\"Text\">\n    <div class=\"pbx-relative pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n    <div class=\"\"><p>{{ translate('Demo Description Three') }}</p></div>\n    </div>\n    </div>\n    </section>",
     "id": "fa721207-2444-4892-9de3-5260d576a34b",
     "title": "Text"
   },
   {
-    "html_code": "<section data-componentid=\"33a26684-eb95-43c9-adb4-d7bce0ca60f7\" data-component-title=\"YouTube Video\">\n    <div class=\"pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl pbx-w-full pbx-pt-6 pbx-pb-6\">\n    <div id=\"youtube-video\" class=\"pbx-w-full pbx-aspect-video pbx-p-4\">\n\n    <iframe frameborder=\"0\" allowfullscreen=\"\" class=\"pbx-w-full pbx-aspect-video\" src=\"https://www.youtube.com/embed/pJvwV1Fm0vU\" allow=\"accelerometer; autoplay; clipboard-write;\">\n    </iframe>\n    </div>\n    </div>\n    </div>\n    </section>",
+    "html_code": "<section data-component-title=\"YouTube Video\">\n    <div class=\"pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl pbx-w-full pbx-pt-6 pbx-pb-6\">\n    <div id=\"youtube-video\" class=\"pbx-w-full pbx-aspect-video pbx-p-4\">\n\n    <iframe frameborder=\"0\" allowfullscreen=\"\" class=\"pbx-w-full pbx-aspect-video\" src=\"https://www.youtube.com/embed/pJvwV1Fm0vU\" allow=\"accelerometer; autoplay; clipboard-write;\">\n    </iframe>\n    </div>\n    </div>\n    </div>\n    </section>",
     "id": "33a26684-eb95-43c9-adb4-d7bce0ca60f7",
     "title": "YouTube Video"
   },
   {
-    "html_code": "<section data-componentid=\"de2208e1-5b65-4302-8ffb-b9beb7d192d7\" title=\"Header H3\" data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-text-2xl lg:pbx-text-4xl pbx-font-medium\"><h3>{{ translate('Demo Title Three') }}</h3></div></div></div></section>",
+    "html_code": "<section data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-text-2xl lg:pbx-text-4xl pbx-font-medium\"><h3>{{ translate('Demo Title Three') }}</h3></div></div></div></section>",
     "id": "de2208e1-5b65-4302-8ffb-b9beb7d192d7",
     "title": "Header H3"
   },
   {
-    "html_code": "<section data-componentid=\"e9a5c794-5972-473d-8181-af4345cbaabe\" title=\"Text\" data-component-title=\"Text\">\n    <div class=\"pbx-relative pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n    <div><p>{{ translate('Demo Description Four') }}</p><p></p></div>\n    </div>\n    </div>\n    </section>",
+    "html_code": "<section data-component-title=\"Text\">\n    <div class=\"pbx-relative pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n    <div><p>{{ translate('Demo Description Four') }}</p><p></p></div>\n    </div>\n    </div>\n    </section>",
     "id": "e9a5c794-5972-473d-8181-af4345cbaabe",
     "title": "Text"
   },
   {
-    "html_code": "<section data-componentid=\"7bcda060-8ed5-482f-bcf4-aa6bd7fdb193\" title=\"Six Square Images Grid\" data-component-title=\"Six Square Images Grid\">\n<div class=\"pbx-w-full md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2 pbx-rounded-tr-full pbx-bg-yellow-100 pbx-rounded-bl-full\">\n<div class=\"pbx-mx-auto pbx-max-w-7xl\">\n<div class=\"pbx-grid pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-myPrimaryGap\">\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1616837874254-8d5aaa63e273?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxOXx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1MDR8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1608042314453-ae338d80c427?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyfHxqZXdlcmx5fGVufDB8fHx8MTc1MTAyMTUwNHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1621939745912-aad97fd3a34d?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw1MXx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1NDN8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square  pbx-object-bottom\" src=\"https://images.unsplash.com/photo-1617038220319-276d3cfab638?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw1fHxqZXdlcmx5fGVufDB8fHx8MTc1MTAyMTUwNHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square  pbx-object-bottom\" src=\"https://images.unsplash.com/photo-1594924571793-f6517415f594?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw0Nnx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1Mjd8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square  pbx-object-top\" src=\"https://images.unsplash.com/photo-1683099869102-bcf8791eb0e5?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjV8fGpld2VybHl8ZW58MHx8fHwxNzUxMDIxNTc4fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n</div>\n</div>\n</div>\n</section>",
+    "html_code": "<sectio data-component-title=\"Six Square Images Grid\">\n<div class=\"pbx-w-full md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2 pbx-rounded-tr-full pbx-bg-yellow-100 pbx-rounded-bl-full\">\n<div class=\"pbx-mx-auto pbx-max-w-7xl\">\n<div class=\"pbx-grid pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-myPrimaryGap\">\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1616837874254-8d5aaa63e273?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxOXx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1MDR8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1608042314453-ae338d80c427?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyfHxqZXdlcmx5fGVufDB8fHx8MTc1MTAyMTUwNHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1621939745912-aad97fd3a34d?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw1MXx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1NDN8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square  pbx-object-bottom\" src=\"https://images.unsplash.com/photo-1617038220319-276d3cfab638?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw1fHxqZXdlcmx5fGVufDB8fHx8MTc1MTAyMTUwNHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square  pbx-object-bottom\" src=\"https://images.unsplash.com/photo-1594924571793-f6517415f594?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw0Nnx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1Mjd8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square  pbx-object-top\" src=\"https://images.unsplash.com/photo-1683099869102-bcf8791eb0e5?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjV8fGpld2VybHl8ZW58MHx8fHwxNzUxMDIxNTc4fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n</div>\n</div>\n</div>\n</sectio>",
     "id": "7bcda060-8ed5-482f-bcf4-aa6bd7fdb193",
     "title": "Six Square Images Grid"
   }