tiptapify 0.0.23 → 0.0.26

package/src/extensions/components/actions/undo/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -14,6 +20,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :disabled="!editor.can().chain().focus().undo().run()"
+      :variant="variantBtn"
       @click="editor.chain().focus().undo().run()"
       size="32"
   >

package/src/extensions/components/alignment/center/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -14,6 +20,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :color="editor.isActive({ textAlign: 'center' }) ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.chain().focus().toggleTextAlign('center').run()"
       size="32"
   >

package/src/extensions/components/alignment/justify/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -14,6 +20,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :color="editor.isActive({ textAlign: 'justify' }) ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.chain().focus().toggleTextAlign('justify').run()"
       size="32"
   >

package/src/extensions/components/alignment/left/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -14,6 +20,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :color="editor.isActive({ textAlign: 'left' }) ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.chain().focus().toggleTextAlign('left').run()"
       size="32"
   >

package/src/extensions/components/alignment/right/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -14,6 +20,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :color="editor.isActive({ textAlign: 'right' }) ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.chain().focus().toggleTextAlign('right').run()"
       size="32"
   >

package/src/extensions/components/format/bold/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :color="editor.isActive('bold') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleBold().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleBold()"
       size="32"
   >

package/src/extensions/components/format/italic/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :color="editor.isActive('italic') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleItalic().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleItalic()"
       size="32"
   >

package/src/extensions/components/format/strike/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :color="editor.isActive('strike') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleStrike().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleStrike()"
       size="32"
   >

package/src/extensions/components/format/underline/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :color="editor.isActive('underline') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleUnderline().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleUnderline()"
       size="32"
   >

package/src/extensions/components/formatExtra/code/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :color="editor.isActive('code') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleCode().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleCode()"
       size="32"
   >

package/src/extensions/components/formatExtra/codeBlock/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :color="editor.isActive('codeBlock') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleCodeBlock().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleCodeBlock()"
       size="32"
   >

package/src/extensions/components/formatExtra/quote/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :color="editor.isActive('blockquote') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleBlockquote().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleBlockquote()"
       size="32"
   >

package/src/extensions/components/formatExtra/sub/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :color="editor.isActive('sub') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleSubscript().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleSubscript()"
       size="32"
   >

package/src/extensions/components/formatExtra/sup/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :color="editor.isActive('sup') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleSuperscript().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleSuperscript()"
       size="32"
   >

package/src/extensions/components/list/bullet/Button.vue

@@ -3,18 +3,120 @@
 import * as mdi from '@mdi/js'
 import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import { inject, Ref } from "vue";
+import { computed, inject, ref, Ref, watch } from "vue";
+
+import defaults from '@tiptapify/constants/defaults'
+
+const props = defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn },
+  withDisc: { type: Boolean, default: true },
+  withCircle: { type: Boolean, default: true },
+  withSquare: { type: Boolean, default: true }
+})
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
 
