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

package/src/Components/TipTap/TipTapInput.vue

@@ -1,15 +1,15 @@
 <script setup>
 import { Editor, useEditor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
-import { computed, onBeforeMount, onMounted, ref, watch } from 'vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
+import { computed, onBeforeMount, onMounted, ref, watch, inject } from 'vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 import Link from '@tiptap/extension-link'
 import DynamicModal from '@/Components/Modals/DynamicModal.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 showModalUrl = ref(false)
 
 // use dynamic model
@@ -25,7 +25,7 @@ const firstModalButtonFunction = ref(null)
 const secondModalButtonFunction = ref(null)
 const thirdModalButtonFunction = ref(null)
 
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement
@@ -69,21 +69,21 @@ const editor = useEditor({
 
 // watch for changes in textContent and update store and textContentVueModel
 watch(textContent, (newValue) => {
-  if (!pageBuilder.selectedElementIsValidText()) return
+  if (!pageBuilderClass.selectedElementIsValidText()) return
 
   if (getElement.value) {
     pageBuilderStateStore.setTextAreaVueModel(newValue)
 
     if (typeof newValue === 'string' && newValue !== textContentVueModel.value) {
-      pageBuilder.handleTextInput(newValue)
+      pageBuilderClass.handleTextInput(newValue)
     }
   }
 })
 
-// pageBuilder.selectedElementIsValidText(newValue);
+// pageBuilderClass.selectedElementIsValidText(newValue);
 
 const TipTapSetContent = function () {
-  if (!pageBuilder.selectedElementIsValidText()) return
+  if (!pageBuilderClass.selectedElementIsValidText()) return
 
   if (editor.value) {
     editor.value.commands.setContent(getElement.value.innerHTML)
@@ -179,146 +179,148 @@ onMounted(() => {
 })
 </script>
 <template>
-  <DynamicModal
-    :show="showModalUrl"
-    :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">
-        <label class="myPrimaryInputLabel" for="roles"><span>Enter URL</span></label
-        ><input v-model="urlEnteret" class="myPrimaryInput mt-1" type="url" placeholder="url" />
-        <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="showModalUrl"
+      :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">
+          <label class="myPrimaryInputLabel" for="roles"><span>Enter URL</span></label
+          ><input v-model="urlEnteret" class="myPrimaryInput mt-1" type="url" placeholder="url" />
+          <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>
-    </main>
-  </DynamicModal>
-
-  <div class="blockease-linear duration-200 block ease-linear">
-    <div v-if="pageBuilder.selectedElementIsValidText() && editor">
-      <div class="relative rounded-lg">
-        <div
-          class="flex justify-between myPrimaryGap items-center divide-x divide-gray-200 py-4 px-4 overflow-x-auto border-b border-gray-20"
-        >
-          <div class="flex items-center 0 divide-x divide-gray-200">
-            <div class="px-2 flex items-center justify-start gap-2">
-              <button
-                @click="editor.chain().focus().setHardBreak().run()"
-                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"> keyboard_return </span>
-                <span>Line break</span>
-              </button>
+      </main>
+    </DynamicModal>
+
+    <div class="blockease-linear duration-200 block ease-linear">
+      <div v-if="pageBuilderClass.selectedElementIsValidText() && editor">
+        <div class="relative rounded-lg">
+          <div
+            class="flex justify-between myPrimaryGap items-center divide-x divide-gray-200 py-4 px-4 overflow-x-auto border-b border-gray-20"
+          >
+            <div>
+              <div>
+                <div class="px-2 flex items-center justify-start gap-2">
+                  <button
+                    @click="pageBuilderStateStore.setShowModalTipTap(false)"
+                    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"> Save </span>
+                    <span>Save</span>
+                  </button>
+                </div>
+              </div>
             </div>
+            <div class="flex items-center 0 divide-x divide-gray-200">
+              <div class="px-2 flex items-center justify-start gap-2">
+                <button
+                  @click="editor.chain().focus().setHardBreak().run()"
+                  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"> keyboard_return </span>
+                  <span>Line break</span>
+                </button>
+              </div>
 
-            <div class="px-2 flex items-center justify-start gap-2">
-              <button
-                @click="editor.chain().focus().toggleBold().run()"
-                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"
-                :class="{
-                  'bg-myPrimaryLinkColor text-white': editor.isActive('bold'),
-                }"
-              >
-                <span class="material-symbols-outlined"> format_bold </span>
-                <span>Bold</span>
-              </button>
-            </div>
+              <div class="px-2 flex items-center justify-start gap-2">
+                <button
+                  @click="editor.chain().focus().toggleBold().run()"
+                  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"
+                  :class="{
+                    'bg-myPrimaryLinkColor text-white': editor.isActive('bold'),
+                  }"
+                >
+                  <span class="material-symbols-outlined"> format_bold </span>
+                  <span>Bold</span>
+                </button>
+              </div>
 
-            <div class="px-2 flex items-center justify-start gap-2">
-              <button
-                @click="handleURL"
-                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"
-                :class="{
-                  'bg-myPrimaryLinkColor text-white': editor.isActive('link'),
-                }"
-              >
-                <span class="material-symbols-outlined"> link </span>
-                <span>Link</span>
-              </button>
-            </div>
+              <div class="px-2 flex items-center justify-start gap-2">
+                <button
+                  @click="handleURL"
+                  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"
+                  :class="{
+                    'bg-myPrimaryLinkColor text-white': editor.isActive('link'),
+                  }"
+                >
+                  <span class="material-symbols-outlined"> link </span>
+                  <span>Link</span>
+                </button>
+              </div>
 
-            <div class="px-2 flex items-center justify-start gap-2">
-              <button
-                @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-                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"
-                :class="{
-                  'bg-myPrimaryLinkColor text-white': editor.isActive('heading', {
-                    level: 2,
-                  }),
-                }"
-              >
-                <span class="material-symbols-outlined"> titlecase </span>
-                <span>Header 2</span>
-              </button>
-            </div>
+              <div class="px-2 flex items-center justify-start gap-2">
+                <button
+                  @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+                  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"
+                  :class="{
+                    'bg-myPrimaryLinkColor text-white': editor.isActive('heading', {
+                      level: 2,
+                    }),
+                  }"
+                >
+                  <span class="material-symbols-outlined"> titlecase </span>
+                  <span>Header 2</span>
+                </button>
+              </div>
 
