@myissue/vue-website-page-builder 3.3.64 → 3.3.65

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

@@ -2,6 +2,7 @@
 import { computed, ref, watch, nextTick } from 'vue'
 import { sharedPageBuilderStore } from '../../../stores/shared-store'
 import ClassEditor from './Editables/ClassEditor.vue'
+import StyleEditor from './Editables/StyleEditor.vue'
 import ImageEditor from './Editables/ImageEditor.vue'
 import OpacityEditor from './Editables/OpacityEditor.vue'
 import Typography from './Editables/Typography.vue'
@@ -22,12 +23,11 @@ import ModalBuilder from '../../../Components/Modals/ModalBuilder.vue'
 import { extractCleanHTMLFromPageBuilder } from '../../../composables/extractCleanHTMLFromPageBuilder'
 
 const pageBuilderService = getPageBuilder()
-// Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 
-// emit
-const emit = defineEmits(['closeEditor'])
+defineEmits(['closeEditor'])
 
+const isLoadingPageStyles = ref(null)
 const getComponents = computed(() => {
   return pageBuilderStateStore.getComponents
 })
@@ -35,7 +35,6 @@ const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
 
-// Get tagName of element
 const elementTag = computed(() => {
   return getElement.value?.tagName
 })
@@ -106,15 +105,8 @@ const handleUpdatePageStyles = async function () {
   await pageBuilderService.globalPageStyles()
 }
 
-const clearClassesFromPage = async function () {
-  await pageBuilderService.clearClassesFromPage()
-}
-
-const clearInlineStylesFromPagee = async function () {
-  await pageBuilderService.clearInlineStylesFromPagee()
-}
-
 const handleCloseGlobalPageStyles = async function () {
+  isLoadingPageStyles.value = true
   await pageBuilderService.handleManualSave()
 
   // Remove global highlight if present
@@ -124,6 +116,7 @@ const handleCloseGlobalPageStyles = async function () {
   }
 
   showModalGlobalPageStyles.value = false
+  isLoadingPageStyles.value = false
 }
 </script>
 
