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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.94",
+  "version": "3.3.96",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue

@@ -188,10 +188,6 @@ const handleModalIframeSrc = function () {
     showModalIframeSrc.value = false
   }
 }
-
-const getRestoredElement = computed(() => {
-  return pageBuilderStateStore.getRestoredElement
-})
 </script>
 <template v-if="getElement">
   <div>

package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue

@@ -15,7 +15,6 @@ import Borders from './Editables/Borders.vue'
 import LinkEditor from './Editables/LinkEditor.vue'
 import TipTap from '../../TipTap/TipTap.vue'
 import EditGetElement from './Editables/EditGetElement.vue'
-import ElementEditor from './Editables/ElementEditor.vue'
 import HTMLEditor from './Editables/HTMLEditor.vue'
 import { getPageBuilder } from '../../../composables/builderInstance'
 import EditorAccordion from '../EditorMenu/EditorAccordion.vue'

package/src/Components/PageBuilder/UndoRedo/UndoRedo.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from 'vue'
+import { sharedPageBuilderStore } from '../../../stores/shared-store'
+import GlobalLoader from '../../../Components/Loaders/GlobalLoader.vue'
+import { getPageBuilder } from '../../../composables/builderInstance'
+
+const pageBuilderService = getPageBuilder()
+
+// Use shared store instance
+const pageBuilderStateStore = sharedPageBuilderStore
+
+const getIsLoadingGlobal = computed(() => {
+  return pageBuilderStateStore.getIsLoadingGlobal
+})
+
+const handleUndo = async function () {
+  await pageBuilderService.undo()
+}
+const handleRedo = async function () {
+  await pageBuilderService.redo()
+}
+</script>
+
+<template>
+  <GlobalLoader v-if="getIsLoadingGlobal"></GlobalLoader>
+  <div class="pbx-flex-1 pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-w-full gap-2">
+    <!-- Undo Start -->
+    <button @click="handleUndo" type="button">
+      <div
+        class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
+      >
+        <span class="material-symbols-outlined"> undo </span>
+      </div>
+    </button>
+    <!-- Undo End -->
+    <!-- Redo Start -->
+    <button @click="handleRedo" type="button">
+      <div
+        class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white pbx-ml-2"
+      >
+        <span class="material-symbols-outlined"> redo </span>
+      </div>
+    </button>
+    <!-- Redo End -->
+  </div>
+</template>

package/src/PageBuilder/PageBuilder.vue

@@ -14,6 +14,7 @@ import DynamicModalBuilder from '../Components/Modals/DynamicModalBuilder.vue'
 import GlobalLoader from '../Components/Loaders/GlobalLoader.vue'
 import { useTranslations } from '../composables/useTranslations'
 import { getPageBuilder } from '../composables/builderInstance'
