tiptapify 0.0.13 → 0.0.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -45,54 +45,60 @@
     "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.8",
-    "@tiptap/extension-blockquote": "^3.0.8",
-    "@tiptap/extension-bold": "^3.0.8",
-    "@tiptap/extension-bubble-menu": "^3.0.8",
-    "@tiptap/extension-code": "^3.0.8",
-    "@tiptap/extension-code-block": "^3.0.8",
-    "@tiptap/extension-code-block-lowlight": "^3.0.8",
-    "@tiptap/extension-color": "^3.0.8",
-    "@tiptap/extension-document": "^3.0.8",
-    "@tiptap/extension-floating-menu": "^3.0.8",
-    "@tiptap/extension-font-family": "^3.0.8",
-    "@tiptap/extension-hard-break": "^3.0.8",
-    "@tiptap/extension-heading": "^3.0.8",
-    "@tiptap/extension-highlight": "^3.0.8",
-    "@tiptap/extension-horizontal-rule": "^3.0.8",
-    "@tiptap/extension-image": "^3.0.8",
-    "@tiptap/extension-invisible-characters": "^3.0.8",
-    "@tiptap/extension-italic": "^3.0.8",
-    "@tiptap/extension-link": "^3.0.8",
-    "@tiptap/extension-list": "^3.0.8",
-    "@tiptap/extension-list-item": "^3.0.8",
-    "@tiptap/extension-paragraph": "^3.0.8",
-    "@tiptap/extension-placeholder": "^3.0.8",
-    "@tiptap/extension-strike": "^3.0.8",
-    "@tiptap/extension-subscript": "^3.0.8",
-    "@tiptap/extension-superscript": "^3.0.8",
-    "@tiptap/extension-table": "^3.0.8",
-    "@tiptap/extension-task-item": "^3.0.8",
-    "@tiptap/extension-task-list": "^3.0.8",
-    "@tiptap/extension-text": "^3.0.8",
-    "@tiptap/extension-text-align": "^3.0.8",
-    "@tiptap/extension-text-style": "^3.0.8",
-    "@tiptap/extension-typography": "^3.0.8",
-    "@tiptap/extension-underline": "^3.0.8",
-    "@tiptap/extensions": "^3.0.8",
-    "@tiptap/pm": "^3.0.8",
-    "@tiptap/starter-kit": "^3.0.8",
-    "@tiptap/suggestion": "^3.0.8",
-    "@tiptap/vue-3": "^3.0.8",
+    "@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.2",

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,43 +64,41 @@ watch(() => editor.value, (editorInstance) => {
   }
 }, { immediate: true });
 
+watch(() => props.locale, () => {
+  setLocale(props.locale)
+}, { immediate: true });
+
 onBeforeUnmount(() => {
   editor.value?.destroy()
 })
 </script>
 
 <template>
-  <VContainer>
-    <VRow>
-      <VCol>
-        <template v-if="toolbar">
-          <Toolbar
-              v-if="editor"
-              :variant-btn="variantBtn"
-              :variant-field="variantField"
-              :font-measure="fontMeasure"
-              :items="items"
-              :items-exclude="itemsExclude"
-              :rounded="rounded"
-              :custom-extensions="customExtensions"
-              :theme="currentTheme"
-          />
-        </template>
-
-        <div :class="`border border-t-0 rounded-b-${rounded}`">
-          <div class="pa-2 tiptapify-container">
-            <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="currentTheme" />
-
-            <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
-
-            <EditorContent :editor="editor" class="tiptapify-editor" />
-          </div>
-
-          <Footer :show-words-count="showWordsCount" :show-characters-count="showCharactersCount" />
-        </div>
-      </VCol>
-    </VRow>
-  </VContainer>
+  <template v-if="toolbar">
+    <Toolbar
+        v-if="editor"
+        :variant-btn="variantBtn"
+        :variant-field="variantField"
+        :font-measure="fontMeasure"
+        :items="items"
+        :items-exclude="itemsExclude"
+        :rounded="rounded"
+        :custom-extensions="customExtensions"
+        :theme="currentTheme"
+    />
+  </template>
+
+  <div :class="`border border-t-0 rounded-b-${rounded}`">
+    <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" />
+
+      <EditorContent :editor="editor" class="tiptapify-editor" />
+    </div>
+
+    <Footer :show-words-count="showWordsCount" :show-characters-count="showCharactersCount" />
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -131,6 +132,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/Items.vue

@@ -19,8 +19,6 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(computed(() => props.items
     <template v-for="(toolbarSection, sectionKey) in toolbarItemsRef" :key="sectionKey">
       <Group v-if="toolbarSection.group" :variant="variantBtn" :toolbar-section="toolbarSection" />
 
-      <Toggle v-else-if="toolbarSection.toggle" :variant="variantBtn" :toolbar-section="toolbarSection" />
-
       <VBtn
           v-else
           v-for="(toolbarItem, itemKey) in toolbarSection.items"

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/Toolbar/items.ts

@@ -28,16 +28,11 @@ export function toolbarItems(
   const mediaItems = ref(useMediaItems())
 
   const allMenuItems: ToolbarItemSections = {
-    /**
-     * todo
-     *
-     * media (video)
-     */
     style: { group: true, items: styleItems.value },
     format: { group: true, items: formatItems.value },
     format_extra: { group: true, items: formatExtraItems.value },
     media: { group: true, items: mediaItems.value },
-    alignment: { toggle: true, items: alignmentItems.value },
+    alignment: { group: true, items: alignmentItems.value },
     list: { group: true, items: listItems.value },
     actions: { group: true, items: actionsItems.value },
     misc: { group: true, items: miscItems.value },

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

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

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>