@myissue/vue-website-page-builder 3.4.20 → 3.4.21

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

@@ -1,203 +0,0 @@
-<script setup>
-import { ref, computed, watch, nextTick } from 'vue'
-import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-import ModalBuilder from '../../../../Components/Modals/ModalBuilder.vue'
-import EditorAccordion from '../EditorAccordion.vue'
-import { getPageBuilder } from '../../../../composables/builderInstance'
-import { useTranslations } from '../../../../composables/useTranslations'
-import { delay } from '../../../../composables/delay'
-
-const pageBuilderService = getPageBuilder()
-const pageBuilderStateStore = sharedPageBuilderStore
-const { translate } = useTranslations()
-
-const props = defineProps({
-  globalPage: {
-    type: Boolean,
-  },
-})
-
-const getElement = computed(() => pageBuilderStateStore.getElement)
-const getShowModalHTMLEditor = computed(() => pageBuilderStateStore.getShowModalHTMLEditor)
-
-const elementHTML = computed(() => {
-  if (!getElement.value || !(getElement.value instanceof HTMLElement)) {
-    return ''
-  }
-  return getElement.value.outerHTML
-})
-
-const editableHtml = ref('')
-const editableComponents = ref('')
-
-watch(getShowModalHTMLEditor, async (newVal) => {
-  if (newVal) {
-    if (!props.globalPage) {
-      editableHtml.value = elementHTML.value
-      return
-    }
-
-    editableComponents.value = await pageBuilderService.generateHtmlFromComponents()
-  }
-})
-
-const handleShowHTMLEditor = async () => {
-  pageBuilderStateStore.setShowModalHTMLEditor(true)
-}
-
-const handleCloseHTMLEditor = () => {
-  pageBuilderStateStore.setShowModalHTMLEditor(false)
-}
-
-const isLoading = ref(false)
-const errSaveComponents = ref(null)
-
-const handleSaveChangesElement = async () => {
-  errSaveComponents.value = null
-  isLoading.value = true
-  await delay(300)
-
-  const error = await pageBuilderService.applyModifiedHTML(editableHtml.value)
-
-  if (error) {
-    errSaveComponents.value = error
-    isLoading.value = false
-    return
-  }
-
-  pageBuilderStateStore.setShowModalHTMLEditor(false)
-  isLoading.value = false
-}
-
-const handleSaveChangesComponents = async () => {
-  errSaveComponents.value = null
-  isLoading.value = true
-  errSaveComponents.value = null
-  await delay(300)
-
-  const error = await pageBuilderService.applyModifiedComponents(editableComponents.value)
-
-  if (error) {
-    errSaveComponents.value = error
-    isLoading.value = false
-    return
-  }
-
-  pageBuilderStateStore.setShowModalHTMLEditor(false)
-  isLoading.value = false
-}
-</script>
-<template>
-  <EditorAccordion>
-    <template #title>{{ translate('HTML Editor') }}</template>
-    <template #content>
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="vertical-margin" class="pbx-myPrimaryInputLabel">{{
-          translate('Gain full control over components by editing the raw HTML.')
-        }}</label>
-        <hr />
-      </div>
-      <button @click="handleShowHTMLEditor" type="button" class="pbx-myPrimaryButton">
-        {{ translate('HTML Editor') }}
-      </button>
-    </template>
-  </EditorAccordion>
-  <ModalBuilder
-    maxWidth="7xl"
-    :showModalBuilder="getShowModalHTMLEditor"
-    :title="translate('HTML Editor')"
-    @closeMainModalBuilder="handleCloseHTMLEditor"
-  >
-    <template v-if="!globalPage">
-      <textarea
-        id="html-editor"
-        v-model="editableHtml"
-        class="pbx-h-full pbx-font-sans pbx-bg-gray-900 pbx-text-white pbx-w-full"
-        style="overflow: auto; min-height: 400px"
-      ></textarea>
-      <div class="pbx-flex pbx-justify-end pbx-min-h-6">
-        <p v-if="errSaveComponents" class="pbx-myPrimaryParagraphError">
-          Error: {{ errSaveComponents }}
-        </p>
-      </div>
-      <div
-        class="pbx-border-0 pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-flex pbx-items-center pbx-justify-end"
-      >
-        <div class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center">
-          <div
-            class="sm:pbx-grid-cols-2 sm:pbx-items-end sm:pbx-justify-end pbx-flex sm:pbx-flex-row pbx-flex-col pbx-myPrimaryGap sm:pbx-w-5/6 pbx-w-full"
-          >
-            <template v-if="!isLoading">
-              <button @click="handleCloseHTMLEditor" type="button" class="pbx-mySecondaryButton">
-                {{ translate('Close') }}
-              </button>
-              <button @click="handleSaveChangesElement" type="button" class="pbx-myPrimaryButton">
-                {{ translate('Save') }}
-              </button>
-            </template>
-            <template v-if="isLoading">
-              <div class="pbx-flex pbx-items-center pbx-my-2 pbx-justify-end">
-                <div
-                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
-                >
-                  <span
-                    class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
-                    >Loading...</span
-                  >
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <template v-if="globalPage">
-      <textarea
-        id="html-editor"
-        v-model="editableComponents"
-        class="pbx-h-full pbx-font-sans pbx-bg-gray-900 pbx-text-white pbx-w-full"
-        style="overflow: auto; min-height: 400px"
-      ></textarea>
-      <div class="pbx-flex pbx-justify-end pbx-min-h-6">
-        <p v-if="errSaveComponents" class="pbx-myPrimaryParagraphError">
-          Error: {{ errSaveComponents }}
-        </p>
-      </div>
-      <div
-        class="pbx-border-0 pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-flex pbx-items-center pbx-justify-end"
-      >
-        <div class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center">
-          <div
-            class="sm:pbx-grid-cols-2 sm:pbx-items-end sm:pbx-justify-end pbx-flex sm:pbx-flex-row pbx-flex-col pbx-myPrimaryGap sm:pbx-w-5/6 pbx-w-full"
-          >
-            <template v-if="!isLoading">
-              <button @click="handleCloseHTMLEditor" type="button" class="pbx-mySecondaryButton">
-                {{ translate('Close') }}
-              </button>
-              <button
-                @click="handleSaveChangesComponents"
-                type="button"
-                class="pbx-myPrimaryButton"
-              >
-                {{ translate('Save') }}
-              </button>
-            </template>
-            <template v-if="isLoading">
-              <div class="pbx-flex pbx-items-center pbx-my-2 pbx-justify-end">
-                <div
-                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
-                >
-                  <span
-                    class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
-                    >Loading...</span
-                  >
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-      </div>
-    </template>
-  </ModalBuilder>
-</template>

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

