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

package/src/composables/{PageBuilder.ts → PageBuilderClass.ts}

@@ -1,61 +1,33 @@
 // Type definitions
-interface ComponentObject {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any
-}
-
-interface ImageObject {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any
-}
-
-interface PageBuilderStateStore {
-  getTextAreaVueModel: string | null
-  getLocalStorageItemName: string | null
-  getLocalStorageItemNameUpdate: string | null
-  getHyberlinkEnable: boolean
-  getComponents: ComponentObject[] | null
-  getComponent: ComponentObject | null
-  getElement: HTMLElement | null
-  getNextSibling: HTMLElement | null
-  getParentElement: HTMLElement | null
-  getRestoredElement: string | null
-  getComponentArrayAddMethod: string | null
-  setElement: (element: HTMLElement | null) => void
-  setMenuRight: (value: boolean) => void
-  setComponent: (component: ComponentObject | null) => void
-  setComponents: (components: ComponentObject[] | null) => void
-  setComponentArrayAddMethod: (method: string) => void
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any // For dynamic mutation methods
-}
-
-interface MediaLibraryStore {
-  getCurrentImage: ImageObject | null
-}
+import type {
+  ComponentObject,
+  ImageObject,
+  PageBuilderStateStore,
+  MediaLibraryStore,
+  TimerHandle,
+  MutationObserver as MutationObserverType,
+  TailwindColors,
+  TailwindOpacities,
+  TailwindFontSizes,
+  TailwindFontStyles,
+  TailwindPaddingAndMargin,
+  TailwindBorderRadius,
+  TailwindBorderStyleWidthColor,
+} from '@/types'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 import tailwindColors from '@/utils/builder/tailwaind-colors'
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 import tailwindOpacities from '@/utils/builder/tailwind-opacities'
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 import tailwindFontSizes from '@/utils/builder/tailwind-font-sizes'
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 import tailwindFontStyles from '@/utils/builder/tailwind-font-styles'
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 import tailwindPaddingAndMargin from '@/utils/builder/tailwind-padding-margin'
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 import tailwindBorderRadius from '@/utils/builder/tailwind-border-radius'
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 import tailwindBorderStyleWidthPlusColor from '@/utils/builder/tailwind-border-style-width-color'
-import { computed, ref, nextTick } from 'vue'
+import { computed, ref, nextTick, inject } from 'vue'
 import type { ComputedRef } from 'vue'
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 import { v4 as uuidv4 } from 'uuid'
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 import { delay } from '@/composables/delay'
 
