tiptapify 0.1.2 → 0.1.4

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.4",
   "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'
 
@@ -36,9 +36,14 @@ const props = defineProps({
   rounded: { type: String, default () { return '0' } },
   customExtensions: { type: Array as PropType<toolbarSections>, default() { return [] } },
   interactiveStyles: { type: Boolean, default() { return true } },
+  loading: { type: Boolean, default() { return false } },
+  loadingColor: { type: String, default() { return 'default' } },
+  loadingHeight: { type: String, default() { return '1px' } },
 })
 
-const { t, setLocale } = useLocale(props.locale)
+const loadingProgress = ref(0)
+
+const { t } = useI18n()
 
 const appTheme = useTheme()
 const currentTheme = ref(appTheme.global.name)
@@ -57,7 +62,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 +71,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()
 })
@@ -82,7 +82,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div :id="`tiptapify-editor-${editor?.instanceId}`">
-    <div>
+    <div :class="`border border-t-0 rounded-t-${rounded} rounded-b-${rounded}`">
       <template v-if="toolbar">
         <Toolbar
           v-if="editor"
@@ -97,17 +97,17 @@ onBeforeUnmount(() => {
         />
       </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" />
+      <VProgressLinear v-model="loadingProgress" :color="loadingColor" :height="loadingHeight" :indeterminate="loading" />
 
-          <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
+      <div class="pa-2 tiptapify-container resizable" :style="`${height > 0 ? `height: ${height}px` : ''}`">
+        <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="currentTheme" />
 
-          <EditorContent :editor="editor" class="tiptapify-editor" />
-        </div>
+        <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
 
-        <Footer :show-words-count="showWordsCount" :show-characters-count="showCharactersCount" />
+        <EditorContent :editor="editor" class="tiptapify-editor" />
       </div>
+
+      <Footer :show-words-count="showWordsCount" :show-characters-count="showCharactersCount" />
     </div>
   </div>
 </template>

package/src/components/Toolbar/Items.vue

@@ -1,22 +1,22 @@
 <script setup lang="ts">
 
-import defaults from "@tiptapify/constants/defaults";
+import defaults from '@tiptapify/constants/defaults'
 import { PropType } from 'vue'
 
-import { toolbarSections } from "@tiptapify/types/toolbarTypes";
+import { toolbarSections } from '@tiptapify/types/toolbarTypes'
 
 defineProps({
-  variantBtn: { type: String, default () { return defaults.variantBtn }},
-  items: { type: Array as PropType<toolbarSections>, default() { return {} }},
+  variantBtn: { type: String, default () { return defaults.variantBtn } },
+  items: { type: Array as PropType<toolbarSections>, default() { return {} } },
 })
 
 </script>
 
 <template>
-  <VToolbarItems class="py-2">
+  <VToolbarItems class="px-2 py-3">
     <template v-for="item in items" :key="item.section">
       <template v-if="item.section === '__separator__'">
-        <div class="menu-divider"></div>
+        <div class="menu-divider" />
       </template>
       <template v-else>
         <VBtnGroup v-if="item.group" elevation="4">
@@ -26,13 +26,13 @@ defineProps({
         </VBtnGroup>
         <template v-else>
           <component
+            :is="sectionItem.component"
             v-for="sectionItem in item.components"
             :key="sectionItem.name"
-            :is="sectionItem.component"
             v-bind="{ variantBtn, ...sectionItem.props ?? {} }"
           />
         </template>
-        <div class="menu-divider"></div>
+        <div class="menu-divider" />
       </template>
     </template>
   </VToolbarItems>

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 }