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

package/dist/{zh-Hans-B-uPsE7N.js → zh-Hans-9bdCn2lI.js}

@@ -166,7 +166,8 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s =
   "Use Saved Version": "使用保存的版本",
   "Continue Where I Left Off": "从我离开的地方继续",
   "HTML Editor": "HTML 编辑器",
-  "Gain full control over components by editing the raw HTML.": "通过编辑原始 HTML 获得对组件的完全控制。"
+  "Gain full control over components by editing the raw HTML.": "通过编辑原始 HTML 获得对组件的完全控制。",
+  "Large Screens Only": "仅限大屏幕"
 };
 export {
   m as Add,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.93",
+  "version": "3.3.94",
   "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/Margin.vue

@@ -67,6 +67,12 @@ watch(
     <template #title>{{ translate('Margin') }}</template>
     <template #content>
       <div class="pbx-my-2 pbx-py-2">
+        <div class="pbx-pt-4 pbx-pb-2 pbx-mb-4">
+          <p class="pbx-myPrimaryInputLabel pbx-font-medium pbx-italic">
+            {{ translate('Large Screens Only') }}
+          </p>
+          <hr />
+        </div>
         <label for="vertical-margin" class="pbx-myPrimaryInputLabel">{{
           translate('Vertical Margin')
         }}</label>

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

@@ -68,6 +68,12 @@ watch(
     <template #title>{{ translate('Padding') }}</template>
     <template #content>
       <div class="pbx-my-2 pbx-py-2">
+        <div class="pbx-pt-4 pbx-pb-2 pbx-mb-4">
+          <p class="pbx-myPrimaryInputLabel pbx-font-medium pbx-italic">
+            {{ translate('Large Screens Only') }}
+          </p>
+          <hr />
+        </div>
         <label for="vertical-padding" class="pbx-myPrimaryInputLabel">{{
           translate('Vertical Padding')
         }}</label>

package/src/PageBuilder/PageBuilder.vue

@@ -804,7 +804,7 @@ onMounted(async () => {
           </template>
         </template>
         <template v-if="showCloseButton">
-          <div class="pbx-flex-1 pbx-ml-2">
+          <div class="pbx-flex-1 pbx-ml-2 pbx-mr-2">
             <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-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white hover:pbx-fill-white focus-visible:pbx-ring-0"
               @click="
@@ -867,7 +867,7 @@ onMounted(async () => {
 
       <main
         ref="pbxToolBar"
-        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]"
+        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']"
       >
         <div

package/src/css/style.css

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

package/src/locales/ar.json

@@ -165,5 +165,6 @@
   "Use Saved Version": "استخدام النسخة المحفوظة",
   "Continue Where I Left Off": "المتابعة من حيث توقفت",
   "HTML Editor": "محرر HTML",
-  "Gain full control over components by editing the raw HTML.": "احصل على التحكم الكامل في المكونات عن طريق تحرير HTML الخام."
+  "Gain full control over components by editing the raw HTML.": "احصل على التحكم الكامل في المكونات عن طريق تحرير HTML الخام.",
+  "Large Screens Only": "الشاشات الكبيرة فقط"
 }

package/src/locales/de.json

@@ -166,5 +166,6 @@
   "Use Saved Version": "Gespeicherte Version verwenden",
   "Continue Where I Left Off": "Dort weitermachen, wo ich aufgehört habe",
   "HTML Editor": "HTML-Editor",
-  "Gain full control over components by editing the raw HTML.": "Erhalten Sie die vollständige Kontrolle über Komponenten, indem Sie das reine HTML bearbeiten."
+  "Gain full control over components by editing the raw HTML.": "Erhalten Sie die vollständige Kontrolle über Komponenten, indem Sie das reine HTML bearbeiten.",
+  "Large Screens Only": "Nur große Bildschirme"
 }

package/src/locales/en.json

@@ -166,5 +166,6 @@
   "Use Saved Version": "Use Saved Version",
   "Continue Where I Left Off": "Continue Where I Left Off",
   "HTML Editor": "HTML Editor",
-  "Gain full control over components by editing the raw HTML.": "Gain full control over components by editing the raw HTML."
+  "Gain full control over components by editing the raw HTML.": "Gain full control over components by editing the raw HTML.",
+  "Large Screens Only": "Large Screens Only"
 }

package/src/locales/es.json

@@ -166,5 +166,6 @@
   "Use Saved Version": "Usar la versión guardada",
   "Continue Where I Left Off": "Continuar donde lo dejé",
   "HTML Editor": "Editor HTML",
-  "Gain full control over components by editing the raw HTML.": "Obtenga control total sobre los componentes editando el HTML sin formato."
+  "Gain full control over components by editing the raw HTML.": "Obtenga control total sobre los componentes editando el HTML sin formato.",
+  "Large Screens Only": "Solo pantallas grandes"
 }

package/src/locales/fr.json

@@ -166,5 +166,6 @@
   "Use Saved Version": "Utiliser la version enregistrée",
   "Continue Where I Left Off": "Continuer là où je me suis arrêté",
   "HTML Editor": "Éditeur HTML",
-  "Gain full control over components by editing the raw HTML.": "Obtenez un contrôle total sur les composants en modifiant le code HTML brut."
+  "Gain full control over components by editing the raw HTML.": "Obtenez un contrôle total sur les composants en modifiant le code HTML brut.",
+  "Large Screens Only": "Grands écrans uniquement"
 }

package/src/locales/hi.json

@@ -167,5 +167,6 @@
   "Use Saved Version": "सहेजा गया संस्करण उपयोग करें",
   "Continue Where I Left Off": "वहीं से शुरु करो जहाँ मैने छोड़ा था",
   "HTML Editor": "HTML संपादक",
-  "Gain full control over components by editing the raw HTML.": "कच्चे HTML को संपादित करके घटकों पर पूर्ण नियंत्रण प्राप्त करें।"
+  "Gain full control over components by editing the raw HTML.": "कच्चे HTML को संपादित करके घटकों पर पूर्ण नियंत्रण प्राप्त करें।",
+  "Large Screens Only": "केवल बड़ी स्क्रीन"
 }