+const disc = computed(() => props.withDisc)
+const circle = computed(() => props.withCircle)
+const square = computed(() => props.withSquare)
+
+const iconDisc = '<svg width="48" height="48" focusable="false" viewBox="5 5 32 32"><g fill-rule="evenodd"><circle cx="11" cy="14" r="3"></circle><circle cx="11" cy="24" r="3"></circle><circle cx="11" cy="34" r="3"></circle><path opacity=".2" d="M18 12h22v4H18zM18 22h22v4H18zM18 32h22v4H18z"></path></g></svg>'
+const iconCircle = '<svg width="48" height="48" focusable="false" viewBox="5 5 32 32"><g fill-rule="evenodd"><path d="M11 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 1a3 3 0 1 1 0-6 3 3 0 0 1 0 6ZM11 26a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 1a3 3 0 1 1 0-6 3 3 0 0 1 0 6ZM11 36a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 1a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" fill-rule="nonzero"></path><path opacity=".2" d="M18 12h22v4H18zM18 22h22v4H18zM18 32h22v4H18z"></path></g></svg>'
+const iconSquare = '<svg width="48" height="48" focusable="false" viewBox="5 5 32 32"><g fill-rule="evenodd"><path d="M8 11h6v6H8zM8 21h6v6H8zM8 31h6v6H8z"></path><path opacity=".2" d="M18 12h22v4H18zM18 22h22v4H18zM18 32h22v4H18z"></path>'
+
+const bulletLists = ref({
+  disc: {
+    name: 'bulletList',
+    enabled: disc.value,
+    icon: iconDisc
+  },
+  circle: {
+    name: 'bulletListCircle',
+    enabled: circle.value,
+    icon: iconCircle
+  },
+  square: {
+    name: 'bulletListSquare',
+    enabled: square.value,
+    icon: iconSquare
+  }
+})
+const menuItems = ref({})
+const isMenu = ref(false)
+
+function checkButtonOrMenu() {
+  menuItems.value = Object.values(bulletLists.value).filter(item => item.enabled)
+  isMenu.value = menuItems.value.length > 1
+}
+checkButtonOrMenu()
+
+function toggleList(listType: string) {
+  switch(listType) {
+    case 'disc': editor.value.commands.toggleBulletList(); break;
+    case 'circle': editor.value.commands.toggleBulletListCircle(); break;
+    case 'square': editor.value.commands.toggleBulletListSquare(); break;
+  }
+}
+
+const buttonActive = computed(() => {
+  return editor.value.isActive('bulletList') ||
+      editor.value.isActive('bulletListCircle') ||
+      editor.value.isActive('bulletListSquare')
+})
+
+const buttonDisabled = computed(() => {
+  return !editor.value.can().chain().focus().toggleBulletList().run() &&
+    !editor.value.can().chain().focus().toggleBulletListCircle().run() &&
+    !editor.value.can().chain().focus().toggleBulletListSquare().run()
+})
+
+watch(() => bulletLists.value, () => {
+  checkButtonOrMenu()
+}, { deep: true, immediate: true })
 </script>
 
 <template>