@@ -1,96 +0,0 @@
-<script setup>
-import { computed, ref, inject } from 'vue'
-import MediaLibraryModal from '../../../Modals/MediaLibraryModal.vue'
-import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-import { preloadImage } from '../../../../composables/preloadImage'
-import { delay } from '../../../../composables/delay'
-import { useTranslations } from '../../../../composables/useTranslations'
-
-const { translate } = useTranslations()
-
-// Use shared store instance
-const pageBuilderStateStore = sharedPageBuilderStore
-const customMediaComponent = inject('CustomMediaComponent')
-
-const getIsLoadingImage = ref(false)
-
-const showMediaLibraryModal = ref(false)
-// modal content
-const titleMedia = ref('')
-const descriptionMedia = ref('')
-const firstButtonMedia = ref('')
-const secondButtonMedia = ref(null)
-const thirdButtonMedia = ref(null)
-// set dynamic modal handle functions
-const firstMediaButtonFunction = ref(null)
-
-// get current image from store
-const getBasePrimaryImage = computed(() => {
-  if (pageBuilderStateStore.getBasePrimaryImage) {
-    loadingImage(pageBuilderStateStore.getBasePrimaryImage)
-  }
-  return pageBuilderStateStore.getBasePrimaryImage
-})
-
-const handleAddImage = function () {
-  // open modal to true
-  showMediaLibraryModal.value = true
-
-  titleMedia.value = translate('Media Library')
-  descriptionMedia.value = null
-  firstButtonMedia.value = translate('Close')
-  secondButtonMedia.value = translate(' Select image')
-
-  // handle click
-  firstMediaButtonFunction.value = function () {
-    showMediaLibraryModal.value = false
-  }
-  //
-  // end modal
-}
-
-const loadingImage = async function (imageURL) {
-  getIsLoadingImage.value = true
-
-  if (imageURL && typeof imageURL === 'string' && imageURL.length > 2) {
-    await preloadImage(imageURL)
-    await delay(200)
-    getIsLoadingImage.value = false
-  }
-}
-</script>
-<template>
-  <div>
-    <div v-show="getIsLoadingImage">
-      <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4 pbx-min-h-80">
-        <div
-          class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
-        >
-          <span
-            class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
-            >Loading...</span
-          >
-        </div>
-      </div>
-    </div>
-    <div v-show="getBasePrimaryImage && !getIsLoadingImage">
-      <img
-        class="pbx-object-cover pbx-object-center pbx-w-full pbx-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"
-    >
-    </MediaLibraryModal>
-  </div>
-</template>

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

