@myissue/vue-website-page-builder 3.4.17 → 3.4.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.4.17",
+  "version": "3.4.19",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

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

@@ -61,7 +61,7 @@ watch(
 
         <ListboxButton
           v-if="!globalPageLayout"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+          class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
         >
           <div class="pbx-flex pbx-flex-col">
             <div class="pbx-flex pbx-gap-2 pbx-items-center">

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

@@ -25,6 +25,9 @@ const elementTag = computed(() => {
   return getElement.value?.tagName
 })
 
+const canMoveUp = computed(() => pageBuilderService.canMoveUp())
+const canMoveDown = computed(() => pageBuilderService.canMoveDown())
+
 const getShowModalTipTap = computed(() => {
   const result = pageBuilderStateStore.getShowModalTipTap
 
@@ -39,36 +42,36 @@ const getComponent = computed(() => {
 })
 
 // hanlde Tip Tap modal
-const typeModal = ref('')
-const gridColumnModal = ref(Number(1))
-const titleModal = ref('')
-const descriptionModal = ref('')
-const firstButtonModal = ref('')
-const secondButtonModal = ref(null)
-const thirdButtonModal = ref(null)
+const typeModalTipTap = ref('')
+const gridColumnModalTipTap = ref(Number(1))
+const titleModalTipTap = ref('')
+const descriptionModalTipTap = ref('')
+const firstButtonModalTipTap = ref('')
+const secondButtonModalTipTap = ref(null)
+const thirdButtonModalTipTap = ref(null)
 // set dynamic modal handle functions
-const firstModalButtonFunctionDynamicModalBuilder = ref(null)
-const secondModalButtonFunctionDynamicModalBuilder = ref(null)
-const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
+const firstModalButtonFunctionDynamicModalBuilderTipTap = ref(null)
+const secondModalButtonFunctionDynamicModalBuilderTipTap = ref(null)
+const thirdModalButtonFunctionDynamicModalBuilderTipTap = ref(null)
 
 const handleModalPreviewTiptap = function () {
   pageBuilderService.toggleTipTapModal(true)
 
-  typeModal.value = 'success'
-  gridColumnModal.value = 2
-  titleModal.value = translate('Manage Content')
-  descriptionModal.value = null
-  firstButtonModal.value = null
-  secondButtonModal.value = null
-  thirdButtonModal.value = 'Save'
+  typeModalTipTap.value = 'success'
+  gridColumnModalTipTap.value = 2
+  titleModalTipTap.value = translate('Manage Content')
+  descriptionModalTipTap.value = null
+  firstButtonModalTipTap.value = null
+  secondButtonModalTipTap.value = null
+  thirdButtonModalTipTap.value = 'Save'
 
   // handle click
 
-  firstModalButtonFunctionDynamicModalBuilder.value = function () {
+  firstModalButtonFunctionDynamicModalBuilderTipTap.value = function () {
     pageBuilderService.toggleTipTapModal(false)
   }
 
-  thirdModalButtonFunctionDynamicModalBuilder.value = function () {
+  thirdModalButtonFunctionDynamicModalBuilderTipTap.value = function () {
     pageBuilderService.toggleTipTapModal(true)
   }
 }
@@ -146,20 +149,20 @@ const handleModalIframeSrc = function () {
   // open modal to true
   showModalIframeSrc.value = true
 
-  typeModal.value = 'success'
-  gridColumnModal.value = 2
-  titleModal.value = 'Add video url'
-  descriptionModal.value = null
-  firstButtonModal.value = translate('Close')
-  secondButtonModal.value = 'Save'
-  thirdButtonModal.value = null
+  typeModalTipTap.value = 'success'
+  gridColumnModalTipTap.value = 2
+  titleModalTipTap.value = 'Add video url'
+  descriptionModalTipTap.value = null
+  firstButtonModalTipTap.value = translate('Close')
+  secondButtonModalTipTap.value = 'Save'
+  thirdButtonModalTipTap.value = null
 
   // handle click
-  firstModalButtonFunctionDynamicModalBuilder.value = function () {
+  firstModalButtonFunctionDynamicModalBuilderTipTap.value = function () {
     showModalIframeSrc.value = false
   }
   // handle click
-  secondModalButtonFunctionDynamicModalBuilder.value = function () {
+  secondModalButtonFunctionDynamicModalBuilderTipTap.value = function () {
     const isNotValidated = validateURL()
     if (isNotValidated) {
       return
@@ -188,22 +191,74 @@ const handleModalIframeSrc = function () {
     showModalIframeSrc.value = false
   }
 }
+
+const openOptionsMoreOpen = ref(false)
+
+const handleShowHTMLEditor = async () => {
+  openOptionsMoreOpen.value = false
+  pageBuilderStateStore.setShowModalHTMLEditor(true)
+}
+
+const showModalDeleteComponent = ref(false)
+// use dynamic model
+const typeModal = ref('')
+const gridColumnModal = ref(Number(1))
+const titleModal = ref('')
+const descriptionModal = ref('')
+const firstButtonModal = ref('')
+const secondButtonModal = ref(null)
+const thirdButtonModal = ref(null)
+// set dynamic modal handle functions
+const firstModalButtonFunctionDynamicModalBuilder = ref(null)
+const secondModalButtonFunctionDynamicModalBuilder = ref(null)
+const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
+
+// remove component
+const handleDelete = function () {
+  showModalDeleteComponent.value = true
+  typeModal.value = 'delete'
+  gridColumnModal.value = 2
+  titleModal.value = translate('Remove Component?')
+  descriptionModal.value = translate('Are you sure you want to remove this Component?')
+  firstButtonModal.value = translate('Close')
+  secondButtonModal.value = null
+  thirdButtonModal.value = translate('Delete')
+
+  // handle click
+  firstModalButtonFunctionDynamicModalBuilder.value = function () {
+    showModalDeleteComponent.value = false
+  }
+  //
+  // handle click
+  thirdModalButtonFunctionDynamicModalBuilder.value = async function () {
+    await pageBuilderService.deleteComponentFromDOM()
+
+    showModalDeleteComponent.value = false
+  }
+  // end modal
+}
 </script>
 <template v-if="getElement">
   <div>
     <DynamicModalBuilder
       :showDynamicModalBuilder="showModalIframeSrc"
       maxWidth="2xl"
-      :type="typeModal"
-      :gridColumnAmount="gridColumnModal"
-      :title="titleModal"
-      :description="descriptionModal"
-      :firstButtonText="firstButtonModal"
-      :secondButtonText="secondButtonModal"
-      :thirdButtonText="thirdButtonModal"
-      @firstModalButtonFunctionDynamicModalBuilder="firstModalButtonFunctionDynamicModalBuilder"
-      @secondModalButtonFunctionDynamicModalBuilder="secondModalButtonFunctionDynamicModalBuilder"
-      @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonFunctionDynamicModalBuilder"
+      :type="typeModalTipTap"
+      :gridColumnAmount="gridColumnModalTipTap"
+      :title="titleModalTipTap"
+      :description="descriptionModalTipTap"
+      :firstButtonText="firstButtonModalTipTap"
+      :secondButtonText="secondButtonModalTipTap"
+      :thirdButtonText="thirdButtonModalTipTap"
+      @firstModalButtonFunctionDynamicModalBuilderTipTap="
+        firstModalButtonFunctionDynamicModalBuilderTipTap
+      "
+      @secondModalButtonFunctionDynamicModalBuilderTipTap="
+        secondModalButtonFunctionDynamicModalBuilderTipTap
+      "
+      @thirdModalButtonFunctionDynamicModalBuilderTipTap="
+        thirdModalButtonFunctionDynamicModalBuilderTipTap
+      "
     >
       <header></header>
       <main>
@@ -235,6 +290,30 @@ const handleModalIframeSrc = function () {
       :simpleModal="true"
       :showDynamicModalBuilder="getShowModalTipTap"
       maxWidth="6xl"
+      :type="typeModalTipTap"
+      :gridColumnAmount="gridColumnModalTipTap"
+      :title="titleModalTipTap"
+      :description="descriptionModalTipTap"
+      :firstButtonText="firstButtonModalTipTap"
+      :secondButtonText="secondButtonModalTipTap"
+      :thirdButtonText="thirdButtonModalTipTap"
+      @firstModalButtonFunctionDynamicModalBuilder="
+        firstModalButtonFunctionDynamicModalBuilderTipTap
+      "
+      @secondModalButtonFunctionDynamicModalBuilder="
+        secondModalButtonFunctionDynamicModalBuilderTipTap
+      "
+      @thirdModalButtonFunctionDynamicModalBuilder="
+        thirdModalButtonFunctionDynamicModalBuilderTipTap
+      "
+    >
+      <header></header>
+      <main class="pbx-overflow-y-auto">
+        <TipTapInput></TipTapInput>
+      </main>
+    </DynamicModalBuilder>
+    <DynamicModalBuilder
+      :showDynamicModalBuilder="showModalDeleteComponent"
       :type="typeModal"
       :gridColumnAmount="gridColumnModal"
       :title="titleModal"
@@ -247,11 +326,8 @@ const handleModalIframeSrc = function () {
       @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonFunctionDynamicModalBuilder"
     >
       <header></header>
-      <main class="pbx-overflow-y-auto">
-        <TipTapInput></TipTapInput>
-      </main>
+      <main></main>
     </DynamicModalBuilder>
-
     <MediaLibraryModal
       :open="showMediaLibraryModal"
       :title="titleMedia"
@@ -264,88 +340,202 @@ const handleModalIframeSrc = function () {
     >
     </MediaLibraryModal>
 
-    <p v-if="false" class="pbx-font-medium pbx-text-[10px] pbx-w-max lg:pbx-block pbx-hidden">
-      Editing
-      <span class="pbx-lowercase">&lt;{{ elementTag }}&gt;</span>
-    </p>
-    <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2" :class="{ '': getElement }">
-      <template v-if="pageBuilderService.ElOrFirstChildIsIframe()">
-        <div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
-          <button
-            @click="handleModalIframeSrc"
-            type="button"
-            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
-          >
-            <span class="material-symbols-outlined"> play_circle </span>
-          </button>
-        </div>
-      </template>
-
-      <template
-        v-if="
-          pageBuilderService.isSelectedElementValidText() &&
-          !pageBuilderService.ElOrFirstChildIsIframe()
-        "
-      >
-        <div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
-          <button
-            @click="handleModalPreviewTiptap"
-            type="button"
-            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
-          >
-            <span class="material-symbols-outlined"> edit </span>
-          </button>
-        </div>
-        <TextColorEditor></TextColorEditor>
-      </template>
-
-      <template
-        v-if="
-          getElement &&
-          getComponent &&
-          getBasePrimaryImage &&
-          !pageBuilderService.ElOrFirstChildIsIframe()
-        "
+    <div class="pbx-select-none">
+      <p v-if="false" class="pbx-font-medium pbx-text-[10px] pbx-w-max lg:pbx-block pbx-hidden">
+        Editing
+        <span class="pbx-lowercase">&lt;{{ elementTag }}&gt;</span>
+      </p>
+      <div
+        class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2"
+        :class="{ '': getElement }"
       >
-        <div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
+        <template v-if="pageBuilderService.ElOrFirstChildIsIframe()">
+          <div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
+            <button
+              @click="handleModalIframeSrc"
+              type="button"
+              class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+            >
+              <span class="material-symbols-outlined"> play_circle </span>
+            </button>
+          </div>
+        </template>
+
+        <template
+          v-if="
+            pageBuilderService.isSelectedElementValidText() &&
+            !pageBuilderService.ElOrFirstChildIsIframe()
+          "
+        >
+          <div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
+            <button
+              @click="handleModalPreviewTiptap"
+              type="button"
+              class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+            >
+              <span class="material-symbols-outlined"> edit </span>
+            </button>
+          </div>
+          <TextColorEditor></TextColorEditor>
+        </template>
+
+        <template
+          v-if="
+            getElement &&
+            getComponent &&
+            getBasePrimaryImage &&
+            !pageBuilderService.ElOrFirstChildIsIframe()
+          "
+        >
+          <div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
+            <button
+              @click="handleAddImage"
+              type="button"
+              class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+            >
+              <span class="material-symbols-outlined"> add_photo_alternate </span>
+            </button>
+          </div>
+        </template>
+
+        <template
+          v-if="
+            getElement &&
+            getElement.nodeType === 1 &&
+            !getBasePrimaryImage &&
+            !pageBuilderService.ElOrFirstChildIsIframe()
+          "
+        >
+          <BackgroundColorEditor></BackgroundColorEditor>
+        </template>
+
+        <template v-if="getElement">
           <button
-            @click="handleAddImage"
+            @click="pageBuilderService.deleteElementFromDOM"
             type="button"
-            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+            class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
           >
-            <span class="material-symbols-outlined"> add_photo_alternate </span>
+            <span class="material-symbols-outlined"> delete </span>
           </button>
+        </template>
+
+        <div
+          v-if="getElement && getComponent"
+          class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+          @click="openOptionsMoreOpen = !openOptionsMoreOpen"
+        >
+          <span class="material-symbols-outlined"> more_horiz </span>
         </div>
-      </template>
-
-      <template
-        v-if="
-          getElement &&
-          getElement.nodeType === 1 &&
-          !getBasePrimaryImage &&
-          !pageBuilderService.ElOrFirstChildIsIframe()
-        "
-      >
-        <BackgroundColorEditor></BackgroundColorEditor>
-      </template>
-
-      <template v-if="getElement">
-        <button
-          @click="pageBuilderService.deleteElementFromDOM"
-          type="button"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+        <div
+          v-if="getElement && getComponent"
+          class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+          @click="pageBuilderService.clearHtmlSelection()"
         >
-          <span class="material-symbols-outlined"> delete </span>
-        </button>
-      </template>
+          <span class="material-symbols-outlined"> close_small</span>
+        </div>
+      </div>
+    </div>
 
+    <transition name="popup-fade">
       <div
-        v-if="getElement && getComponent"
-        class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
-        @click="pageBuilderService.clearHtmlSelection()"
+        v-if="openOptionsMoreOpen"
+        class="pbx-fixed pbx-z-40 pbx-top-10 pbx-right-0 lg:pbx-w-72 md:pbx-w-72 pbx-w-full pbx-select-none"
       >
-        <span class="material-symbols-outlined"> close</span>
+        <div
+          class="pbx-rounded-3xl pbx-border pbx-border-gray-100 pbx-bg-white pbx-shadow-lg pbx-pt-4 pbx-pb-4 pbx-flex pbx-flex-col pbx-overflow-y-auto pbx-max-h-[80vh] pbx-mx-4 pbx-px-2"
+        >
+          <div class="pbx-flex pbx-flex-col">
+            <!-- content start -->
+            <!-- move up and down start -->
+            <div
+              v-if="getElement && getComponent"
+              @click="pageBuilderService.reorderComponent(-1)"
+              :disabled="!canMoveUp"
+              class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-cursor-pointer hover:pbx-bg-red-50 pbx-py-2 pbx-px-2 pbx-rounded-full"
+            >
+              <div
+                class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+                :class="[
+                  canMoveUp
+                    ? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-cursor-pointer'
+                    : 'pbx-cursor-not-allowed pbx-bg-opacity-20 hover:pbx-bg-gray-200',
+                ]"
+              >
+                <span class="material-symbols-outlined"> move_up </span>
+              </div>
+              <div class="pbx-text-sm">Move up</div>
+            </div>
+            <div
+              v-if="getElement && getComponent"
+              @click="pageBuilderService.reorderComponent(1)"
+              :disabled="!canMoveDown"
+              class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-cursor-pointer hover:pbx-bg-red-50 pbx-py-2 pbx-px-2 pbx-rounded-full"
+            >
+              <div
+                class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+                :class="[
+                  canMoveDown
+                    ? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-cursor-pointer'
+                    : 'pbx-cursor-not-allowed pbx-bg-opacity-20 hover:pbx-bg-gray-200',
+                ]"
+              >
+                <span class="material-symbols-outlined"> move_down </span>
+              </div>
+              <div class="pbx-text-sm">Move down</div>
+            </div>
+            <!-- move up and down end -->
+
+            <!-- delete component start -->
+
+            <div
+              v-if="getElement && getComponent"
+              @click="handleDelete()"
+              class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-cursor-pointer hover:pbx-bg-red-50 pbx-py-2 pbx-px-2 pbx-rounded-full"
+            >
+              <div
+                class="pbx-h- pbx-w-8 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryErrorColor hover:pbx-text-white pbx-text-myPrimaryErrorColor"
+              >
+                <span class="material-symbols-outlined"> delete_forever </span>
+              </div>
+              <div class="pbx-text-sm">Delete component</div>
+            </div>
+
+            <!-- delete component end -->
+
+            <div
+              v-if="getElement && getComponent"
+              @click="
+                () => {
+                  openOptionsMoreOpen = !openOptionsMoreOpen
+                  pageBuilderService.duplicateComponent()
+                }
+              "
+              class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-cursor-pointer hover:pbx-bg-red-50 pbx-py-2 pbx-px-2 pbx-rounded-full"
+            >
+              <div
+                class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+              >
+                <span class="material-symbols-outlined"> control_point_duplicate </span>
+              </div>
+              <div class="pbx-text-sm">Duplicate component</div>
+            </div>
+            <div
+              v-if="getElement && getComponent"
+              @click="handleShowHTMLEditor"
+              class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-cursor-pointer hover:pbx-bg-red-50 pbx-py-2 pbx-px-2 pbx-rounded-full"
+            >
+              <div
+                class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+              >
+                <span class="material-symbols-outlined"> deployed_code </span>
+              </div>
+              <div class="pbx-text-sm">{{ translate('HTML Editor') }}</div>
+            </div>
+
+            <!-- content end -->
+          </div>
+        </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, nextTick } from 'vue'
+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'
@@ -18,6 +18,7 @@ const props = defineProps({
 })
 
 const getElement = computed(() => pageBuilderStateStore.getElement)
+const getShowModalHTMLEditor = computed(() => pageBuilderStateStore.getShowModalHTMLEditor)
 
 const elementHTML = computed(() => {
   if (!getElement.value || !(getElement.value instanceof HTMLElement)) {
@@ -26,24 +27,26 @@ const elementHTML = computed(() => {
   return getElement.value.outerHTML
 })
 
-const showModalHTMLEditor = ref(false)
-
 const editableHtml = ref('')
 const editableComponents = ref('')
 
-const handleShowHTMLEditor = async () => {
-  showModalHTMLEditor.value = true
+watch(getShowModalHTMLEditor, async (newVal) => {
+  if (newVal) {
+    if (!props.globalPage) {
+      editableHtml.value = elementHTML.value
+      return
+    }
 
-  if (!props.globalPage) {
-    editableHtml.value = elementHTML.value
-    return
+    editableComponents.value = await pageBuilderService.generateHtmlFromComponents()
   }
+})
 
-  editableComponents.value = await pageBuilderService.generateHtmlFromComponents()
+const handleShowHTMLEditor = async () => {
+  pageBuilderStateStore.setShowModalHTMLEditor(true)
 }
 
 const handleCloseHTMLEditor = () => {
-  showModalHTMLEditor.value = false
+  pageBuilderStateStore.setShowModalHTMLEditor(false)
 }
 
 const isLoading = ref(false)
@@ -62,7 +65,7 @@ const handleSaveChangesElement = async () => {
     return
   }
 
-  showModalHTMLEditor.value = false
+  pageBuilderStateStore.setShowModalHTMLEditor(false)
   isLoading.value = false
 }
 
@@ -80,7 +83,7 @@ const handleSaveChangesComponents = async () => {
     return
   }
 
-  showModalHTMLEditor.value = false
+  pageBuilderStateStore.setShowModalHTMLEditor(false)
   isLoading.value = false
 }
 </script>
@@ -101,7 +104,7 @@ const handleSaveChangesComponents = async () => {
   </EditorAccordion>
   <ModalBuilder
     maxWidth="7xl"
-    :showModalBuilder="showModalHTMLEditor"
+    :showModalBuilder="getShowModalHTMLEditor"
     :title="translate('HTML Editor')"
     @closeMainModalBuilder="handleCloseHTMLEditor"
   >

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

@@ -63,7 +63,7 @@ watch(
 
         <ListboxButton
           v-if="!globalPageLayout"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+          class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
         >
           <div class="pbx-flex pbx-flex-col">
             <div class="pbx-flex pbx-gap-2 pbx-items-center">

package/src/PageBuilder/PageBuilder.vue

@@ -869,7 +869,7 @@ onMounted(async () => {
       >
         <div
           id="pbxEditToolbar"
-          class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-items-center pbx-rounded pbx-px-4 pbx-bg-red-200 pbx-h-0"
+          class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-items-center pbx-rounded-full pbx-px-4 pbx-h-0"
         >
           <template v-if="getElement">
             <EditGetElement></EditGetElement>

package/src/css/dev-global.css

@@ -5,3 +5,20 @@ These styles affect all HTML elements (like input, button, h1, etc.) in the cons
 .mobile-preview-frame {
   container-type: inline-size;
 }
+
+/* popover start */
+.popup-fade-enter-active,
+.popup-fade-leave-active {
+  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.popup-fade-enter-from,
+.popup-fade-leave-to {
+  transform: scale(0.95);
+  opacity: 0;
+}
+.popup-fade-enter-to,
+.popup-fade-leave-from {
+  transform: scale(1);
+  opacity: 1;
+}
+/* popover end */

package/src/css/style.css

@@ -367,9 +367,12 @@
   min-width: 4rem;
   padding-right: 1rem;
   padding-left: 1rem;
-  height: 2rem;
-  box-shadow: 0 0 0 10px oklch(86.9% 0.005 56.366);
-  background: oklch(86.9% 0.005 56.366);
+  height: 1.5rem;
+  background: #fff; /* white background */
+  /* white outline first, then black border simulated as shadow */
+  box-shadow:
+    0 0 0 10px #fff,
+    /* white outline */ 0 0 0 12px #000; /* black border outside */
 }
 
 /* CSS for content inside page builder # start */