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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.97",
+  "version": "3.3.98",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",
@@ -52,12 +52,12 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/qaiswardag/vue-website-page-builder.git"
+    "url": "git+ssh://git@github.com/myissue-org/vue-website-page-builder.git"
   },
   "bugs": {
-    "url": "https://github.com/qaiswardag/vue-website-page-builder/issues"
+    "url": "https://github.com/myissue-org/vue-website-page-builder/issues"
   },
-  "homepage": "https://mybuilder.dev",
+  "homepage": "https://www.mybuilder.dev",
   "engines": {
     "node": ">=18.0.0",
     "npm": ">=8.0.0"

package/src/Components/Homepage/Footer.vue

@@ -18,7 +18,7 @@ const version = __APP_VERSION__
       </p>
       <p class="pbx-myPrimaryParagraph pbx-mt-3">
         <a
-          href="https://github.com/qaiswardag/vue-website-page-builder"
+          href="https://github.com/myissue-org/vue-website-page-builder"
           target="_blank"
           class="pbx-myPrimaryLink pbx-text-myPrimaryDarkGrayColor"
         >

package/src/css/style.css

@@ -485,22 +485,18 @@
 
 @keyframes pbx-reorder-flash {
   0% {
-    box-shadow: 0 0 0 0px rgba(66, 153, 225, 0.7);
     transform: scale(1);
     opacity: 1;
   }
   50% {
-    box-shadow: 0 0 0 10px rgba(66, 153, 225, 0);
-    transform: scale(0.2); /* Even more shrink */
-    opacity: 0.8;
+    transform: scale(0.8);
+    opacity: 0.6;
   }
   100% {
-    box-shadow: 0 0 0 0px rgba(66, 153, 225, 0);
     transform: scale(1);
     opacity: 1;
   }
 }
 
 .pbx-sibling-highlight {
-  border: 2px dashed #4299e1; /* Blue dashed border */
 }

package/src/services/PageBuilderService.ts

@@ -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)
@@ -1665,10 +1667,12 @@ export class PageBuilderService {
     await nextTick()
 
     // Scroll to the moved component
-    const pageBuilderWrapper = document.querySelector('#page-builder-wrapper')
+    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
@@ -1685,19 +1689,22 @@ export class PageBuilderService {
         nextSibling.classList.add('pbx-sibling-highlight')
       }
 
-      // Scroll to the moved component
-      movedComponentElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
-
-      // 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')
-        }
-      }, 1000) // Adjust delay as needed
+      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)
+      }
     }
   }
 
@@ -1920,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',
@@ -1938,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)
 
@@ -2588,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.
    *
@@ -2606,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 {
@@ -2851,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/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"
   }