@@ -1,315 +0,0 @@
-<script setup>
-import { ref, computed, watch, nextTick } from 'vue'
-import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-import EditorAccordion from '../EditorAccordion.vue'
-import { Switch } from '@headlessui/vue'
-import { getPageBuilder } from '../../../../composables/builderInstance'
-const pageBuilderService = getPageBuilder()
-
-// Use shared store instance
-const pageBuilderStateStore = sharedPageBuilderStore
-
-const hyperlinkEnable = ref(false)
-const urlInput = ref(null)
-const openHyperlinkInNewTab = ref(false)
-const getElementContainsHyperlink = computed(() => {
-  return pageBuilderStateStore.getElementContainsHyperlink
-})
-const getHyperlinkAbility = computed(() => {
-  return pageBuilderStateStore.getHyperlinkAbility
-})
-const getHyperlinkMessage = computed(() => {
-  return pageBuilderStateStore.getHyperlinkMessage
-})
-const getHyperlinkError = computed(() => {
-  return pageBuilderStateStore.getHyperlinkError
-})
-const getHyperlinkInput = computed(() => {
-  return pageBuilderStateStore.getHyperlinkInput
-})
-const getHyberlinkEnable = computed(() => {
-  return pageBuilderStateStore.getHyberlinkEnable
-})
-
-const getOpenHyperlinkInNewTab = computed(() => {
-  return pageBuilderStateStore.getOpenHyperlinkInNewTab
-})
-const getElement = computed(() => {
-  return pageBuilderStateStore.getElement
-})
-
-watch(getHyperlinkInput, (newValue) => {
-  urlInput.value = newValue
-})
-watch(getHyberlinkEnable, (newValue) => {
-  hyperlinkEnable.value = newValue
-})
-watch(getOpenHyperlinkInNewTab, (newValue) => {
-  openHyperlinkInNewTab.value = newValue
-})
-
-// remove hyperlink
-watch(hyperlinkEnable, (hyperlinkEnableNewValue) => {
-  hyperlinkEnable.value = hyperlinkEnableNewValue
-  pageBuilderStateStore.setHyberlinkEnable(hyperlinkEnable.value)
-})
-
-const handleToggleHyperlinkEnable = async function (data) {
-  await nextTick()
-
-  // remove hyperlink
-  if (hyperlinkEnable.value === false) {
-    pageBuilderService.handleHyperlink(hyperlinkEnable.value, data)
-  }
-}
-// add hyperlink
-const handleHyperlink = function () {
-  pageBuilderService.handleHyperlink(
-    hyperlinkEnable.value,
-    urlInput.value,
-    openHyperlinkInNewTab.value,
-  )
-}
-
-const handleToggleOpenHyperlinkInNewTab = async function () {
-  await nextTick()
-
-  pageBuilderService.handleHyperlink(
-    hyperlinkEnable.value,
-    urlInput.value,
-    openHyperlinkInNewTab.value,
-  )
-}
-</script>
-
-<template>
-  <EditorAccordion>
-    <template #title>Link</template>
-    <template #content>
-      <!-- Hyperlink ability / start -->
-      <div v-if="getHyperlinkAbility === false" class="pbx-rounded-md pbx-bg-red-50 pbx-p-2">
-        <div class="pbx-flex pbx-items-center">
-          <div class="pbx-flex-shrink-0">
-            <span class="pbx-myMediumIcon material-symbols-outlined"> warning </span>
-          </div>
-          <div class="pbx-ml-2">
-            <p class="pbx-text-sm pbx-font-medium pbx-text-green-800">
-              Not able to add hyperlink on this element
-            </p>
-          </div>
-          <div class="pbx-ml-auto pbx-pl-3">
-            <div class="pbx-mx-1.5 pbx-my-1.5">
-              <button
-                type="button"
-                class="pbx-inline-flex pbx-rounded-md pbx-bg-green-50 pbx-p-1.5 pbx-text-green-500 hover:pbx-bg-green-100 focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-green-600 focus:pbx-ring-offset-2 focus:pbx-ring-offset-green-50"
-              ></button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- Hyperlink ability / end -->
-      <div v-if="getHyperlinkAbility === true">
-        <div class="pbx-my-2 pbx-py-2">
-          <div class="pbx-flex pbx-items-center pbx-justify-between pbx-gap-2 pbx-w-full">
-            <p class="pbx-myPrimaryParagraph">Enable hyperlink</p>
-            <!-- Toggle start -->
-            <Switch
-              v-model="hyperlinkEnable"
-              @click="handleToggleHyperlinkEnable('removeHyperlink')"
-              :class="[
-                hyperlinkEnable ? 'pbx-bg-myPrimaryLinkColor' : 'pbx-bg-gray-200',
-                'pbx-relative pbx-inline-flex pbx-h-6 pbx-w-11 pbx-flex-shrink-0 pbx-cursor-pointer pbx-rounded-full pbx-border-2 pbx-border-transparent pbx-transition-colors pbx-duration-200 pbx-ease-in-out focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-myPrimaryLinkColor focus:pbx-ring-offset-2',
-              ]"
-            >
-              <span class="pbx-sr-only">Use setting</span>
-              <span
-                :class="[
-                  hyperlinkEnable ? 'pbx-translate-x-5' : 'pbx-translate-x-0',
-                  'pbx-pointer-events-none pbx-relative pbx-inline-block pbx-h-5 pbx-w-5 pbx-transform pbx-rounded-full pbx-bg-white pbx-shadow pbx-ring-0 pbx-transition pbx-duration-200 pbx-ease-in-out',
-                ]"
-              >
-                <span
-                  :class="[
-                    hyperlinkEnable
-                      ? 'pbx-opacity-0 pbx-ease-out pbx-duration-100'
-                      : 'pbx-opacity-100 pbx-ease-in pbx-duration-200',
-                    'pbx-absolute pbx-inset-0 pbx-flex pbx-h-full pbx-w-full pbx-items-center pbx-justify-center pbx-transition-opacity',
-                  ]"
-                  aria-hidden="true"
-                >
-                  <svg class="pbx-h-3 pbx-w-3 pbx-text-gray-400" fill="none" viewBox="0 0 12 12">
-                    <path
-                      d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
-                </span>
-                <span
-                  :class="[
-                    hyperlinkEnable
-                      ? 'pbx-opacity-100 pbx-ease-in pbx-duration-200'
-                      : 'pbx-opacity-0 pbx-ease-out pbx-duration-100',
-                    'pbx-absolute pbx-inset-0 pbx-flex pbx-h-full pbx-w-full pbx-items-center pbx-justify-center pbx-transition-opacity',
-                  ]"
-                  aria-hidden="true"
-                >
-                  <svg
-                    class="pbx-h-3 pbx-w-3 pbx-text-myPrimaryLinkColor"
-                    fill="currentColor"
-                    viewBox="0 0 12 12"
-                  >
-                    <path
-                      d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </Switch>
-            <!-- Toggle end -->
-          </div>
-        </div>
-        <!-- attached url - start -->
-        <div
-          v-if="getElementContainsHyperlink === true"
-          class="pbx-rounded-md pbx-bg-green-50 pbx-p-2"
-        >
-          <div class="pbx-flex pbx-items-center">
-            <div class="pbx-flex-shrink-0">
-              <span class="pbx-myMediumIcon material-symbols-outlined"> check </span>
-            </div>
-            <div class="pbx-ml-2">
-              <p class="pbx-text-sm pbx-font-medium pbx-text-green-800">Hyperlink added</p>
-            </div>
-            <div class="pbx-ml-auto pbx-pl-3">
-              <div class="pbx-mx-1.5 pbx-my-1.5">
-                <button
-                  type="button"
-                  class="pbx-inline-flex pbx-rounded-md pbx-bg-green-50 pbx-p-1.5 pbx-text-green-500 hover:pbx-bg-green-100 focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-green-600 focus:pbx-ring-offset-2 focus:pbx-ring-offset-green-50"
-                ></button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- attached url - end -->
-        <!-- no attached url - start -->
-        <div
-          v-if="getElementContainsHyperlink === false"
-          class="pbx-rounded-md pbx-bg-red-50 pbx-p-2"
-        >
-          <div class="pbx-flex pbx-items-center">
-            <div class="pbx-flex-shrink-0">
-              <span class="pbx-myMediumIcon material-symbols-outlined"> warning </span>
-            </div>
-            <div class="pbx-ml-2">
-              <p class="pbx-text-sm pbx-font-medium pbx-text-green-800">No hyperlink added</p>
-            </div>
-            <div class="pbx-ml-auto pbx-pl-3">
-              <div class="pbx-mx-1.5 pbx-my-1.5">
-                <button
-                  type="button"
-                  class="pbx-inline-flex pbx-rounded-md pbx-bg-green-50 pbx-p-1.5 pbx-text-green-500 hover:pbx-bg-green-100 focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-green-600 focus:pbx-ring-offset-2 focus:pbx-ring-offset-green-50"
-                ></button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- no attached url - end -->
-        <div v-if="hyperlinkEnable === true" class="pbx-my-2 pbx-py-2">
-          <div
-            class="pbx-relative pbx-flex pbx-items-center pbx-w-full pbx-border-solid pbx-border pbx-border-gray-200 pbx-myPrimaryInput pbx-py-0 pbx-p-0"
-          >
-            <input
-              v-model="urlInput"
-              type="text"
-              placeholder="URL.."
-              autocomplete="off"
-              class="pbx-myPrimaryInput pbx-border-none pbx-rounded-r-none pbx-ml-0 pbx-w-full"
-              @keydown.enter.tab.prevent="handleHyperlink()"
-            />
-            <div
-              class="pbx-border-none pbx-rounded pbx-flex pbx-items-center pbx-justify-center pbx-h-full pbx-w-8"
-            >
-              <kbd class="pbx-myPrimaryParagraph pbx-text-gray-400 pbx-border-none"> ⏎ </kbd>
-            </div>
-          </div>
-
-          <p
-            v-if="getHyperlinkMessage !== null"
-            class="pbx-myPrimaryParagraph pbx-text-myPrimarySuccesColor pbx-mt-1"
-          >
-            {{ getHyperlinkMessage }}
-          </p>
-          <p v-if="getHyperlinkError !== null" class="pbx-myPrimaryParagraphError pbx-mt-1">
-            {{ getHyperlinkError }}
-          </p>
-
-          <div class="pbx-my-2 pbx-py-2">
-            <div class="pbx-flex pbx-items-center pbx-justify-between pbx-gap-2 pbx-w-full">
-              <p class="pbx-myPrimaryParagraph">Open in new tab</p>
-              <!-- Toggle start -->
-              <Switch
-                v-model="openHyperlinkInNewTab"
-                @click="handleToggleOpenHyperlinkInNewTab"
-                :class="[
-                  openHyperlinkInNewTab ? 'pbx-bg-myPrimaryLinkColor' : 'pbx-bg-gray-200',
-                  'pbx-relative pbx-inline-flex pbx-h-6 pbx-w-11 pbx-flex-shrink-0 pbx-cursor-pointer pbx-rounded-full pbx-border-2 pbx-border-transparent pbx-transition-colors pbx-duration-200 pbx-ease-in-out focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-myPrimaryLinkColor focus:pbx-ring-offset-2',
-                ]"
-              >
-                <span class="pbx-sr-only">Use setting</span>
-                <span
-                  :class="[
-                    openHyperlinkInNewTab ? 'pbx-translate-x-5' : 'pbx-translate-x-0',
-                    'pbx-pointer-events-none pbx-relative pbx-inline-block pbx-h-5 pbx-w-5 pbx-transform pbx-rounded-full pbx-bg-white pbx-shadow pbx-ring-0 pbx-transition pbx-duration-200 pbx-ease-in-out',
-                  ]"
-                >
-                  <span
-                    :class="[
-                      openHyperlinkInNewTab
-                        ? 'pbx-opacity-0 pbx-ease-out pbx-duration-100'
-                        : 'pbx-opacity-100 pbx-ease-in pbx-duration-200',
-                      'pbx-absolute pbx-inset-0 pbx-flex pbx-h-full pbx-w-full pbx-items-center pbx-justify-center pbx-transition-opacity',
-                    ]"
-                    aria-hidden="true"
-                  >
-                    <svg class="pbx-h-3 pbx-w-3 pbx-text-gray-400" fill="none" viewBox="0 0 12 12">
-                      <path
-                        d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    :class="[
-                      openHyperlinkInNewTab
-                        ? 'pbx-opacity-100 pbx-ease-in pbx-duration-200'
-                        : 'pbx-opacity-0 pbx-ease-out pbx-duration-100',
-                      'pbx-absolute pbx-inset-0 pbx-flex pbx-h-full pbx-w-full pbx-items-center pbx-justify-center pbx-transition-opacity',
-                    ]"
-                    aria-hidden="true"
-                  >
-                    <svg
-                      class="pbx-h-3 pbx-w-3 pbx-text-myPrimaryLinkColor"
-                      fill="currentColor"
-                      viewBox="0 0 12 12"
-                    >
-                      <path
-                        d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </Switch>
-              <!-- Toggle end -->
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </EditorAccordion>
-</template>