-class PageBuilder {
+class PageBuilderClass {
   // Class properties with types
   private elementsWithListeners: WeakSet<Element>
   private nextTick: Promise<void>
@@ -65,7 +37,6 @@ class PageBuilder {
   private mediaLibraryStore: MediaLibraryStore
   private getTextAreaVueModel: ComputedRef<string | null>
   private getLocalStorageItemName: ComputedRef<string | null>
-  private getLocalStorageItemNameUpdate: ComputedRef<string | null>
   private getCurrentImage: ComputedRef<ImageObject | null>
   private getHyberlinkEnable: ComputedRef<boolean>
   private getComponents: ComputedRef<ComponentObject[] | null>
@@ -79,10 +50,8 @@ class PageBuilder {
   private additionalTagsNoneListernes: string[]
   private structuringTags: string[]
   private showRunningMethodLogs: boolean
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private delay: any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private observer?: any // Add missing observer property
+  private delay: ReturnType<typeof delay>
+  private observer?: MutationObserverType
 
   constructor(pageBuilderStateStore: PageBuilderStateStore, mediaLibraryStore: MediaLibraryStore) {
     /**
@@ -104,6 +73,8 @@ class PageBuilder {
     this.containsPagebuilder = document.querySelector('#contains-pagebuilder')
 
     this.timer = null
+
+    // Stores are now required parameters - no fallback to inject
     this.pageBuilderStateStore = pageBuilderStateStore
     this.mediaLibraryStore = mediaLibraryStore
 
@@ -111,9 +82,6 @@ class PageBuilder {
     this.getLocalStorageItemName = computed(
       () => this.pageBuilderStateStore.getLocalStorageItemName,
     )
-    this.getLocalStorageItemNameUpdate = computed(
-      () => this.pageBuilderStateStore.getLocalStorageItemNameUpdate,
-    )
 
     this.getCurrentImage = computed(() => this.mediaLibraryStore.getCurrentImage)
     this.getHyberlinkEnable = computed(() => this.pageBuilderStateStore.getHyberlinkEnable)
@@ -162,22 +130,6 @@ class PageBuilder {
     this.delay = delay()
   }
 
-  shouldRunMethods(): boolean {
-    if (!this.getComponents.value) {
-      return false
-    }
-
-    if (!this.getComponent.value) {
-      return false
-    }
-
-    if (!this.getElement.value) {
-      return false
-    }
-
-    return true
-  }
-
   #applyElementClassChanges(
     selectedCSS: string,
     CSSArray: string[],
@@ -186,7 +138,6 @@ class PageBuilder {
     if (this.showRunningMethodLogs) {
       console.log('#applyElementClassChanges')
     }
-    if (!this.shouldRunMethods()) return
 
     const currentCSS = CSSArray.find((CSS) => {
       return this.getElement.value?.classList.contains(CSS)
@@ -195,7 +146,7 @@ class PageBuilder {
     // set to 'none' if undefined
     let elementClass = currentCSS || 'none'
 
-    this.pageBuilderStateStore[mutationName](elementClass)
+    this.pageBuilderStateStore[mutationName as keyof PageBuilderStateStore](elementClass)
 
     if (typeof selectedCSS === 'string' && selectedCSS !== 'none') {
       if (elementClass && this.getElement.value?.classList.contains(elementClass)) {
@@ -209,7 +160,7 @@ class PageBuilder {
       elementClass = selectedCSS
     }
 
-    this.pageBuilderStateStore[mutationName](elementClass)
+    this.pageBuilderStateStore[mutationName as keyof PageBuilderStateStore](elementClass)
     this.pageBuilderStateStore.setElement(this.getElement.value)
 
     return currentCSS
@@ -251,6 +202,7 @@ class PageBuilder {
   }
 
   #handleElementClick = (e: Event, element: HTMLElement): void => {
+    e.preventDefault()
     e.stopPropagation()
 
     const pagebuilder = document.querySelector('#pagebuilder')
@@ -275,7 +227,6 @@ class PageBuilder {
     if (this.showRunningMethodLogs) {
       console.log('#handleMouseOver')
     }
-    // console.log("YOU MOUSE OVER ME!");
 
     e.preventDefault()
     e.stopPropagation()
@@ -315,7 +266,9 @@ class PageBuilder {
    * The function is used to
    * attach event listeners to each element within a 'section'
    */
-  setEventListenersForElements = () => {
+  setEventListenersForElements = async () => {
+    console.log('setEventListenersForElements called')
+
     if (this.showRunningMethodLogs) {
       console.log('setEventListenersForElements')
     }
@@ -324,6 +277,10 @@ class PageBuilder {
 
     if (!pagebuilder) return
 
+    // Wait for any pending DOM updates
+    await nextTick()
+    await new Promise((resolve) => requestAnimationFrame(resolve))
+
     pagebuilder.querySelectorAll('section *').forEach(async (element) => {
       // exclude headerTags && additional Tags for not listening
       if (
@@ -426,7 +383,7 @@ class PageBuilder {
     const parser = new DOMParser()
 
     // Parse the HTML content of the clonedComponent using the DOMParser
-    const doc = parser.parseFromString(clonedComponent.html_code, 'text/html')
+    const doc = parser.parseFromString(clonedComponent.html_code || '', 'text/html')
 
     // Selects all elements within the HTML document, including elements like:
     const elements = doc.querySelectorAll('*')
@@ -481,8 +438,6 @@ class PageBuilder {
       console.log('handleAddClasses')
     }
 
-    if (!this.shouldRunMethods()) return
-
     // convert classList to array
     const classListArray = Array.from(this.getElement.value?.classList || [])
 
@@ -495,8 +450,6 @@ class PageBuilder {
       console.log('handleAddClasses')
     }
 
-    if (!this.shouldRunMethods()) return
-
     if (
       typeof userSelectedClass === 'string' &&
       userSelectedClass !== '' &&
@@ -514,13 +467,12 @@ class PageBuilder {
       this.pageBuilderStateStore.setClass(userSelectedClass)
     }
   }
+
   handleRemoveClasses(userSelectedClass: string): void {
     if (this.showRunningMethodLogs) {
       console.log('handleRemoveClasses')
     }
 
-    if (!this.shouldRunMethods()) return
-
     // remove selected class from element
     if (this.getElement.value?.classList.contains(userSelectedClass)) {
       this.getElement.value?.classList.remove(userSelectedClass)
@@ -583,15 +535,16 @@ class PageBuilder {
 
       // Append the restored element to its parent
       // Insert the restored element before its next sibling in its parent
-      if (newElement.firstChild) {
+      if (newElement.firstChild && this.getParentElement.value) {
+        // insertBefore can accept null as second parameter (will append to end)
         this.getParentElement.value.insertBefore(newElement.firstChild, this.getNextSibling.value)
       }
     }
 
     // Clear
-
     this.pageBuilderStateStore.setParentElement(null)
     this.pageBuilderStateStore.setRestoredElement(null)
+    this.pageBuilderStateStore.setNextSibling(null)
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
 
@@ -805,7 +758,6 @@ class PageBuilder {
       console.log('handleFontSize')
     }
 
-    if (!this.shouldRunMethods()) return
     if (!userSelectedFontSize) return
     if (!this.getElement.value) return
 
@@ -862,7 +814,9 @@ class PageBuilder {
         !userSelectedFontSize.includes('md:') &&
         !userSelectedFontSize.includes('lg:')
       ) {
-        this.getElement.value.classList.remove(getFontBase.value)
+        if (getFontBase.value) {
+          this.getElement.value.classList.remove(getFontBase.value)
+        }
         if (!userSelectedFontSize.includes('base:none')) {
           this.getElement.value.classList.add(userSelectedFontSize)
         }
@@ -870,7 +824,9 @@ class PageBuilder {
         this.pageBuilderStateStore.setFontBase(userSelectedFontSize)
       }
       if (userSelectedFontSize.includes('lg:')) {
-        this.getElement.value.classList.remove(getFontDesktop.value)
+        if (getFontDesktop.value) {
+          this.getElement.value.classList.remove(getFontDesktop.value)
+        }
         if (!userSelectedFontSize.includes('lg:none')) {
           this.getElement.value.classList.add(userSelectedFontSize)
         }
@@ -878,7 +834,9 @@ class PageBuilder {
         this.pageBuilderStateStore.setFontDesktop(userSelectedFontSize)
       }
       if (userSelectedFontSize.includes('md:')) {
-        this.getElement.value.classList.remove(getFontTablet.value)
+        if (getFontTablet.value) {
+          this.getElement.value.classList.remove(getFontTablet.value)
+        }
         if (!userSelectedFontSize.includes('md:none')) {
           this.getElement.value.classList.add(userSelectedFontSize)
         }
@@ -886,7 +844,9 @@ class PageBuilder {
         this.pageBuilderStateStore.setFontTablet(userSelectedFontSize)
       }
       if (userSelectedFontSize.includes('sm:')) {
-        this.getElement.value.classList.remove(getFontMobile.value)
+        if (getFontMobile.value) {
+          this.getElement.value.classList.remove(getFontMobile.value)
+        }
         if (!userSelectedFontSize.includes('sm:none')) {
           this.getElement.value.classList.add(userSelectedFontSize)
         }
@@ -931,7 +891,6 @@ class PageBuilder {
       console.log('deleteComponent')
     }
 
-    if (!this.shouldRunMethods()) return
     if (!this.getComponents.value || !this.getComponent.value) return
 
     // Find the index of the component to delete
@@ -959,7 +918,6 @@ class PageBuilder {
       console.log('moveComponent')
     }
 
-    if (!this.shouldRunMethods()) return
     if (!this.getComponents.value || !this.getComponent.value) return
 
     if (this.getComponents.value.length <= 1) return
@@ -994,7 +952,6 @@ class PageBuilder {
       console.log('ensureTextAreaHasContent')
     }
 
-    if (!this.shouldRunMethods()) return
     if (!this.getElement.value) return
 
     // text content
@@ -1024,8 +981,6 @@ class PageBuilder {
       console.log('handleTextInput')
     }
 
-    if (!this.shouldRunMethods()) return
-
     // // text content
     if (typeof this.getElement.value?.innerHTML !== 'string') {
       return
@@ -1127,6 +1082,75 @@ class PageBuilder {
     //
   }
 
+  // Helper function to sanitize title for localStorage key
+  private sanitizeForLocalStorage(input: string): string {
+    return input
+      .trim() // Remove leading/trailing spaces
+      .toLowerCase() // Convert to lowercase
+      .replace(/\s+/g, '-') // Replace one or more spaces with single hyphen
+      .replace(/[^a-z0-9-]/g, '') // Remove all non-alphanumeric characters except hyphens
+      .replace(/-+/g, '-') // Replace multiple consecutive hyphens with single hyphen
+      .replace(/^-+|-+$/g, '') // Remove leading/trailing hyphens
+  }
+
+  updateLocalStorageItemName(): void {
+    const updateOrCreate = this.pageBuilderStateStore.getUpdateOrCreate
+
+    const resourceData = this.pageBuilderStateStore.getCurrentResourceData
+
+    // Logic for update
+    if (updateOrCreate === 'create') {
+      this.pageBuilderStateStore.setLocalStorageItemName(`page-builder-create-resource`)
+      return
+    }
+
+    // Logic for update
+    if (updateOrCreate === 'update') {
+      // if resource data is null
+      if (resourceData === null) {
+        this.pageBuilderStateStore.setLocalStorageItemName(`page-builder-update-resource`)
+        return
+      }
+
+      // If resource is present
+
+      // Runs when resourceData has id but no title
+      if (typeof resourceData === 'object' && 'id' in resourceData && !('title' in resourceData)) {
+        const sanitizedId = this.sanitizeForLocalStorage(String(resourceData['id']))
+        console.log('ID BUT NOT TITLE:', `page-builder-update-resource-${sanitizedId}`)
+
+        this.pageBuilderStateStore.setLocalStorageItemName(
+          `page-builder-update-resource-${sanitizedId}`,
+        )
+        return
+      }
+
+      // Runs when resourceData has title but no id
+      if (typeof resourceData === 'object' && 'title' in resourceData && !('id' in resourceData)) {
+        const sanitizedTitle = this.sanitizeForLocalStorage(String(resourceData['title']))
+        console.log('TITLE BUT NOT ID:', `page-builder-update-resource-${sanitizedTitle}`)
+
+        this.pageBuilderStateStore.setLocalStorageItemName(
+          `page-builder-update-resource-${sanitizedTitle}`,
+        )
+        return
+      }
+
+      // Runs when resourceData has both title and id
+      if (typeof resourceData === 'object' && 'title' in resourceData && 'id' in resourceData) {
+        const sanitizedId = this.sanitizeForLocalStorage(String(resourceData['id']))
+        const sanitizedTitle = this.sanitizeForLocalStorage(String(resourceData['title']))
+
+        this.pageBuilderStateStore.setLocalStorageItemName(
+          `page-builder-update-resource-${sanitizedTitle}-${sanitizedId}`,
+        )
+        return
+      }
+
+      console.log('both are there...')
+    }
+  }
+
   async saveComponentsLocalStorage() {
     await this.nextTick
     this.synchronizeDOMAndComponents()
@@ -1144,27 +1168,27 @@ class PageBuilder {
     }
   }
 
-  async saveComponentsLocalStorageUpdate() {
+  async removeItemComponentsLocalStorageCreate() {
+    console.log('removeItemComponentsLocalStorageCreate')
     if (this.showRunningMethodLogs) {
-      console.log('saveComponentsLocalStorageUpdate')
+      console.log('removeItemComponentsLocalStorageCreate')
     }
 
     await this.nextTick
-    if (this.getLocalStorageItemNameUpdate.value) {
-      localStorage.setItem(
-        this.getLocalStorageItemNameUpdate.value,
-        JSON.stringify(this.getComponents.value),
-      )
+
+    if (this.getLocalStorageItemName.value) {
+      localStorage.removeItem(this.getLocalStorageItemName.value)
     }
   }
+
   async removeItemComponentsLocalStorageUpdate() {
+    console.log('removeItemComponentsLocalStorageUpdate')
     if (this.showRunningMethodLogs) {
       console.log('saveComponentsLocalStorageUpdate')
     }
 
-    await this.nextTick
-    if (this.getLocalStorageItemNameUpdate.value) {
-      localStorage.removeItem(this.getLocalStorageItemNameUpdate.value)
+    if (this.getLocalStorageItemName.value) {
+      localStorage.removeItem(this.getLocalStorageItemName.value)
     }
   }
 
@@ -1175,57 +1199,54 @@ class PageBuilder {
 
     if (!this.getLocalStorageItemName.value) return false
 
-    const savedCurrentDesign = localStorage.getItem(this.getLocalStorageItemName.value)
-    if (savedCurrentDesign) {
-      let components = JSON.parse(savedCurrentDesign)
-      if (!components) {
-        components = []
-      }
+    if (
+      this.getLocalStorageItemName.value &&
+      localStorage.getItem(this.getLocalStorageItemName.value)
+    ) {
+      const savedCurrentDesign = localStorage.getItem(this.getLocalStorageItemName.value)
 
-      this.pageBuilderStateStore.setComponents(components)
+      if (savedCurrentDesign) {
+        let components = JSON.parse(savedCurrentDesign)
 
-      return true
-    }
+        // Ensure components is always an array
+        components = Array.isArray(components) ? components : []
 
-    return false
-  }
-  //
-  areComponentsStoredInLocalStorageUpdate() {
-    if (this.showRunningMethodLogs) {
-      console.log('areComponentsStoredInLocalStorageUpdate')
-    }
+        // Transform HTML strings to component objects if needed
+        if (components.length > 0 && typeof components[0] === 'string') {
+          components = components.map((htmlString: string) => ({
+            html_code: htmlString,
+          }))
+        }
 
-    if (!this.getLocalStorageItemNameUpdate.value) return false
+        this.pageBuilderStateStore.setComponents(components)
 
-    const savedCurrentDesign = localStorage.getItem(this.getLocalStorageItemNameUpdate.value)
-    if (savedCurrentDesign) {
-      let components = JSON.parse(savedCurrentDesign)
-      if (!components) {
-        components = []
+        return true
       }
-
-      this.pageBuilderStateStore.setComponents(components)
-
-      return true
     }
 
     return false
   }
   //
-  async updateBasePrimaryImage(data: { type: string }): Promise<void> {
+  //
+  async updateBasePrimaryImage(data?: { type: string }): Promise<void> {
     if (this.showRunningMethodLogs) {
       console.log('updateBasePrimaryImage')
     }
 
     if (!this.getElement.value) return
 
-    if (data.type === 'unsplash' && this.getCurrentImage.value) {
-      if (this.getCurrentImage.value.file) {
+    // If data is provided, check for specific type (backward compatibility)
+    if (data && data.type === 'unsplash' && this.getCurrentImage.value) {
+      if (this.getCurrentImage.value.src) {
         await this.nextTick
-
-        this.pageBuilderStateStore.setBasePrimaryImage(`${this.getCurrentImage.value.file}`)
+        this.pageBuilderStateStore.setBasePrimaryImage(`${this.getCurrentImage.value.src}`)
       }
     }
+    // If no data provided, apply current image if available (new simplified usage)
+    if (this.getCurrentImage.value && this.getCurrentImage.value.src) {
+      await this.nextTick
+      this.pageBuilderStateStore.setBasePrimaryImage(`${this.getCurrentImage.value.src}`)
+    }
   }
 
   showBasePrimaryImage() {
@@ -1264,9 +1285,15 @@ class PageBuilder {
       console.log('#addHyperlinkToElement')
     }
 
-    if (!this.shouldRunMethods()) return
     if (!this.getElement.value) return
 
+    // Check if element is a proper DOM element and has closest method
+    if (
+      !(this.getElement.value instanceof HTMLElement) ||
+      typeof this.getElement.value.closest !== 'function'
+    )
+      return
+
     const parentHyperlink = this.getElement.value.closest('a')
     const hyperlink = this.getElement.value.querySelector('a')
 
@@ -1354,7 +1381,6 @@ class PageBuilder {
       console.log('#checkForHyperlink')
     }
 
-    if (!this.shouldRunMethods()) return
     if (!this.getElement.value) return
 
     const hyperlink = this.getElement.value.querySelector('a')
@@ -1391,11 +1417,18 @@ class PageBuilder {
       console.log('handleHyperlink')
     }
 
-    if (!this.shouldRunMethods()) return
-
     this.pageBuilderStateStore.setHyperlinkAbility(true)
 
-    const parentHyperlink = this.getElement.value?.closest('a')
+    if (!this.getElement.value) return
+
+    // Check if element is a proper DOM element and has closest method
+    if (
+      !(this.getElement.value instanceof HTMLElement) ||
+      typeof this.getElement.value.closest !== 'function'
+    )
+      return
+
+    const parentHyperlink = this.getElement.value.closest('a')
 
     // handle case where parent element already has an a href tag
     // when clicking directly on a hyperlink
@@ -1426,8 +1459,6 @@ class PageBuilder {
   }
 
   handlePageBuilderMethods(): void {
-    if (!this.shouldRunMethods()) return
-
     this.pageBuilderStateStore.setParentElement(null)
     this.pageBuilderStateStore.setRestoredElement(null)
 
@@ -1478,6 +1509,56 @@ class PageBuilder {
     // handle classes
     this.currentClasses()
   }
+
+  // Helper method for custom components to easily add components
+  async addComponent(componentObject: ComponentObject): Promise<void> {
+    if (this.showRunningMethodLogs) {
+      console.log('addComponent')
+    }
+
+    try {
+      const clonedComponent = this.cloneCompObjForDOMInsertion({
+        html_code: componentObject.html_code,
+        id: componentObject.id,
+        title: componentObject.title,
+      })
+
+      this.pageBuilderStateStore.setPushComponents({
+        component: clonedComponent,
+        componentArrayAddMethod: this.getComponentArrayAddMethod.value || 'push',
+      })
+
+      // Wait for the DOM to update before setting event listeners
+      await nextTick()
+      this.setEventListenersForElements()
+    } catch (error) {
+      console.error('Error adding component:', error)
+    }
+  }
+
+  // Load existing content from HTML when in update mode
+  loadExistingContent(): void {
+    if (this.showRunningMethodLogs) {
+      console.log('loadExistingContent')
+    }
+
+    if (this.pageBuilderStateStore.getUpdateOrCreate === 'update') {
+      if (this.areComponentsStoredInLocalStorage()) {
+        try {
+          // set components
+          const htmlOutput =
+            Array.isArray(this.getComponents.value) &&
+            this.getComponents.value
+              .map((component) => {
+                return component.html_code
+              })
+              .join('')
+        } catch (error) {
+          console.error('Error loading existing content:', error)
+        }
+      }
+    }
+  }
 }
 
-export default PageBuilder
+export default PageBuilderClass

package/src/composables/usePageBuilderModal.ts

@@ -0,0 +1,25 @@
+import { inject } from 'vue'
+
+// Composable for managing PageBuilder modals
+export function usePageBuilderModal() {
+  // Get the close function provided by the PageBuilder component
+  const closeAddComponentModal = inject<(() => void) | null>('closeAddComponentModal', null)
+  const closeMediaLibraryModal = inject<(() => void) | null>('closeMediaLibraryModal', null)
+
+  return {
+    closeAddComponentModal:
+      closeAddComponentModal ||
+      (() => {
+        console.warn(
+          'closeAddComponentModal function not available. Make sure you are using this within a PageBuilder context.',
+        )
+      }),
+    closeMediaLibraryModal:
+      closeMediaLibraryModal ||
+      (() => {
+        console.warn(
+          'closeMediaLibraryModal function not available. Make sure you are using this within a MediaLibraryModal context.',
+        )
+      }),
+  }
+}