tiptapify 0.2.6 → 0.3.1

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

@@ -2,16 +2,14 @@
 
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.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 { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, ref, Ref, useTemplateRef } 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>
 
@@ -29,13 +27,11 @@ const icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" vie
     size="32"
     @click="dialog?.open()"
   >
-    <VTooltip activator="parent">
-      {{ t('media.iframe') }}
-    </VTooltip>
+    <Tooltip :label="t('media.iframe')" />
     <BtnIcon :icon="icon" />
   </VBtn>
 
-  <IframeDialog ref="dialog" :variant-btn="variantBtn" />
+  <IframeDialog ref="dialog" />
 </template>
 
 <style lang="scss" scoped>

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

@@ -2,18 +2,14 @@
 
 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 { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 
 import type { iframeOptions } from '@tiptapify/types/iframe'
 
-import { computed, inject, PropType, Ref, ref, useTemplateRef, watch } from 'vue'
+import { computed, inject, Ref, ref, useTemplateRef, watch } from 'vue'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-  variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
-})
+const { variantBtn, variantField } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }

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

@@ -3,16 +3,14 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import ImageDialog from '@tiptapify/extensions/components/media/image/ImageDialog.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from '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,13 +25,11 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.commands.showTiptapifyImage()"
   >
-    <VTooltip activator="parent">
-      {{ t('media.image') }}
-    </VTooltip>
+    <Tooltip :label="t('media.image')" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiImage}`" />
   </VBtn>
 
-  <ImageDialog :variant-btn="variantBtn" />
+  <ImageDialog />
 </template>
 
 <style lang="scss" scoped>

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

@@ -3,16 +3,13 @@
 import * as mdi from '@mdi/js'
 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 Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 
-import { computed, inject, onMounted, onUnmounted, PropType, Ref, ref, useTemplateRef } from 'vue'
+import { computed, inject, onMounted, onUnmounted, Ref, ref, useTemplateRef } from 'vue'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-  variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
-})
+const { variantBtn, variantField } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
@@ -190,9 +187,7 @@ onUnmounted(() => {
               @click="keepRatio = !keepRatio"
             >
               <VIcon :icon="keepRatio ? `mdiSvg:${mdi.mdiLock}` : `mdiSvg:${mdi.mdiLockOpenVariant}`" />
-              <VTooltip activator="parent">
-                {{ t('dialog.image.keep_ratio') }}
-              </VTooltip>
+              <Tooltip :label="t('dialog.image.keep_ratio')" />
             </VBtn>
           </div>
         </div>

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

@@ -2,16 +2,15 @@
 
 import * as mdi from '@mdi/js'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import LinkDialog from '@tiptapify/extensions/components/media/link/LinkDialog.vue'
-import { TiptapifyEditor, variantBtnTypes } from '@tiptapify/types/editor'
-import { computed, inject, PropType, Ref } from 'vue'
+import { TiptapifyEditor } from '@tiptapify/types/editor'
+import { computed, inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 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<TiptapifyEditor>
 
@@ -28,13 +27,11 @@ const icon = computed(() => editor.value.isActive('tiptapifyLink') ? `mdiSvg:${m
     size="32"
     @click="editor.commands.showLink()"
   >
-    <VTooltip activator="parent">
-      {{ t('media.link') }}
-    </VTooltip>
+    <Tooltip :label="t('media.link')" />
     <BtnIcon :icon="icon" />
   </VBtn>
 
-  <LinkDialog :variant-btn="variantBtn" />
+  <LinkDialog />
 </template>
 
 <style lang="scss" scoped>

package/src/extensions/components/media/link/LinkDialog.vue

@@ -1,19 +1,15 @@
 <script setup lang="ts">
 
 import { Editor } from '@tiptap/vue-3'
-import defaults from '@tiptapify/constants/defaults'
-import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 import { isValidHref } from '@tiptapify/utils/validateHref'
 
-import { computed, inject, onMounted, onUnmounted, PropType, Ref, ref, useTemplateRef, watch } from 'vue'
+import { computed, inject, onMounted, onUnmounted, Ref, ref, useTemplateRef, watch } from 'vue'
 
 import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-  variantField: { type: String as PropType<variantFieldTypes>, default() { return 'outlined' } },
-})
+const { variantBtn, variantField } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }

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