@@ -146,7 +139,7 @@ const handleCloseGlobalPageStyles = async function () {
     </div>
 
     <div
-      v
+      v-if="!showModalGlobalPageStyles"
       ref="scrollContainer"
       @scroll="onScroll"
       class="pbx-pl-3 pbx-pr-3 pbx-mb-4 pbx-overflow-y-scroll"
@@ -180,6 +173,9 @@ const handleCloseGlobalPageStyles = async function () {
         <article class="pbx-my-1 pbx-bg-white">
           <ClassEditor></ClassEditor>
         </article>
+        <article class="pbx-my-1 pbx-bg-white">
+          <StyleEditor></StyleEditor>
+        </article>
       </div>
 
       <!-- Global Page Styles -->
@@ -227,63 +223,59 @@ const handleCloseGlobalPageStyles = async function () {
 
     <ModalBuilder
       maxWidth="md"
-      minHeight="pbx-h-[90vh]"
+      minHeight="pbx-min-h-[65vh] pbx-max-h-[65vh]"
       :showModalBuilder="showModalGlobalPageStyles"
       title="Global Page Styles"
       @closeMainModalBuilder="handleCloseGlobalPageStyles"
     >
-      <div class="pbx-min-h-[90vh] pbx-flex pbx-flex-col pbx-gap-2 pbx-pt-4 pbx-pb-2">
-        <p class="pbx-myPrimaryParagraph">
-          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.
-        </p>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <Typography></Typography>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <TextColorEditor :globalPageLayout="true"></TextColorEditor>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <BackgroundColorEditor :globalPageLayout="true"></BackgroundColorEditor>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <Padding> </Padding>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <Margin> </Margin>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <BorderRadius></BorderRadius>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <Borders></Borders>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <ClassEditor></ClassEditor>
-        </article>
-      </div>
-      <label class="pbx-myPrimaryInputLabel pbx-my-4">
-        Choose an action to clean up your page:
-      </label>
-      <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-1 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 pbx-mt-4"
-          >
-            <!-- Button: Clear all CSS classes -->
-            <button @click="clearClassesFromPage" class="pbx-myPrimaryButton" type="button">
-              Clear All CSS Classes
-            </button>
-
-            <!-- Button: Clear all inline styles -->
-            <button @click="clearInlineStylesFromPagee" class="pbx-myPrimaryButton" type="button">
-              Clear All Inline Styles
-            </button>
+      <div class="pbx-flex pbx-flex-col pbx-gap-2 pbx-pt-4 pbx-pb-2">
+        <div v-if="isLoadingPageStyles">
+          <div class="pbx-flex pbx-items-center pbx-my-2 pbx-py-4 pbx-px-2 pbx-justify-center">
+            <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>
+        </div>
+        <div v-if="!isLoadingPageStyles && showModalGlobalPageStyles" class="pbx-pb-12">
+          <div>
+            <p class="pbx-myPrimaryParagraph">
+              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.
+            </p>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <Typography></Typography>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <TextColorEditor :globalPageLayout="true"></TextColorEditor>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <BackgroundColorEditor :globalPageLayout="true"></BackgroundColorEditor>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <Padding> </Padding>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <Margin> </Margin>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <BorderRadius></BorderRadius>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <Borders></Borders>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <ClassEditor></ClassEditor>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <StyleEditor></StyleEditor>
+            </article>
           </div>
         </div>
-        <!--v-if-->
       </div>
     </ModalBuilder>
   </div>

package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue

@@ -35,7 +35,7 @@ const firstModalButtonFunctionDynamicModalBuilder = ref(null)
 const secondModalButtonFunctionDynamicModalBuilder = ref(null)
 const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
 
-const deleteAllComponentsFromDOM = function () {
+const handleDeleteComponentsFromDOM = function () {
   showModalDeleteAllComponents.value = true
   typeModal.value = 'delete'
   gridColumnModal.value = 2
@@ -53,11 +53,10 @@ const deleteAllComponentsFromDOM = function () {
   // handle click
   thirdModalButtonFunctionDynamicModalBuilder.value = async function () {
     isDeletingLayout.value = true
-    pageBuilderService.deleteAllComponentsFromDOM()
     await pageBuilderService.clearHtmlSelection()
-    await pageBuilderService.removeCurrentComponentsFromLocalStorage()
-
+    await pageBuilderService.handleFormSubmission()
     await delay(500)
+
     showModalDeleteAllComponents.value = false
     isDeletingLayout.value = false
   }
@@ -113,7 +112,9 @@ const openHTMLSettings = function () {
               getPageBuilderConfig.userForPageBuilder.name[0]
             }}
           </div>
-          <div class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal">
+          <div
+            class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal w-max break-keep"
+          >
             {{ getPageBuilderConfig.userForPageBuilder.name }}
           </div>
         </div>
@@ -141,7 +142,9 @@ const openHTMLSettings = function () {
               class="pbx-block pbx-inset-0 pbx-object-top pbx-h-8 pbx-min-h-8 pbx-max-h-8 pbx-w-8 pbx-min-w-8 pbx-max-w-8 pbx-object-cover pbx-rounded-full"
             />
           </div>
-          <div class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal">
+          <div
+            class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal w-max break-keep"
+          >
             {{ getPageBuilderConfig.userForPageBuilder.name }}
           </div>
         </div>
@@ -185,7 +188,7 @@ const openHTMLSettings = function () {
 
             <!-- Delete Layout Start -->
             <button
-              @click="deleteAllComponentsFromDOM"
+              @click="handleDeleteComponentsFromDOM"
               class="pbx-myPrimaryDeleteButton pbx-text-xs pbx-font-normal"
               type="button"
             >

package/src/PageBuilder/PageBuilder.vue

@@ -34,6 +34,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  showPublishButton: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 // Use shared Pinia instance for PageBuilder package
@@ -49,11 +53,15 @@ provide('internalPinia', internalPinia)
 provide('CustomMediaComponent', props.CustomMediaLibraryComponent)
 provide('CustomBuilderComponents', props.CustomBuilderComponents)
 
-const emit = defineEmits(['handleClosePageBuilder'])
+const emit = defineEmits(['handleClosePageBuilder', 'handlePublishPageBuilder'])
 
 const closePageBuilder = function () {
   emit('handleClosePageBuilder')
 }
+const closePublish = function () {
+  pageBuilderService.handleManualSave()
+  emit('handlePublishPageBuilder')
+}
 
 // Provide modal close function for custom components
 const closeAddComponentModal = () => {
@@ -185,8 +193,6 @@ const handleSelectComponent = function (componentObject) {
   pageBuilderStateStore.setComponent(componentObject)
 }
 
-const draggableZone = ref(null)
-
 const getIsLoadingGlobal = computed(() => {
   return pageBuilderStateStore.getIsLoadingGlobal
 })
@@ -292,10 +298,10 @@ let lastToolbarTop = null
 
 function updatePanelPosition() {
   const container = pbxToolBar.value
-  const editToolbar = container && container.querySelector('#editToolbar')
+  const editToolbarElement = container && container.querySelector('#pbxEditToolbar')
   const restored = getRestoredElement.value
 
-  if (!container || !editToolbar) return
+  if (!container || !editToolbarElement) return
 
   const selected = container.querySelector('[selected]')
 
@@ -304,33 +310,41 @@ function updatePanelPosition() {
     const containerRect = container.getBoundingClientRect()
 
     const left =
-      selectedRect.left - containerRect.left + selectedRect.width / 2 - editToolbar.offsetWidth / 2
+      selectedRect.left -
+      containerRect.left +
+      selectedRect.width / 2 -
+      editToolbarElement.offsetWidth / 2
 
     const GAP = 20 // px
     const proposedTop =
-      selectedRect.top - containerRect.top + container.scrollTop - editToolbar.offsetHeight - GAP
+      selectedRect.top -
+      containerRect.top +
+      container.scrollTop -
+      editToolbarElement.offsetHeight -
+      GAP
 
     const top = Math.max(0, proposedTop)
 
-    editToolbar.style.position = 'absolute'
-    editToolbar.style.left = `${left}px`
-    editToolbar.style.top = `${top}px`
-    editToolbar.classList.add('is-visible')
+    editToolbarElement.style.position = 'absolute'
+    editToolbarElement.style.left = `${left}px`
+    editToolbarElement.style.top = `${top}px`
+    editToolbarElement.classList.add('is-visible')
 
     lastToolbarLeft = left
     lastToolbarTop = top
   } else if (restored && lastToolbarLeft !== null && lastToolbarTop !== null) {
-    editToolbar.style.position = 'absolute'
-    editToolbar.style.left = `${lastToolbarLeft}px`
-    editToolbar.style.top = `${lastToolbarTop}px`
-    editToolbar.classList.add('is-visible')
+    editToolbarElement.style.position = 'absolute'
+    editToolbarElement.style.left = `${lastToolbarLeft}px`
+    editToolbarElement.style.top = `${lastToolbarTop}px`
+    editToolbarElement.classList.add('is-visible')
   } else {
-    editToolbar.classList.remove('is-visible')
+    editToolbarElement.classList.remove('is-visible')
   }
 }
 
 onMounted(async () => {
-  await pageBuilderService.completeBuilderInitialization()
+  // await delay(2000)
+  await pageBuilderService.completeBuilderInitialization(undefined, true)
 
   updatePanelPosition()
 
@@ -602,7 +616,7 @@ onMounted(async () => {
               "
             >
               <div
-                class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-border-0 pbx-border-solid pbx-border-r pbx-border-gray-200 lg:pbx-pr-6"
+                class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-border-gray-200"
               >
                 <span class="lg:pbx-block pbx-hidden">
                   <div class="pbx-whitespace-nowrap pbx-cursor-pointer">Add new Components</div>
@@ -656,18 +670,40 @@ onMounted(async () => {
             </div>
           </div>
         </div>
-        <!-- Options # Start -->
-        <div
-          @click.self="
-            async () => {
-              await pageBuilderService.clearHtmlSelection()
-            }
-          "
-          class="pbx-flex pbx-items-center pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
-          :class="[showCloseButton ? 'pbx-justify-between' : 'pbx-justify-end']"
-        >
-          <ToolbarOption></ToolbarOption>
-          <template v-if="showCloseButton">
+
+        <div class="pbx-flex gap-2 pbx-items-center">
+          <!-- Options # Start -->
+          <div
+            @click.self="
+              async () => {
+                await pageBuilderService.clearHtmlSelection()
+              }
+            "
+            class="pbx-flex pbx-items-center pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
+            :class="[showCloseButton ? 'pbx-justify-between' : 'pbx-justify-end']"
+          >
+            <ToolbarOption></ToolbarOption>
+          </div>
+          <!-- Options # Start -->
+        </div>
+        <!-- Close & Publish buttons start -->
+        <template v-if="showPublishButton">
+          <div class="pbx-ml-2">
+            <button
+              class="pbx-myPrimaryButton"
+              @click="
+                async () => {
+                  closePublish()
+                  await pageBuilderService.clearHtmlSelection()
+                }
+              "
+            >
+              Publish
+            </button>
+          </div>
+        </template>
+        <template v-if="showCloseButton">
+          <div class="pbx-ml-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="
@@ -679,9 +715,10 @@ onMounted(async () => {
             >
               <span class="material-symbols-outlined"> close </span>
             </button>
-          </template>
-        </div>
-        <!-- Options # Start -->
+          </div>
+        </template>
+
+        <!-- Close & Publish buttons end -->
       </div>
 
       <!-- Top Layout Save And Reset Area - End -->
@@ -728,12 +765,11 @@ onMounted(async () => {
           :class="{ 'pbx-mr-2': !getMenuRight, '': getMenuRight }"
         >
           <div
-            id="editToolbar"
-            class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-min-w-72 pbx-items-center pbx-rounded-full pbx-px-4 pbx-bg-red-200 pbx-h-0"
+            id="pbxEditToolbar"
+            class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-items-center pbx-rounded pbx-px-4 pbx-bg-red-200 pbx-h-0"
             style="
               box-shadow: 0 0 0 10px oklch(86.9% 0.005 56.366);
               background: oklch(86.9% 0.005 56.366);
-              border-radius: 9999px;
             "
           >
             <template v-if="getElement">
@@ -751,26 +787,14 @@ onMounted(async () => {
           </div>
           <!-- Element Popover toolbar end -->
 
-          <div
-            id="contains-pagebuilder"
-            class="pbx-pl-4 pbx-pr-4 pbx-pb-4 pbx-pt-1 pbx-h-full pbx-overflow-y-auto"
-          >
-            <div id="pagebuilder" class="pbx-text-black pbx-font-sans">
-              <div ref="draggableZone">
-                <!-- Added Components to DOM # start -->
-                <div
-                  v-for="component in getComponents"
-                  :key="component.id"
-                  id="page-builder-editor-editable-area"
-                  class="pbx-bg-white pbx-grow"
-                >
-                  <div @mouseup="handleSelectComponent(component)" class="pbx-relative group">
-                    <div v-html="component.html_code"></div>
-                  </div>
-                </div>
-                <!-- Added Components to DOM # end -->
-              </div>
-            </div>
+          <div id="pagebuilder" class="pbx-text-black pbx-font-sans">
+            <template v-for="component in getComponents" :key="component.id">
+              <section
+                v-if="component.html_code"
+                v-html="component.html_code"
+                @mouseup="handleSelectComponent(component)"
+              ></section>
+            </template>
           </div>
         </main>
 
@@ -781,7 +805,7 @@ onMounted(async () => {
               await pageBuilderService.clearHtmlSelection()
             }
           "
-          class="pbx-min-w-[3.5rem] pbx-pt-7 pbx-pb-2 pbx-ml-2 pbx-border-l-solid pbx-border-gray-200"
+          class="pbx-min-w-[3rem] pbx-pt-6 pbx-pb-2"
         >
           <div
             @click.self="
@@ -789,15 +813,16 @@ onMounted(async () => {
                 await pageBuilderService.clearHtmlSelection()
               }
             "
-            class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4"
+            class="pbx-flex pbx-flex-col pbx-items-center pbx-justify-center pbx-gap-2"
           >
             <button
-              type="button"
               v-if="!getMenuRight"
               @click="pageBuilderStateStore.setMenuRight(true)"
-              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 hover:pbx-text-white focus-visible:pbx-ring-0"
+              type="button"
+              class="pbx-mySecondaryButton"
             >
-              <span class="material-symbols-outlined"> palette </span>
+              <span class="material-symbols-outlined"> view_sidebar </span>
+              <span> Tools </span>
             </button>
           </div>
         </div>
@@ -806,15 +831,16 @@ onMounted(async () => {
           aria-label="Menu"
           id="pagebuilder-right-area"
           :class="{
-            'pbx-w-0': !getMenuRight,
+            'pbx-w-0 pbx-mr-0': !getMenuRight,
             'pbx-w-80 pbx-mr-2 pbx-bg-myPrimaryLightGrayColor pbx-items-stretch': getMenuRight,
           }"
-          class="pbx-duration-300 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-shadow-sm pbx-rounded-l-2xl pbx-h-[100vh]"
+          class="pbx-duration-100 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-shadow-sm pbx-rounded-l-2xl pbx-h-[100vh]"
         >
           <RightSidebarEditor @closeEditor="pageBuilderStateStore.setMenuRight(false)">
           </RightSidebarEditor>
         </aside>
       </div>
+
       <div
         class="pbx-flex pbx-items-center pbx-justify-center pbx-p-4 pbx-border-0 pbx-border-t pbx-border-t-gray-200 pbx-border-solid lg:pbx-mx-10"
       >

package/src/PageBuilder/Preview.vue

@@ -1,13 +1,14 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, watchEffect } from 'vue'
 
-defineProps({
+const props = defineProps({
   mobile: {
     type: Boolean,
   },
 })
 
 const htmlPage = ref('')
+const iframeRef = ref(null)
 
 const previewData = localStorage.getItem('preview')
 
@@ -20,6 +21,23 @@ if (previewData) {
     htmlPage.value = ''
   }
 }
+
+watchEffect(() => {
+  if (props.mobile && iframeRef.value && htmlPage.value) {
+    const iframe = iframeRef.value
+    const doc = iframe.contentWindow.document
+    doc.open()
+    doc.write(
+      `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>${htmlPage.value}</body></html>`,
+    )
+    doc.close()
+
+    // Copy stylesheets
+    document.querySelectorAll('link[rel="stylesheet"], style').forEach((node) => {
+      doc.head.appendChild(node.cloneNode(true))
+    })
+  }
+})
 </script>
 
 <template>
@@ -36,13 +54,11 @@ if (previewData) {
   </template>
   <template v-if="mobile">
     <div>
-      <div
-        class="pbx-text-black pbx-w-full pbx-inset-x-0 pbx-h-[90vh] pbx-bg-white pbx-overflow-x-scroll lg:pbx-pt-2 pbx-pt-2"
-      >
-        <div id="page-builder-editor">
-          <div class="" v-html="htmlPage"></div>
-        </div>
-      </div>
+      <iframe
+        ref="iframeRef"
+        class="pbx-mx-auto pbx-w-full pbx-bg-white pbx-shadow-lg pbx-h-[80vh] pbx-border-0"
+        src="about:blank"
+      ></iframe>
     </div>
   </template>
 </template>

package/src/composables/extractCleanHTMLFromPageBuilder.ts

@@ -25,14 +25,15 @@ export function extractCleanHTMLFromPageBuilder(
     }
   })
 
-  if (config && config.pageSettings && typeof config.pageSettings.imageUrlPrefix === 'string') {
-    const imageUrlPrefix = config.pageSettings.imageUrlPrefix
+  if (config && config && typeof config.imageUrlPrefix === 'string') {
+    const imageUrlPrefix = config.imageUrlPrefix
     const imgs = clone.querySelectorAll<HTMLImageElement>('img')
     imgs.forEach((img) => {
       const src = img.getAttribute('src') || ''
       if (
         !src.startsWith('http') &&
-        imageUrlPrefix && // extra safety
+        // extra safety
+        imageUrlPrefix &&
         !src.startsWith(imageUrlPrefix)
       ) {
         img.setAttribute('src', imageUrlPrefix + src.replace(/^\/+/, ''))