package/src/locales/ja.json

@@ -166,5 +166,6 @@
   "Use Saved Version": "保存されたバージョンを使用",
   "Continue Where I Left Off": "中断したところから続行",
   "HTML Editor": "HTMLエディター",
-  "Gain full control over components by editing the raw HTML.": "生の HTML を編集することで、コンポーネントを完全に制御できます。"
+  "Gain full control over components by editing the raw HTML.": "生の HTML を編集することで、コンポーネントを完全に制御できます。",
+  "Large Screens Only": "大型スクリーンのみ"
 }

package/src/locales/pt.json

@@ -166,5 +166,6 @@
   "Use Saved Version": "Usar a versão salva",
   "Continue Where I Left Off": "Continuar de onde parei",
   "HTML Editor": "Editor HTML",
-  "Gain full control over components by editing the raw HTML.": "Obtenha controlo total sobre os componentes editando o HTML em bruto."
+  "Gain full control over components by editing the raw HTML.": "Obtenha controlo total sobre os componentes editando o HTML em bruto.",
+  "Large Screens Only": "Somente telas grandes"
 }

package/src/locales/ru.json

@@ -166,5 +166,6 @@
   "Use Saved Version": "Использовать сохраненную версию",
   "Continue Where I Left Off": "Продолжить с того места, где я остановился",
   "HTML Editor": "HTML-редактор",
-  "Gain full control over components by editing the raw HTML.": "Получите полный контроль над компонентами, редактируя необработанный HTML-код."
+  "Gain full control over components by editing the raw HTML.": "Получите полный контроль над компонентами, редактируя необработанный HTML-код.",
+  "Large Screens Only": "Только большие экраны"
 }

package/src/locales/zh-Hans.json

@@ -166,5 +166,6 @@
   "Use Saved Version": "使用保存的版本",
   "Continue Where I Left Off": "从我离开的地方继续",
   "HTML Editor": "HTML 编辑器",
-  "Gain full control over components by editing the raw HTML.": "通过编辑原始 HTML 获得对组件的完全控制。"
+  "Gain full control over components by editing the raw HTML.": "通过编辑原始 HTML 获得对组件的完全控制。",
+  "Large Screens Only": "仅限大屏幕"
 }