-            <div class="px-2 flex items-center justify-start gap-2">
-              <button
-                @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-                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"
-                :class="{
-                  'bg-myPrimaryLinkColor text-white': editor.isActive('heading', {
-                    level: 3,
-                  }),
-                }"
-              >
-                <span class="material-symbols-outlined"> titlecase </span>
-                <span>Header 3</span>
-              </button>
-            </div>
+              <div class="px-2 flex items-center justify-start gap-2">
+                <button
+                  @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+                  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"
+                  :class="{
+                    'bg-myPrimaryLinkColor text-white': editor.isActive('heading', {
+                      level: 3,
+                    }),
+                  }"
+                >
+                  <span class="material-symbols-outlined"> titlecase </span>
+                  <span>Header 3</span>
+                </button>
+              </div>
 
-            <div class="px-2 flex items-center justify-start gap-2">
-              <button
-                @click="editor.chain().focus().toggleBulletList().run()"
-                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"
-                :class="{
-                  'bg-myPrimaryLinkColor text-white': editor.isActive('bulletList'),
-                }"
-              >
-                <span class="material-symbols-outlined"> list </span>
-                <span>List</span>
-              </button>
-            </div>
-          </div>
-          <div>
-            <div>
               <div class="px-2 flex items-center justify-start gap-2">
                 <button
-                  @click="pageBuilderStateStore.setShowModalTipTap(false)"
+                  @click="editor.chain().focus().toggleBulletList().run()"
                   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"
+                  :class="{
+                    'bg-myPrimaryLinkColor text-white': editor.isActive('bulletList'),
+                  }"
                 >
-                  <span class="material-symbols-outlined"> Save </span>
-                  <span>Save</span>
+                  <span class="material-symbols-outlined"> list </span>
+                  <span>List</span>
                 </button>
               </div>
             </div>
           </div>
-        </div>
 
-        <editor-content
-          id="page-builder-editor"
-          :editor="editor"
-          class="px-4 pt-6 pb-12 bg-white rounded-lg lg:min-h-[20rem] lg:max-h-[30rem] md:min-h-[20rem] md:max-h-[20rem] min-h-[20rem] max-h-[20rem] overflow-y-auto"
-        />
+          <editor-content
+            id="page-builder-editor"
+            :editor="editor"
+            class="px-4 pt-6 pb-12 bg-white rounded-lg lg:min-h-[20rem] lg:max-h-[30rem] md:min-h-[20rem] md:max-h-[20rem] min-h-[20rem] max-h-[20rem] overflow-y-auto"
+          />
+        </div>
       </div>
     </div>
   </div>

