tiptapify 0.1.2 → 0.1.3

package/index.d.ts

@@ -1,15 +1,6 @@
-import { Editor } from "@tiptap/vue-3";
-import {
-  Component,
-  ComponentOptionsMixin, ComponentProvideOptions,
-  ComputedOptions, Directive,
-  EmitsOptions,
-  ExtractDefaultPropTypes,
-  MethodOptions,
-  PublicProps, SlotsType
-} from "@vue/runtime-core";
+import { Editor as TiptapEditor } from '@tiptap/vue-3'
 import type { DefineComponent } from 'vue'
-import { toolbarSections } from "./src/types/toolbarTypes";
+import { toolbarSections } from './src/types/toolbarTypes'
 
 export interface TiptapifyProps {
   content: string|object
@@ -31,26 +22,37 @@ export interface TiptapifyProps {
 }
 
 export interface TiptapifyEmits {
-  [key: string]: ((...args: any[]) => any) | null
+  [key: string]: ((...args: never[]) => never) | null
   'editor-ready': (options: {
     getHTML: () => string
-    getJSON: () => any
-    editor: Editor
+    getJSON: () => never
+    editor: TiptapEditor
   }) => void
 }
 
-export declare const Tiptapify: DefineComponent<TiptapifyProps, {}, {}, {}, {}, {}, {}, TiptapifyEmits>
+export declare const Tiptapify: DefineComponent<
+  TiptapifyProps,
+  object,
+  object,
+  Record<string, never>,
+  Record<string, never>,
+  object,
+  object,
+  TiptapifyEmits
+>
 
 export interface TiptapifyOptions {
-  locale?: string
+  i18n?: string
 }
 
 declare const TiptapifyPlugin: {
-  install: (app: any, options?: TiptapifyOptions) => void
+  install: (app: never, options?: TiptapifyOptions) => void
 }
 
 export default TiptapifyPlugin
 
+export { TiptapEditor }
+
 declare module '@vue/runtime-core' {
   interface GlobalComponents {
     Tiptapify: typeof Tiptapify

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -64,6 +64,7 @@
   "repository": "https://github.com/IVoyt/tiptapify",
   "packageManager": "pnpm@10.33.4",
   "dependencies": {
+    "@mdi/js": "^7.4.47",
     "@tiptap/core": "^3.23.5",
     "@tiptap/extension-blockquote": "^3.23.5",
     "@tiptap/extension-bold": "^3.23.5",
@@ -106,13 +107,12 @@
     "emoji.json": "^16.0.0",
     "highlight.js": "^11.11.1",
     "linkifyjs": "^4.3.2",
-    "lowlight": "^3.3.0",
-    "vue-i18n": "^11.3.0"
+    "lowlight": "^3.3.0"
   },
   "peerDependencies": {
-    "@mdi/js": "^7.4.47",
     "vue": "^3.5.14",
-    "vuetify": "^3.8.5 || ^4.0.0"
+    "vuetify": "^3.8.5 || ^4.0.0",
+    "vue-i18n": "^11.3.0"
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^11.1.1",

package/src/components/Tiptapify.vue

@@ -3,13 +3,13 @@
 import defaults from '@tiptapify/constants/defaults'
 import { itemsPropType, toolbarSections } from '@tiptapify/types/toolbarTypes'
 import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
-import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef, watch } from 'vue'
+import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef } from 'vue'
 import { default as Toolbar } from '@tiptapify/components/Toolbar/Index.vue'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 
-import { useLocale } from '@tiptapify/i18n'
+import { useI18n } from 'vue-i18n'
 
 import { getTiptapEditor } from '@tiptapify/components/index'
 
@@ -38,7 +38,7 @@ const props = defineProps({
   interactiveStyles: { type: Boolean, default() { return true } },
 })
 
-const { t, setLocale } = useLocale(props.locale)
+const { t } = useI18n()
 
 const appTheme = useTheme()
 const currentTheme = ref(appTheme.global.name)
@@ -57,7 +57,6 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
       editorInstance.interactiveStyles = props.interactiveStyles
       emit('editor-ready', {
         editor: editorInstance,
-        setLocale,
         getHTML: () => editorInstance.getHTML(),
         getJSON: () => editorInstance.getJSON(),
       })
@@ -67,14 +66,10 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
 const emit = defineEmits(['update:modelValue', 'editor-ready', 'content-changed'])
 
 provide('tiptapifyEditor', editor)
-provide('tiptapifyI18n', { t, setLocale })
+provide('tiptapifyI18n', { t })
 
 editor.value?.chain().setFontFamily(props.defaultFontFamily).run()
 
-watch(() => props.locale, () => {
-  setLocale(props.locale)
-})
-
 onBeforeUnmount(() => {
   editor.value?.destroy()
 })

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

@@ -1,9 +1,9 @@
 <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 { inject, Ref } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
 
@@ -19,14 +19,14 @@ const { t } = inject('tiptapifyI18n') as any
 
 <template>
   <VBtn
-      :color="editor.isActive('underline') ? 'primary' : ''"
-      :disabled="!editor.can().chain().focus().toggleUnderline().run()"
-      :variant="variantBtn"
-      @click="editor.commands.toggleUnderline()"
-      size="32"
+    :color="editor.isActive('underline') ? 'primary' : ''"
+    :disabled="!editor.can().chain().focus().toggleUnderline().run()"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.toggleUnderline()"
   >
     <VTooltip activator="parent">
-      {{ t('format.strike') }}
+      {{ t('format.underline') }}
     </VTooltip>
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatUnderline}`" />
   </VBtn>

package/src/extensions/slash-commands.ts

@@ -3,7 +3,8 @@ import { Editor } from '@tiptap/core'
 import Suggestion from '@tiptap/suggestion'
 import { VueRenderer, posToDOMRect } from '@tiptap/vue-3'
 import { computePosition, flip, shift } from '@floating-ui/dom'
-import { useLocale } from '@tiptapify/i18n'
+// import { useLocale } from '@tiptapify/i18n'
+import { useI18n } from 'vue-i18n'
 import CommandsList from '@tiptapify/extensions/components/slashCommands/CommandsList.vue'
 import PickerDialog from '@tiptapify/extensions/components/slashCommands/PickerDialog.vue'
 import { PickerEventBus } from '@tiptapify/extensions/PickerEventBus'
@@ -99,7 +100,7 @@ export default Extension.create<SlashCommandsExtensionOptions>(
           editor.chain().focus().deleteRange(range).run()
           closePicker()
 
-          const { t } = useLocale()
+          const { t } = useI18n()
 
           pickerComponent = new VueRenderer(PickerDialog, {
             props: {

package/src/i18n/index.ts

@@ -1,35 +1,7 @@
-import { createI18n } from 'vue-i18n'
-import { ref, computed } from 'vue'
-
 const messages = Object.fromEntries(
   Object.entries(
     import.meta.glob<{ default: any }>('./locales/*.json', { eager: true }))
     .map(([key, value]) => [key.slice(10, -5), value.default]),
 )
 
-export function useLocale(initialLocale: string = 'en') {
-  const currentLocale = ref(initialLocale)
-
-  const i18n = createI18n({
-    legacy: false,
-    locale: currentLocale.value,
-    fallbackLocale: 'en',
-    messages
-  })
-
-  const { t, locale } = i18n.global
-
-  const setLocale = (newLocale: string) => {
-    if (messages[newLocale]) {
-      currentLocale.value = newLocale
-      locale.value = newLocale
-    }
-  }
-
-  return {
-    i18n,
-    t,
-    locale: computed(() => currentLocale.value),
-    setLocale
-  }
-}
+export { messages }

package/src/index.ts

@@ -1,17 +1,33 @@
-import { Plugin } from 'vue';
-import Tiptapify from '@tiptapify/components/Tiptapify.vue';
-import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue';
+import { Plugin } from 'vue'
+import Tiptapify from '@tiptapify/components/Tiptapify.vue'
+import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
+
+import { Editor as TipTapEditor } from '@tiptap/vue-3'
+import { Node, mergeAttributes } from '@tiptap/core'
+
+import * as mdi from '@mdi/js'
+
+import { messages } from './i18n'
 
 interface PackageOptions {
-  locale?: string;
+  i18n?: any;
 }
 
 const TiptapifyPlugin: Plugin = {
   install(app, options: PackageOptions = {}) {
-    app.component('Tiptapify', Tiptapify);
-    app.component('TiptapifyDialog', TiptapifyDialog);
+    app.component('Tiptapify', Tiptapify)
+    app.component('TiptapifyDialog', TiptapifyDialog)
+
+    const i18n = options.i18n
+    for (const locale of Object.keys(messages)) {
+      i18n.global.mergeLocaleMessage(locale, messages[locale])
+    }
   }
-};
+}
+
+export { Tiptapify, TiptapifyDialog }
+export default TiptapifyPlugin
 
-export { Tiptapify, TiptapifyDialog };
-export default TiptapifyPlugin;
+export { mdi }
+export { TipTapEditor }
+export { Node, mergeAttributes }