package/src/services/PageBuilderService.ts

@@ -478,68 +478,97 @@ export class PageBuilderService {
     await this.clearHtmlSelection()
 
     if (formType === 'update' || formType === 'create') {
+      // Page Builder is initially present in the DOM
       if (!this.pendingMountComponents) {
-        // Page Builder Is initially present in DOM
         if (!passedComponentsArray && this.isPageBuilderMissingOnStart && localStorageData) {
           await this.completeMountProcess(localStorageData)
           return
         }
         if (passedComponentsArray && !localStorageData) {
-          await this.completeMountProcess(JSON.stringify(passedComponentsArray), true)
+          const htmlString = this.renderComponentsToHtml(passedComponentsArray)
+          await this.completeMountProcess(htmlString, true)
           this.saveDomComponentsToLocalStorage()
           return
         }
 
         if (passedComponentsArray && localStorageData) {
-          await this.completeMountProcess(JSON.stringify(passedComponentsArray), true)
+          const htmlString = this.renderComponentsToHtml(passedComponentsArray)
+          await this.completeMountProcess(htmlString, true)
           await delay(500)
           this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
           return
         }
+
         if (!passedComponentsArray && localStorageData && !this.savedMountComponents) {
           await this.completeMountProcess(localStorageData)
           return
         }
         if (!passedComponentsArray && this.savedMountComponents && localStorageData) {
-          await this.completeMountProcess(JSON.stringify(this.savedMountComponents))
+          const htmlString = this.renderComponentsToHtml(this.savedMountComponents)
+          await this.completeMountProcess(htmlString)
           return
         }
 
         if (!passedComponentsArray && !localStorageData && this.isPageBuilderMissingOnStart) {
-          await this.completeMountProcess(JSON.stringify([]))
+          const htmlString = this.renderComponentsToHtml([])
+          await this.completeMountProcess(htmlString)
+
           return
         }
 
         if (!this.isPageBuilderMissingOnStart && !localStorageData && !passedComponentsArray) {
-          await this.completeMountProcess(JSON.stringify([]))
+          const htmlString = this.renderComponentsToHtml([])
+          await this.completeMountProcess(htmlString)
           return
         }
       }
 
-      // FOCUS ON: pendingMountComponents
+      // Page Builder is not initially present in the DOM
       if (this.pendingMountComponents) {
-        // No Page Builder Is  present in DOM initially
         if (localStorageData && this.isPageBuilderMissingOnStart) {
-          await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
+          const htmlString = this.renderComponentsToHtml(this.pendingMountComponents)
+          await this.completeMountProcess(htmlString, true)
           await delay(500)
           this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
           this.pendingMountComponents = null
           return
         }
         if (!localStorageData && passedComponentsArray && this.isPageBuilderMissingOnStart) {
-          await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
+          const htmlString = this.renderComponentsToHtml(this.pendingMountComponents)
+          await this.completeMountProcess(htmlString, true)
           this.saveDomComponentsToLocalStorage()
           return
         }
 
         if (!passedComponentsArray && !localStorageData && this.isPageBuilderMissingOnStart) {
-          await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
+          const htmlString = this.renderComponentsToHtml(this.pendingMountComponents)
+          await this.completeMountProcess(htmlString, true)
           this.saveDomComponentsToLocalStorage()
           return
         }
       }
     }
-    //
+  }
+
+  /**
+   * Converts an array of ComponentObject into a single HTML string.
+   *
+   * @returns {string} A single HTML string containing all components.
+   */
+  private renderComponentsToHtml(componentsArray: BuilderResourceData): string {
+    // If the componentsArray is empty or invalid, return a default HTML structure
+    if (!componentsArray || (Array.isArray(componentsArray) && componentsArray.length === 0)) {
+      return `<div id="pagebuilder" class="pbx-text-black pbx-font-sans"></div>`
+    }
+
+    const sectionsHtml = componentsArray
+      .map((component) => {
+        return component.html_code // Fallback in case section is not found
+      })
+      .join('\n')
+
+    // Return the combined HTML string
+    return sectionsHtml
   }
 
   /**
@@ -553,14 +582,8 @@ export class PageBuilderService {
 
     // Clean up any old localStorage items related to previous builder sessions
     this.deleteOldPageBuilderLocalStorage()
-
     this.pageBuilderStateStore.setIsRestoring(false)
     this.pageBuilderStateStore.setIsLoadingGlobal(false)
-
-    // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
-    await nextTick()
-    // Attach event listeners to all editable elements in the Builder
-    await this.addListenersToEditableElements()
   }
 
   /**
@@ -1070,7 +1093,6 @@ export class PageBuilderService {
 
       // Set the title attribute if present
       if (clonedComponent.title) {
-        section.setAttribute('title', clonedComponent.title)
         section.setAttribute('data-component-title', clonedComponent.title)
       }
 
@@ -1952,7 +1974,8 @@ export class PageBuilderService {
     if (Array.isArray(this.originalComponents)) {
       await this.clearClassesFromPage()
       await this.clearInlineStylesFromPage()
-      await this.mountComponentsToDOM(JSON.stringify(this.originalComponents), true)
+      const htmlString = this.renderComponentsToHtml(this.originalComponents)
+      await this.mountComponentsToDOM(htmlString)
       this.removeCurrentComponentsFromLocalStorage()
     }
 
@@ -1992,9 +2015,24 @@ export class PageBuilderService {
       const classes = (parsed.pageSettings && parsed.pageSettings.classes) || ''
       const style = (parsed.pageSettings && parsed.pageSettings.style) || ''
 
-      const sectionsHtml = parsed.components.map((c: ComponentObject) => c.html_code).join('\n')
+      const sectionsHtml = parsed.components
+        .map((c: ComponentObject) => {
+          const parser = new DOMParser()
+          const doc = parser.parseFromString(c.html_code, 'text/html')
+          const section = doc.querySelector('section')
+
+          if (section) {
+            section.removeAttribute('data-componentid') // Remove the data-componentid attribute
+            return section.outerHTML
+          }
+
+          return c.html_code // Fallback in case section is not found
+        })
+        .join('\n')
+
       return `<div id="pagebuilder" class="${classes}" style="${style}">\n${sectionsHtml}\n</div>`
     }
+
     return false
   }
 
@@ -2371,10 +2409,7 @@ export class PageBuilderService {
       components = topLevelSections.map((section) => ({
         id: null,
         html_code: section.outerHTML.trim(),
-        title:
-          section.getAttribute('data-component-title') ||
-          section.getAttribute('title') ||
-          'Untitled Component',
+        title: section.getAttribute('data-component-title') || 'Untitled Component',
       }))
     }
     if (topLevelSections.length === 0) {
@@ -2418,183 +2453,69 @@ export class PageBuilderService {
   }
 
   /**
-   * Parse and set components from JSON or HTML data
+   * Mounts builder components to the DOM from an HTML string.
    *
-   * Supports:
-   * - JSON: Array of ComponentObject with html_code, id, title
-   * - HTML: String containing <section data-componentid="..."> elements
+   * Input format detection:
+   *   - If the input starts with `[` or `{`: treated as JSON (array or object).
+   *   - If the input starts with `<`: treated as HTML.
    *
-   * Auto-detects format and parses accordingly
+   * This function should be used when:
+   *   - Restoring the builder from a published HTML snapshot.
+   *   - Importing a static HTML export.
+   *   - Loading the builder from previously published or saved HTML (e.g., from `getSavedPageHtml()`).
    *
-   * @param data - JSON string (e.g., '[{"html_code":"...","id":"123","title":"..."}]')
-   *               OR HTML string (e.g., '<section data-componentid="123">...</section>')
+   * Typical use cases include restoring a published state, importing templates, or previewing published content.
    */
   private async mountComponentsToDOM(
     htmlString: string,
     usePassedPageSettings?: boolean,
   ): Promise<void> {
-    /**
-     * Mounts builder components to the DOM from either JSON or HTML input.
-     *
-     * Input format detection:
-     * - If the input starts with `[` or `{`, it is treated as JSON (array or object).
-     * - If the input starts with `<`, it is treated as HTML.
-     *
-     * When to use which format:
-     *
-     * 1. JSON input (from localStorage, API, or internal state like pina):
-     *    - Use when restoring builder state from localStorage, an API, or a previously saved draft.
-     *    - Example: `localStorage.getItem(...)` or API returns a JSON stringified array/object of components.
-     *    - This is the most common format for drafts, autosave, and programmatic state management.
-     *    - Example usage:
-     *      await this.mountComponentsToDOM(JSON.stringify(getComponents))
-     *
-     * 2. HTML input (from HTML snapshot, import, or published output):
-     *    - Use when restoring from a published HTML snapshot, importing a static HTML export, or loading the builder from a previously published HTML string.
-     *    - Example: output from `getSavedPageHtml()` or a static HTML export.
-     *    - This is used for restoring the builder from a published state, importing, or previewing published content.
-     *    - Example usage:
-     *      await this.mountComponentsToDOM(savedHtmlString)
-     *
-     * Best practice:
-     * - Use JSON for local storage drafts, autosave, and API-driven workflows.
-     * - Use HTML for published/imported content from DB or when restoring from a static HTML snapshot.
-     *
-     * The method auto-detects the format and calls the appropriate parser.
-     */
     const trimmedData = htmlString.trim()
 
+    // Return error since JSON data has been passed to mount HTML to DOM
     if (trimmedData.startsWith('[') || trimmedData.startsWith('{')) {
-      // JSON input: Use this when restoring from localStorage, API, or internal builder state (drafts, autosave, etc.)
-      await this.parseJSONComponents(trimmedData, usePassedPageSettings)
-      return
-    }
-    if (trimmedData.startsWith('<')) {
-      // HTML input: Use this when restoring from a published HTML snapshot, import, or static HTML export
-      await this.parseHTMLComponents(trimmedData, usePassedPageSettings)
+      console.error('Error: JSON data passed to mountComponentsToDOM for the Page Builder Package.')
       return
     }
 
-    // Fallback: If format is unknown, default to JSON parser (defensive)
-    await this.parseJSONComponents(trimmedData, usePassedPageSettings)
-  }
-
-  // Private method to parse JSON components and save pageBuilderContentSavedAt to localStorage
-  private async parseJSONComponents(
-    jsonData: string,
-    usePassedPageSettings?: boolean,
-  ): Promise<void> {
-    const pageSettings =
-      this.pageBuilderStateStore.getPageBuilderConfig &&
-      this.pageBuilderStateStore.getPageBuilderConfig.pageSettings
-
-    const userPageSettings = usePassedPageSettings ? pageSettings : null
-
+    // HTML string
     try {
-      const parsedData = JSON.parse(jsonData)
-      let componentsArray: ComponentObject[] = []
-
-      if (Array.isArray(parsedData)) {
-        componentsArray = parsedData
-      }
-      if (parsedData && Array.isArray(parsedData.components)) {
-        componentsArray = parsedData.components
-      }
-
-      let savedCurrentDesign: ComponentObject[] = []
-
-      if (componentsArray.length > 0) {
-        savedCurrentDesign = componentsArray.map((component: ComponentObject) => {
-          const parser = new DOMParser()
-          const doc = parser.parseFromString(component.html_code, 'text/html')
-          const section = doc.querySelector('section')
+      const parser = new DOMParser()
+      const doc = parser.parseFromString(htmlString, 'text/html')
 
-          if (section) {
-            // Prefix Tailwind classes
-            section.querySelectorAll('[class]').forEach((el) => {
-              el.setAttribute(
-                'class',
-                this.addTailwindPrefixToClasses(el.getAttribute('class') || '', 'pbx-'),
-              )
-            })
-
-            // Ensure IDs & titles
-            if (!section.hasAttribute('data-componentid')) {
-              const newId = uuidv4()
-              section.setAttribute('data-componentid', newId)
-              component.id = newId
-            } else {
-              component.id = section.getAttribute('data-componentid')!
-            }
+      const importedPageBuilder = doc.querySelector('#pagebuilder') as HTMLElement | null
+      const livePageBuilder = document.querySelector('#pagebuilder') as HTMLElement | null
 
-            const title = component.title || 'Untitled Component'
-            section.setAttribute('data-component-title', title)
-            component.title = title
+      // Initialize pageSettings to null
+      let pageSettings = null
 
-            // Update html_code
-            component.html_code = section.outerHTML
-          }
-          return component
-        })
+      // Use stored page settings if the flag is true
+      if (usePassedPageSettings) {
+        pageSettings = this.pageBuilderStateStore.getPageBuilderConfig?.pageSettings || null
       }
 
-      this.pageBuilderStateStore.setComponents(savedCurrentDesign)
-
-      await nextTick()
-      await this.addListenersToEditableElements()
-
-      if (userPageSettings && pageSettings) {
-        const pagebuilder = document.querySelector('#pagebuilder') as HTMLElement
-        if (pagebuilder) {
-          pagebuilder.removeAttribute('class')
-          pagebuilder.removeAttribute('style')
-          pagebuilder.className = pageSettings.classes || ''
-          pagebuilder.setAttribute('style', this.convertStyleObjectToString(pageSettings.style))
+      // Use imported page builder settings if available and pageSettings is still null
+      if (!pageSettings && importedPageBuilder) {
+        pageSettings = {
+          classes: importedPageBuilder.className || '',
+          style: importedPageBuilder.getAttribute('style') || '',
         }
       }
-    } catch (error) {
-      console.error('Error parsing JSON components:', error)
-      this.deleteAllComponentsFromDOM()
-    }
-  }
 
-  // Private method to parse HTML components
-  private async parseHTMLComponents(
-    htmlData: string,
-    usePassedPageSettings?: boolean,
-  ): Promise<void> {
-    try {
-      const parser = new DOMParser()
-      const doc = parser.parseFromString(htmlData, 'text/html')
-
-      const importedPageBuilder = doc.querySelector('#pagebuilder') as HTMLElement | null
-      const livePageBuilder = document.querySelector('#pagebuilder') as HTMLElement | null
+      // Fallback to stored page settings if pageSettings is still null
+      if (!pageSettings) {
+        pageSettings = this.pageBuilderStateStore.getPageBuilderConfig?.pageSettings || null
+      }
 
-      if (livePageBuilder) {
-        const storedPageSettings =
-          this.pageBuilderStateStore.getPageBuilderConfig &&
-          this.pageBuilderStateStore.getPageBuilderConfig.pageSettings
-
-        // Decide which pageSettings to use
-        let pageSettings = null
-        if (usePassedPageSettings) {
-          pageSettings = storedPageSettings
-        } else if (importedPageBuilder) {
-          pageSettings = {
-            classes: importedPageBuilder.className || '',
-            style: importedPageBuilder.getAttribute('style') || '',
-          }
-        } else {
-          pageSettings = storedPageSettings
-        }
+      // Apply the page settings to the live page builder
+      if (pageSettings && livePageBuilder) {
+        // Remove existing class and style attributes
+        livePageBuilder.removeAttribute('class')
+        livePageBuilder.removeAttribute('style')
 
-        // Restore page-level settings like class and style
-        if (pageSettings) {
-          livePageBuilder.removeAttribute('class')
-          livePageBuilder.removeAttribute('style')
-          livePageBuilder.className = pageSettings.classes || ''
-          livePageBuilder.setAttribute('style', this.convertStyleObjectToString(pageSettings.style))
-        }
+        // Apply new classes and styles
+        livePageBuilder.className = pageSettings.classes || ''
+        livePageBuilder.setAttribute('style', this.convertStyleObjectToString(pageSettings.style))
       }
 
       // Select all <section> elements
@@ -2619,10 +2540,7 @@ export class PageBuilderService {
         const componentId = htmlElement.getAttribute('data-componentid')!
 
         // Ensure data-component-title exists
-        const title =
-          htmlElement.getAttribute('title') ||
-          htmlElement.getAttribute('data-component-title') ||
-          'Untitled Component'
+        const title = htmlElement.getAttribute('data-component-title') || 'Untitled Component'
 
         htmlElement.setAttribute('data-component-title', title)
 
@@ -2642,6 +2560,10 @@ export class PageBuilderService {
     } catch (error) {
       console.error('Error parsing HTML components:', error)
       this.deleteAllComponentsFromDOM()
+      // Clear selections and re-bind events
+      await this.clearHtmlSelection()
+      await nextTick()
+      await this.addListenersToEditableElements()
     }
   }