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

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

@@ -164,7 +164,9 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s =
   "Continue Your Work?": "继续您的工作？",
   "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "我们注意到您上次有一些更改没有保存。您是想从上次离开的地方继续，还是使用当前从数据库加载的版本？",
   "Use Saved Version": "使用保存的版本",
-  "Continue Where I Left Off": "从我离开的地方继续"
+  "Continue Where I Left Off": "从我离开的地方继续",
+  "HTML Editor": "HTML 编辑器",
+  "Gain full control over components by editing the raw HTML.": "通过编辑原始 HTML 获得对组件的完全控制。"
 };
 export {
   m as Add,

package/package.json

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

package/src/Components/Modals/ModalBuilder.vue

@@ -72,7 +72,7 @@ const maxWidthClass = computed(() => {
         ></div>
 
         <div
-          class="pbx-relative pbx-inline-block pbx-bg-white pbx-rounded-xl pbx-text-left pbx-overflow-hidden pbx-shadow-xl pbx-transform pbx-transition-all pbx-max-w-[96vh] lg:pbx-max-h-[98vh] pbx-max-h-[85vh] pbx-overflow-y-scroll pbx-w-full"
+          class="pbx-relative pbx-inline-block pbx-bg-white pbx-rounded-xl pbx-text-left pbx-shadow-xl pbx-transform pbx-transition-all pbx-max-w-[96vh] lg:pbx-max-h-[98vh] pbx-max-h-[85vh] pbx-overflow-y-auto pbx-w-full"
           :class="[
             maxWidthClass ? maxWidthClass : '',
             minHeight ? minHeight : '',

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

@@ -5,12 +5,20 @@ import ModalBuilder from '../../../../Components/Modals/ModalBuilder.vue'
 import EditorAccordion from '../EditorAccordion.vue'
 import { getPageBuilder } from '../../../../composables/builderInstance'
 import { useTranslations } from '../../../../composables/useTranslations'
+import { delay } from '../../../../composables/delay'
 
 const pageBuilderService = getPageBuilder()
 const pageBuilderStateStore = sharedPageBuilderStore
 const { translate } = useTranslations()
 
+const props = defineProps({
+  globalPage: {
+    type: Boolean,
+  },
+})
+
 const getElement = computed(() => pageBuilderStateStore.getElement)
+const getComponents = computed(() => pageBuilderStateStore.getComponents)
 
 const elementHTML = computed(() => {
   if (!getElement.value || !(getElement.value instanceof HTMLElement)) {
@@ -22,20 +30,70 @@ const elementHTML = computed(() => {
 const showModalHTMLEditor = ref(false)
 
 const editableHtml = ref('')
+const editableComponents = ref('')
 
 const handleShowHTMLEditor = () => {
-  editableHtml.value = elementHTML.value
   showModalHTMLEditor.value = true
+
+  if (!props.globalPage) {
+    editableHtml.value = elementHTML.value
+  }
+
+  if (props.globalPage) {
+    const compsHTMLString =
+      Array.isArray(getComponents.value) &&
+      getComponents.value
+        .map((comp) => {
+          return comp.html_code
+            .replace(/data-componentid="[^"]*"/g, '') // remove data-componentid
+            .replace(/\s{2,}/g, ' ') // optional: clean up excess spaces
+        })
+        .join('\n')
+
+    editableComponents.value = compsHTMLString
+  }
 }
 
 const handleCloseHTMLEditor = () => {
   showModalHTMLEditor.value = false
 }
 
-const handleSaveChanges = () => {
-  pageBuilderService.applyModifiedHTML(editableHtml.value)
+const isLoading = ref(false)
+const errSaveComponents = ref(null)
 
-  showModalHTMLEditor.value = true
+const handleSaveChangesElement = async () => {
+  errSaveComponents.value = null
+  isLoading.value = true
+  await delay(300)
+
+  const error = await pageBuilderService.applyModifiedHTML(editableHtml.value)
+
+  if (error) {
+    errSaveComponents.value = error
+    isLoading.value = false
+    return
+  }
+
+  showModalHTMLEditor.value = false
+  isLoading.value = false
+}
+
+const handleSaveChangesComponents = async () => {
+  errSaveComponents.value = null
+  isLoading.value = true
+  errSaveComponents.value = null
+  await delay(300)
+
+  const error = await pageBuilderService.applyModifiedComponents(editableComponents.value)
+
+  if (error) {
+    errSaveComponents.value = error
+    isLoading.value = false
+    return
+  }
+
+  showModalHTMLEditor.value = false
+  isLoading.value = false
 }
 </script>
 <template>
@@ -44,9 +102,7 @@ const handleSaveChanges = () => {
     <template #content>
       <div class="pbx-my-2 pbx-py-2">
         <label for="vertical-margin" class="pbx-myPrimaryInputLabel">{{
-          translate(
-            'Gain full control over individual components by editing the raw HTML of any selected element. This feature empowers advanced users to fine-tune the HTML structure,',
-          )
+          translate('Gain full control over components by editing the raw HTML.')
         }}</label>
         <hr />
       </div>
@@ -57,32 +113,100 @@ const handleSaveChanges = () => {
   </EditorAccordion>
   <ModalBuilder
     maxWidth="7xl"
-    minHeight="pbx-min-h-[65vh] pbx-max-h-[65vh]"
     :showModalBuilder="showModalHTMLEditor"
     :title="translate('HTML Editor')"
     @closeMainModalBuilder="handleCloseHTMLEditor"
   >
-    <textarea
-      id="html-editor"
-      v-model="editableHtml"
-      class="pbx-h-full pbx-font-sans pbx-bg-gray-900 pbx-text-white pbx-w-full"
-      style="overflow: auto; min-height: 400px"
-    ></textarea>
-    <div
-      class="pbx-border-0 pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-mt-4 pbx-flex pbx-items-center pbx-justify-end"
-    >
-      <div class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center">
-        <div
-          class="sm:pbx-grid-cols-2 sm:pbx-items-end sm:pbx-justify-end pbx-flex sm:pbx-flex-row pbx-flex-col pbx-myPrimaryGap sm:pbx-w-5/6 pbx-w-full"
-        >
-          <button @click="handleCloseHTMLEditor" type="button" class="pbx-mySecondaryButton">
-            {{ translate('Close') }}
-          </button>
-          <button @click="handleSaveChanges" type="button" class="pbx-myPrimaryButton">
-            {{ translate('Save') }}
-          </button>
+    <template v-if="!globalPage">
+      <textarea
+        id="html-editor"
+        v-model="editableHtml"
+        class="pbx-h-full pbx-font-sans pbx-bg-gray-900 pbx-text-white pbx-w-full"
+        style="overflow: auto; min-height: 400px"
+      ></textarea>
+      <div class="pbx-flex pbx-justify-end pbx-min-h-6">
+        <p v-if="errSaveComponents" class="pbx-myPrimaryParagraphError">
+          Error: {{ errSaveComponents }}
+        </p>
+      </div>
+      <div
+        class="pbx-border-0 pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-flex pbx-items-center pbx-justify-end"
+      >
+        <div class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center">
+          <div
+            class="sm:pbx-grid-cols-2 sm:pbx-items-end sm:pbx-justify-end pbx-flex sm:pbx-flex-row pbx-flex-col pbx-myPrimaryGap sm:pbx-w-5/6 pbx-w-full"
+          >
+            <template v-if="!isLoading">
+              <button @click="handleCloseHTMLEditor" type="button" class="pbx-mySecondaryButton">
+                {{ translate('Close') }}
+              </button>
+              <button @click="handleSaveChangesElement" type="button" class="pbx-myPrimaryButton">
+                {{ translate('Save') }}
+              </button>
+            </template>
+            <template v-if="isLoading">
+              <div class="pbx-flex pbx-items-center pbx-my-2 pbx-justify-end">
+                <div
+                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+                >
+                  <span
+                    class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
+                    >Loading...</span
+                  >
+                </div>
+              </div>
+            </template>
+          </div>
         </div>
       </div>
-    </div>
+    </template>
+
+    <template v-if="globalPage">
+      <textarea
+        id="html-editor"
+        v-model="editableComponents"
+        class="pbx-h-full pbx-font-sans pbx-bg-gray-900 pbx-text-white pbx-w-full"
+        style="overflow: auto; min-height: 400px"
+      ></textarea>
+      <div class="pbx-flex pbx-justify-end pbx-min-h-6">
+        <p v-if="errSaveComponents" class="pbx-myPrimaryParagraphError">
+          Error: {{ errSaveComponents }}
+        </p>
+      </div>
+      <div
+        class="pbx-border-0 pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-flex pbx-items-center pbx-justify-end"
+      >
+        <div class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center">
+          <div
+            class="sm:pbx-grid-cols-2 sm:pbx-items-end sm:pbx-justify-end pbx-flex sm:pbx-flex-row pbx-flex-col pbx-myPrimaryGap sm:pbx-w-5/6 pbx-w-full"
+          >
+            <template v-if="!isLoading">
+              <button @click="handleCloseHTMLEditor" type="button" class="pbx-mySecondaryButton">
+                {{ translate('Close') }}
+              </button>
+              <button
+                @click="handleSaveChangesComponents"
+                type="button"
+                class="pbx-myPrimaryButton"
+              >
+                {{ translate('Save') }}
+              </button>
+            </template>
+            <template v-if="isLoading">
+              <div class="pbx-flex pbx-items-center pbx-my-2 pbx-justify-end">
+                <div
+                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+                >
+                  <span
+                    class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
+                    >Loading...</span
+                  >
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </template>
   </ModalBuilder>
 </template>

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

@@ -290,7 +290,7 @@ const handleCloseGlobalPageStyles = async function () {
               <StyleEditor></StyleEditor>
             </article>
             <article class="pbx-my-1">
-              <HTMLEditor></HTMLEditor>
+              <HTMLEditor :globalPage="true"></HTMLEditor>
             </article>
           </div>
         </div>

package/src/css/style.css

@@ -90,7 +90,7 @@
   }
 
   .pbx-myPrimaryParagraphError {
-    @apply pbx-myPrimaryParagraph pbx-mt-1 pbx-italic pbx-text-myPrimaryErrorColor;
+    @apply pbx-myPrimaryParagraph pbx-mt-1 pbx-italic pbx-text-myPrimaryErrorColor pbx-text-sm;
   }
 
   /*

package/src/locales/ar.json

@@ -161,7 +161,9 @@
   "Four Square Images With Text": "أربع صور مربعة مع نص",
   "Four Square Images": "أربع صور مربعة",
   "Continue Your Work?": "أترغب في متابعة عملك؟",
-  "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "لاحظنا أن لديك بعض التغييرات التي لم يتم حفظها في المرة الأخيرة. هل ترغب في المتابعة من حيث توقفت، أم استخدام النسخة المح��لة حاليًا من قاعدة البيانات؟",
+  "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "لاحظنا وجود بعض التغييرات التي لم تُحفظ في المرة السابقة. هل ترغب في المتابعة من حيث توقفت، أم استخدام الإصدار المُحمّل حاليًا من قاعدة البيانات؟",
   "Use Saved Version": "استخدام النسخة المحفوظة",
-  "Continue Where I Left Off": "المتابعة من حيث توقفت"
+  "Continue Where I Left Off": "المتابعة من حيث توقفت",
+  "HTML Editor": "محرر HTML",
+  "Gain full control over components by editing the raw HTML.": "احصل على التحكم الكامل في المكونات عن طريق تحرير HTML الخام."
 }

package/src/locales/de.json

@@ -164,5 +164,7 @@
   "Continue Your Work?": "Möchten Sie Ihre Arbeit fortsetzen?",
   "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "Wir haben festgestellt, dass Sie beim letzten Mal einige Änderungen nicht gespeichert haben. Möchten Sie dort weitermachen, wo Sie aufgehört haben, oder die aktuell aus der Datenbank geladene Version verwenden?",
   "Use Saved Version": "Gespeicherte Version verwenden",
-  "Continue Where I Left Off": "Dort weitermachen, wo ich aufgehört habe"
+  "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."
 }

package/src/locales/en.json

@@ -164,5 +164,7 @@
   "Continue Your Work?": "Continue Your Work?",
   "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?",
   "Use Saved Version": "Use Saved Version",
-  "Continue Where I Left Off": "Continue Where I Left Off"
+  "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."
 }

package/src/locales/es.json

@@ -164,5 +164,7 @@
   "Continue Your Work?": "¿Desea continuar su trabajo?",
   "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "Notamos que tiene algunos cambios que no se guardaron la última vez. ¿Le gustaría continuar donde lo dejó o usar la versión que está cargada actualmente desde la base de datos?",
   "Use Saved Version": "Usar la versión guardada",
-  "Continue Where I Left Off": "Continuar donde lo dejé"
+  "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."
 }

package/src/locales/fr.json

@@ -164,5 +164,7 @@
   "Continue Your Work?": "Continuer votre travail ?",
   "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "Nous avons remarqué que vous avez des modifications qui n'ont pas été enregistrées la dernière fois. Souhaitez-vous reprendre là où vous vous êtes arrêté, ou utiliser la version actuellement chargée depuis la base de données ?",
   "Use Saved Version": "Utiliser la version enregistrée",
-  "Continue Where I Left Off": "Continuer là où je me suis arrêté"
+  "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."
 }

package/src/locales/hi.json

@@ -165,5 +165,7 @@
   "Continue Your Work?": "अपना काम जारी रखें?",
   "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "हमने देखा कि आपके पास कुछ बदलाव हैं जो पिछली बार सहेजे नहीं गए थे। क्या आप वहीं से शुरू करना चाहेंगे जहां आपने छोड़ा था, या डेटाबेस से वर्तमान में लोड किए गए संस्करण का उपयोग करना चाहेंगे?",
   "Use Saved Version": "सहेजा गया संस्करण उपयोग करें",
-  "Continue Where I Left Off": "वहीं से जारी रखें जहां मैंने छोड़ा ��ा"
+  "Continue Where I Left Off": "वहीं से शुरु करो जहाँ मैने छोड़ा था",
+  "HTML Editor": "HTML संपादक",
+  "Gain full control over components by editing the raw HTML.": "कच्चे HTML को संपादित करके घटकों पर पूर्ण नियंत्रण प्राप्त करें।"
 }

package/src/locales/ja.json

@@ -25,7 +25,7 @@
   "Remove all Components": "すべてのコンポーネントを削除",
   "Are you sure you want to remove all Components?": "すべてのコンポーネントを削除してもよろしいですか？",
   "Styles": "スタイル",
-  "Apply styles that affect the entire page. These settings include global font family, text color, background color, and other universal styles that apply to all sections.": "ページ全体に影響を与���るスタイルを適用します。これらの設定には、グローバルフォントファミリー、テキストカラー、背景色、すべてのセクションに適用されるその他のユニバーサルスタイルが含まれます。",
+  "Apply styles that affect the entire page. These settings include global font family, text color, background color, and other universal styles that apply to all sections.": "ページ全体に適用されるスタイルを適用します。これらの設定には、グローバルフォントファミリー、テキストカラー、背景色、その他すべてのセクションに適用されるユニバーサルスタイルが含まれます。",
   "Update Page Styles": "ページスタイルを更新",
   "Download HTML": "HTMLをダウンロード",
   "Export the entire page as a standalone HTML file. This includes all sections, content, and applied styles, making it ready for use or integration elsewhere.": "ページ全体をスタンドアロンのHTMLファイルとしてエクスポートします。これには、すべてのセクション、コンテンツ、および適用されたスタイルが含まれ、他の場所での使用または統合の準備が整います。",
@@ -85,7 +85,7 @@
   "Demo Content": "デモコンテンツ",
   "Demo Description": "軽量で無料のVue Click & Dropページビルダーをご紹介します。Vueを使用してデジタル体験を簡単に作成および強化します。強力なものすべてが複雑である必要はありません。このミニマリストで軽量なページビルダーは、シンプルさとスピードに焦点を当てたエレガントで直感的なインターフェイスを提供します。リスト、求人ボード、またはブログ投稿など、完全にレスポンシブなページを作成し、無料のClick & Dropページビルダーを使用してコンテンツを簡単に管理します。",
   "Demo Description Two": "成長のために設計されたページビルダー。完全にカスタマイズ可能で常に応答性があり、あらゆるニーズに対応するように設計された既製のコンポーネントを使用して、ウェブサイトのページを作成します。成長中の商人、ブランド、代理店のための強力なページビルダー。",
-  "Demo Description Three": "��ザイナーに愛されているウェブサイトビルダー。あらゆる画面サイズに合わせてレイアウトを簡単にデザイン、プレビュー、調整できます。クリーン。高速。直感的。強力なものすべてが複雑に見える必要はありません。",
+  "Demo Description Three": "デザイナーに愛されるウェブサイトビルダー。あらゆる画面サイズに合わせてレイアウトを簡単にデザイン、プレビュー、調整できます。シンプルで使いやすく、高速で、直感的です。パワフルなデザインは必ずしも複雑に見えなくても構いません。",
   "Demo Description Four": "すべてのデバイスでサイトが見栄えよく表示されるようにします。テキストコンテンツをライブおよびリアルタイムで編集します。あなたのスタイルに合った完璧なフォントを選択してください。変更を元に戻す機能で自信を持って実験してください。プレフィックス付きのスタイル。ビルダーとアプリの間でスタイルの競合のリスクはありません。",
   "Demo Title": "素晴らしいページのためのウェブビルダー",
   "Demo Title Two": "Vueで公開するだけ",
@@ -162,7 +162,9 @@
   "Four Square Images With Text": "テキスト付きの4つの正方形の画像",
   "Four Square Images": "4つの正方形の画像",
   "Continue Your Work?": "作業を続行しますか？",
-  "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "前回保存されなかった変更があります。中断したところ��ら再開しますか、それとも現在データベースから読み込まれているバージョンを使用しますか？",
+  "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "前回保存されなかった変更がいくつかあるようです。中断したところから再開しますか、それともデータベースから現在読み込まれているバージョンを使用しますか",
   "Use Saved Version": "保存されたバージョンを使用",
-  "Continue Where I Left Off": "中断したところから続行"
+  "Continue Where I Left Off": "中断したところから続行",
+  "HTML Editor": "HTMLエディター",
+  "Gain full control over components by editing the raw HTML.": "生の HTML を編集することで、コンポーネントを完全に制御できます。"
 }

package/src/locales/pt.json

@@ -164,5 +164,7 @@
   "Continue Your Work?": "Continuar seu trabalho?",
   "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "Percebemos que você tem algumas alterações que não foram salvas da última vez. Gostaria de continuar de onde parou ou usar a versão que está carregada atualmente no banco de dados?",
   "Use Saved Version": "Usar a versão salva",
-  "Continue Where I Left Off": "Continuar de onde parei"
+  "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."
 }

package/src/locales/ru.json

@@ -72,7 +72,7 @@
   "property": "свойство",
   "value": "значение",
   "Editing": "Редактирование",
-  "Loading...": "Загруз��а...",
+  "Loading...": "Загрузка...",
   "Background Color": "Цвет фона",
   "Text Color": "Цвет текста",
   "Default black": "Черный по умолчанию",
@@ -164,5 +164,7 @@
   "Continue Your Work?": "Продолжить работу?",
   "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "Мы заметили, что у вас есть несохраненные изменения с прошлого раза. Хотите продолжить с того места, где остановились, или использовать версию, загруженную из базы данных?",
   "Use Saved Version": "Использовать сохраненную версию",
-  "Continue Where I Left Off": "Продолжить с того места, где я остановился"
+  "Continue Where I Left Off": "Продолжить с того места, где я остановился",
+  "HTML Editor": "HTML-редактор",
+  "Gain full control over components by editing the raw HTML.": "Получите полный контроль над компонентами, редактируя необработанный HTML-код."
 }

package/src/locales/zh-Hans.json

@@ -164,5 +164,7 @@
   "Continue Your Work?": "继续您的工作？",
   "We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?": "我们注意到您上次有一些更改没有保存。您是想从上次离开的地方继续，还是使用当前从数据库加载的版本？",
   "Use Saved Version": "使用保存的版本",
-  "Continue Where I Left Off": "从我离开的地方继续"
+  "Continue Where I Left Off": "从我离开的地方继续",
+  "HTML Editor": "HTML 编辑器",
+  "Gain full control over components by editing the raw HTML.": "通过编辑原始 HTML 获得对组件的完全控制。"
 }

package/src/services/PageBuilderService.ts

@@ -491,8 +491,9 @@ export class PageBuilderService {
         }
 
         if (passedComponentsArray && localStorageData) {
-          this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
           await this.completeMountProcess(JSON.stringify(passedComponentsArray), true)
+          await delay(500)
+          this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
           return
         }
         if (!passedComponentsArray && localStorageData && !this.savedMountComponents) {
@@ -520,7 +521,7 @@ export class PageBuilderService {
         // No Page Builder Is  present in DOM initially
         if (localStorageData && this.isPageBuilderMissingOnStart) {
           await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
-          await delay(400)
+          await delay(500)
           this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
           this.pendingMountComponents = null
           return
@@ -2792,30 +2793,55 @@ export class PageBuilderService {
     }
   }
 
-  public async applyModifiedHTML(htmlString: string) {
+  /**
+   * 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) {
-      console.warn('Could not parse element from HTML string:', htmlString)
-      return
+      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)
-    } else {
-      console.warn('No valid element to replace in DOM')
     }
 
     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
   }
 
   /**