@myissue/vue-website-page-builder 3.3.95 → 3.3.97

package/src/services/PageBuilderService.ts

@@ -1,3 +1,4 @@
+import { LocalStorageManager } from './LocalStorageManager'
 import type {
   BuilderResourceData,
   ComponentObject,
@@ -60,9 +61,6 @@ export class PageBuilderService {
   private getComponents: ComputedRef<ComponentObject[] | null>
   private getComponent: ComputedRef<ComponentObject | null>
   private getElement: ComputedRef<HTMLElement | null>
-  private getNextSibling: ComputedRef<HTMLElement | null>
-  private getParentElement: ComputedRef<HTMLElement | null>
-  private getRestoredElement: ComputedRef<string | null>
   private getComponentArrayAddMethod: ComputedRef<string | null>
   private NoneListernesTags: string[]
   private hasStartedEditing: boolean = false
@@ -98,9 +96,6 @@ export class PageBuilderService {
     this.getComponent = computed(() => this.pageBuilderStateStore.getComponent)
 
     this.getElement = computed(() => this.pageBuilderStateStore.getElement)
-    this.getNextSibling = computed(() => this.pageBuilderStateStore.getNextSibling)
-    this.getParentElement = computed(() => this.pageBuilderStateStore.getParentElement)
-    this.getRestoredElement = computed(() => this.pageBuilderStateStore.getRestoredElement)
 
     this.getComponentArrayAddMethod = computed(
       () => this.pageBuilderStateStore.getComponentArrayAddMethod,
@@ -416,6 +411,7 @@ export class PageBuilderService {
 
       // Update the localStorage key name based on the config/resource
       this.updateLocalStorageItemName()
+      this.initializeHistory()
 
       if (passedComponentsArray) {
         this.savedMountComponents = passedComponentsArray
@@ -988,6 +984,19 @@ export class PageBuilderService {
     await this.handleAutoSave()
   }
 
+  private getHistoryBaseKey(): string | null {
+    return this.getLocalStorageItemName.value
+  }
+
+  private initializeHistory() {
+    const baseKey = this.getHistoryBaseKey()
+    if (baseKey) {
+      const history = LocalStorageManager.getHistory(baseKey)
+      this.pageBuilderStateStore.setHistoryIndex(history.length - 1)
+      this.pageBuilderStateStore.setHistoryLength(history.length)
+    }
+  }
+
   /**
    * Triggers an auto-save of the current page builder content to local storage if enabled.
    */
@@ -1052,12 +1061,12 @@ export class PageBuilderService {
     // Deep clone clone component
     const clonedComponent = { ...componentObject }
 
-    const pageBuilder = document.querySelector('#pagebuilder')
+    const pageBuilderWrapper = document.querySelector('#page-builder-wrapper')
     //  scoll to top or bottom
-    if (pageBuilder) {
+    if (pageBuilderWrapper) {
       // push to top
       if (this.getComponentArrayAddMethod.value === 'unshift') {
-        pageBuilder.scrollTo({
+        pageBuilderWrapper.scrollTo({
           top: 0,
           behavior: 'smooth',
         })
@@ -1441,6 +1450,61 @@ export class PageBuilderService {
         .forEach((section) => section.remove())
     }
   }
+  //
+  public async undo() {
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
+    await delay(300)
+    const baseKey = this.getHistoryBaseKey()
+    if (!baseKey) return
+
+    const history = LocalStorageManager.getHistory(baseKey)
+    if (history.length > 1 && this.pageBuilderStateStore.getHistoryIndex > 0) {
+      this.pageBuilderStateStore.setHistoryIndex(this.pageBuilderStateStore.getHistoryIndex - 1)
+      const data = history[this.pageBuilderStateStore.getHistoryIndex]
+      const htmlString = this.renderComponentsToHtml(data.components)
+      await this.mountComponentsToDOM(htmlString)
+    }
+    this.pageBuilderStateStore.setIsLoadingGlobal(false)
+  }
+
+  public async redo() {
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
+    await delay(300)
+    const baseKey = this.getHistoryBaseKey()
+    if (!baseKey) return
+
+    const history = LocalStorageManager.getHistory(baseKey)
+    if (history.length > 0 && this.pageBuilderStateStore.getHistoryIndex < history.length - 1) {
+      this.pageBuilderStateStore.setHistoryIndex(this.pageBuilderStateStore.getHistoryIndex + 1)
+      const data = history[this.pageBuilderStateStore.getHistoryIndex]
+      const htmlString = this.renderComponentsToHtml(data.components)
+      await this.mountComponentsToDOM(htmlString)
+    }
+    this.pageBuilderStateStore.setIsLoadingGlobal(false)
+  }
+
+  private hasVisibleContent(element: HTMLElement): boolean {
+    if (!element) return false
+
+    // Check for meaningful elements
+    const meaningfulContentSelector =
+      'img, video, iframe, input, button, a, h1, h2, h3, h4, h5, h6, p, li, blockquote, pre, code, table'
+    if (element.querySelector(meaningfulContentSelector)) return true
+
+    // Check for non-empty text nodes
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null)
+    while (walker.nextNode()) {
+      if (walker.currentNode.nodeValue && walker.currentNode.nodeValue.trim() !== '') {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  private isSectionEmpty(section: HTMLElement): boolean {
+    return !this.hasVisibleContent(section)
+  }
 
   /**
    * Deletes the currently selected component from the DOM and the state.
@@ -1450,13 +1514,13 @@ export class PageBuilderService {
     this.syncDomToStoreOnly()
     await nextTick()
 
-    const components = this.getComponents.value
+    const components = this.pageBuilderStateStore.getComponents
 
     if (!components) return
 
     // Find the index of the component to be deleted.
     const indexToDelete = components.findIndex(
-      (component) => component.id === this.getComponent.value?.id,
+      (component: ComponentObject) => component.id === this.getComponent.value?.id,
     )
 
     if (indexToDelete === -1) {
@@ -1509,15 +1573,35 @@ export class PageBuilderService {
       return
     }
 
-    // If the element is not a top-level section, store its information for undo functionality.
-    if (element.parentElement?.tagName !== 'SECTION') {
-      this.pageBuilderStateStore.setParentElement(element.parentNode as HTMLElement)
-      this.pageBuilderStateStore.setRestoredElement(element.outerHTML)
-      this.pageBuilderStateStore.setNextSibling(element.nextSibling as HTMLElement | null)
-      // Remove the element from the DOM.
+    const parentSection = element.closest('section')
+
+    // If the element to be deleted is the section itself
+    if (element.tagName === 'SECTION') {
+      this.deleteComponentFromDOM()
+    } else {
+      // If the element is inside a section
       element.remove()
+      if (parentSection && this.isSectionEmpty(parentSection)) {
+        const componentId = parentSection.getAttribute('data-componentid')
+        if (componentId) {
+          const components = this.pageBuilderStateStore.getComponents
+          if (components) {
+            const indexToDelete = components.findIndex((c: ComponentObject) => c.id === componentId)
+            if (indexToDelete !== -1) {
+              const newComponents = [
+                ...components.slice(0, indexToDelete),
+                ...components.slice(indexToDelete + 1),
+              ]
+              this.pageBuilderStateStore.setComponents(newComponents)
+              parentSection.remove() // Directly remove from DOM
+            }
+          }
+        }
+      }
     }
 
+    this.handleAutoSave()
+
     // Clear the selection state.
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
@@ -1530,39 +1614,6 @@ export class PageBuilderService {
     await this.addListenersToEditableElements()
   }
 
-  /**
-   * Restores the last deleted element to its previous position in the DOM.
-   * @returns {Promise<void>}
-   */
-  public async restoreDeletedElementToDOM() {
-    // Retrieve the details of the element to be restored.
-    const restoredHTML = this.getRestoredElement.value
-    const parent = this.getParentElement.value
-    const nextSibling = this.getNextSibling.value
-
-    if (restoredHTML && parent) {
-      // Create a temporary container to parse the stored HTML.
-      const container = document.createElement('div')
-      container.innerHTML = restoredHTML
-
-      // Insert the restored element back into its original position.
-      if (container.firstChild) {
-        parent.insertBefore(container.firstChild, nextSibling)
-      }
-    }
-
-    // Clear the state related to the restored element.
-    this.pageBuilderStateStore.setParentElement(null)
-    this.pageBuilderStateStore.setRestoredElement(null)
-    this.pageBuilderStateStore.setNextSibling(null)
-    this.pageBuilderStateStore.setComponent(null)
-    this.pageBuilderStateStore.setElement(null)
-
-    // Wait for the DOM to update before re-attaching event listeners.
-    await nextTick()
-    await this.addListenersToEditableElements()
-  }
-
   /**
    * Removes a CSS class from the currently selected element.
    * @param {string} userSelectedClass - The class to remove.
@@ -1581,7 +1632,7 @@ export class PageBuilderService {
    * Reorders the currently selected component up or down in the component list.
    * @param {number} direction - The direction to move the component (-1 for up, 1 for down).
    */
-  public reorderComponent(direction: number): void {
+  public async reorderComponent(direction: number): Promise<void> {
     if (!this.getComponents.value || !this.getComponent.value) return
 
     if (this.getComponents.value.length <= 1) return
@@ -1609,6 +1660,69 @@ export class PageBuilderService {
     // Move the component to the new position in the array.
     this.getComponents.value.splice(currentIndex, 1)
     this.getComponents.value.splice(newIndex, 0, componentToMove)
+
+    // Wait for the DOM to update after reordering
+    await nextTick()
+
+    // Scroll to the moved component
+    const pageBuilderWrapper = document.querySelector('#page-builder-wrapper')
+    const movedComponentElement = pageBuilderWrapper?.querySelector(
+      `section[data-componentid="${componentToMove.id}"]`,
+    )
+
+    if (movedComponentElement) {
+      // Apply highlight to the moved element
+      movedComponentElement.classList.add('pbx-reorder-highlight')
+
+      // Highlight its new neighbors (if they exist)
+      const prevSibling = movedComponentElement.previousElementSibling as HTMLElement
+      const nextSibling = movedComponentElement.nextElementSibling as HTMLElement
+
+      if (prevSibling && prevSibling.tagName === 'SECTION') {
+        prevSibling.classList.add('pbx-sibling-highlight')
+      }
+      if (nextSibling && nextSibling.tagName === 'SECTION') {
+        nextSibling.classList.add('pbx-sibling-highlight')
+      }
+
+      // Scroll to the moved component
+      movedComponentElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+
+      // Remove highlights after a delay
+      setTimeout(() => {
+        movedComponentElement.classList.remove('pbx-reorder-highlight')
+        if (prevSibling && prevSibling.tagName === 'SECTION') {
+          prevSibling.classList.remove('pbx-sibling-highlight')
+        }
+        if (nextSibling && nextSibling.tagName === 'SECTION') {
+          nextSibling.classList.remove('pbx-sibling-highlight')
+        }
+      }, 1000) // Adjust delay as needed
+    }
+  }
+
+  /**
+   * Checks if the currently selected component can be moved up.
+   * @returns {boolean} True if the component can be moved up, false otherwise.
+   */
+  public canMoveUp(): boolean {
+    if (!this.getComponents.value || !this.getComponent.value) return false
+    const currentIndex = this.getComponents.value.findIndex(
+      (component) => component.id === this.getComponent.value?.id,
+    )
+    return currentIndex > 0
+  }
+
+  /**
+   * Checks if the currently selected component can be moved down.
+   * @returns {boolean} True if the component can be moved down, false otherwise.
+   */
+  public canMoveDown(): boolean {
+    if (!this.getComponents.value || !this.getComponent.value) return false
+    const currentIndex = this.getComponents.value.findIndex(
+      (component) => component.id === this.getComponent.value?.id,
+    )
+    return currentIndex < this.getComponents.value.length - 1
   }
 
   /**
@@ -1823,10 +1937,32 @@ export class PageBuilderService {
       pageSettings,
     }
 
-    const keyForSavingFromDomToLocal = this.getLocalStorageItemName.value
+    const baseKey = this.getHistoryBaseKey()
+    if (baseKey) {
+      localStorage.setItem(baseKey, JSON.stringify(dataToSave))
+      let history = LocalStorageManager.getHistory(baseKey)
 
-    if (keyForSavingFromDomToLocal && typeof keyForSavingFromDomToLocal === 'string') {
-      localStorage.setItem(keyForSavingFromDomToLocal, JSON.stringify(dataToSave))
+      const lastState = history[history.length - 1]
+      if (lastState) {
+        const lastComponents = JSON.stringify(lastState.components)
+        const newComponents = JSON.stringify(dataToSave.components)
+        const lastSettings = JSON.stringify(lastState.pageSettings)
+        const newSettings = JSON.stringify(dataToSave.pageSettings)
+        if (lastComponents === newComponents && lastSettings === newSettings) {
+          return // Do not save duplicate state
+        }
+      }
+
+      if (this.pageBuilderStateStore.getHistoryIndex < history.length - 1) {
+        history = history.slice(0, this.pageBuilderStateStore.getHistoryIndex + 1)
+      }
+      history.push(dataToSave)
+      if (history.length > 10) {
+        history = history.slice(history.length - 10)
+      }
+      localStorage.setItem(baseKey + '-history', JSON.stringify(history))
+      this.pageBuilderStateStore.setHistoryIndex(history.length - 1)
+      this.pageBuilderStateStore.setHistoryLength(history.length)
     }
   }
   /**
@@ -2285,13 +2421,13 @@ export class PageBuilderService {
           : 'push',
       })
 
-      const pageBuilder = document.querySelector('#pagebuilder')
+      const pageBuilderWrapper = document.querySelector('#page-builder-wrapper')
       //  scoll to top or bottom
-      if (pageBuilder) {
+      if (pageBuilderWrapper) {
         // push to bottom
         if (this.getComponentArrayAddMethod.value === 'push') {
-          pageBuilder.scrollTo({
-            top: pageBuilder.scrollHeight + 50,
+          pageBuilderWrapper.scrollTo({
+            top: pageBuilderWrapper.scrollHeight + 50,
             behavior: 'smooth',
           })
         }

package/src/stores/page-builder-state.ts

@@ -32,9 +32,6 @@ interface PageBuilderState {
   opacity: string | null
   backgroundOpacity: string | null
   textAreaVueModel: string | null
-  nextSibling: HTMLElement | null
-  parentElement: HTMLElement | null
-  restoredElement: string | null
   currentClasses: string[]
   currentStyles: Record<string, string>
   fontVerticalPadding: string | null
@@ -68,6 +65,8 @@ interface PageBuilderState {
   isResumeEditing: boolean
   isRestoring: boolean
   currentLanguage: string | null
+  historyIndex: number
+  historyLength: number
 }
 
 export const usePageBuilderStateStore = defineStore('pageBuilderState', {
@@ -95,9 +94,6 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     opacity: null,
     backgroundOpacity: null,
     textAreaVueModel: null,
-    nextSibling: null,
-    parentElement: null,
-    restoredElement: null,
     currentClasses: [],
     currentStyles: {},
     fontVerticalPadding: null,
@@ -131,6 +127,8 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     isResumeEditing: false,
     isRestoring: false,
     currentLanguage: null,
+    historyIndex: -1,
+    historyLength: 0,
   }),
   getters: {
     // Core Page Builder Getters
@@ -200,15 +198,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     getTextAreaVueModel(state: PageBuilderState): string | null {
       return state.textAreaVueModel
     },
-    getNextSibling(state: PageBuilderState): HTMLElement | null {
-      return state.nextSibling
-    },
-    getParentElement(state: PageBuilderState): HTMLElement | null {
-      return state.parentElement
-    },
-    getRestoredElement(state: PageBuilderState): string | null {
-      return state.restoredElement
-    },
+
     getCurrentClasses(state: PageBuilderState): string[] {
       return state.currentClasses
     },
@@ -287,6 +277,8 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     getIsLoadingResumeEditing: (state: PageBuilderState): boolean => state.isResumeEditing,
     getIsRestoring: (state: PageBuilderState): boolean => state.isRestoring,
     getCurrentLanguage: (state: PageBuilderState): string | null => state.currentLanguage,
+    getHistoryIndex: (state: PageBuilderState): number => state.historyIndex,
+    getHistoryLength: (state: PageBuilderState): number => state.historyLength,
   },
   actions: {
     setComponentArrayAddMethod(payload: string | null): void {
@@ -355,15 +347,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     setTextAreaVueModel(payload: string | null): void {
       this.textAreaVueModel = payload
     },
-    setNextSibling(payload: HTMLElement | null): void {
-      this.nextSibling = payload
-    },
-    setParentElement(payload: HTMLElement | null): void {
-      this.parentElement = payload
-    },
-    setRestoredElement(payload: string | null): void {
-      this.restoredElement = payload
-    },
+
     setClass(payload: string): void {
       this.currentClasses = [...this.currentClasses, payload]
     },
@@ -495,5 +479,11 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     setCurrentLanguage(payload: string): void {
       this.currentLanguage = payload
     },
+    setHistoryIndex(payload: number): void {
+      this.historyIndex = payload
+    },
+    setHistoryLength(payload: number): void {
+      this.historyLength = payload
+    },
   },
 })

package/src/tests/DefaultComponents/DefaultBuilderComponents.vue

@@ -147,7 +147,7 @@ const getSvgPreview = (title: string) => {
             v-for="category in categories"
             :key="category"
             @click="selectedCategory = category"
-            class="pbx-mySecondaryButton pbx-px-2 pbx-text-xs"
+            class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
             :class="{ active: selectedCategory === category }"
           >
             {{ translate(category) }}

package/src/tests/pageBuilderService.test.ts

@@ -5,20 +5,119 @@ import { usePageBuilderStateStore } from '../stores/page-builder-state'
 import componentsArray from './componentsArray.test.json'
 
 // Mock store (replace with your actual store or a better mock if needed)
-const mockStore: ReturnType<typeof usePageBuilderStateStore> = {
+const mockStore = {
+  // Mock getters
+  getApplyImageToSelection: { src: '' },
+  getLocalStorageItemName: 'test-key',
+  getHyberlinkEnable: false,
+  getComponents: [],
+  getComponent: null,
+  getElement: null,
+  getComponentArrayAddMethod: null,
+  getShowModalTipTap: false,
+  getMenuRight: false,
+  getBorderStyle: null,
+  getBorderWidth: null,
+  getBorderColor: null,
+  getBorderRadiusGlobal: null,
+  getBorderRadiusTopLeft: null,
+  getBorderRadiusTopRight: null,
+  getBorderRadiusBottomleft: null,
+  getBorderRadiusBottomRight: null,
+  getElementContainsHyperlink: null,
+  getHyperlinkAbility: null,
+  getHyperlinkInput: null,
+  getHyperlinkMessage: null,
+  getHyperlinkError: null,
+  getOpenHyperlinkInNewTab: null,
+  getOpacity: null,
+  getBackgroundOpacity: null,
+  getTextAreaVueModel: null,
+  getCurrentClasses: [],
+  getCurrentStyles: {},
+  getFontVerticalPadding: null,
+  getFontHorizontalPadding: null,
+  getFontVerticalMargin: null,
+  getFontHorizontalMargin: null,
+  getFontStyle: null,
+  getFontFamily: null,
+  getFontWeight: null,
+  getFontBase: null,
+  getFontDesktop: null,
+  getFontTablet: null,
+  getFontMobile: null,
+  getBackgroundColor: null,
+  getTextColor: null,
+  getBasePrimaryImage: null,
+  getPageBuilderConfig: null,
+  getCurrentPreviewImage: null,
+  getBuilderStarted: false,
+  getIsLoadingGlobal: false,
+  getIsSaving: false,
+  getHasLocalDraftForUpdate: false,
+  getIsLoadingResumeEditing: false,
+  getIsRestoring: false,
+  getCurrentLanguage: null,
+  getHistoryIndex: 0,
+  getHistoryLength: 0,
+
+  // Mock actions
   setBuilderStarted: vi.fn(),
   setPageBuilderConfig: vi.fn(),
-  getPageBuilderConfig: {},
+  setHistoryIndex: vi.fn(),
+  setHistoryLength: vi.fn(),
+  setLocalStorageItemName: vi.fn(),
+  setShowModalTipTap: vi.fn(),
+  setMenuRight: vi.fn(),
+  setBorderStyle: vi.fn(),
+  setBorderWidth: vi.fn(),
+  setBorderColor: vi.fn(),
+  setBorderRadiusGlobal: vi.fn(),
+  setBorderRadiusTopLeft: vi.fn(),
+  setBorderRadiusTopRight: vi.fn(),
+  setBorderRadiusBottomleft: vi.fn(),
+  setBorderRadiusBottomRight: vi.fn(),
+  setElementContainsHyperlink: vi.fn(),
+  setHyperlinkAbility: vi.fn(),
+  setHyperlinkInput: vi.fn(),
+  setHyperlinkMessage: vi.fn(),
+  setHyperlinkError: vi.fn(),
+  setHyberlinkEnable: vi.fn(),
+  setOpenHyperlinkInNewTab: vi.fn(),
+  setOpacity: vi.fn(),
+  setBackgroundOpacity: vi.fn(),
+  setTextAreaVueModel: vi.fn(),
+  setClass: vi.fn(),
+  removeClass: vi.fn(),
+  setCurrentClasses: vi.fn(),
+  setCurrentStyles: vi.fn(),
+  setFontVerticalPadding: vi.fn(),
+  setFontHorizontalPadding: vi.fn(),
+  setFontVerticalMargin: vi.fn(),
+  setFontHorizontalMargin: vi.fn(),
+  setFontStyle: vi.fn(),
+  setFontFamily: vi.fn(),
+  setFontWeight: vi.fn(),
+  setFontBase: vi.fn(),
+  setFontDesktop: vi.fn(),
+  setFontTablet: vi.fn(),
+  setFontMobile: vi.fn(),
+  setBackgroundColor: vi.fn(),
+  setTextColor: vi.fn(),
+  setElement: vi.fn(),
+  setComponent: vi.fn(),
   setComponents: vi.fn(),
+  setPushComponents: vi.fn(),
+  setBasePrimaryImage: vi.fn(),
+  setCurrentLayoutPreview: vi.fn(),
+  setApplyImageToSelection: vi.fn(),
+  setCurrentPreviewImage: vi.fn(),
   setIsLoadingGlobal: vi.fn(),
-  setIsRestoring: vi.fn(),
-  setIsLoadingResumeEditing: vi.fn(),
+  setIsSaving: vi.fn(),
   setHasLocalDraftForUpdate: vi.fn(),
-  setComponent: vi.fn(),
-  setElement: vi.fn(),
-  getLocalStorageItemName: 'test-key',
-  setLocalStorageItemName: vi.fn(),
-  // ...add more as needed for your test
+  setIsLoadingResumeEditing: vi.fn(),
+  setIsRestoring: vi.fn(),
+  setCurrentLanguage: vi.fn(),
 } as unknown as ReturnType<typeof usePageBuilderStateStore>
 
 const configPageBuilder = {
@@ -60,7 +159,7 @@ describe('PageBuilderService', () => {
 
   it('should handle missing components array gracefully', async () => {
     const result = await service.startBuilder(configPageBuilder)
-    expect(result).toHaveProperty('message', 'Page builder started successfully.')
-    // Add more assertions for this scenario
+    expect(result).toHaveProperty('validation.error', true)
+    expect(result).toHaveProperty('validation.reason', 'Components data must be an array.')
   })
 })

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

@@ -1,42 +0,0 @@
-<script setup>
-import EditorAccordion from '../EditorAccordion.vue'
-import { computed } from 'vue'
-import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-import { getPageBuilder } from '../../../../composables/builderInstance'
-const pageBuilderService = getPageBuilder()
-
-// Use shared store instance
-const pageBuilderStateStore = sharedPageBuilderStore
-
-const getRestoredElement = computed(() => {
-  return pageBuilderStateStore.getRestoredElement
-})
-</script>
-
-<template>
-  <EditorAccordion>
-    <template #title>Delete or restore</template>
-    <template #content>
-      <div class="pbx-my-2">
-        <button
-          v-if="getRestoredElement !== null"
-          @click="pageBuilderService.restoreDeletedElementToDOM"
-          type="button"
-          class="pbx-myPrimaryButton pbx-gap-2 pbx-items-center pbx-w-full"
-        >
-          <span class="material-symbols-outlined"> refresh </span>
-          Restore Element
-        </button>
-        <button
-          v-if="getRestoredElement === null"
-          @click="pageBuilderService.deleteElementFromDOM"
-          type="button"
-          class="pbx-myPrimaryDeleteButton pbx-gap-2 pbx-items-center pbx-w-full"
-        >
-          <span class="pbx-myMediumIcon material-symbols-outlined"> delete </span>
-          Delete Element
-        </button>
-      </div>
-    </template>
-  </EditorAccordion>
-</template>