@myissue/vue-website-page-builder 3.3.23 → 3.3.24

package/package.json

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

@@ -103,33 +103,35 @@ watch(
     <template #content>
       <!-- FONT SIZES -->
       <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Font Appearance</p>
-      <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Font Size </label>
-        <select
-          v-model="fontBase"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleFontSizeBase(fontBase)"
-        >
-          <option disabled value="">Select</option>
-          <option v-for="fontSize in tailwindFontSizes.fontBase" :key="fontSize">
-            {{ fontSize }}
-          </option>
-        </select>
-      </div>
       <template v-if="false">
         <div class="pbx-my-2 pbx-py-2">
-          <label class="pbx-myPrimaryInputLabel"> Font desktop size </label>
+          <label class="pbx-myPrimaryInputLabel"> Font Size </label>
           <select
-            v-model="fontDesktop"
+            v-model="fontBase"
             class="pbx-myPrimarySelect"
-            @change="pageBuilderService.handleFontSizeDesktop(fontDesktop)"
+            @change="pageBuilderService.handleFontSizeBase(fontBase)"
           >
             <option disabled value="">Select</option>
-            <option v-for="fontSize in tailwindFontSizes.fontDesktop" :key="fontSize">
+            <option v-for="fontSize in tailwindFontSizes.fontBase" :key="fontSize">
               {{ fontSize }}
             </option>
           </select>
         </div>
+      </template>
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Font size </label>
+        <select
+          v-model="fontDesktop"
+          class="pbx-myPrimarySelect"
+          @change="pageBuilderService.handleFontSizeDesktop(fontDesktop)"
+        >
+          <option disabled value="">Select</option>
+          <option v-for="fontSize in tailwindFontSizes.fontDesktop" :key="fontSize">
+            {{ fontSize }}
+          </option>
+        </select>
+      </div>
+      <template v-if="false">
         <div class="pbx-my-2 pbx-py-2">
           <label class="pbx-myPrimaryInputLabel"> Font tablet size </label>
           <select
@@ -158,36 +160,38 @@ watch(
         </div>
       </template>
       <hr />
-      <!-- FONT FAMILY -->
+
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Font family </label>
+        <label class="pbx-myPrimaryInputLabel"> Font weight </label>
         <select
-          v-model="fontFamily"
+          v-model="fontWeight"
           class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleFontFamily(fontFamily)"
+          @change="pageBuilderService.handleFontWeight(fontWeight)"
         >
           <option disabled value="">Select</option>
-          <option v-for="fontFamily in tailwindFontStyles.fontFamily" :key="fontFamily">
-            {{ fontFamily }}
+          <option v-for="fontWeight in tailwindFontStyles.fontWeight" :key="fontWeight">
+            {{ fontWeight }}
           </option>
         </select>
       </div>
       <hr />
 
+      <!-- FONT FAMILY -->
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Font weight </label>
+        <label class="pbx-myPrimaryInputLabel"> Font family </label>
         <select
-          v-model="fontWeight"
+          v-model="fontFamily"
           class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleFontWeight(fontWeight)"
+          @change="pageBuilderService.handleFontFamily(fontFamily)"
         >
           <option disabled value="">Select</option>
-          <option v-for="fontWeight in tailwindFontStyles.fontWeight" :key="fontWeight">
-            {{ fontWeight }}
+          <option v-for="fontFamily in tailwindFontStyles.fontFamily" :key="fontFamily">
+            {{ fontFamily }}
           </option>
         </select>
       </div>
       <hr />
+
       <div class="pbx-my-2 pbx-py-2">
         <label class="pbx-myPrimaryInputLabel"> Font Style </label>
         <select

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
 import { sharedPageBuilderStore } from '../../../stores/shared-store'
 import ClassEditor from './Editables/ClassEditor.vue'
 import ImageEditor from './Editables/ImageEditor.vue'
@@ -38,6 +38,30 @@ const isHeadingElement = computed(() => {
     getElement.value instanceof HTMLImageElement
   )
 })
+
+const scrollContainer = ref(null)
+let lastScrollTop = 0
+
+// Watch for changes that cause re-render (e.g. dropdown value in store)
+watch(
+  // or the specific value that triggers re-render
+  () => pageBuilderStateStore.getElement,
+  () => {
+    // Restore scroll after DOM updates
+    nextTick(() => {
+      if (scrollContainer.value) {
+        scrollContainer.value.scrollTop = lastScrollTop
+      }
+    })
+  },
+)
+
+// Save scroll position before update
+function onScroll() {
+  if (scrollContainer.value) {
+    lastScrollTop = scrollContainer.value.scrollTop
+  }
+}
 </script>
 
 <template>
@@ -58,7 +82,12 @@ const isHeadingElement = computed(() => {
       </p>
     </div>
 
-    <div class="pbx-pl-3 pbx-pr-3 pbx-mb-4 pbx-overflow-y-scroll">
+    <div
+      v
+      ref="scrollContainer"
+      @scroll="onScroll"
+      class="pbx-pl-3 pbx-pr-3 pbx-mb-4 pbx-overflow-y-scroll"
+    >
       <div v-show="getElement && pageBuilderService.isEditableElement(getElement)">
         <article class="pbx-mb-1">
           <ImageEditor> </ImageEditor>

package/src/composables/PageBuilderService.ts

@@ -24,6 +24,9 @@ import { isEmptyObject } from '../helpers/isEmptyObject'
 
 export class PageBuilderService {
   // Class properties with types
+  private fontSizeRegex =
+    /^(sm:|md:|lg:|xl:|2xl:)?pbx-text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/
+
   private pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>
   private getLocalStorageItemName: ComputedRef<string | null>
   private getApplyImageToSelection: ComputedRef<ImageObject>
@@ -289,10 +292,7 @@ export class PageBuilderService {
     ) {
       this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
     }
-    //
-    //
-    //
-    //
+
     if (config && formType === 'update') {
       if (this.pendingMountData) {
         this.#completeBuilderInitialization(this.pendingMountData)
@@ -306,10 +306,6 @@ export class PageBuilderService {
         return
       }
 
-      //
-      //
-      //
-      //
       // 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
@@ -327,10 +323,6 @@ export class PageBuilderService {
         return
       }
 
-      //
-      //
-      //
-      //
       // 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
@@ -454,11 +446,12 @@ export class PageBuilderService {
   }
 
   #applyElementClassChanges(
-    selectedCSS: string | undefined,
+    cssUserSelection: string | undefined,
     CSSArray: string[],
     mutationName: string,
   ): string | undefined {
     const currentHTMLElement = this.getElement.value
+
     if (!currentHTMLElement) return
 
     const currentCSS = CSSArray.find((CSS) => {
@@ -468,25 +461,29 @@ export class PageBuilderService {
     // set to 'none' if undefined
     let elementClass = currentCSS || 'none'
 
-    // If selectedCSS is undefined, just set the current state and return
-    if (selectedCSS === undefined) {
+    // If cssUserSelection is undefined, just set the current state and return
+    if (cssUserSelection === undefined) {
       if (typeof mutationName === 'string' && mutationName.length > 2) {
         ;(this.pageBuilderStateStore as any)[mutationName](elementClass)
       }
       return currentCSS
     }
 
-    // selectedCSS examples: bg-zinc-200, px-10, rounded-full etc.
-    if (typeof selectedCSS === 'string' && selectedCSS !== 'none') {
+    // cssUserSelection examples: bg-zinc-200, px-10, rounded-full etc.
+    if (typeof cssUserSelection === 'string' && cssUserSelection !== 'none') {
       if (elementClass && currentHTMLElement.classList.contains(elementClass)) {
         currentHTMLElement.classList.remove(elementClass)
       }
 
-      currentHTMLElement.classList.add(selectedCSS)
-      elementClass = selectedCSS
-    } else if (typeof selectedCSS === 'string' && selectedCSS === 'none' && elementClass) {
+      currentHTMLElement.classList.add(cssUserSelection)
+      elementClass = cssUserSelection
+    } else if (
+      typeof cssUserSelection === 'string' &&
+      cssUserSelection === 'none' &&
+      elementClass
+    ) {
       currentHTMLElement.classList.remove(elementClass)
-      elementClass = selectedCSS
+      elementClass = cssUserSelection
     }
 
     // Only call store mutations after all DOM manipulation is complete
@@ -498,6 +495,75 @@ export class PageBuilderService {
     return currentCSS
   }
 
+  handleFontWeight(userSelectedFontWeight?: string): void {
+    this.#applyElementClassChanges(
+      userSelectedFontWeight,
+      tailwindFontStyles.fontWeight,
+      'setFontWeight',
+    )
+  }
+
+  handleFontSizeBase(userSelectedFontSize?: string): void {
+    this.#applyElementClassChanges(userSelectedFontSize, tailwindFontSizes.fontBase, 'setFontBase')
+  }
+
+  handleFontSizeDesktop(userSelectedFontSize?: string): void {
+    const currentHTMLElement = this.getElement.value
+    if (!currentHTMLElement) return
+
+    // Hardcoded mapping: selected => base
+    const fontSizeBaseMap: Record<string, string> = {
+      'pbx-text-9xl': 'pbx-text-6xl',
+      'pbx-text-8xl': 'pbx-text-6xl',
+      'pbx-text-7xl': 'pbx-text-5xl',
+      'pbx-text-6xl': 'pbx-text-3xl',
+      'pbx-text-5xl': 'pbx-text-3xl',
+      'pbx-text-4xl': 'pbx-text-2xl',
+      'pbx-text-3xl': 'pbx-text-xl',
+      'pbx-text-2xl': 'pbx-text-lg',
+      'pbx-text-xl': 'pbx-text-base',
+      'pbx-text-lg': 'pbx-text-sm',
+      'pbx-text-base': 'pbx-text-xs',
+      'pbx-text-sm': 'pbx-text-xs',
+      'pbx-text-xs': 'pbx-text-xs',
+    }
+
+    if (userSelectedFontSize) {
+      // Remove all existing font size classes first
+      Array.from(currentHTMLElement.classList).forEach((cls) => {
+        if (this.fontSizeRegex.test(cls)) {
+          currentHTMLElement.classList.remove(cls)
+        }
+      })
+
+      // Extract the font size class (remove 'lg:' if present)
+      const fontSizeClass = userSelectedFontSize.replace(/^lg:/, '')
+
+      const baseClass = fontSizeBaseMap[fontSizeClass] || fontSizeClass
+      const lgClass = `lg:${fontSizeClass}`
+
+      if (baseClass !== fontSizeClass) {
+        currentHTMLElement.classList.add(baseClass, lgClass)
+      } else {
+        currentHTMLElement.classList.add(baseClass)
+      }
+    }
+
+    const currentCSS = tailwindFontSizes.fontDesktop.find((CSS) => {
+      return currentHTMLElement.classList.contains(CSS)
+    })
+
+    if (!userSelectedFontSize) {
+      this.pageBuilderStateStore.setFontDesktop('none')
+    }
+
+    if (currentCSS && !userSelectedFontSize) {
+      this.pageBuilderStateStore.setFontDesktop(currentCSS)
+    }
+
+    return currentCSS
+  }
+
   #applyHelperCSSToElements(element: HTMLElement): void {
     this.#wrapElementInDivIfExcluded(element)
 
@@ -505,14 +571,43 @@ export class PageBuilderService {
       element.classList.add('smooth-transition')
     }
 
-    // Add padding to DIV
-    if (element.tagName === 'DIV') {
-      if (element.classList.length === 0) {
-        // element.classList.add("p-2");
+    // If this is a DIV and its only/main child is a heading, apply font size classes to the DIV
+    if (
+      element.tagName === 'DIV' &&
+      element.children.length === 1 &&
+      ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(element.children[0].tagName)
+    ) {
+      const heading = element.children[0] as HTMLElement
+
+      element.classList.forEach((cls) => {
+        if (this.fontSizeRegex.test(cls)) {
+          element.classList.remove(cls)
+        }
+      })
+
+      // Apply responsive font size classes based on heading type
+      if (heading.tagName === 'H2') {
+        element.classList.add('pbx-text-3xl', 'lg:pbx-text-6xl')
+      }
+      if (heading.tagName === 'H3') {
+        element.classList.add('pbx-text-2xl', 'lg:pbx-text-4xl')
       }
     }
   }
 
+  async toggleTipTapModal(status: boolean): Promise<void> {
+    this.pageBuilderStateStore.setShowModalTipTap(status)
+
+    // 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()
+
+    if (!status) {
+      await this.handleAutoSave()
+    }
+  }
+
   #wrapElementInDivIfExcluded(element: HTMLElement): void {
     if (!element) return
 
@@ -792,13 +887,6 @@ export class PageBuilderService {
     }
   }
 
-  handleFontWeight(userSelectedFontWeight?: string): void {
-    this.#applyElementClassChanges(
-      userSelectedFontWeight,
-      tailwindFontStyles.fontWeight,
-      'setFontWeight',
-    )
-  }
   handleFontFamily(userSelectedFontFamily?: string): void {
     this.#applyElementClassChanges(
       userSelectedFontFamily,
@@ -915,17 +1003,6 @@ export class PageBuilderService {
   }
   // border radius / end
 
-  handleFontSizeBase(userSelectedFontSize?: string): void {
-    this.#applyElementClassChanges(userSelectedFontSize, tailwindFontSizes.fontBase, 'setFontBase')
-  }
-
-  handleFontSizeDesktop(userSelectedFontSize?: string): void {
-    this.#applyElementClassChanges(
-      userSelectedFontSize,
-      tailwindFontSizes.fontDesktop,
-      'setFontDesktop',
-    )
-  }
   handleFontSizeTablet(userSelectedFontSize?: string): void {
     this.#applyElementClassChanges(
       userSelectedFontSize,
@@ -2063,19 +2140,6 @@ export class PageBuilderService {
     }
   }
 
-  async toggleTipTapModal(status: boolean): Promise<void> {
-    this.pageBuilderStateStore.setShowModalTipTap(status)
-
-    // 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()
-
-    if (!status) {
-      await this.handleAutoSave()
-    }
-  }
-
   async initializeElementStyles(): Promise<void> {
     // Wait for Vue to finish DOM updates before attaching event listeners.
     // This ensure elements exist in the DOM.

package/src/css/app.css

@@ -366,13 +366,6 @@ a {
   @apply pbx-text-myPrimaryLinkColor;
 }
 
-h2 {
-  @apply pbx-text-3xl pbx-mt-4 pbx-mb-3 pbx-font-medium;
-}
-h3 {
-  @apply pbx-text-2xl pbx-mt-4 pbx-mb-3 pbx-font-medium;
-}
-
 /* CSS for content inside page builder # start */
 #page-builder-editor .tiptap {
   outline: none !important;