+  <VMenu v-if="isMenu">
+    <template #activator="{ props: menuProps }">
+      <VBtn
+          :color="buttonActive ? 'primary' : ''"
+          :disabled="buttonDisabled"
+          :variant="variantBtn"
+          v-bind="menuProps"
+          size="32"
+      >
+        <VTooltip activator="parent">
+          {{ t('lists.bullet') }}
+        </VTooltip>
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatListBulleted}`" />
+      </VBtn>
+    </template>
+
+    <VList>
+      <VListItem
+        v-for="(bulletList, key) in menuItems"
+        :key="key"
+        link
+        :active="editor.isActive(bulletList.name)"
+        @click="toggleList(key)"
+      >
+        <VTooltip activator="parent">
+          {{ t('lists.bullet') }}
+        </VTooltip>
+        <VListItemTitle class="d-flex justify-center align-center">
+          <BtnIcon :icon="bulletList.icon" />
+        </VListItemTitle>
+      </VListItem>
+    </VList>
+  </VMenu>
+
   <VBtn
+      v-else
       :color="editor.isActive('bulletList') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleBulletList().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleBulletList()"
       size="32"
   >

package/src/extensions/components/list/bullet/index.ts

@@ -0,0 +1,101 @@
+import { BulletList } from "@tiptap/extension-list"
+
+export const BulletListCircle = BulletList.extend({
+  name: 'bulletListCircle',
+
+  addAttributes() {
+    return {
+      class: {
+        default: null,
+        renderHTML: (attributes: any) => {
+          return {
+            class: `${attributes.class}`,
+          }
+        },
+        parseHTML: (element: any) => element.getAttribute('class'),
+      }
+    }
+  },
+
+  addOptions() {
+    return {
+      itemTypeName: 'listItem',
+      HTMLAttributes: {
+        class: 'list-style-circle',
+      },
+      keepMarks: false,
+      keepAttributes: false,
+    }
+  },
+
+  parseHTML() {
+    return [
+      { tag: 'ul', class: 'list-style-circle' }
+    ]
+  },
+
+  addCommands() {
+    return {
+      toggleBulletListCircle: () =>
+        ({ commands, chain }) => {
+          if (this.options.keepAttributes) {
+            return chain()
+              .toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
+              .updateAttributes('listItem', this.editor.getAttributes('textStyle'))
+              .run()
+          }
+          return commands.toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
+        },
+    }
+  }
+})
+
+export const BulletListSquare = BulletList.extend({
+  name: 'bulletListSquare',
+
+  addAttributes() {
+    return {
+      class: {
+        default: null,
+        renderHTML: (attributes: any) => {
+          return {
+            class: `${attributes.class}`,
+          }
+        },
+        parseHTML: (element: any) => element.getAttribute('class'),
+      }
+    }
+  },
+
+  addOptions() {
+    return {
+      itemTypeName: 'listItem',
+      HTMLAttributes: {
+        class: 'list-style-square',
+      },
+      keepMarks: false,
+      keepAttributes: false,
+    }
+  },
+
+  parseHTML() {
+    return [
+      { tag: 'ul', class: 'list-style-square' }
+    ]
+  },
+
+  addCommands() {
+    return {
+      toggleBulletListSquare: () =>
+        ({ commands, chain }) => {
+          if (this.options.keepAttributes) {
+            return chain()
+              .toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
+              .updateAttributes('listItem', this.editor.getAttributes('textStyle'))
+              .run()
+          }
+          return commands.toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
+        },
+    }
+  }
+})

package/src/extensions/components/list/indent/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :active="false"
       :disabled="!editor.can().sinkListItem('listItem')"
+      :variant="variantBtn"
       @click="editor.chain().focus().sinkListItem('listItem').run()"
       size="32"
   >

package/src/extensions/components/list/numbered/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :color="editor.isActive('orderedList') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleOrderedList().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleOrderedList()"
       size="32"
   >

package/src/extensions/components/list/outdent/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :active="false"
       :disabled="!editor.can().liftListItem('listItem')"
+      :variant="variantBtn"
       @click="editor.chain().focus().liftListItem('listItem').run()"
       size="32"
   >

package/src/extensions/components/list/task/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :color="editor.isActive('taskList') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleTaskList().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleTaskList()"
       size="32"
   >

package/src/extensions/components/media/emoji/Button.vue

@@ -6,6 +6,12 @@ import tiptapifyEmojis from "@tiptapify/extensions/emoji"
 import { computed, inject, Ref, ref, watch } from 'vue'
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -64,6 +70,7 @@ watch(() => tab.value, () => {
   <VBtn
       :id="`tiptapify-emoji-button-${editor.instanceId}`"
       :color="editor.isActive('image') ? 'primary' : ''"
+      :variant="variantBtn"
       size="32"
   >
     <VTooltip activator="parent">
@@ -104,7 +111,7 @@ watch(() => tab.value, () => {
           />
           <div class="tiptapify-emoji-container">
             <VWindow v-model="tab" direction="vertical">
-              <VWindowItem v-for="item of emojisRef" :value="item.group">
+              <VWindowItem v-for="item of emojisRef" :value="item.group" :transition="false" :reverse-transition="false">
                 <div
                     v-for="emojiItem in item.emojis"
                     class="tiptapify-emoji-container-item"
@@ -155,7 +162,6 @@ watch(() => tab.value, () => {
   cursor: pointer;
   width: 32px;
   height: 32px;
-  filter: drop-shadow(1px 2px 3px #777);
   transition: background-color 0.2s ease-in-out;
 }
 

package/src/extensions/components/media/image/Button.vue

@@ -6,6 +6,12 @@ import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import ImageDialog from "@tiptapify/extensions/components/media/image/ImageDialog.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :color="editor.isActive('image') ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.commands.showTiptapifyImage()"
       size="32"
   >