tiptapify 0.2.6 → 0.3.1

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -26,9 +24,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.chain().focus().toggleTextAlign('left').run()"
   >
-    <VTooltip activator="parent">
-      {{ t('alignments.left') }}
-    </VTooltip>
+    <Tooltip :label="t('alignments.left')" hotkey="Mod-Shift-l" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatAlignLeft}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -26,9 +24,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.chain().focus().toggleTextAlign('right').run()"
   >
-    <VTooltip activator="parent">
-      {{ t('alignments.right') }}
-    </VTooltip>
+    <Tooltip :label="t('alignments.right')" hotkey="Mod-Shift-r" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatAlignRight}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -27,9 +25,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.commands.toggleBold()"
   >
-    <VTooltip activator="parent">
-      {{ t('format.bold') }}
-    </VTooltip>
+    <Tooltip :label="t('format.bold')" hotkey="Mod-b" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatBold}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -27,9 +25,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.commands.toggleItalic()"
   >
-    <VTooltip activator="parent">
-      {{ t('format.italic') }}
-    </VTooltip>
+    <Tooltip :label="t('format.italic')" hotkey="Mod-i" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatItalic}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -27,9 +25,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.commands.toggleStrike()"
   >
-    <VTooltip activator="parent">
-      {{ t('format.strike') }}
-    </VTooltip>
+    <Tooltip :label="t('format.strike')" hotkey="Mod-Shift-s" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatStrikethroughVariant}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -27,9 +25,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.commands.toggleUnderline()"
   >
-    <VTooltip activator="parent">
-      {{ t('format.underline') }}
-    </VTooltip>
+    <Tooltip :label="t('format.underline')" hotkey="Mod-u" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatUnderline}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -27,9 +25,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.commands.toggleCode()"
   >
-    <VTooltip activator="parent">
-      {{ t('format.code') }}
-    </VTooltip>
+    <Tooltip :label="t('format.code')" hotkey="Mod-e" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiXml}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -27,9 +25,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.commands.toggleCodeBlock()"
   >
-    <VTooltip activator="parent">
-      {{ t('format.codeblock') }}
-    </VTooltip>
+    <Tooltip :label="t('format.codeblock')" hotkey="Mod-Alt-c" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiCodeBlockTags}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -27,9 +25,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.commands.toggleBlockquote()"
   >
-    <VTooltip activator="parent">
-      {{ t('format.blockquote') }}
-    </VTooltip>
+    <Tooltip :label="t('format.blockquote')" hotkey="Mod-Shift-b" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiCommentQuote}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -27,9 +25,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.commands.toggleSubscript()"
   >
-    <VTooltip activator="parent">
-      {{ t('format.sub') }}
-    </VTooltip>
+    <Tooltip :label="t('format.sub')" hotkey="Mod-," />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatSubscript}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -27,9 +25,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.commands.toggleSuperscript()"
   >
-    <VTooltip activator="parent">
-      {{ t('format.sup') }}
-    </VTooltip>
+    <Tooltip :label="t('format.sup')" hotkey="Mod-." />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatSuperscript}`" />
   </VBtn>
 </template>

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

@@ -3,19 +3,20 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { computed, inject, PropType, ref, Ref, watch } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { computed, inject, ref, Ref, watch } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
 const props = defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
   withDisc: { type: Boolean, default: true },
   withCircle: { type: Boolean, default: true },
   withSquare: { type: Boolean, default: true }
 })
 
+const { variantBtn } = useTiptapifyConfig()
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
@@ -91,9 +92,7 @@ watch(() => bulletLists.value, () => {
         v-bind="menuProps"
         size="32"
       >
-        <VTooltip activator="parent">
-          {{ t('lists.bullet') }}
-        </VTooltip>
+        <Tooltip :label="t('lists.bullet')" hotkey="Mod-Shift-8" />
         <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatListBulleted}`" />
       </VBtn>
     </template>
