tiptapify 0.1.4 → 0.1.6

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

@@ -1,14 +1,16 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import { computed, inject, ref, Ref, watch } from "vue";
+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 defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 const props = defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn },
+  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 }
@@ -16,7 +18,7 @@ const props = defineProps({
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const disc = computed(() => props.withDisc)
 const circle = computed(() => props.withCircle)
@@ -54,9 +56,9 @@ checkButtonOrMenu()
 
 function toggleList(listType: string) {
   switch(listType) {
-    case 'bulletList': editor.value.commands.toggleBulletList(); break;
-    case 'bulletListCircle': editor.value.commands.toggleBulletListCircle(); break;
-    case 'bulletListSquare': editor.value.commands.toggleBulletListSquare(); break;
+    case 'bulletList': editor.value.commands.toggleBulletList(); break
+    case 'bulletListCircle': editor.value.commands.toggleBulletListCircle(); break
+    case 'bulletListSquare': editor.value.commands.toggleBulletListSquare(); break
   }
 }
 
@@ -83,11 +85,11 @@ watch(() => bulletLists.value, () => {
   <VMenu v-if="isMenu">
     <template #activator="{ props: menuProps }">
       <VBtn
-          :color="buttonActive ? 'primary' : ''"
-          :disabled="buttonDisabled"
-          :variant="variantBtn"
-          v-bind="menuProps"
-          size="32"
+        :color="buttonActive ? 'primary' : ''"
+        :disabled="buttonDisabled"
+        :variant="variantBtn"
+        v-bind="menuProps"
+        size="32"
       >
         <VTooltip activator="parent">
           {{ t('lists.bullet') }}
@@ -115,12 +117,12 @@ watch(() => bulletLists.value, () => {
   </VMenu>
 
   <VBtn
-      v-else
-      :color="editor.isActive('bulletList') ? 'primary' : ''"
-      :disabled="!editor.can().chain().focus().toggleBulletList().run()"
-      :variant="variantBtn"
-      @click="editor.commands.toggleBulletList()"
-      size="32"
+    v-else
+    :color="editor.isActive('bulletList') ? 'primary' : ''"
+    :disabled="!editor.can().chain().focus().toggleBulletList().run()"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.toggleBulletList()"
   >
     <VTooltip activator="parent">
       {{ t('lists.bullet') }}

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

@@ -1,4 +1,4 @@
-import { BulletList } from "@tiptap/extension-list"
+import { BulletList } from '@tiptap/extension-list'
 
 export const BulletListCircle = BulletList.extend({
   name: 'bulletListCircle',

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

@@ -1,30 +1,32 @@
 <script lang="ts" setup>
 
 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 { 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 defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 </script>
 
 <template>
   <VBtn
-      :active="false"
-      :disabled="!editor.can().sinkListItem('listItem')"
-      size="32"
-      color=""
-      :variant="variantBtn"
-      @click="editor.chain().focus().sinkListItem('listItem').run()"
+    :active="false"
+    :disabled="!editor.can().sinkListItem('listItem')"
+    size="32"
+    color=""
+    :variant="variantBtn"
+    @click="editor.chain().focus().sinkListItem('listItem').run()"
   >
     <VTooltip activator="parent">
       {{ t('lists.indent') }}

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

@@ -1,19 +1,21 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import { computed, inject, Ref } from "vue";
+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 defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const buttonDisabled = computed(() => {
   return !editor.value.can().chain().focus().toggleBulletList().run() &&
@@ -26,11 +28,11 @@ const buttonDisabled = computed(() => {
 
 <template>
   <VBtn
-      :color="editor.isActive('orderedList') ? 'primary' : ''"
-      :disabled="buttonDisabled"
-      :variant="variantBtn"
-      @click="editor.commands.toggleOrderedList()"
-      size="32"
+    :color="editor.isActive('orderedList') ? 'primary' : ''"
+    :disabled="buttonDisabled"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.toggleOrderedList()"
   >
     <VTooltip activator="parent">
       {{ t('lists.numbered') }}

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

@@ -1,30 +1,32 @@
 <script lang="ts" setup>
 
 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 { 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 defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 </script>
 
 <template>
   <VBtn
-      :active="false"
-      :disabled="!editor.can().liftListItem('listItem')"
-      size="32"
-      color=""
-      :variant="variantBtn"
-      @click="editor.chain().focus().liftListItem('listItem').run()"
+    :active="false"
+    :disabled="!editor.can().liftListItem('listItem')"
+    size="32"
+    color=""
+    :variant="variantBtn"
+    @click="editor.chain().focus().liftListItem('listItem').run()"
   >
     <VTooltip activator="parent">
       {{ t('lists.outdent') }}

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

@@ -1,19 +1,21 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import { computed, inject, Ref } from "vue";
+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 defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const buttonDisabled = computed(() => {
   return !editor.value.can().chain().focus().toggleBulletList().run() &&
@@ -26,11 +28,11 @@ const buttonDisabled = computed(() => {
 
 <template>
   <VBtn
-      :color="editor.isActive('taskList') ? 'primary' : ''"
-      :disabled="buttonDisabled"
-      :variant="variantBtn"
-      @click="editor.commands.toggleTaskList()"
-      size="32"
+    :color="editor.isActive('taskList') ? 'primary' : ''"
+    :disabled="buttonDisabled"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.toggleTaskList()"
   >
     <VTooltip activator="parent">
       {{ t('lists.task') }}

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

@@ -1,14 +1,17 @@
 <script lang="ts" setup>
 import * as mdi from '@mdi/js'
-import { inject, Ref } from 'vue'
-import CharmapPicker from './Picker.vue';
+import { Editor } from '@tiptap/core'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, PropType, Ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
+import CharmapPicker from './Picker.vue'
 
 defineProps({
-  variantBtn: { type: String, default: 'flat' },
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return 'flat' } },
 })
 
-const editor = inject('tiptapifyEditor') as Ref<any>
-const { t } = inject('tiptapifyI18n') as any
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 </script>
 
 <template>

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

@@ -66,10 +66,10 @@ watch(filter, filterChars)
   <div class="tiptapify-slash-picker">
     <div class="tiptapify-slash-picker__sidebar">
       <button
-          v-for="item in filteredChars"
-          :key="item.group"
-          :class="['tiptapify-slash-picker__tab', { 'tiptapify-slash-picker__tab--active': activeTab === item.group }]"
-          @click="activeTab = item.group"
+        v-for="item in filteredChars"
+        :key="item.group"
+        :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}`) }}
@@ -81,27 +81,29 @@ watch(filter, filterChars)
     <div class="tiptapify-slash-picker__content">
       <div class="tiptapify-slash-picker__search">
         <input
-            v-model="filter"
-            type="text"
-            placeholder="Search characters..."
-            class="tiptapify-slash-picker__search-input"
-        />
-        <button v-if="filter" class="tiptapify-slash-picker__clear" @click="resetFilter">&times;</button>
+          v-model="filter"
+          type="text"
+          placeholder="Search characters..."
+          class="tiptapify-slash-picker__search-input"
+        >
+        <button v-if="filter" class="tiptapify-slash-picker__clear" @click="resetFilter">
+          &times;
+        </button>
       </div>
 
       <div class="tiptapify-slash-picker__grid-container">
         <div
-            v-for="item in filteredChars"
-            :key="item.group"
-            class="tiptapify-slash-picker__group"
+          v-for="item in filteredChars"
+          :key="item.group"
+          class="tiptapify-slash-picker__group"
         >
           <div v-show="activeTab === item.group" class="tiptapify-slash-picker__grid">
             <button
-                v-for="charItem in item.items"
-                :key="charItem.char"
-                class="tiptapify-slash-picker__item"
-                :title="charItem.name"
-                @click="handleCharacterClick(charItem)"
+              v-for="charItem in item.items"
+              :key="charItem.char"
+              class="tiptapify-slash-picker__item"
+              :title="charItem.name"
+              @click="handleCharacterClick(charItem)"
             >
               {{ charItem.char }}
             </button>

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

@@ -1,17 +1,19 @@
 <script lang="ts" setup>
 import * as mdi from '@mdi/js'
-import { inject, Ref } from 'vue'
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import EmojiPicker from './Picker.vue';
+import { TiptapifyEditor, variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, PropType, Ref } from 'vue'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import { ComposerTranslation } from 'vue-i18n'
+import EmojiPicker from './Picker.vue'
 import defaults from '@tiptapify/constants/defaults'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
-const editor = inject('tiptapifyEditor') as Ref<any>
+const editor = inject('tiptapifyEditor') as Ref<TiptapifyEditor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 </script>
 
 <template>

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

@@ -62,10 +62,10 @@ watch(filter, filterEmoji)
   <div class="tiptapify-slash-picker">
     <div class="tiptapify-slash-picker__sidebar">
       <button
-          v-for="item in filteredEmojis"
-          :key="item.group"
-          :class="['tiptapify-slash-picker__tab', { 'tiptapify-slash-picker__tab--active': activeTab === item.group }]"
-          @click="activeTab = item.group"
+        v-for="item in filteredEmojis"
+        :key="item.group"
+        :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}`) }}
@@ -77,27 +77,29 @@ watch(filter, filterEmoji)
     <div class="tiptapify-slash-picker__content">
       <div class="tiptapify-slash-picker__search">
         <input
-            v-model="filter"
-            type="text"
-            placeholder="Search emoji..."
-            class="tiptapify-slash-picker__search-input"
-        />
-        <button v-if="filter" class="tiptapify-slash-picker__clear" @click="resetFilter">&times;</button>
+          v-model="filter"
+          type="text"
+          placeholder="Search emoji..."
+          class="tiptapify-slash-picker__search-input"
+        >
+        <button v-if="filter" class="tiptapify-slash-picker__clear" @click="resetFilter">
+          &times;
+        </button>
       </div>
 
       <div class="tiptapify-slash-picker__grid-container">
         <div
-            v-for="item in filteredEmojis"
-            :key="item.group"
-            class="tiptapify-slash-picker__group"
+          v-for="item in filteredEmojis"
+          :key="item.group"
+          class="tiptapify-slash-picker__group"
         >
           <div v-show="activeTab === item.group" class="tiptapify-slash-picker__grid">
             <button
-                v-for="emojiItem in item.emojis"
-                :key="emojiItem.char"
-                class="tiptapify-slash-picker__item"
-                :title="emojiItem.name"
-                @click="handleEmojiClick(emojiItem)"
+              v-for="emojiItem in item.emojis"
+              :key="emojiItem.char"
+              class="tiptapify-slash-picker__item"
+              :title="emojiItem.name"
+              @click="handleEmojiClick(emojiItem)"
             >
               {{ emojiItem.char }}
             </button>

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

@@ -1,31 +1,33 @@
 <script lang="ts" setup>
 
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import IframeDialog from "@tiptapify/extensions/components/media/iframe/IframeDialog.vue";
-import { inject, ref, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import IframeDialog from '@tiptapify/extensions/components/media/iframe/IframeDialog.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, PropType, ref, Ref, useTemplateRef } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
-const dialog = ref(null)
+const dialog = useTemplateRef('dialog')
 
 const icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M1 12h9.8L8.3 9.5l1.4-1.4l4.9 4.9l-4.9 4.9l-1.4-1.4l2.5-2.5H1zM21 2H3c-1.1 0-2 .9-2 2v6.1h2V6h18v14H3v-4H1v4c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2"/></svg>'
 </script>
 
 <template>
   <VBtn
-      :color="editor.isActive('iframe') ? 'primary' : ''"
-      :variant="variantBtn"
-      @click="dialog?.open()"
-      size="32"
+    :color="editor.isActive('iframe') ? 'primary' : ''"
+    :variant="variantBtn"
+    size="32"
+    @click="dialog?.open()"
   >
     <VTooltip activator="parent">
       {{ t('media.iframe') }}

package/src/extensions/components/media/iframe/IframeDialog.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
 
-import { Editor } from "@tiptap/vue-3";
-import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
-import defaults from "@tiptapify/constants/defaults";
+import { Editor } from '@tiptap/vue-3'
+import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
+import defaults from '@tiptapify/constants/defaults'
+import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
 
 import type { iframeOptions } from '@tiptapify/types/iframe'
 
-import { computed, inject, Ref, ref, watch } from 'vue'
+import { computed, inject, PropType, Ref, ref, useTemplateRef, watch } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default() { return defaults.variantBtn }},
-  variantField: { type: String, default() { return defaults.variantField }}
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
+  variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const generateIframeAttrs = (): iframeOptions => ({
   src: '',
@@ -28,7 +30,7 @@ const generateIframeAttrs = (): iframeOptions => ({
 const attrs = ref(generateIframeAttrs())
 const srcInvalid = ref(false)
 
-const dialog = ref(null)
+const dialog = useTemplateRef('dialog')
 
 const isDisabled = computed(() => {
   const { src } = attrs.value
@@ -138,30 +140,30 @@ watch(() => attrs.value.src, () => {
             <VRow>
               <VCol cols="12" md="6">
                 <VTextField
-                    v-model="attrs.width"
-                    type="number"
-                    density="compact"
-                    variant="outlined"
-                    :precision="0"
-                    :min="1"
-                    :label="t('dialog.iframe.width')"
+                  v-model="attrs.width"
+                  type="number"
+                  density="compact"
+                  variant="outlined"
+                  :precision="0"
+                  :min="1"
+                  :label="t('dialog.iframe.width')"
                 />
               </VCol>
 
               <VCol cols="12" md="6">
                 <VTextField
-                    v-model="attrs.height"
-                    type="number"
-                    density="compact"
-                    variant="outlined"
-                    :precision="0"
-                    :min="1"
-                    :label="t('dialog.iframe.height')"
+                  v-model="attrs.height"
+                  type="number"
+                  density="compact"
+                  variant="outlined"
+                  :precision="0"
+                  :min="1"
+                  :label="t('dialog.iframe.height')"
                 />
               </VCol>
 
               <VCol cols="12" class="ml-2">
-                <VSwitch v-model="attrs.frameborder" density="compact" :hideDetails="true" :label="t('dialog.iframe.frameborder')" />
+                <VSwitch v-model="attrs.frameborder" density="compact" :hide-details="true" :label="t('dialog.iframe.frameborder')" />
               </VCol>
             </VRow>
           </VCol>
@@ -173,12 +175,12 @@ watch(() => attrs.value.src, () => {
       <VCardActions>
         <VRow>
           <VCol class="d-flex justify-start">
-            <VBtn color="warning" v-if="editor.isActive('image')" :variant="variantBtn" :disabled="isDisabled" @click="clear">
+            <VBtn v-if="editor.isActive('image')" color="warning" :variant="variantBtn" :disabled="isDisabled" @click="clear">
               {{ t('dialog.clear') }}
             </VBtn>
           </VCol>
           <VCol class="d-flex justify-end">
-            <VBtn :variant="variantBtn" @click="close" class="mr-2">
+            <VBtn :variant="variantBtn" class="mr-2" @click="close">
               {{ t('dialog.close') }}
             </VBtn>
             <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">

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

@@ -1,29 +1,31 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import ImageDialog from "@tiptapify/extensions/components/media/image/ImageDialog.vue";
-import { inject, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import ImageDialog from '@tiptapify/extensions/components/media/image/ImageDialog.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, PropType, Ref } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 </script>
 
 <template>
   <VBtn
-      :color="editor.isActive('image') ? 'primary' : ''"
-      :variant="variantBtn"
-      @click="editor.commands.showTiptapifyImage()"
-      size="32"
+    :color="editor.isActive('image') ? 'primary' : ''"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.showTiptapifyImage()"
   >
     <VTooltip activator="parent">
       {{ t('media.image') }}