tiptapify 0.1.3 → 0.1.5

package/src/extensions/components/CodeBlockComponent.vue

@@ -20,14 +20,14 @@ const selectedLanguage = computed({
 
 <template>
   <NodeViewWrapper class="code-block">
-    <select contenteditable="false" v-model="selectedLanguage">
+    <select v-model="selectedLanguage" contenteditable="false">
       <option :value="null">
         auto
       </option>
       <option disabled>
         —
       </option>
-      <option v-for="(language, index) in languages" :value="language" :key="index">
+      <option v-for="(language, index) in languages" :key="index" :value="language">
         {{ language }}
       </option>
     </select>

package/src/extensions/components/actions/redo/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 { 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
-      :disabled="!editor.can().chain().focus().redo().run()"
-      size="32"
-      color=""
-      :variant="variantBtn"
-      @click="editor.chain().focus().redo().run()"
+    :disabled="!editor.can().chain().focus().redo().run()"
+    size="32"
+    color=""
+    :variant="variantBtn"
+    @click="editor.chain().focus().redo().run()"
   >
     <VTooltip activator="parent">
       {{ t('action.redo') }}

package/src/extensions/components/actions/undo/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 { 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
-      :disabled="!editor.can().chain().focus().undo().run()"
-      size="32"
-      color=""
-      :variant="variantBtn"
-      @click="editor.chain().focus().undo().run()"
+    :disabled="!editor.can().chain().focus().undo().run()"
+    size="32"
+    color=""
+    :variant="variantBtn"
+    @click="editor.chain().focus().undo().run()"
   >
     <VTooltip activator="parent">
       {{ t('action.undo') }}

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

@@ -1,28 +1,30 @@
 <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
-      :color="editor.isActive({ textAlign: 'center' }) ? 'primary' : ''"
-      :variant="variantBtn"
-      @click="editor.chain().focus().toggleTextAlign('center').run()"
-      size="32"
+    :color="editor.isActive({ textAlign: 'center' }) ? 'primary' : ''"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.chain().focus().toggleTextAlign('center').run()"
   >
     <VTooltip activator="parent">
       {{ t('alignments.center') }}

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

@@ -1,28 +1,30 @@
 <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
-      :color="editor.isActive({ textAlign: 'justify' }) ? 'primary' : ''"
-      :variant="variantBtn"
-      @click="editor.chain().focus().toggleTextAlign('justify').run()"
-      size="32"
+    :color="editor.isActive({ textAlign: 'justify' }) ? 'primary' : ''"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.chain().focus().toggleTextAlign('justify').run()"
   >
     <VTooltip activator="parent">
       {{ t('alignments.justify') }}

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

@@ -1,28 +1,30 @@
 <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
-      :color="editor.isActive({ textAlign: 'left' }) ? 'primary' : ''"
-      :variant="variantBtn"
-      @click="editor.chain().focus().toggleTextAlign('left').run()"
-      size="32"
+    :color="editor.isActive({ textAlign: 'left' }) ? 'primary' : ''"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.chain().focus().toggleTextAlign('left').run()"
   >
     <VTooltip activator="parent">
       {{ t('alignments.left') }}

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

@@ -1,28 +1,30 @@
 <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
-      :color="editor.isActive({ textAlign: 'right' }) ? 'primary' : ''"
-      :variant="variantBtn"
-      @click="editor.chain().focus().toggleTextAlign('right').run()"
-      size="32"
+    :color="editor.isActive({ textAlign: 'right' }) ? 'primary' : ''"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.chain().focus().toggleTextAlign('right').run()"
   >
     <VTooltip activator="parent">
       {{ t('alignments.right') }}

package/src/extensions/components/format/bold/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 { 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
-      :color="editor.isActive('bold') ? 'primary' : ''"
-      :disabled="!editor.can().chain().focus().toggleBold().run()"
-      :variant="variantBtn"
-      @click="editor.commands.toggleBold()"
-      size="32"
+    :color="editor.isActive('bold') ? 'primary' : ''"
+    :disabled="!editor.can().chain().focus().toggleBold().run()"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.toggleBold()"
   >
     <VTooltip activator="parent">
       {{ t('format.bold') }}

package/src/extensions/components/format/italic/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 { 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
-      :color="editor.isActive('italic') ? 'primary' : ''"
-      :disabled="!editor.can().chain().focus().toggleItalic().run()"
-      :variant="variantBtn"
-      @click="editor.commands.toggleItalic()"
-      size="32"
+    :color="editor.isActive('italic') ? 'primary' : ''"
+    :disabled="!editor.can().chain().focus().toggleItalic().run()"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.toggleItalic()"
   >
     <VTooltip activator="parent">
       {{ t('format.italic') }}

package/src/extensions/components/format/strike/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 { 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
-      :color="editor.isActive('strike') ? 'primary' : ''"
-      :disabled="!editor.can().chain().focus().toggleStrike().run()"
-      :variant="variantBtn"
-      @click="editor.commands.toggleStrike()"
-      size="32"
+    :color="editor.isActive('strike') ? 'primary' : ''"
+    :disabled="!editor.can().chain().focus().toggleStrike().run()"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.toggleStrike()"
   >
     <VTooltip activator="parent">
       {{ t('format.strike') }}

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

@@ -3,17 +3,19 @@
 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 { 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>
 

package/src/extensions/components/formatExtra/code/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 { 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
-      :color="editor.isActive('code') ? 'primary' : ''"
-      :disabled="!editor.can().chain().focus().toggleCode().run()"
-      :variant="variantBtn"
-      @click="editor.commands.toggleCode()"
-      size="32"
+    :color="editor.isActive('code') ? 'primary' : ''"
+    :disabled="!editor.can().chain().focus().toggleCode().run()"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.toggleCode()"
   >
     <VTooltip activator="parent">
       {{ t('format.code') }}

package/src/extensions/components/formatExtra/codeBlock/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 { 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
-      :color="editor.isActive('codeBlock') ? 'primary' : ''"
-      :disabled="!editor.can().chain().focus().toggleCodeBlock().run()"
-      :variant="variantBtn"
-      @click="editor.commands.toggleCodeBlock()"
-      size="32"
+    :color="editor.isActive('codeBlock') ? 'primary' : ''"
+    :disabled="!editor.can().chain().focus().toggleCodeBlock().run()"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.toggleCodeBlock()"
   >
     <VTooltip activator="parent">
       {{ t('format.codeblock') }}

package/src/extensions/components/formatExtra/quote/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 { 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
-      :color="editor.isActive('blockquote') ? 'primary' : ''"
-      :disabled="!editor.can().chain().focus().toggleBlockquote().run()"
-      :variant="variantBtn"
-      @click="editor.commands.toggleBlockquote()"
-      size="32"
+    :color="editor.isActive('blockquote') ? 'primary' : ''"
+    :disabled="!editor.can().chain().focus().toggleBlockquote().run()"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.toggleBlockquote()"
   >
     <VTooltip activator="parent">
       {{ t('format.blockquote') }}

package/src/extensions/components/formatExtra/sub/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 { 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
-      :color="editor.isActive('sub') ? 'primary' : ''"
-      :disabled="!editor.can().chain().focus().toggleSubscript().run()"
-      :variant="variantBtn"
-      @click="editor.commands.toggleSubscript()"
-      size="32"
+    :color="editor.isActive('sub') ? 'primary' : ''"
+    :disabled="!editor.can().chain().focus().toggleSubscript().run()"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.toggleSubscript()"
   >
     <VTooltip activator="parent">
       {{ t('format.sub') }}

package/src/extensions/components/formatExtra/sup/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 { 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
-      :color="editor.isActive('sup') ? 'primary' : ''"
-      :disabled="!editor.can().chain().focus().toggleSuperscript().run()"
-      :variant="variantBtn"
-      @click="editor.commands.toggleSuperscript()"
-      size="32"
+    :color="editor.isActive('sup') ? 'primary' : ''"
+    :disabled="!editor.can().chain().focus().toggleSuperscript().run()"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.toggleSuperscript()"
   >
     <VTooltip activator="parent">
       {{ t('format.sup') }}