+import UndoRedo from '../Components/PageBuilder/UndoRedo/UndoRedo.vue'
 const pageBuilderService = getPageBuilder()
 /**
  * Props for PageBuilder component
@@ -167,10 +168,6 @@ const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
 
-const getRestoredElement = computed(() => {
-  return pageBuilderStateStore.getRestoredElement
-})
-
 const getComponents = computed(() => {
   return pageBuilderStateStore.getComponents
 })
@@ -323,15 +320,13 @@ const ensureBuilderInitialized = function () {
   }
 }
 
-const pbxToolBar = ref(null)
-
+const pageBuilderWrapper = ref(null)
 let lastToolbarLeft = null
 let lastToolbarTop = null
 
 function updatePanelPosition() {
-  const container = pbxToolBar.value
+  const container = pageBuilderWrapper.value
   const editToolbarElement = container && container.querySelector('#pbxEditToolbar')
-  const restored = getRestoredElement.value
 
   if (!container || !editToolbarElement) return
 
@@ -364,11 +359,6 @@ function updatePanelPosition() {
 
     lastToolbarLeft = left
     lastToolbarTop = top
-  } else if (restored && lastToolbarLeft !== null && lastToolbarTop !== null) {
-    editToolbarElement.style.position = 'absolute'
-    editToolbarElement.style.left = `${lastToolbarLeft}px`
-    editToolbarElement.style.top = `${lastToolbarTop}px`
-    editToolbarElement.classList.add('is-visible')
   } else {
     editToolbarElement.classList.remove('is-visible')
   }
@@ -399,7 +389,7 @@ onMounted(async () => {
   updatePanelPosition()
 
   // Set up MutationObserver and event listeners
-  const container = pbxToolBar.value
+  const container = pageBuilderWrapper.value
   if (!container) return
 
   const observer = new MutationObserver(updatePanelPosition)
@@ -538,6 +528,8 @@ onMounted(async () => {
       </template>
       <!-- Logo # end -->
 
+      <UndoRedo></UndoRedo>
+
       <div
         @click.self="
           async () => {
@@ -866,7 +858,8 @@ onMounted(async () => {
       <!-- Left Menu End -->
 
       <main
-        ref="pbxToolBar"
+        ref="pageBuilderWrapper"
+        id="page-builder-wrapper"
         class="pbx-transition-all pbx-duration-300 pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-text-black pbx-h-[100vh] pbx-overflow-y-auto"
         :class="[getMenuRight ? 'pbx-w-full' : 'pbx-w-full']"
       >
@@ -881,15 +874,6 @@ onMounted(async () => {
           <template v-if="getElement">
             <EditGetElement></EditGetElement>
           </template>
-          <template v-if="getRestoredElement">
-            <button
-              @click="pageBuilderService.restoreDeletedElementToDOM"
-              type="button"
-              class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-200 focus-visible:pbx-ring-0"
-            >
-              <span class="material-symbols-outlined"> undo </span>
-            </button>
-          </template>
         </div>
         <!-- Element Popover toolbar end -->
 
@@ -926,7 +910,7 @@ onMounted(async () => {
               await pageBuilderService.clearHtmlSelection()
             }
           "
-          class="pbx-w-16 pbx-bg-myPrimaryLightGrayColor pbx-pt-5 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-border-0 pbx-border-solid pbx-border-l-0 pbx-border-l-gray-600 pbx-rounded-l-2xl pbx-h-[100vh] pbx-pl-2 pbx-pr-2"
+          class="pbx-w-18 pbx-bg-myPrimaryLightGrayColor pbx-pt-5 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-border-0 pbx-border-solid pbx-border-l-0 pbx-border-l-gray-600 pbx-rounded-l-2xl pbx-h-[100vh] pbx-pl-2 pbx-pr-2"
         >
           <div
             @click.self="

package/src/css/style.css

@@ -400,6 +400,7 @@
 /* CSS for content inside page builder # start */
 #pagebuilder {
   position: relative;
+  max-height: 100%;
 }
 #pagebuilder a {
   pointer-events: none;

package/src/services/LocalStorageManager.ts

@@ -1 +1,25 @@
-export class LocalStorageManager {}
+export class LocalStorageManager {
+  private static readonly HISTORY_KEY_SUFFIX = '-history'
+  private static readonly MAX_HISTORY_SIZE = 10
+
+  public static getHistory(baseKey: string): any[] {
+    const historyKey = baseKey + this.HISTORY_KEY_SUFFIX
+    const historyJson = localStorage.getItem(historyKey)
+    return historyJson ? JSON.parse(historyJson) : []
+  }
+
+  public static addToHistory(baseKey: string, data: any) {
+    const historyKey = baseKey + this.HISTORY_KEY_SUFFIX
+    let history = this.getHistory(baseKey)
+    history.push(data)
+    if (history.length > this.MAX_HISTORY_SIZE) {
+      history = history.slice(history.length - this.MAX_HISTORY_SIZE)
+    }
+    localStorage.setItem(historyKey, JSON.stringify(history))
+  }
+
+  public static clearHistory(baseKey: string) {
+    const historyKey = baseKey + this.HISTORY_KEY_SUFFIX
+    localStorage.removeItem(historyKey)
+  }
+}

