@myissue/vue-website-page-builder 3.2.91 → 3.2.93

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

@@ -1,16 +1,16 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
 import EditorAccordion from '../EditorAccordion.vue'
-import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 import tailwindBorderStyleWidthPlusColor from '../../../../utils/builder/tailwind-border-style-width-color'
 import tailwindColors from '../../../../utils/builder/tailwaind-colors'
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
+import { getPageBuilder } from '../../../../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const borderStyle = ref(null)
 const borderWidth = ref(null)
 const borderColor = ref(null)
@@ -28,7 +28,7 @@ watch(
   getBorderStyle,
   async (newValue) => {
     borderStyle.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -36,7 +36,7 @@ watch(
   getBorderWidth,
   async (newValue) => {
     borderWidth.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -44,7 +44,7 @@ watch(
   getBorderColor,
   async (newValue) => {
     borderColor.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -61,7 +61,7 @@ watch(
         <select
           v-model="borderStyle"
           class="pbx-myPrimarySelect"
-          @change="pageBuilderClass.handleBorderStyle(borderStyle)"
+          @change="pageBuilderService.handleBorderStyle(borderStyle)"
         >
           <option disabled value="">Select</option>
           <option
@@ -77,7 +77,7 @@ watch(
         <select
           v-model="borderWidth"
           class="pbx-myPrimarySelect"
-          @change="pageBuilderClass.handleBorderWidth(borderWidth)"
+          @change="pageBuilderService.handleBorderWidth(borderWidth)"
         >
           <option disabled value="">Select</option>
           <option
@@ -124,7 +124,7 @@ watch(
               <ListboxOption
                 as="template"
                 v-for="color in tailwindBorderStyleWidthPlusColor.borderColor"
-                @click="pageBuilderClass.handleBorderColor(borderColor)"
+                @click="pageBuilderService.handleBorderColor(borderColor)"
                 :key="color"
                 :value="color"
                 v-slot="{ active, borderColor }"

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

@@ -2,12 +2,13 @@
 import { ref, computed, watch } from 'vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import EditorAccordion from '../EditorAccordion.vue'
-import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
+import { getPageBuilder } from '../../../../composables/builderInstance'
+
+const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const currentClasses = ref(null)
 const getCurrentClasses = computed(() => {
   return pageBuilderStateStore.getCurrentClasses
@@ -24,8 +25,8 @@ watch(
 const inputClass = ref('')
 
 const handleAddClasses = async function () {
-  pageBuilderClass.handleAddClasses(inputClass.value)
-  await pageBuilderClass.initializeElementStyles()
+  pageBuilderService.handleAddClasses(inputClass.value)
+  await pageBuilderService.initializeElementStyles()
 
   inputClass.value = ''
 }
@@ -42,8 +43,8 @@ const handleAddClasses = async function () {
           class="pbx-myPrimaryTag pbx-cursor-pointer hover:pbx-bg-myPrimaryErrorColor hover:pbx-text-white pbx-text-xs pbx-py-2 pbx-font-medium"
           @click="
             async () => {
-              pageBuilderClass.handleRemoveClasses(className)
-              await pageBuilderClass.initializeElementStyles()
+              pageBuilderService.handleRemoveClasses(className)
+              await pageBuilderService.initializeElementStyles()
             }
           "
         >

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

@@ -1,11 +1,8 @@
 <script setup>
 import DynamicModalBuilder from '../../../Modals/DynamicModalBuilder.vue'
 import { computed, ref } from 'vue'
-import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
-import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-
-// Use shared store instance
-const pageBuilderStateStore = sharedPageBuilderStore
+import { getPageBuilder } from '../../../../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 const showModalDeleteComponent = ref(false)
 // use dynamic model
@@ -20,10 +17,9 @@ const thirdButtonModal = ref(null)
 const firstModalButtonFunctionDynamicModalBuilder = ref(null)
 const secondModalButtonFunctionDynamicModalBuilder = ref(null)
 const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
 // remove component
-const deleteSelectedComponent = function (e) {
+const deleteSelectedComponent = function () {
   showModalDeleteComponent.value = true
   typeModal.value = 'delete'
   gridColumnModal.value = 2
@@ -40,7 +36,7 @@ const deleteSelectedComponent = function (e) {
   //
   // handle click
   thirdModalButtonFunctionDynamicModalBuilder.value = function () {
-    pageBuilderClass.deleteSelectedComponent()
+    pageBuilderService.deleteSelectedComponent()
 
     showModalDeleteComponent.value = false
   }
@@ -77,14 +73,14 @@ const deleteSelectedComponent = function (e) {
 
     <button
       type="button"
-      @click="pageBuilderClass.reorderComponent(-1)"
+      @click="pageBuilderService.reorderComponent(-1)"
       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"
     >
       <span class="material-symbols-outlined"> move_up </span>
     </button>
     <button
       type="button"
-      @click="pageBuilderClass.reorderComponent(1)"
+      @click="pageBuilderService.reorderComponent(1)"
       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"
     >
       <span class="material-symbols-outlined"> move_down </span>

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

@@ -2,12 +2,12 @@
 import EditorAccordion from '../EditorAccordion.vue'
 import { computed } from 'vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
+import { getPageBuilder } from '../../../../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const getRestoredElement = computed(() => {
   return pageBuilderStateStore.getRestoredElement
 })
@@ -20,7 +20,7 @@ const getRestoredElement = computed(() => {
       <div class="pbx-my-2">
         <button
           v-if="getRestoredElement !== null"
-          @click="pageBuilderClass.handleRestoreElement"
+          @click="pageBuilderService.handleRestoreElement"
           type="button"
           class="pbx-myPrimaryButton pbx-gap-2 pbx-items-center pbx-w-full"
         >
@@ -29,7 +29,7 @@ const getRestoredElement = computed(() => {
         </button>
         <button
           v-if="getRestoredElement === null"
-          @click="pageBuilderClass.handleDeleteElement"
+          @click="pageBuilderService.handleDeleteElement"
           type="button"
           class="pbx-myPrimaryDeleteButton pbx-gap-2 pbx-items-center pbx-w-full"
         >

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

@@ -2,18 +2,17 @@
 import { ref, computed, onMounted, inject } from 'vue'
 import DynamicModalBuilder from '../../../Modals/DynamicModalBuilder.vue'
 import TipTapInput from '../../../TipTap/TipTapInput.vue'
-import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 import MediaLibraryModal from '../../../Modals/MediaLibraryModal.vue'
 import TextColorEditor from './TextColorEditor.vue'
 import BackgroundColorEditor from './BackgroundColorEditor.vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
+import { getPageBuilder } from '../../../../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 const customMediaComponent = inject('CustomMediaComponent')
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
-
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
@@ -45,7 +44,7 @@ const secondModalButtonFunctionDynamicModalBuilder = ref(null)
 const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
 
 const handleModalPreviewTiptap = function () {
-  pageBuilderClass.toggleTipTapModal(true)
+  pageBuilderService.toggleTipTapModal(true)
 
   typeModal.value = 'success'
   gridColumnModal.value = 2
@@ -58,11 +57,11 @@ const handleModalPreviewTiptap = function () {
   // handle click
 
   firstModalButtonFunctionDynamicModalBuilder.value = function () {
-    pageBuilderClass.toggleTipTapModal(false)
+    pageBuilderService.toggleTipTapModal(false)
   }
 
   thirdModalButtonFunctionDynamicModalBuilder.value = function () {
-    pageBuilderClass.toggleTipTapModal(true)
+    pageBuilderService.toggleTipTapModal(true)
   }
 }
 
@@ -268,7 +267,7 @@ const handleModalIframeSrc = function () {
         class="pbx-flex pbx-items-center pbx-justify-center"
         :class="{ 'pbx-rounded-full pbx-border pbx-border-gray-200 pbx-shadow-sm': getElement }"
       >
-        <template v-if="pageBuilderClass.ElOrFirstChildIsIframe()">
+        <template v-if="pageBuilderService.ElOrFirstChildIsIframe()">
           <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
             <button @click="handleModalIframeSrc" type="button" class="pbx-myPrimaryTag">
               <span class="material-symbols-outlined"> play_circle </span>
@@ -279,8 +278,8 @@ const handleModalIframeSrc = function () {
 
         <template
           v-if="
-            pageBuilderClass.isSelectedElementValidText() &&
-            !pageBuilderClass.ElOrFirstChildIsIframe()
+            pageBuilderService.isSelectedElementValidText() &&
+            !pageBuilderService.ElOrFirstChildIsIframe()
           "
         >
           <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
@@ -299,7 +298,7 @@ const handleModalIframeSrc = function () {
             getElement &&
             getComponent &&
             getBasePrimaryImage !== null &&
-            !pageBuilderClass.ElOrFirstChildIsIframe()
+            !pageBuilderService.ElOrFirstChildIsIframe()
           "
         >
           <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
@@ -315,7 +314,7 @@ const handleModalIframeSrc = function () {
             getElement &&
             getElement.nodeType === 1 &&
             !getBasePrimaryImage &&
-            !pageBuilderClass.ElOrFirstChildIsIframe()
+            !pageBuilderService.ElOrFirstChildIsIframe()
           "
         >
           <div class="pbx-px-2">

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

@@ -1,14 +1,13 @@
 <script setup>
 import { computed } from 'vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 import EditorAccordion from '../EditorAccordion.vue'
+import { getPageBuilder } from '../../../../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
-
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
@@ -30,7 +29,7 @@ const getRestoredElement = computed(() => {
           <label class="pbx-myPrimaryInputLabel"> Restore the last deleted HTML element.</label>
           <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
             <button
-              @click="pageBuilderClass.handleRestoreElement"
+              @click="pageBuilderService.handleRestoreElement"
               type="button"
               class="pbx-myPrimaryButton pbx-w-full pbx-mt-4"
             >
@@ -49,7 +48,7 @@ const getRestoredElement = computed(() => {
 
         <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
           <button
-            @click="pageBuilderClass.handleDeleteElement"
+            @click="pageBuilderService.handleDeleteElement"
             type="button"
             class="pbx-myPrimaryDeleteButton pbx-w-full pbx-mt-4"
           >

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

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, ref, inject } from 'vue'
 import MediaLibraryModal from '../../../Modals/MediaLibraryModal.vue'
-import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import { preloadImage } from '../../../../composables/preloadImage'
 import { delay } from '../../../../composables/delay'
@@ -10,9 +9,6 @@ import { delay } from '../../../../composables/delay'
 const pageBuilderStateStore = sharedPageBuilderStore
 const customMediaComponent = inject('CustomMediaComponent')
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
-
-const isLoading = ref(false)
 const getIsLoadingImage = ref(false)
 
 // use media library
@@ -34,11 +30,6 @@ const getBasePrimaryImage = computed(() => {
   return pageBuilderStateStore.getBasePrimaryImage
 })
 
-// get current image from store
-const getElement = computed(() => {
-  return pageBuilderStateStore.getElement
-})
-
 const handleAddImage = function () {
   // open modal to true
   showMediaLibraryModal.value = true

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

@@ -2,13 +2,13 @@
 import { ref, computed, watch, nextTick } from 'vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import EditorAccordion from '../EditorAccordion.vue'
-import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 import { Switch } from '@headlessui/vue'
+import { getPageBuilder } from '../../../../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const hyperlinkEnable = ref(false)
 const urlInput = ref(null)
 const openHyperlinkInNewTab = ref(false)
@@ -59,12 +59,12 @@ const handleToggleHyperlinkEnable = async function (data) {
 
   // remove hyperlink
   if (hyperlinkEnable.value === false) {
-    pageBuilderClass.handleHyperlink(hyperlinkEnable.value, data)
+    pageBuilderService.handleHyperlink(hyperlinkEnable.value, data)
   }
 }
 // add hyperlink
 const handleHyperlink = function () {
-  pageBuilderClass.handleHyperlink(
+  pageBuilderService.handleHyperlink(
     hyperlinkEnable.value,
     urlInput.value,
     openHyperlinkInNewTab.value,
@@ -74,7 +74,7 @@ const handleHyperlink = function () {
 const handleToggleOpenHyperlinkInNewTab = async function () {
   await nextTick()
 
-  pageBuilderClass.handleHyperlink(
+  pageBuilderService.handleHyperlink(
     hyperlinkEnable.value,
     urlInput.value,
     openHyperlinkInNewTab.value,

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

@@ -2,7 +2,6 @@
 import { ref, computed, watch } from 'vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import EditorAccordion from '../EditorAccordion.vue'
-import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 import tailwindOpacities from '../../../../utils/builder/tailwind-opacities'
 import {
   Listbox,
@@ -11,10 +10,11 @@ import {
   ListboxOption,
   ListboxOptions,
 } from '@headlessui/vue'
+import { getPageBuilder } from '../../../../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const opacityVueModel = ref(null)
 const getBackgroundOpacity = computed(() => {
   return pageBuilderStateStore.getBackgroundOpacity
@@ -24,7 +24,7 @@ watch(
   getBackgroundOpacity,
   async (newValue) => {
     opacityVueModel.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -72,7 +72,7 @@ watch(
             <ListboxOption
               as="template"
               v-for="backgroundOpacity in tailwindOpacities.backgroundOpacities"
-              @click="pageBuilderClass.handleBackgroundOpacity(backgroundOpacity)"
+              @click="pageBuilderService.handleBackgroundOpacity(backgroundOpacity)"
               :key="backgroundOpacity"
               :value="backgroundOpacity"
               v-slot="{ active }"

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

@@ -1,6 +1,5 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
-import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 import tailwindOpacities from '../../../../utils/builder/tailwind-opacities'
 import {
   Listbox,
@@ -10,10 +9,11 @@ import {
   ListboxOptions,
 } from '@headlessui/vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
+import { getPageBuilder } from '../../../../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const opacityVueModel = ref(null)
 const getOpacity = computed(() => {
   return pageBuilderStateStore.getOpacity
@@ -23,7 +23,7 @@ watch(
   getOpacity,
   async (newValue) => {
     opacityVueModel.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -71,7 +71,7 @@ watch(
             <ListboxOption
               as="template"
               v-for="elementOpacity in tailwindOpacities.opacities"
-              @click="pageBuilderClass.handleOpacity(elementOpacity)"
+              @click="pageBuilderService.handleOpacity(elementOpacity)"
               :key="elementOpacity"
               :value="elementOpacity"
               v-slot="{ active }"

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

@@ -2,13 +2,13 @@
 import { ref, computed, watch } from 'vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import EditorAccordion from '../EditorAccordion.vue'
-import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 import tailwindPaddingPlusMargin from '../../../../utils/builder/tailwind-padding-margin'
+import { getPageBuilder } from '../../../../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const fontVerticalPadding = ref(null)
 const fontHorizontalPadding = ref(null)
 const fontVerticalMargin = ref(null)
@@ -30,7 +30,7 @@ watch(
   getFontVerticalPadding,
   async (newValue) => {
     fontVerticalPadding.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -38,7 +38,7 @@ watch(
   getFontHorizontalPadding,
   async (newValue) => {
     fontHorizontalPadding.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -46,7 +46,7 @@ watch(
   getFontVerticalMargin,
   async (newValue) => {
     fontVerticalMargin.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -54,7 +54,7 @@ watch(
   getFontHorizontalMargin,
   async (newValue) => {
     fontHorizontalMargin.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -68,7 +68,7 @@ watch(
         <select
           v-model="fontVerticalMargin"
           class="pbx-myPrimarySelect"
-          @change="pageBuilderClass.handleVerticalMargin(fontVerticalMargin)"
+          @change="pageBuilderService.handleVerticalMargin(fontVerticalMargin)"
         >
           <option disabled value="">Select</option>
           <option
@@ -85,7 +85,7 @@ watch(
         <select
           v-model="fontHorizontalMargin"
           class="pbx-myPrimarySelect"
-          @change="pageBuilderClass.handleHorizontalMargin(fontHorizontalMargin)"
+          @change="pageBuilderService.handleHorizontalMargin(fontHorizontalMargin)"
         >
           <option disabled value="">Select</option>
           <option

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

@@ -2,13 +2,13 @@
 import { ref, computed, watch } from 'vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import EditorAccordion from '../EditorAccordion.vue'
-import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 import tailwindPaddingPlusMargin from '../../../../utils/builder/tailwind-padding-margin'
+import { getPageBuilder } from '../../../../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const fontVerticalPadding = ref(null)
 const fontHorizontalPadding = ref(null)
 const fontVerticalMargin = ref(null)
@@ -30,7 +30,7 @@ watch(
   getFontVerticalPadding,
   async (newValue) => {
     fontVerticalPadding.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -38,7 +38,7 @@ watch(
   getFontHorizontalPadding,
   async (newValue) => {
     fontHorizontalPadding.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -46,7 +46,7 @@ watch(
   getFontVerticalMargin,
   async (newValue) => {
     fontVerticalMargin.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -54,7 +54,7 @@ watch(
   getFontHorizontalMargin,
   async (newValue) => {
     fontHorizontalMargin.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -68,7 +68,7 @@ watch(
         <select
           v-model="fontVerticalPadding"
           class="pbx-myPrimarySelect"
-          @change="pageBuilderClass.handleVerticalPadding(fontVerticalPadding)"
+          @change="pageBuilderService.handleVerticalPadding(fontVerticalPadding)"
         >
           <option disabled value="">Select</option>
           <option
@@ -85,7 +85,7 @@ watch(
         <select
           v-model="fontHorizontalPadding"
           class="pbx-myPrimarySelect"
-          @change="pageBuilderClass.handleHorizontalPadding(fontHorizontalPadding)"
+          @change="pageBuilderService.handleHorizontalPadding(fontHorizontalPadding)"
         >
           <option disabled value="">Select</option>
           <option

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

@@ -1,13 +1,13 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
-import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 import tailwindColors from '../../../../utils/builder/tailwaind-colors'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
+import { getPageBuilder } from '../../../../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const textColor = ref(null)
 const getTextColor = computed(() => {
   return pageBuilderStateStore.getTextColor
@@ -17,7 +17,7 @@ watch(
   getTextColor,
   async (newValue) => {
     textColor.value = newValue
-    await pageBuilderClass.initializeElementStyles()
+    await pageBuilderService.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -51,7 +51,7 @@ watch(
           <ListboxOption
             as="template"
             v-for="color in tailwindColors.textColorVariables"
-            @click="pageBuilderClass.handleTextColor(textColor)"
+            @click="pageBuilderService.handleTextColor(textColor)"
             :key="color"
             :value="color"
             v-slot="{ active, textColor }"