@@ -106,9 +105,7 @@ watch(() => bulletLists.value, () => {
         :active="editor.isActive(bulletList.name)"
         @click="toggleList(bulletList.name)"
       >
-        <VTooltip activator="parent">
-          {{ t('lists.bullet') }}
-        </VTooltip>
+        <Tooltip :label="t('lists.bullet')" />
         <VListItemTitle class="d-flex justify-center align-center">
           <BtnIcon :icon="bulletList.icon" />
         </VListItemTitle>
@@ -124,9 +121,7 @@ watch(() => bulletLists.value, () => {
     size="32"
     @click="editor.commands.toggleBulletList()"
   >
-    <VTooltip activator="parent">
-      {{ t('lists.bullet') }}
-    </VTooltip>
+    <Tooltip :label="t('lists.bullet')" hotkey="Mod-Shift-8" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatListBulleted}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -28,9 +26,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     :variant="variantBtn"
     @click="editor.chain().focus().sinkListItem('listItem').run()"
   >
-    <VTooltip activator="parent">
-      {{ t('lists.indent') }}
-    </VTooltip>
+    <Tooltip :label="t('lists.indent')" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatIndentIncrease}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { computed, inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { computed, inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -34,9 +32,7 @@ const buttonDisabled = computed(() => {
     size="32"
     @click="editor.commands.toggleOrderedList()"
   >
-    <VTooltip activator="parent">
-      {{ t('lists.numbered') }}
-    </VTooltip>
+    <Tooltip :label="t('lists.numbered')" hotkey="Mod-Shift-7" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatListNumbered}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -28,9 +26,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     :variant="variantBtn"
     @click="editor.chain().focus().liftListItem('listItem').run()"
   >
-    <VTooltip activator="parent">
-      {{ t('lists.outdent') }}
-    </VTooltip>
+    <Tooltip :label="t('lists.outdent')" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatIndentDecrease}`" />
   </VBtn>
 </template>

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

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { computed, inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { computed, inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -34,9 +32,7 @@ const buttonDisabled = computed(() => {
     size="32"
     @click="editor.commands.toggleTaskList()"
   >
-    <VTooltip activator="parent">
-      {{ t('lists.task') }}
-    </VTooltip>
+    <Tooltip :label="t('lists.task')" hotkey="Mod-Shift-9" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatListChecks}`" />
   </VBtn>
 </template>

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

@@ -1,14 +1,13 @@
 <script lang="ts" setup>
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/core'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 import { ComposerTranslation } from 'vue-i18n'
 import CharmapPicker from './Picker.vue'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return 'flat' } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
@@ -16,9 +15,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 <template>
   <VBtn :id="`tiptapify-charmap-button-${editor.instanceId}`" :variant="variantBtn" size="32">
-    <VTooltip activator="parent">
-      {{ t('media.charmap.title') }}
-    </VTooltip>
+    <Tooltip :label="t('media.charmap.title')" />
     <VIcon :icon="`mdiSvg:${mdi.mdiAppleKeyboardCommand}`" tag="svg" size="small" />
   </VBtn>
 

package/src/extensions/components/media/charmap/Picker.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Editor } from '@tiptap/core'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import tiptapifyCharMap from '@tiptapify/extensions/charmap'
 import { PickerEventBus } from '@tiptapify/extensions/PickerEventBus'
 import { computed, ref, watch } from 'vue'
@@ -71,9 +72,7 @@ watch(filter, filterChars)
         :class="['tiptapify-slash-picker__tab', { 'tiptapify-slash-picker__tab--active': activeTab === item.group }]"
         @click="activeTab = item.group"
       >
-        <VTooltip activator="parent">
-          {{ t(`media.charmap.categories.${item.group}`) }}
-        </VTooltip>
+        <Tooltip :label="t(`media.charmap.categories.${item.group}`)" />
         {{ item.items[0]?.char }}
       </button>
     </div>

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

@@ -1,15 +1,14 @@
 <script lang="ts" setup>
 import * as mdi from '@mdi/js'
-import { TiptapifyEditor, variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import { TiptapifyEditor } from '@tiptapify/types/editor'
+import { inject, Ref } from 'vue'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import { ComposerTranslation } from 'vue-i18n'
 import EmojiPicker from './Picker.vue'
-import defaults from '@tiptapify/constants/defaults'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<TiptapifyEditor>
 
@@ -18,9 +17,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 <template>
   <VBtn :id="`tiptapify-emoji-button-${editor.instanceId}`" color="" :variant="variantBtn" size="32">
-    <VTooltip activator="parent">
-      {{ t('media.emoji.title') }}
-    </VTooltip>
+    <Tooltip :label="t('media.emoji.title')" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiEmoticon}`" />
   </VBtn>
 

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Editor } from '@tiptap/core'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import tiptapifyEmojis from '@tiptapify/extensions/emoji'
 import { PickerEventBus } from '@tiptapify/extensions/PickerEventBus'
 import { computed, ref, watch } from 'vue'
@@ -67,9 +68,7 @@ watch(filter, filterEmoji)
         :class="['tiptapify-slash-picker__tab', { 'tiptapify-slash-picker__tab--active': activeTab === item.group }]"
         @click="activeTab = item.group"
       >
-        <VTooltip activator="parent">
-          {{ t(`media.emoji.categories.${item.group}`) }}
-        </VTooltip>
+        <Tooltip :label="t(`media.emoji.categories.${item.group}`)" />
         {{ item.emojis[0]?.char }}
       </button>
     </div>