package/src/PageBuilder/PageBuilder.vue

@@ -2,7 +2,7 @@
 const version = __APP_VERSION__
 import { onMounted, computed, ref, watch, provide } from 'vue'
 import { createPinia } from 'pinia'
-import PageBuilder from '@/composables/PageBuilder.ts'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 import PageBuilderPreviewModal from '@/Components/Modals/PageBuilderPreviewModal.vue'
 import Preview from '@/PageBuilder/Preview.vue'
 import ComponentTopMenu from '@/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue'
@@ -12,38 +12,111 @@ import OptionsDropdown from '@/Components/PageBuilder/DropdownsPlusToggles/Optio
 import RightSidebarEditor from '@/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue'
 import { usePageBuilderStateStore } from '@/stores/page-builder-state'
 import { useMediaLibraryStore } from '@/stores/media-library'
+import { useUserStore } from '@/stores/user'
+
+/**
+ * Props for PageBuilder component
+ * @typedef {Object} Props
+ * @property {Object|null} CustomMediaLibraryComponent - Custom media component
+ * @property {Object|null} CustomSearchComponent - Custom search component
+ * @property {string} updateOrCreate - Mode: create or update
+ * @property {Object|null} user - User object with name property: { name: string }
+ */
+const props = defineProps({
+  PageBuilderLogo: {
+    type: String,
+    default: null,
+  },
+  CustomMediaLibraryComponent: {
+    type: Object,
+    default: null,
+  },
+  CustomSearchComponent: {
+    type: Object,
+    default: null,
+  },
+  updateOrCreate: {
+    type: String,
+    default: 'create',
+    required: false,
+  },
+  userForPageBuilder: {
+    type: Object,
+    default: null,
+    validator: (value) => {
+      // Allow null or object with name property
+      return value === null || (typeof value === 'object' && typeof value.name === 'string')
+    },
+  },
+  resourceData: {
+    type: Object,
+    default: null,
+    required: false,
+    validator: (value) => {
+      // Allow null or object with title (string) and id (number) properties
+      return (
+        value === null ||
+        (typeof value === 'object' &&
+          typeof value.title === 'string' &&
+          typeof value.id === 'number')
+      )
+    },
+  },
+})
+
+// Create internal Pinia instance for PageBuilder package
+const internalPinia = createPinia()
+const mediaLibraryStore = useMediaLibraryStore(internalPinia)
+const pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
+const userStore = useUserStore(internalPinia)
 