@@ -3,18 +3,16 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import ColumnActions from '@tiptapify/extensions/components/media/table/ColumnActions.vue'
 import RowActions from '@tiptapify/extensions/components/media/table/RowActions.vue'
 import TableBuilder from '@tiptapify/extensions/components/media/table/TableBuilder.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from '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>
 
@@ -48,9 +46,7 @@ const columnActionsDisabled = () => {
   <VMenu :activator="`#tiptapify-table-button-${editor.instanceId}`" :close-on-content-click="false">
     <VList density="compact">
       <VListItem link>
-        <VTooltip activator="parent">
-          {{ t('media.tables.insertTable') }}
-        </VTooltip>
+        <Tooltip :label="t('media.tables.insertTable')" />
         <VListItemTitle class="d-flex justify-center align-center">
           <BtnIcon :icon="`mdiSvg:${mdi.mdiTablePlus}`" />
         </VListItemTitle>
@@ -68,18 +64,14 @@ const columnActionsDisabled = () => {
       </VListItem>
 
       <VListItem link :disabled="!editor.can().chain().focus().deleteTable().run()" @click="editor.chain().focus().deleteTable().run()">
-        <VTooltip activator="parent">
-          {{ t('media.tables.deleteTable') }}
-        </VTooltip>
+        <Tooltip :label="t('media.tables.deleteTable')" />
         <VListItemTitle class="d-flex justify-center align-center">
           <BtnIcon :icon="`mdiSvg:${mdi.mdiTableMinus}`" />
         </VListItemTitle>
       </VListItem>
 
       <VListItem link :disabled="rowActionsDisabled()">
-        <VTooltip activator="parent">
-          {{ t('media.tables.row') }}
-        </VTooltip>
+        <Tooltip :label="t('media.tables.row')" />
 
         <VListItemTitle class="d-flex justify-center align-center">
           <BtnIcon :icon="`mdiSvg:${mdi.mdiTableRow}`" />
@@ -89,9 +81,7 @@ const columnActionsDisabled = () => {
       </VListItem>
 
       <VListItem link :disabled="columnActionsDisabled()">
-        <VTooltip activator="parent">
-          {{ t('media.tables.col') }}
-        </VTooltip>
+        <Tooltip :label="t('media.tables.col')" />
 
         <VListItemTitle class="d-flex justify-center align-center">
           <BtnIcon :icon="`mdiSvg:${mdi.mdiTableColumn}`" />
@@ -101,9 +91,7 @@ const columnActionsDisabled = () => {
       </VListItem>
 
       <VListItem link :disabled="!editor.can().chain().focus().mergeCells().run()" @click="editor.chain().focus().mergeCells().run()">
-        <VTooltip activator="parent">
-          {{ t('media.tables.mergeCells') }}
-        </VTooltip>
+        <Tooltip :label="t('media.tables.mergeCells')" />
 
         <VListItemTitle class="d-flex justify-center align-center">
           <BtnIcon :icon="`mdiSvg:${mdi.mdiTableMergeCells}`" />
@@ -111,9 +99,7 @@ const columnActionsDisabled = () => {
       </VListItem>
 
       <VListItem link :disabled="!editor.can().chain().focus().splitCell().run()" @click="editor.chain().focus().splitCell().run()">
-        <VTooltip activator="parent">
-          {{ t('media.tables.splitCell') }}
-        </VTooltip>
+        <Tooltip :label="t('media.tables.splitCell')" />
 
         <VListItemTitle class="d-flex justify-center align-center">
           <BtnIcon :icon="`mdiSvg:${mdi.mdiTableSplitCell}`" />

package/src/extensions/components/media/table/ColumnActions.vue

@@ -3,6 +3,7 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import { inject, Ref } from 'vue'
 import { ComposerTranslation } from 'vue-i18n'
 
@@ -27,21 +28,15 @@ const columnCanDelete = () => {
   <VMenu submenu activator="parent" open-on-hover open-on-click>
     <VList>
       <VListItem link :disabled="!columnCanAddBefore()" @click="editor.chain().focus().addColumnBefore().run()">
-        <VTooltip activator="parent">
-          {{ t('media.tables.insertColBefore') }}
-        </VTooltip>
+        <Tooltip :label="t('media.tables.insertColBefore')" />
         <BtnIcon :icon="`mdiSvg:${mdi.mdiTableColumnPlusBefore}`" />
       </VListItem>
       <VListItem link :disabled="!columnCanAddAfter()" @click="editor.chain().focus().addColumnAfter().run()">
-        <VTooltip activator="parent">
-          {{ t('media.tables.insertColAfter') }}
-        </VTooltip>
+        <Tooltip :label="t('media.tables.insertColAfter')" />
         <BtnIcon :icon="`mdiSvg:${mdi.mdiTableColumnPlusAfter}`" />
       </VListItem>
       <VListItem link :disabled="!columnCanDelete()" @click="editor.chain().focus().deleteColumn().run()">
-        <VTooltip activator="parent">
-          {{ t('media.tables.deleteCol') }}
-        </VTooltip>
+        <Tooltip :label="t('media.tables.deleteCol')" />
         <BtnIcon :icon="`mdiSvg:${mdi.mdiTableColumnRemove}`" />
       </VListItem>
     </VList>

package/src/extensions/components/media/table/RowActions.vue

@@ -3,6 +3,7 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import { inject, Ref } from 'vue'
 import { ComposerTranslation } from 'vue-i18n'
 
@@ -27,21 +28,15 @@ const rowCanDelete = () => {
   <VMenu submenu activator="parent" open-on-hover open-on-click>
     <VList>
       <VListItem link :disabled="!rowCanAddBefore()" @click="editor.chain().focus().addRowBefore().run()">
-        <VTooltip activator="parent">
-          {{ t('media.tables.insertRowBefore') }}
-        </VTooltip>
+        <Tooltip :label="t('media.tables.insertRowBefore')" />
         <BtnIcon :icon="`mdiSvg:${mdi.mdiTableRowPlusBefore}`" />
       </VListItem>
       <VListItem link :disabled="!rowCanAddAfter()" @click="editor.chain().focus().addRowAfter().run()">
-        <VTooltip activator="parent">
-          {{ t('media.tables.insertRowAfter') }}
-        </VTooltip>
+        <Tooltip :label="t('media.tables.insertRowAfter')" />
         <BtnIcon :icon="`mdiSvg:${mdi.mdiTableRowPlusAfter}`" />
       </VListItem>
       <VListItem link :disabled="!rowCanDelete()" @click="editor.chain().focus().deleteRow().run()">
-        <VTooltip activator="parent">
-          {{ t('media.tables.deleteRow') }}
-        </VTooltip>
+        <Tooltip :label="t('media.tables.deleteRow')" />
         <BtnIcon :icon="`mdiSvg:${mdi.mdiTableRowRemove}`" />
       </VListItem>
     </VList>

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

@@ -2,16 +2,14 @@
 
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import VideoDialog from '@tiptapify/extensions/components/media/video/VideoDialog.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from '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,13 +25,11 @@ const icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" vie
     size="32"
     @click="editor.commands.showTiptapifyVideo()"
   >
-    <VTooltip activator="parent">
-      {{ t('media.video') }}
-    </VTooltip>
+    <Tooltip :label="t('media.video')" />
     <BtnIcon :icon="icon" />
   </VBtn>
 
-  <VideoDialog :variant-btn="variantBtn" />
+  <VideoDialog />
 </template>
 
 <style lang="scss" scoped>

package/src/extensions/components/media/video/VideoDialog.vue

@@ -2,16 +2,12 @@
 
 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 { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 
-import { computed, inject, onMounted, onUnmounted, PropType, Ref, ref, useTemplateRef } from 'vue'
+import { computed, inject, onMounted, onUnmounted, Ref, ref, useTemplateRef } from 'vue'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-  variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
-})
+const { variantBtn, variantField } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }

package/src/extensions/components/misc/break/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>
 
@@ -21,9 +19,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 <template>
   <VBtn size="32" :variant="variantBtn" @click="editor.chain().focus().setHardBreak().run()">
-    <VTooltip activator="parent">
-      {{ t('format.break') }}
-    </VTooltip>
+    <Tooltip :label="t('format.break')" hotkey="Mod-Enter" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatPageBreak}`" />
   </VBtn>
 </template>

package/src/extensions/components/misc/formatClear/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 }
     color=""
     @click="editor.chain().focus().unsetAllMarks().clearNodes().run()"
   >
-    <VTooltip activator="parent">
-      {{ t('format.formatClear') }}
-    </VTooltip>
+    <Tooltip :label="t('format.formatClear')" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatClear}`" />
   </VBtn>
 </template>

package/src/extensions/components/misc/fullscreen/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, nextTick, PropType, ref, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, nextTick, ref, 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>
 
@@ -50,9 +48,7 @@ async function changeEditorContainer(source: string, target: string) {
     :variant="variantBtn"
     @click="showDialog ? dialogClose() : dialogOpen()"
   >
-    <VTooltip activator="parent">
-      {{ t('misc.fullscreen') }}
-    </VTooltip>
+    <Tooltip :label="t('misc.fullscreen')" />
     <BtnIcon :icon="showDialog ? `mdiSvg:${mdi.mdiFullscreenExit}` : `mdiSvg:${mdi.mdiFullscreen}`" />
   </VBtn>
 

package/src/extensions/components/misc/invisibleChar/Button.vue

@@ -2,15 +2,13 @@
 
 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 icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><pat
     size="32"
     @click="editor.commands.toggleInvisibleCharacters()"
   >
-    <VTooltip activator="parent">
-      {{ t('misc.toggleInvisibleCharacters') }}
-    </VTooltip>
+    <Tooltip :label="t('misc.toggleInvisibleCharacters')" />
     <BtnIcon :icon="icon" />
   </VBtn>
 </template>

package/src/extensions/components/misc/line/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 }
     :variant="variantBtn"
     @click="editor.chain().focus().setHorizontalRule().run()"
   >
-    <VTooltip activator="parent">
-      {{ t('format.line') }}
-    </VTooltip>
+    <Tooltip :label="t('format.line')" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiMinus}`" />
   </VBtn>
 </template>

package/src/extensions/components/misc/preview/Button.vue

@@ -3,16 +3,14 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, ref, Ref, useTemplateRef } from 'vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, ref, Ref, useTemplateRef } 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>
 
@@ -24,9 +22,7 @@ const dialog = useTemplateRef('dialog')
 
 <template>
   <VBtn size="32" color="" :variant="variantBtn" @click="dialog.open()">
-    <VTooltip activator="parent">
-      {{ t('misc.preview') }}
-    </VTooltip>
+    <Tooltip :label="t('misc.preview')" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFileEyeOutline}`" />
   </VBtn>
 

package/src/extensions/components/misc/source/Button.vue

@@ -2,16 +2,14 @@
 
 import * as mdi from '@mdi/js'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import ShowSourceDialog from '@tiptapify/extensions/components/misc/source/ShowSourceDialog.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, ref, useTemplateRef } from 'vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, ref, useTemplateRef } 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 { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
@@ -25,13 +23,11 @@ function showDialog() {
 
 <template>
   <VBtn size="32" color="" :variant="variantBtn" @click="showDialog()">
-    <VTooltip activator="parent">
-      {{ t('misc.source') }}
-    </VTooltip>
+    <Tooltip :label="t('misc.source')" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiCodeTags}`" />
   </VBtn>
 
-  <ShowSourceDialog ref="dialog" :variant-btn="variantBtn" />
+  <ShowSourceDialog ref="dialog" />
 </template>
 
 <style lang="scss" scoped>