tiptapify 0.0.12 → 0.0.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -29,7 +29,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:emojis": "tsx build-emojis.ts"
   },
   "keywords": [
     "vue",
@@ -44,58 +45,65 @@
     "tiptap slash command",
     "tiptap toolbar",
     "editor",
+    "editor toolbar",
     "material design",
+    "material design icons",
     "wysiwyg",
-    "markdown"
+    "wysiwyg toolbar",
+    "markdown",
+    "emoji",
+    "emoticons"
   ],
   "author": "Igor Voytovich",
   "license": "MIT",
   "repository": "https://github.com/IVoyt/tiptapify",
   "packageManager": "pnpm@10.12.1",
   "dependencies": {
-    "@tiptap/core": "^3.0.7",
-    "@tiptap/extension-blockquote": "^3.0.7",
-    "@tiptap/extension-bold": "^3.0.7",
-    "@tiptap/extension-bubble-menu": "^3.0.7",
-    "@tiptap/extension-code": "^3.0.7",
-    "@tiptap/extension-code-block": "^3.0.7",
-    "@tiptap/extension-code-block-lowlight": "^3.0.7",
-    "@tiptap/extension-color": "^3.0.7",
-    "@tiptap/extension-document": "^3.0.7",
-    "@tiptap/extension-floating-menu": "^3.0.7",
-    "@tiptap/extension-font-family": "^3.0.7",
-    "@tiptap/extension-hard-break": "^3.0.7",
-    "@tiptap/extension-heading": "^3.0.7",
-    "@tiptap/extension-highlight": "^3.0.7",
-    "@tiptap/extension-horizontal-rule": "^3.0.7",
-    "@tiptap/extension-image": "^3.0.7",
-    "@tiptap/extension-invisible-characters": "^3.0.7",
-    "@tiptap/extension-italic": "^3.0.7",
-    "@tiptap/extension-link": "^3.0.7",
-    "@tiptap/extension-list": "^3.0.7",
-    "@tiptap/extension-list-item": "^3.0.7",
-    "@tiptap/extension-paragraph": "^3.0.7",
-    "@tiptap/extension-placeholder": "^3.0.7",
-    "@tiptap/extension-strike": "^3.0.7",
-    "@tiptap/extension-subscript": "^3.0.7",
-    "@tiptap/extension-superscript": "^3.0.7",
-    "@tiptap/extension-table": "^3.0.7",
-    "@tiptap/extension-task-item": "^3.0.7",
-    "@tiptap/extension-task-list": "^3.0.7",
-    "@tiptap/extension-text": "^3.0.7",
-    "@tiptap/extension-text-align": "^3.0.7",
-    "@tiptap/extension-text-style": "^3.0.7",
-    "@tiptap/extension-typography": "^3.0.7",
-    "@tiptap/extension-underline": "^3.0.7",
-    "@tiptap/extensions": "^3.0.7",
-    "@tiptap/pm": "^3.0.7",
-    "@tiptap/starter-kit": "^3.0.7",
-    "@tiptap/suggestion": "^3.0.7",
-    "@tiptap/vue-3": "^3.0.7",
+    "@tiptap/core": "^3.0.9",
+    "@tiptap/extension-blockquote": "^3.0.9",
+    "@tiptap/extension-bold": "^3.0.9",
+    "@tiptap/extension-bubble-menu": "^3.0.9",
+    "@tiptap/extension-code": "^3.0.9",
+    "@tiptap/extension-code-block": "^3.0.9",
+    "@tiptap/extension-code-block-lowlight": "^3.0.9",
+    "@tiptap/extension-color": "^3.0.9",
+    "@tiptap/extension-document": "^3.0.9",
+    "@tiptap/extension-floating-menu": "^3.0.9",
+    "@tiptap/extension-font-family": "^3.0.9",
+    "@tiptap/extension-hard-break": "^3.0.9",
+    "@tiptap/extension-heading": "^3.0.9",
+    "@tiptap/extension-highlight": "^3.0.9",
+    "@tiptap/extension-horizontal-rule": "^3.0.9",
+    "@tiptap/extension-image": "^3.0.9",
+    "@tiptap/extension-invisible-characters": "^3.0.9",
+    "@tiptap/extension-italic": "^3.0.9",
+    "@tiptap/extension-link": "^3.0.9",
+    "@tiptap/extension-list": "^3.0.9",
+    "@tiptap/extension-list-item": "^3.0.9",
+    "@tiptap/extension-paragraph": "^3.0.9",
+    "@tiptap/extension-placeholder": "^3.0.9",
+    "@tiptap/extension-strike": "^3.0.9",
+    "@tiptap/extension-subscript": "^3.0.9",
+    "@tiptap/extension-superscript": "^3.0.9",
+    "@tiptap/extension-table": "^3.0.9",
+    "@tiptap/extension-task-item": "^3.0.9",
+    "@tiptap/extension-task-list": "^3.0.9",
+    "@tiptap/extension-text": "^3.0.9",
+    "@tiptap/extension-text-align": "^3.0.9",
+    "@tiptap/extension-text-style": "^3.0.9",
+    "@tiptap/extension-typography": "^3.0.9",
+    "@tiptap/extension-underline": "^3.0.9",
+    "@tiptap/extension-youtube": "^3.0.9",
+    "@tiptap/extensions": "^3.0.9",
+    "@tiptap/pm": "^3.0.9",
+    "@tiptap/starter-kit": "^3.0.9",
+    "@tiptap/suggestion": "^3.0.9",
+    "@tiptap/vue-3": "^3.0.9",
+    "emoji.json": "^16.0.0",
     "highlight.js": "^11.11.1",
-    "linkifyjs": "^4.3.1",
+    "linkifyjs": "^4.3.2",
     "lowlight": "^3.3.0",
-    "vue-i18n": "^11.1.10"
+    "vue-i18n": "^11.1.11"
   },
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
@@ -105,15 +113,16 @@
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@rollup/plugin-alias": "^5.1.1",
-    "@types/node": "^22.16.4",
+    "@types/node": "^22.17.0",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitejs/plugin-vue-jsx": "^4.2.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
     "sass-embedded": "^1.89.2",
