@myissue/vue-website-page-builder 3.0.18 → 3.0.19

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

@@ -1,21 +1,16 @@
 <script setup>
+import { ref, computed, inject, 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 PageBuilder from '@/composables/PageBuilder.ts'
-import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
-import { computed, ref, watch } from 'vue'
-import {
-  Listbox,
-  ListboxButton,
-  ListboxLabel,
-  ListboxOption,
-  ListboxOptions,
-} from '@headlessui/vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
+import tailwindColors from '@/utils/builder/tailwaind-colors'
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
 
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 const borderStyle = ref(null)
 const borderWidth = ref(null)
 const borderColor = ref(null)
@@ -33,7 +28,7 @@ watch(
   getBorderStyle,
   (newValue) => {
     borderStyle.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -41,7 +36,7 @@ watch(
   getBorderWidth,
   (newValue) => {
     borderWidth.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -49,7 +44,7 @@ watch(
   getBorderColor,
   (newValue) => {
     borderColor.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -64,7 +59,7 @@ watch(
         <select
           v-model="borderStyle"
           class="myPrimarySelect"
-          @change="pageBuilder.handleBorderStyle(borderStyle)"
+          @change="pageBuilderClass.handleBorderStyle(borderStyle)"
         >
           <option disabled value="">Select</option>
           <option
@@ -80,7 +75,7 @@ watch(
         <select
           v-model="borderWidth"
           class="myPrimarySelect"
-          @change="pageBuilder.handleBorderWidth(borderWidth)"
+          @change="pageBuilderClass.handleBorderWidth(borderWidth)"
         >
           <option disabled value="">Select</option>
           <option
@@ -127,7 +122,7 @@ watch(
               <ListboxOption
                 as="template"
                 v-for="color in tailwindBorderStyleWidthPlusColor.borderColor"
-                @click="pageBuilder.handleBorderColor(borderColor)"
+                @click="pageBuilderClass.handleBorderColor(borderColor)"
                 :key="color"
                 :value="color"
                 v-slot="{ active, borderColor }"

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

@@ -1,13 +1,13 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
-import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
+import { ref, computed, inject, watch } from 'vue'
+import EditorAccordion from '../EditorAccordion.vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 const currentClasses = ref(null)
 const getCurrentClasses = computed(() => {
   return pageBuilderStateStore.getCurrentClasses
@@ -24,8 +24,8 @@ watch(
 const inputClass = ref('')
 
 const handleAddClasses = function () {
-  pageBuilder.handleAddClasses(inputClass.value)
-  pageBuilder.handlePageBuilderMethods()
+  pageBuilderClass.handleAddClasses(inputClass.value)
+  pageBuilderClass.handlePageBuilderMethods()
 
   inputClass.value = ''
 }
@@ -42,8 +42,8 @@ const handleAddClasses = function () {
           class="myPrimaryTag cursor-pointer hover:bg-myPrimaryErrorColor hover:text-white text-xs py-2 font-medium"
           @click="
             () => {
-              pageBuilder.handleRemoveClasses(className)
-              pageBuilder.handlePageBuilderMethods()
+              pageBuilderClass.handleRemoveClasses(className)
+              pageBuilderClass.handlePageBuilderMethods()
             }
           "
         >

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

@@ -1,12 +1,13 @@
 <script setup>
 import DynamicModal from '@/Components/Modals/DynamicModal.vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
+import { computed, inject } from 'vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 import { ref } from 'vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
 
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
+
 const showModalDeleteComponent = ref(false)
 // use dynamic model
 const typeModal = ref('')
@@ -20,7 +21,7 @@ const thirdButtonModal = ref(null)
 const firstModalButtonFunction = ref(null)
 const secondModalButtonFunction = ref(null)
 const thirdModalButtonFunction = ref(null)
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 
 // remove component
 const deleteComponent = function (e) {
@@ -40,7 +41,7 @@ const deleteComponent = function (e) {
   //
   // handle click
   thirdModalButtonFunction.value = function () {
-    pageBuilder.deleteComponent()
+    pageBuilderClass.deleteComponent()
 
     showModalDeleteComponent.value = false
   }
@@ -77,14 +78,14 @@ const deleteComponent = function (e) {
 
     <button
       type="button"
-      @click="pageBuilder.moveComponent(-1)"
+      @click="pageBuilderClass.moveComponent(-1)"
       class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
     >
       <span class="material-symbols-outlined"> move_up </span>
     </button>
     <button
       type="button"
-      @click="pageBuilder.moveComponent(1)"
+      @click="pageBuilderClass.moveComponent(1)"
       class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
     >
       <span class="material-symbols-outlined"> move_down </span>

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

@@ -1,13 +1,13 @@
 <script setup>
 import EditorAccordion from '../EditorAccordion.vue'
-import { computed, ref } from 'vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
+import { computed, inject } from 'vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 const getRestoredElement = computed(() => {
   return pageBuilderStateStore.getRestoredElement
 })
@@ -20,7 +20,7 @@ const getRestoredElement = computed(() => {
       <div class="my-2">
         <button
           v-if="getRestoredElement !== null"
-          @click="pageBuilder.handleRestoreElement"
+          @click="pageBuilderClass.handleRestoreElement"
           type="button"
           class="myPrimaryButton gap-2 items-center w-full"
         >
@@ -29,7 +29,7 @@ const getRestoredElement = computed(() => {
         </button>
         <button
           v-if="getRestoredElement === null"
-          @click="pageBuilder.handleDeleteElement"
+          @click="pageBuilderClass.handleDeleteElement"
           type="button"
           class="myPrimaryDeleteButton gap-2 items-center w-full"
         >

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

@@ -1,17 +1,19 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { ref, computed, inject } from 'vue'
 import DynamicModal from '@/Components/Modals/DynamicModal.vue'
 import TipTapInput from '@/Components/TipTap/TipTapInput.vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 import MediaLibraryModal from '@/Components/Modals/MediaLibraryModal.vue'
 import TextColorEditor from '@/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue'
 import BackgroundColorEditor from '@/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
 
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
+const customMediaComponent = inject('CustomMediaComponent')
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
@@ -107,7 +109,7 @@ const handleAddImage = function () {
   // handle click
   secondMediaButtonFunction.value = function () {
     isLoading.value = true
-    pageBuilder.updateBasePrimaryImage({ type: 'unsplash' })
+    pageBuilderClass.updateBasePrimaryImage({ type: 'unsplash' })
 
     // close media library modal
     showMediaLibraryModal.value = false
@@ -201,138 +203,144 @@ const handleModalIframeSrc = function () {
 }
 </script>
 <template>
-  <DynamicModal
-    :show="showModalIframeSrc"
-    maxWidth="2xl"
-    :type="typeModal"
-    :gridColumnAmount="gridColumnModal"
-    :title="titleModal"
-    :description="descriptionModal"
-    :firstButtonText="firstButtonModal"
-    :secondButtonText="secondButtonModal"
-    :thirdButtonText="thirdButtonModal"
-    @firstModalButtonFunction="firstModalButtonFunction"
-    @secondModalButtonFunction="secondModalButtonFunction"
-    @thirdModalButtonFunction="thirdModalButtonFunction"
-  >
-    <header></header>
-    <main>
-      <div class="myInputGroup">
-        <div class="myPrimaryFormOrganizationHeaderDescriptionSection">
-          <div class="myPrimaryFormOrganizationHeader">
-            <label for="video" class="myPrimaryInputLabel">Video url:</label>
-            <input v-model="iframeSrc" type="text" class="myPrimaryInput" name="video" />
-            <div v-if="urlError" class="min-h-[2.5rem] flex items-center justify-start">
-              <p class="myPrimaryInputError mt-2 mb-0 py-0 self-start">
-                {{ urlError }}
-              </p>
+  <div>
+    <DynamicModal
+      :show="showModalIframeSrc"
+      maxWidth="2xl"
+      :type="typeModal"
+      :gridColumnAmount="gridColumnModal"
+      :title="titleModal"
+      :description="descriptionModal"
+      :firstButtonText="firstButtonModal"
+      :secondButtonText="secondButtonModal"
+      :thirdButtonText="thirdButtonModal"
+      @firstModalButtonFunction="firstModalButtonFunction"
+      @secondModalButtonFunction="secondModalButtonFunction"
+      @thirdModalButtonFunction="thirdModalButtonFunction"
+    >
+      <header></header>
+      <main>
+        <div class="myInputGroup">
+          <div class="myPrimaryFormOrganizationHeaderDescriptionSection">
+            <div class="myPrimaryFormOrganizationHeader">
+              <label for="video" class="myPrimaryInputLabel">Video url:</label>
+              <input v-model="iframeSrc" type="text" class="myPrimaryInput" name="video" />
+              <div v-if="urlError" class="min-h-[2.5rem] flex items-center justify-start">
+                <p class="myPrimaryInputError mt-2 mb-0 py-0 self-start">
+                  {{ urlError }}
+                </p>
+              </div>
             </div>
           </div>
         </div>
+      </main>
+    </DynamicModal>
+    <DynamicModal
+      :simpleModal="true"
+      :show="getShowModalTipTap"
+      maxWidth="5xl"
+      :type="typeModal"
+      :gridColumnAmount="gridColumnModal"
+      :title="titleModal"
+      :description="descriptionModal"
+      :firstButtonText="firstButtonModal"
+      :secondButtonText="secondButtonModal"
+      :thirdButtonText="thirdButtonModal"
+      @firstModalButtonFunction="firstModalButtonFunction"
+      @secondModalButtonFunction="secondModalButtonFunction"
+      @thirdModalButtonFunction="thirdModalButtonFunction"
+    >
+      <header></header>
+      <main class="overflow-y-auto">
+        <TipTapInput></TipTapInput>
+      </main>
+    </DynamicModal>
+
+    <MediaLibraryModal
+      :open="showMediaLibraryModal"
+      :title="titleMedia"
+      :description="descriptionMedia"
+      :firstButtonText="firstButtonMedia"
+      :secondButtonText="secondButtonMedia"
+      :thirdButtonText="thirdButtonMedia"
+      :customMediaComponent="customMediaComponent"
+      @firstMediaButtonFunction="firstMediaButtonFunction"
+      @secondMediaButtonFunction="secondMediaButtonFunction"
+      @thirdMediaButtonFunction="thirdMediaButtonFunction"
+    >
+    </MediaLibraryModal>
+
+    <div
+      class="z-20 py-1 px-2 h-20 flex items-center justify-center mt-2 mx-2 border-b border-myPrimaryLightGrayColor"
+    >
+      <div class="flex items-center justify-center divide-x divide-gray-200 py-1">
+        <template v-if="pageBuilderClass.ElOrFirstChildIsIframe()">
+          <div class="px-2 flex items-center justify-start gap-2">
+            <button
+              @click="handleModalIframeSrc"
+              type="button"
+              class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+            >
+              <span class="material-symbols-outlined"> play_circle </span>
+              <span>Add YouTube</span>
+            </button>
+          </div>
+        </template>
+
+        <template
+          v-if="
+            pageBuilderClass.selectedElementIsValidText() &&
+            !pageBuilderClass.ElOrFirstChildIsIframe()
+          "
+        >
+          <div class="px-2 flex items-center justify-start gap-2">
+            <button
+              @click="handleModalPreviewTiptap"
+              type="button"
+              class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+            >
+              <span class="material-symbols-outlined"> edit </span>
+              <span>Edit text</span>
+            </button>
+          </div>
+          <div class="px-2">
+            <TextColorEditor></TextColorEditor>
+          </div>
+        </template>
+
+        <template
+          v-if="
+            getElement &&
+            getComponent &&
+            getBasePrimaryImage !== null &&
+            !pageBuilderClass.ElOrFirstChildIsIframe()
+          "
+        >
+          <div class="px-2 flex items-center justify-start gap-2">
+            <button
+              @click="handleAddImage"
+              type="button"
+              class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+            >
+              <span class="material-symbols-outlined"> add_photo_alternate </span>
+              <span>Update image</span>
+            </button>
+          </div>
+        </template>
+
+        <template
+          v-if="
+            getElement &&
+            Object.keys(getElement).length !== 0 &&
+            !getBasePrimaryImage &&
+            !pageBuilderClass.ElOrFirstChildIsIframe()
+          "
+        >
+          <div class="px-2">
+            <BackgroundColorEditor></BackgroundColorEditor>
+          </div>
+        </template>
       </div>
-    </main>
-  </DynamicModal>
-  <DynamicModal
-    :simpleModal="true"
-    :show="getShowModalTipTap"
-    maxWidth="5xl"
-    :type="typeModal"
-    :gridColumnAmount="gridColumnModal"
-    :title="titleModal"
-    :description="descriptionModal"
-    :firstButtonText="firstButtonModal"
-    :secondButtonText="secondButtonModal"
-    :thirdButtonText="thirdButtonModal"
-    @firstModalButtonFunction="firstModalButtonFunction"
-    @secondModalButtonFunction="secondModalButtonFunction"
-    @thirdModalButtonFunction="thirdModalButtonFunction"
-  >
-    <header></header>
-    <main class="overflow-y-auto">
-      <TipTapInput></TipTapInput>
-    </main>
-  </DynamicModal>
-
-  <MediaLibraryModal
-    :open="showMediaLibraryModal"
-    :title="titleMedia"
-    :description="descriptionMedia"
-    :firstButtonText="firstButtonMedia"
-    :secondButtonText="secondButtonMedia"
-    :thirdButtonText="thirdButtonMedia"
-    @firstMediaButtonFunction="firstMediaButtonFunction"
-    @secondMediaButtonFunction="secondMediaButtonFunction"
-    @thirdMediaButtonFunction="thirdMediaButtonFunction"
-  >
-  </MediaLibraryModal>
-
-  <div
-    class="z-20 py-1 px-2 h-20 flex items-center justify-center mt-2 mx-2 border-b border-myPrimaryLightGrayColor"
-  >
-    <div class="flex items-center justify-center divide-x divide-gray-200 py-1">
-      <template v-if="pageBuilder.ElOrFirstChildIsIframe()">
-        <div class="px-2 flex items-center justify-start gap-2">
-          <button
-            @click="handleModalIframeSrc"
-            type="button"
-            class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
-          >
-            <span class="material-symbols-outlined"> play_circle </span>
-            <span>Add YouTube</span>
-          </button>
-        </div>
-      </template>
-
-      <template
-        v-if="pageBuilder.selectedElementIsValidText() && !pageBuilder.ElOrFirstChildIsIframe()"
-      >
-        <div class="px-2 flex items-center justify-start gap-2">
-          <button
-            @click="handleModalPreviewTiptap"
-            type="button"
-            class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
-          >
-            <span class="material-symbols-outlined"> edit </span>
-            <span>Edit text</span>
-          </button>
-        </div>
-        <div class="px-2">
-          <TextColorEditor></TextColorEditor>
-        </div>
-      </template>
-
-      <template
-        v-if="
-          getElement &&
-          getComponent &&
-          getBasePrimaryImage !== null &&
-          !pageBuilder.ElOrFirstChildIsIframe()
-        "
-      >
-        <div class="px-2 flex items-center justify-start gap-2">
-          <button
-            @click="handleAddImage"
-            type="button"
-            class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
-          >
-            <span class="material-symbols-outlined"> add_photo_alternate </span>
-            <span>Update image</span>
-          </button>
-        </div>
-      </template>
-
-      <template
-        v-if="
-          getElement &&
-          Object.keys(getElement).length !== 0 &&
-          !getBasePrimaryImage &&
-          !pageBuilder.ElOrFirstChildIsIframe()
-        "
-      >
-        <div class="px-2">
-          <BackgroundColorEditor></BackgroundColorEditor>
-        </div>
-      </template>
     </div>
   </div>
 </template>

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

@@ -1,14 +1,13 @@
 <script setup>
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import PageBuilder from '@/composables/PageBuilder.ts'
-
-const pageBuilderStateStore = usePageBuilderStateStore()
-
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
+import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
 
-const pageBuilder = new PageBuilder(pageBuilderStateStore)
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
 
-import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement
@@ -29,7 +28,7 @@ const getRestoredElement = computed(() => {
         <template v-if="getRestoredElement">
           <div class="px-2 flex items-center justify-start gap-2">
             <button
-              @click="pageBuilder.handleRestoreElement"
+              @click="pageBuilderClass.handleRestoreElement"
               type="button"
               class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
             >
@@ -42,7 +41,7 @@ const getRestoredElement = computed(() => {
         <template v-if="getElement && !getRestoredElement">
           <div class="px-2 flex items-center justify-start gap-2">
             <button
-              @click="pageBuilder.handleDeleteElement"
+              @click="pageBuilderClass.handleDeleteElement"
               type="button"
               class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:text-white focus-visible:ring-0 hover:bg-myPrimaryErrorColor"
             >

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

@@ -1,14 +1,15 @@
 <script setup>
-import { computed, watch, ref } from 'vue'
+import { computed, watch, ref, inject } from 'vue'
 import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
 import MediaLibraryModal from '@/Components/Modals/MediaLibraryModal.vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
+const customMediaComponent = inject('CustomMediaComponent')
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 const isLoading = ref(false)
 
 // use media library
@@ -48,7 +49,7 @@ const handleAddImage = function () {
   // handle click
   secondMediaButtonFunction.value = function () {
     isLoading.value = true
-    pageBuilder.updateBasePrimaryImage({ type: 'unsplash' })
+    pageBuilderClass.updateBasePrimaryImage({ type: 'unsplash' })
 
     // close media library modal
     showMediaLibraryModal.value = false
@@ -59,24 +60,27 @@ const handleAddImage = function () {
 }
 </script>
 <template>
-  <div v-if="getBasePrimaryImage !== null">
-    <img
-      class="object-cover object-center w-full cursor-pointer"
-      :src="getBasePrimaryImage"
-      @click="handleAddImage"
-      alt="image"
-    />
+  <div>
+    <div v-if="getBasePrimaryImage !== null">
+      <img
+        class="object-cover object-center w-full cursor-pointer"
+        :src="getBasePrimaryImage"
+        @click="handleAddImage"
+        alt="image"
+      />
+    </div>
+    <MediaLibraryModal
+      :open="showMediaLibraryModal"
+      :title="titleMedia"
+      :description="descriptionMedia"
+      :firstButtonText="firstButtonMedia"
+      :secondButtonText="secondButtonMedia"
+      :thirdButtonText="thirdButtonMedia"
+      :customMediaComponent="customMediaComponent"
+      @firstMediaButtonFunction="firstMediaButtonFunction"
+      @secondMediaButtonFunction="secondMediaButtonFunction"
+      @thirdMediaButtonFunction="thirdMediaButtonFunction"
+    >
+    </MediaLibraryModal>
   </div>
-  <MediaLibraryModal
-    :open="showMediaLibraryModal"
-    :title="titleMedia"
-    :description="descriptionMedia"
-    :firstButtonText="firstButtonMedia"
-    :secondButtonText="secondButtonMedia"
-    :thirdButtonText="thirdButtonMedia"
-    @firstMediaButtonFunction="firstMediaButtonFunction"
-    @secondMediaButtonFunction="secondMediaButtonFunction"
-    @thirdMediaButtonFunction="thirdMediaButtonFunction"
-  >
-  </MediaLibraryModal>
 </template>