-// Create internal Pinia instance for this component if none exists
-let internalPinia = null
-let mediaLibraryStore = null
-let pageBuilderStateStore = null
-let pageBuilder = null
-
-try {
-  // Try to use existing Pinia first
-  mediaLibraryStore = useMediaLibraryStore()
-  pageBuilderStateStore = usePageBuilderStateStore()
-} catch (error) {
-  // If no Pinia exists, create our own internal instance
-  internalPinia = createPinia()
-  mediaLibraryStore = useMediaLibraryStore(internalPinia)
-  pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
+// Set logo
+if (props.PageBuilderLogo) {
+  pageBuilderStateStore.setPageBuilderLogo(props.PageBuilderLogo)
 }
 
+const getPageBuilderLogo = computed(() => {
+  return pageBuilderStateStore.getPageBuilderLogo
+})
+
+// Set current resource data if provided
+if (props.resourceData) {
+  pageBuilderStateStore.setCurrentResourceData(props.resourceData)
+}
+// Set current user if provided
+if (props.userForPageBuilder) {
+  userStore.setCurrentUser(props.userForPageBuilder)
+}
+
+// Set updateOrCreate in store
+pageBuilderStateStore.setUpdateOrCreate(props.updateOrCreate)
+
 // Initialize PageBuilder with stores
-pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+
+// Provide stores for child components
+provide('pageBuilderStateStore', pageBuilderStateStore)
+provide('mediaLibraryStore', mediaLibraryStore)
+provide('userStore', userStore)
 
-// Provide the stores for child components if using internal Pinia
-if (internalPinia) {
-  provide('pageBuilderStateStore', pageBuilderStateStore)
-  provide('mediaLibraryStore', mediaLibraryStore)
+// Provide the internal Pinia instance for components that need to create stores
+provide('internalPinia', internalPinia)
+
+// Provide custom components for child components
+provide('CustomMediaComponent', props.CustomMediaLibraryComponent)
+provide('CustomSearchComponent', props.CustomSearchComponent)
+
+// Provide modal close function for custom components
+const closeAddComponentModal = () => {
+  showModalAddComponent.value = false
 }
+provide('closeAddComponentModal', closeAddComponentModal)
 
 const getMenuRight = computed(() => {
   return pageBuilderStateStore.getMenuRight
 })
 const previewCurrentDesign = function () {
-  pageBuilder.previewCurrentDesign()
+  pageBuilderClass.previewCurrentDesign()
 }
 const openPageBuilderPreviewModal = ref(false)
 const firstPageBuilderPreviewModalButton = ref(null)
@@ -83,8 +156,16 @@ const handleAddComponent = function () {
 const getComponents = computed(() => {
   return pageBuilderStateStore.getComponents
 })
-const getComponent = computed(() => {
-  return pageBuilderStateStore.getComponent
+
+const getCurrentUser = computed(() => {
+  return userStore.getCurrentUser
+})
+
+const getCurrentResourceData = computed(() => {
+  return pageBuilderStateStore.getCurrentResourceData
+})
+const getUpdateOrCreate = computed(() => {
+  return pageBuilderStateStore.getUpdateOrCreate
 })
 
 const getElement = computed(() => {
@@ -118,8 +199,8 @@ watch(getElementAttributes, (newAttributes, oldAttributes) => {
     newAttributes?.dataImage !== oldAttributes?.dataImage
   ) {
     // Trigger your method when any of the specified attributes change
-    pageBuilder.handlePageBuilderMethods()
-    pageBuilder.setEventListenersForElements()
+    pageBuilderClass.handlePageBuilderMethods()
+    pageBuilderClass.setEventListenersForElements()
   }
 })
 
@@ -130,7 +211,16 @@ const handleSelectComponent = function (componentObject) {
 const draggableZone = ref(null)
 
 onMounted(async () => {
-  pageBuilder.setEventListenersForElements()
+  pageBuilderClass.updateLocalStorageItemName()
+  // Set up event listeners
+  pageBuilderClass.setEventListenersForElements()
+
+  //
+  //
+  //
+  //
+
+  pageBuilderClass.loadExistingContent()
 })
 </script>
 
@@ -141,6 +231,7 @@ onMounted(async () => {
       :show="showModalAddComponent"
       :firstButtonText="firstButtonTextSearchComponents"
       :title="titleModalAddComponent"
+      :CustomSearchComponent="props.CustomSearchComponent"
       @firstModalButtonSearchComponentsFunction="firstModalButtonSearchComponentsFunction"
     ></SearchComponents>
     <PageBuilderPreviewModal
@@ -151,6 +242,107 @@ onMounted(async () => {
     </PageBuilderPreviewModal>
 
     <div class="w-full inset-x-0 h-[90vh] z-10 bg-white overflow-x-scroll lg:pt-2 pt-2">
+      <!-- Save laylout # start -->
+      <div class="p-4 m-8 bg-stone-200 rounded-lg">
+        <div
+          @click="pageBuilderStateStore.setComponent(null)"
+          class="px-4 lg:h-[10vh] h-[16vh] flex items-center justify-between border-b border-gray-200 bg-white"
+        >
+          <div class="flex items-center justify-start divide-x divide-gray-200">
+            <template v-if="getPageBuilderLogo">
+              <div class="border-r border-gray-200 pr-6">
+                <img class="h-6" :src="getPageBuilderLogo" alt="Logo" />
+              </div>
+            </template>
+            <button
+              class="myPrimaryButton lg:text-sm text-[10px] lg:py-2 py-2 min-h-2 ml-4"
+              @click="pageBuilderClass.saveComponentsLocalStorage"
+              type="button"
+            >
+              <span class="material-symbols-outlined text-[18px]"> save </span>
+              Save layout - saveComponents LocalStorage
+            </button>
+            <button
+              class="myPrimaryButton lg:text-sm text-[10px] lg:py-2 py-2 min-h-2 ml-4 bg-red-500"
+              @click="pageBuilderClass.removeItemComponentsLocalStorageCreate"
+              type="button"
+            >
+              <span class="material-symbols-outlined text-[18px]"> delete </span>
+              Remove Create Local Storage Item
+            </button>
+            <button
+              class="myPrimaryButton lg:text-sm text-[10px] lg:py-2 py-2 min-h-2 ml-4 bg-red-800"
+              @click="pageBuilderClass.removeItemComponentsLocalStorageUpdate"
+              type="button"
+            >
+              <span class="material-symbols-outlined text-[18px]"> delete </span>
+              Remove Update Local Storage Item
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- Save laylout # end -->
+
+      <div class="py-4 p-4 bg-red-100 text-sm test-data m-4 rounded-lg">
+        <h3 class="font-semibold mb-3 text-gray-800">PageBuilder Debug Info</h3>
+        <div class="bg-white rounded border overflow-hidden">
+          <table class="min-w-full text-xs">
+            <thead class="bg-gray-50">
+              <tr>
+                <th class="px-3 py-2 text-left font-medium text-gray-700 border-b">Property</th>
+                <th class="px-3 py-2 text-left font-medium text-gray-700 border-b">Value</th>
+                <th class="px-3 py-2 text-left font-medium text-gray-700 border-b">Type</th>
+                <th class="px-3 py-2 text-left font-medium text-gray-700 border-b">Present</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200">
+              <tr>
+                <td class="px-3 py-2 font-medium text-gray-600">User (store)</td>
+                <td class="px-3 py-2">
+                  {{ getCurrentUser ? JSON.stringify(getCurrentUser) : 'null' }}
+                </td>
+                <td class="px-3 py-2 text-gray-500">{{ typeof getCurrentUser }}</td>
+                <td class="px-3 py-2 text-gray-500">{{ !!getCurrentUser }}</td>
+              </tr>
+              <tr>
+                <td class="px-3 py-2 font-medium text-gray-600">Update or Create (store)</td>
+                <td class="px-3 py-2">{{ getUpdateOrCreate }}</td>
+                <td class="px-3 py-2 text-gray-500">{{ typeof getUpdateOrCreate }}</td>
+                <td class="px-3 py-2 text-gray-500">{{ !!getUpdateOrCreate }}</td>
+              </tr>
+              <tr>
+                <td class="px-3 py-2 font-medium text-gray-600">Resource Data (store)</td>
+                <td class="px-3 py-2">
+                  {{ getCurrentResourceData ? JSON.stringify(getCurrentResourceData) : 'null' }}
+                </td>
+                <td class="px-3 py-2 text-gray-500">{{ typeof getCurrentResourceData }}</td>
+                <td class="px-3 py-2 text-gray-500">{{ !!getCurrentResourceData }}</td>
+              </tr>
+              <tr>
+                <td class="px-3 py-2 font-medium text-gray-600">Custom Media Component</td>
+                <td class="px-3 py-2">
+                  {{ props.CustomMediaLibraryComponent ? 'Provided' : 'Not provided' }}
+                </td>
+                <td class="px-3 py-2 text-gray-500">
+                  {{ props.CustomMediaLibraryComponent ? 'true' : 'false' }}
+                </td>
+                <td class="px-3 py-2 text-gray-500">{{ !!props.CustomMediaLibraryComponent }}</td>
+              </tr>
+              <tr>
+                <td class="px-3 py-2 font-medium text-gray-600">Custom Search Component</td>
+                <td class="px-3 py-2">
+                  {{ props.CustomSearchComponent ? 'Provided' : 'Not provided' }}
+                </td>
+                <td class="px-3 py-2 text-gray-500">
+                  {{ props.CustomSearchComponent ? 'true' : 'false' }}
+                </td>
+                <td class="px-3 py-2 text-gray-500">{{ !!props.CustomSearchComponent }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
       <div class="relative h-full flex">
         <div
           @click.self="pageBuilderStateStore.setComponent(null)"
@@ -250,11 +442,7 @@ onMounted(async () => {
           </div>
 
           <EditGetElement></EditGetElement>
-          <div
-            @click="pageBuilderStateStore.setComponent(null)"
-            id="contains-pagebuilder"
-            class="pl-4 pr-4 pb-4 overflow-y-auto h-screen pt-1"
-          >
+          <div id="contains-pagebuilder" class="pl-4 pr-4 pb-4 overflow-y-auto h-screen pt-1">
             <div id="pagebuilder">
               <div ref="draggableZone">
                 <!-- Added Components to DOM # start -->