-    "typescript": "^5.8.3",
+    "tsx": "^4.20.3",
+    "typescript": "^5.9.2",
     "unplugin-vue-components": "^28.8.0",
     "vite": "^6.3.5",
-    "vite-plugin-vuetify": "^2.1.1",
+    "vite-plugin-vuetify": "^2.1.2",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.1.4",
     "vue-tsc": "^2.2.12"

package/src/components/Footer.vue

@@ -2,14 +2,12 @@
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, ref, Ref } from "vue";
 
-import { useI18n } from "vue-i18n";
-
 const props = defineProps({
   showWordsCount: { type: Boolean, default: true },
   showCharactersCount: { type: Boolean, default: true },
 })
 
-const { t } = useI18n()
+const { t } = inject('tiptapifyI18n') as any
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/components/Tiptapify.vue

@@ -7,17 +7,19 @@ import { Editor, EditorContent } from '@tiptap/vue-3'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 
-import { useI18n } from "vue-i18n";
+import { useLocale } from "@tiptapify/i18n";
 
 import { getTiptapEditor } from "@tiptapify/components/index";
 
 import Footer from '@tiptapify/components/Footer.vue'
 import { useTheme } from "vuetify/framework";
 
-const { t } = useI18n();
+const { t, i18n, setLocale } = useLocale();
 
 const props = defineProps({
+  locale: { type: String, default () { return 'en' } },
   content: String|Object,
+  height: { type: Number, default () { return null } },
   variantBtn: { type: String, default () { return 'elevated' } },
   variantField: { type: String, default () { return 'solo' } },
   toolbar: { type: Boolean, default () { return true } },
@@ -48,6 +50,7 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
 const emit = defineEmits(['update:modelValue', 'editor-ready']);
 
 provide('tiptapifyEditor', editor)
+provide('tiptapifyI18n', { t, setLocale })
 
 editor.value?.chain().setFontFamily(props.defaultFontFamily).run()
 
@@ -61,6 +64,10 @@ watch(() => editor.value, (editorInstance) => {
   }
 }, { immediate: true });
 
+watch(() => props.locale, () => {
+  setLocale(props.locale)
+}, { immediate: true });
+
 onBeforeUnmount(() => {
   editor.value?.destroy()
 })
@@ -85,7 +92,7 @@ onBeforeUnmount(() => {
         </template>
 
         <div :class="`border border-t-0 rounded-b-${rounded}`">
-          <div class="pa-2 tiptapify-container">
+          <div class="pa-2 tiptapify-container resizable" :style="`${height > 0 ? `height: ${height}px` : ''}`">
             <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="currentTheme" />
 
             <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
@@ -131,6 +138,11 @@ onBeforeUnmount(() => {
   --border: 1px solid var(--gray-2);
 }
 
+.resizable {
+  resize: vertical;
+  overflow: auto;
+}
+
 /* Basic editor styles */
 .tiptap {
   :first-child {

package/src/components/Toolbar/GroupBtn.vue

@@ -2,7 +2,6 @@
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { defineProps, PropType } from 'vue'
 
-
 import { ToolbarItem } from '@tiptapify/types/toolbarItems'
 
 defineProps({

package/src/components/Toolbar/Toggle.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { defineProps, PropType } from 'vue'
-import { useI18n } from "vue-i18n";
+import { defineProps, inject, PropType } from 'vue'
 import * as mdi from '@mdi/js'
 
 import { ToolbarItemSection } from "@tiptapify/components/Toolbar/items";
@@ -10,7 +9,7 @@ defineProps({
   toolbarSection: { type: Object as PropType<ToolbarItemSection>, default() { return {} }}
 })
 
-const { t } = useI18n();
+const { t } = inject('tiptapifyI18n') as any
 
 </script>
 

package/src/components/Toolbar/defaultExtensionComponents.ts

@@ -1,11 +1,13 @@
 import { useImage } from "@tiptapify/composables/Toolbar/Media/useImage";
 import { useLink } from "@tiptapify/composables/Toolbar/Media/useLink";
+import { useVideo } from "@tiptapify/composables/Toolbar/Media/useVideo";
 import { usePreview } from "@tiptapify/composables/Toolbar/Misc/usePreview";
 import { useSource } from "@tiptapify/composables/Toolbar/Misc/useSource";
 import ImageDialog from "@tiptapify/extensions/components/ImageDialog.vue";
 import LinkDialog from "@tiptapify/extensions/components/LinkDialog.vue";
 import PreviewDialog from "@tiptapify/extensions/components/PreviewDialog.vue";
 import ShowSourceDialog from "@tiptapify/extensions/components/ShowSourceDialog.vue";
+import VideoDialog from "@tiptapify/extensions/components/VideoDialog.vue";
 import { extensionComponents } from "@tiptapify/types/extensionComponents";
 import { ToolbarSections } from "@tiptapify/types/toolbarSections";
 import { computed, markRaw } from "vue";
@@ -48,6 +50,16 @@ export function getDefaultComponents(variantField: string): extensionComponents
       name: useSource().name,
       tooltip: useSource().tooltip,
       icon: useSource().icon,
-    }
+    },
+    video: {
+      component: markRaw(VideoDialog),
+      componentProps: {
+        variantField: computed(() => variantField).value,
+      },
+      section: ToolbarSections.media,
+      name: useVideo().name,
+      tooltip: useVideo().tooltip,
+      icon: useVideo().icon,
+    },
   }
 }

package/src/components/UI/TiptapifyDialog.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 
 import * as mdi from "@mdi/js";
-import { nextTick, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
+import { inject, nextTick, ref, watch } from "vue";
 
 const props = defineProps({
   module: String,
@@ -11,7 +10,7 @@ const props = defineProps({
   maxWidth: { type: Number, default () { return 800 } },
 })
 
-const { t } = useI18n();
+const { t } = inject('tiptapifyI18n') as any
 
 defineExpose({ open, close })
 const emits = defineEmits(['closeDialog'])

package/src/components/editorExtensions.ts

@@ -16,6 +16,7 @@ import { HorizontalRule } from '@tiptap/extension-horizontal-rule'
 import { Typography } from '@tiptap/extension-typography'
 import { Highlight } from '@tiptap/extension-highlight'
 import { Image } from '@tiptap/extension-image'
+import { Youtube } from '@tiptap/extension-youtube'
 import { Superscript } from '@tiptap/extension-superscript'
 import { Subscript } from '@tiptap/extension-subscript'
 import { TextAlign } from '@tiptap/extension-text-align'
@@ -77,6 +78,10 @@ export function editorExtensions (placeholder: string, slashCommands: boolean, c
       defaultProtocol: 'https'
     }),
     Image,
+    Youtube.configure({
+      controls: true,
+      nocookie: true,
+    }),
     TiptapifyImage,
     Superscript,
     Subscript,

package/src/composables/Toolbar/Actions/useRedo.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useRedo() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Actions/useUndo.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useUndo() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Alignment/useAlignmentCenter.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useAlignmentCenter() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Alignment/useAlignmentJustify.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useAlignmentJustify() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Alignment/useAlignmentLeft.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useAlignmentLeft() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Alignment/useAlignmentRight.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useAlignmentRight() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Format/useBold.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useBold() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Format/useItalic.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useItalic() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Format/useStrike.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useStrike() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Format/useUnderline.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useUnderline() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/FormatExtra/useBlockquote.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useBlockquote() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/FormatExtra/useCode.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useCode() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/FormatExtra/useCodeBlock.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useCodeBlock() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/FormatExtra/useSub.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useSub() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/FormatExtra/useSup.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useSup() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/List/useBullet.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useBullet() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/List/useIndent.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useIndent() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/List/useNumbered.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useNumbered() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/List/useOutdent.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useOutdent() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/List/useTask.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useTask() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Media/useEmoji.ts

@@ -0,0 +1,19 @@
+import * as mdi from "@mdi/js";
+import Emoji from "@tiptapify/extensions/components/Emoji.vue";
+import { computed, inject, markRaw } from "vue";
+
+export function useEmoji() {
+  const { t } = inject('tiptapifyI18n') as any
+
+  return {
+    name: computed(() => t('media.emoji.title')),
+    tooltip: computed(() => t('media.emoji.title')),
+    icon: `mdiSvg:${mdi.mdiEmoticon}`,
+    enabled: true,
+    component: markRaw(Emoji),
+    props: {
+      persistent: false,
+      closeOnContentClick: false,
+    }
+  }
+}

package/src/composables/Toolbar/Media/useImage.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useImage() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Media/useLink.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useLink() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Media/useTable.ts

@@ -2,10 +2,9 @@ import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import TableBuilder from "@tiptapify/extensions/components/TableBuilder.vue";
 import { computed, inject, markRaw, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useTable() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>