package/src/services/PageBuilderService.ts

@@ -1,3 +1,4 @@
+import { LocalStorageManager } from './LocalStorageManager'
 import type {
   BuilderResourceData,
   ComponentObject,
@@ -60,9 +61,6 @@ export class PageBuilderService {
   private getComponents: ComputedRef<ComponentObject[] | null>
   private getComponent: ComputedRef<ComponentObject | null>
   private getElement: ComputedRef<HTMLElement | null>
-  private getNextSibling: ComputedRef<HTMLElement | null>
-  private getParentElement: ComputedRef<HTMLElement | null>
-  private getRestoredElement: ComputedRef<string | null>
   private getComponentArrayAddMethod: ComputedRef<string | null>
   private NoneListernesTags: string[]
   private hasStartedEditing: boolean = false
@@ -98,9 +96,6 @@ export class PageBuilderService {
     this.getComponent = computed(() => this.pageBuilderStateStore.getComponent)
 
     this.getElement = computed(() => this.pageBuilderStateStore.getElement)
-    this.getNextSibling = computed(() => this.pageBuilderStateStore.getNextSibling)
-    this.getParentElement = computed(() => this.pageBuilderStateStore.getParentElement)
-    this.getRestoredElement = computed(() => this.pageBuilderStateStore.getRestoredElement)
 
     this.getComponentArrayAddMethod = computed(
       () => this.pageBuilderStateStore.getComponentArrayAddMethod,
@@ -416,6 +411,7 @@ export class PageBuilderService {
 
       // Update the localStorage key name based on the config/resource
       this.updateLocalStorageItemName()
+      this.initializeHistory()
 
       if (passedComponentsArray) {
         this.savedMountComponents = passedComponentsArray
@@ -988,6 +984,19 @@ export class PageBuilderService {
     await this.handleAutoSave()
   }
 
+  private historyIndex: number = -1
+  private getHistoryBaseKey(): string | null {
+    return this.getLocalStorageItemName.value
+  }
+
+  private initializeHistory() {
+    const baseKey = this.getHistoryBaseKey()
+    if (baseKey) {
+      const history = LocalStorageManager.getHistory(baseKey)
+      this.historyIndex = history.length - 1
+    }
+  }
+
   /**
    * Triggers an auto-save of the current page builder content to local storage if enabled.
    */
@@ -1052,12 +1061,12 @@ export class PageBuilderService {
     // Deep clone clone component
     const clonedComponent = { ...componentObject }
 
-    const pageBuilder = document.querySelector('#pagebuilder')
+    const pageBuilderWrapper = document.querySelector('#page-builder-wrapper')
     //  scoll to top or bottom
-    if (pageBuilder) {
+    if (pageBuilderWrapper) {
       // push to top
       if (this.getComponentArrayAddMethod.value === 'unshift') {
-        pageBuilder.scrollTo({
+        pageBuilderWrapper.scrollTo({
           top: 0,
           behavior: 'smooth',
         })
@@ -1441,6 +1450,61 @@ export class PageBuilderService {
         .forEach((section) => section.remove())
     }
   }
+  //
+  public async undo() {
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
+    await delay(300)
+    const baseKey = this.getHistoryBaseKey()
+    if (!baseKey) return
+
+    const history = LocalStorageManager.getHistory(baseKey)
+    if (history.length > 1 && this.historyIndex > 0) {
+      this.historyIndex--
+      const data = history[this.historyIndex]
+      const htmlString = this.renderComponentsToHtml(data.components)
+      await this.mountComponentsToDOM(htmlString)
+    }
+    this.pageBuilderStateStore.setIsLoadingGlobal(false)
+  }
+
+  public async redo() {
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
+    await delay(300)
+    const baseKey = this.getHistoryBaseKey()
+    if (!baseKey) return
+
+    const history = LocalStorageManager.getHistory(baseKey)
+    if (history.length > 0 && this.historyIndex < history.length - 1) {
+      this.historyIndex++
+      const data = history[this.historyIndex]
+      const htmlString = this.renderComponentsToHtml(data.components)
+      await this.mountComponentsToDOM(htmlString)
+    }
+    this.pageBuilderStateStore.setIsLoadingGlobal(false)
+  }
+
+  private hasVisibleContent(element: HTMLElement): boolean {
+    if (!element) return false
+
+    // Check for meaningful elements
+    const meaningfulContentSelector =
+      'img, video, iframe, input, button, a, h1, h2, h3, h4, h5, h6, p, li, blockquote, pre, code, table'
+    if (element.querySelector(meaningfulContentSelector)) return true
+
+    // Check for non-empty text nodes
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null)
+    while (walker.nextNode()) {
+      if (walker.currentNode.nodeValue && walker.currentNode.nodeValue.trim() !== '') {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  private isSectionEmpty(section: HTMLElement): boolean {
+    return !this.hasVisibleContent(section)
+  }
 
   /**
    * Deletes the currently selected component from the DOM and the state.
@@ -1450,13 +1514,13 @@ export class PageBuilderService {
     this.syncDomToStoreOnly()
     await nextTick()
 
-    const components = this.getComponents.value
+    const components = this.pageBuilderStateStore.getComponents
 
     if (!components) return
 
     // Find the index of the component to be deleted.
     const indexToDelete = components.findIndex(
-      (component) => component.id === this.getComponent.value?.id,
+      (component: ComponentObject) => component.id === this.getComponent.value?.id,
     )
 
     if (indexToDelete === -1) {
@@ -1509,15 +1573,35 @@ export class PageBuilderService {
       return
     }
 
-    // If the element is not a top-level section, store its information for undo functionality.
-    if (element.parentElement?.tagName !== 'SECTION') {
-      this.pageBuilderStateStore.setParentElement(element.parentNode as HTMLElement)
-      this.pageBuilderStateStore.setRestoredElement(element.outerHTML)
-      this.pageBuilderStateStore.setNextSibling(element.nextSibling as HTMLElement | null)
-      // Remove the element from the DOM.
+    const parentSection = element.closest('section')
+
+    // If the element to be deleted is the section itself
+    if (element.tagName === 'SECTION') {
+      this.deleteComponentFromDOM()
+    } else {
+      // If the element is inside a section
       element.remove()
+      if (parentSection && this.isSectionEmpty(parentSection)) {
+        const componentId = parentSection.getAttribute('data-componentid')
+        if (componentId) {
+          const components = this.pageBuilderStateStore.getComponents
+          if (components) {
+            const indexToDelete = components.findIndex((c: ComponentObject) => c.id === componentId)
+            if (indexToDelete !== -1) {
+              const newComponents = [
+                ...components.slice(0, indexToDelete),
+                ...components.slice(indexToDelete + 1),
+              ]
+              this.pageBuilderStateStore.setComponents(newComponents)
+              parentSection.remove() // Directly remove from DOM
+            }
+          }
+        }
+      }
     }
 
+    this.handleAutoSave()
+
     // Clear the selection state.
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
@@ -1530,39 +1614,6 @@ export class PageBuilderService {
     await this.addListenersToEditableElements()
   }
 
-  /**
-   * Restores the last deleted element to its previous position in the DOM.
-   * @returns {Promise<void>}
-   */
-  public async restoreDeletedElementToDOM() {
-    // Retrieve the details of the element to be restored.
-    const restoredHTML = this.getRestoredElement.value
-    const parent = this.getParentElement.value
-    const nextSibling = this.getNextSibling.value
-
-    if (restoredHTML && parent) {
-      // Create a temporary container to parse the stored HTML.
-      const container = document.createElement('div')
-      container.innerHTML = restoredHTML
-
-      // Insert the restored element back into its original position.
-      if (container.firstChild) {
-        parent.insertBefore(container.firstChild, nextSibling)
-      }
-    }
-
-    // Clear the state related to the restored element.
-    this.pageBuilderStateStore.setParentElement(null)
-    this.pageBuilderStateStore.setRestoredElement(null)
-    this.pageBuilderStateStore.setNextSibling(null)
-    this.pageBuilderStateStore.setComponent(null)
-    this.pageBuilderStateStore.setElement(null)
-
-    // Wait for the DOM to update before re-attaching event listeners.
-    await nextTick()
-    await this.addListenersToEditableElements()
-  }
-
   /**
    * Removes a CSS class from the currently selected element.
    * @param {string} userSelectedClass - The class to remove.
@@ -1823,10 +1874,31 @@ export class PageBuilderService {
       pageSettings,
     }
 
-    const keyForSavingFromDomToLocal = this.getLocalStorageItemName.value
+    const baseKey = this.getHistoryBaseKey()
+    if (baseKey) {
+      localStorage.setItem(baseKey, JSON.stringify(dataToSave))
+      let history = LocalStorageManager.getHistory(baseKey)
 
-    if (keyForSavingFromDomToLocal && typeof keyForSavingFromDomToLocal === 'string') {
-      localStorage.setItem(keyForSavingFromDomToLocal, JSON.stringify(dataToSave))
+      const lastState = history[history.length - 1]
+      if (lastState) {
+        const lastComponents = JSON.stringify(lastState.components)
+        const newComponents = JSON.stringify(dataToSave.components)
+        const lastSettings = JSON.stringify(lastState.pageSettings)
+        const newSettings = JSON.stringify(dataToSave.pageSettings)
+        if (lastComponents === newComponents && lastSettings === newSettings) {
+          return // Do not save duplicate state
+        }
+      }
+
+      if (this.historyIndex < history.length - 1) {
+        history = history.slice(0, this.historyIndex + 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
     }
   }
   /**
@@ -2285,13 +2357,13 @@ export class PageBuilderService {
           : 'push',
       })
 
-      const pageBuilder = document.querySelector('#pagebuilder')
+      const pageBuilderWrapper = document.querySelector('#page-builder-wrapper')
       //  scoll to top or bottom
-      if (pageBuilder) {
+      if (pageBuilderWrapper) {
         // push to bottom
         if (this.getComponentArrayAddMethod.value === 'push') {
-          pageBuilder.scrollTo({
-            top: pageBuilder.scrollHeight + 50,
+          pageBuilderWrapper.scrollTo({
+            top: pageBuilderWrapper.scrollHeight + 50,
             behavior: 'smooth',
           })
         }

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

@@ -32,9 +32,6 @@ interface PageBuilderState {
   opacity: string | null
   backgroundOpacity: string | null
   textAreaVueModel: string | null
-  nextSibling: HTMLElement | null
-  parentElement: HTMLElement | null
-  restoredElement: string | null
   currentClasses: string[]
   currentStyles: Record<string, string>
   fontVerticalPadding: string | null
@@ -95,9 +92,6 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     opacity: null,
     backgroundOpacity: null,
     textAreaVueModel: null,
-    nextSibling: null,
-    parentElement: null,
-    restoredElement: null,
     currentClasses: [],
     currentStyles: {},
     fontVerticalPadding: null,
@@ -200,15 +194,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     getTextAreaVueModel(state: PageBuilderState): string | null {
       return state.textAreaVueModel
     },
-    getNextSibling(state: PageBuilderState): HTMLElement | null {
-      return state.nextSibling
-    },
-    getParentElement(state: PageBuilderState): HTMLElement | null {
-      return state.parentElement
-    },
-    getRestoredElement(state: PageBuilderState): string | null {
-      return state.restoredElement
-    },
+
     getCurrentClasses(state: PageBuilderState): string[] {
       return state.currentClasses
     },
@@ -355,15 +341,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     setTextAreaVueModel(payload: string | null): void {
       this.textAreaVueModel = payload
     },
-    setNextSibling(payload: HTMLElement | null): void {
-      this.nextSibling = payload
-    },
-    setParentElement(payload: HTMLElement | null): void {
-      this.parentElement = payload
-    },
-    setRestoredElement(payload: string | null): void {
-      this.restoredElement = payload
-    },
+
     setClass(payload: string): void {
       this.currentClasses = [...this.currentClasses, payload]
     },

package/src/tests/PageBuilderTest.vue

@@ -24,63 +24,47 @@ const translatedComponents = computed(() => {
   })
 })
 
-const { components, pageSettings } = pageBuilderService.parsePageBuilderHTML(
-  '<div id="pagebuilder" class="" style="">' +
-    translatedComponents.value.map((c) => c.html_code).join('\n') +
-    '</div>',
-)
-
-const configPageBuilder = {
-  userForPageBuilder: {
-    name: 'Jane Doe',
-    image: '/jane_doe.jpg',
-  },
-  updateOrCreate: {
-    formType: 'update',
-    formName: 'collection',
-  },
-  pageBuilderLogo: {
-    src: '/logo/mybuilder_new_lowercase.svg',
-  },
-  resourceData: {
-    title: 'Demo Article',
-    id: 1,
-  },
-  userSettings: {
-    theme: 'light',
-    language: {
-      default: 'en',
-      enable: ['en', 'zh-Hans', 'fr', 'ja', 'ru', 'es', 'pt', 'de', 'ar', 'hi'],
-      disableLanguageDropDown: false,
-    },
-    autoSave: true,
-  },
-
-  settings: {
-    brandColor: '#DB93B0',
-  },
-  pageSettings: pageSettings,
-} as const
-
 watch(currentTranslations, async () => {
-  const { components: newComponents, pageSettings: newPageSettings } =
+  const { components: newComponents, pageSettings: pageSettings } =
     pageBuilderService.parsePageBuilderHTML(
       '<div id="pagebuilder" class="" style="">' +
         translatedComponents.value.map((c) => c.html_code).join('\n') +
         '</div>',
     )
 
-  const newConfig = {
-    ...configPageBuilder,
-    pageSettings: newPageSettings,
-  }
+  const configPageBuilder = {
+    userForPageBuilder: {
+      name: 'Jane Doe',
+      image: '/jane_doe.jpg',
+    },
+    updateOrCreate: {
+      formType: 'update',
+      formName: 'collection',
+    },
+    pageBuilderLogo: {
+      src: '/logo/mybuilder_new_lowercase.svg',
+    },
+    resourceData: {
+      title: 'Demo Article',
+      id: 1,
+    },
+    userSettings: {
+      theme: 'light',
+      language: {
+        default: 'en',
+        enable: ['en', 'zh-Hans', 'fr', 'ja', 'ru', 'es', 'pt', 'de', 'ar', 'hi'],
+        disableLanguageDropDown: false,
+      },
+      autoSave: true,
+    },
 
-  await pageBuilderService.startBuilder(newConfig, newComponents)
-})
+    settings: {
+      brandColor: '#DB93B0',
+    },
+    pageSettings: pageSettings,
+  } as const
 
-onMounted(async () => {
-  const result = await pageBuilderService.startBuilder(configPageBuilder, components)
-  console.log('Page Builder result for message, status, or error::', result)
+  await pageBuilderService.startBuilder(configPageBuilder, newComponents)
 })
 </script>
 

package/src/utils/builder/tailwind-font-styles.ts

@@ -12,7 +12,6 @@ const tailwindFontStyles: TailwindFontStyles = {
     'pbx-font-light',
     'pbx-font-normal',
     'pbx-font-medium',
-    'pbx-font-medium',
     'pbx-font-bold',
     'pbx-font-extrabold',
     'pbx-font-black',