tiptapify 0.1.1 → 0.1.3

package/index.d.ts

@@ -1,6 +1,6 @@
-import { Editor } from "@tiptap/vue-3";
+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
@@ -22,26 +22,37 @@ export interface TiptapifyProps {
 }
 
 export interface TiptapifyEmits {
+  [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.1",
+  "version": "0.1.3",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -29,6 +29,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "lint": "eslint resources/ts --fix --ext .ts,.js,.cjs,.vue,.tsx,.jsx",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build:charmap": "tsx build-charmap.ts",
     "build:emojis": "tsx build-emojis.ts",
@@ -63,55 +64,55 @@
   "repository": "https://github.com/IVoyt/tiptapify",
   "packageManager": "pnpm@10.33.4",
   "dependencies": {
-    "@tiptap/core": "^3.20.4",
-    "@tiptap/extension-blockquote": "^3.20.4",
-    "@tiptap/extension-bold": "^3.20.4",
-    "@tiptap/extension-bubble-menu": "^3.20.4",
-    "@tiptap/extension-code": "^3.20.4",
-    "@tiptap/extension-code-block": "^3.20.4",
-    "@tiptap/extension-code-block-lowlight": "^3.20.4",
-    "@tiptap/extension-color": "^3.20.4",
-    "@tiptap/extension-document": "^3.20.4",
-    "@tiptap/extension-floating-menu": "^3.20.4",
-    "@tiptap/extension-font-family": "^3.20.4",
-    "@tiptap/extension-hard-break": "^3.20.4",
-    "@tiptap/extension-heading": "^3.20.4",
-    "@tiptap/extension-highlight": "^3.20.4",
-    "@tiptap/extension-horizontal-rule": "^3.20.4",
-    "@tiptap/extension-image": "^3.20.4",
-    "@tiptap/extension-invisible-characters": "^3.20.4",
-    "@tiptap/extension-italic": "^3.20.4",
-    "@tiptap/extension-link": "^3.20.4",
-    "@tiptap/extension-list": "^3.20.4",
-    "@tiptap/extension-list-item": "^3.20.4",
-    "@tiptap/extension-paragraph": "^3.20.4",
-    "@tiptap/extension-placeholder": "^3.20.4",
-    "@tiptap/extension-strike": "^3.20.4",
-    "@tiptap/extension-subscript": "^3.20.4",
-    "@tiptap/extension-superscript": "^3.20.4",
-    "@tiptap/extension-table": "^3.20.4",
-    "@tiptap/extension-task-item": "^3.20.4",
-    "@tiptap/extension-task-list": "^3.20.4",
-    "@tiptap/extension-text": "^3.20.4",
-    "@tiptap/extension-text-align": "^3.20.4",
-    "@tiptap/extension-text-style": "^3.20.4",
-    "@tiptap/extension-typography": "^3.20.4",
-    "@tiptap/extension-underline": "^3.20.4",
-    "@tiptap/extension-youtube": "^3.20.4",
-    "@tiptap/extensions": "^3.20.4",
-    "@tiptap/pm": "^3.20.4",
-    "@tiptap/suggestion": "^3.20.4",
-    "@tiptap/vue-3": "^3.20.4",
+    "@mdi/js": "^7.4.47",
+    "@tiptap/core": "^3.23.5",
+    "@tiptap/extension-blockquote": "^3.23.5",
+    "@tiptap/extension-bold": "^3.23.5",
+    "@tiptap/extension-bubble-menu": "^3.23.5",
+    "@tiptap/extension-code": "^3.23.5",
+    "@tiptap/extension-code-block": "^3.23.5",
+    "@tiptap/extension-code-block-lowlight": "^3.23.5",
+    "@tiptap/extension-color": "^3.23.5",
+    "@tiptap/extension-document": "^3.23.5",
+    "@tiptap/extension-floating-menu": "^3.23.5",
+    "@tiptap/extension-font-family": "^3.23.5",
+    "@tiptap/extension-hard-break": "^3.23.5",
+    "@tiptap/extension-heading": "^3.23.5",
+    "@tiptap/extension-highlight": "^3.23.5",
+    "@tiptap/extension-horizontal-rule": "^3.23.5",
+    "@tiptap/extension-image": "^3.23.5",
+    "@tiptap/extension-invisible-characters": "^3.23.5",
+    "@tiptap/extension-italic": "^3.23.5",
+    "@tiptap/extension-link": "^3.23.5",
+    "@tiptap/extension-list": "^3.23.5",
+    "@tiptap/extension-list-item": "^3.23.5",
+    "@tiptap/extension-paragraph": "^3.23.5",
+    "@tiptap/extension-placeholder": "^3.23.5",
+    "@tiptap/extension-strike": "^3.23.5",
+    "@tiptap/extension-subscript": "^3.23.5",
+    "@tiptap/extension-superscript": "^3.23.5",
+    "@tiptap/extension-table": "^3.23.5",
+    "@tiptap/extension-task-item": "^3.23.5",
+    "@tiptap/extension-task-list": "^3.23.5",
+    "@tiptap/extension-text": "^3.23.5",
+    "@tiptap/extension-text-align": "^3.23.5",
+    "@tiptap/extension-text-style": "^3.23.5",
+    "@tiptap/extension-typography": "^3.23.5",
+    "@tiptap/extension-underline": "^3.23.5",
+    "@tiptap/extension-youtube": "^3.23.5",
+    "@tiptap/extensions": "^3.23.5",
+    "@tiptap/pm": "^3.23.5",
+    "@tiptap/suggestion": "^3.23.5",
+    "@tiptap/vue-3": "^3.23.5",
     "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",
@@ -119,10 +120,22 @@
     "@types/node": "^22.19.15",
     "@vitejs/plugin-vue": "^6.0.5",
     "@vitejs/plugin-vue-jsx": "^5.1.5",
+    "eslint": "^10.4.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-case-police": "^2.2.1",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-promise": "^7.3.0",
+    "eslint-plugin-regexp": "2.7.0",
+    "eslint-plugin-sonarjs": "1.0.4",
+    "eslint-plugin-unicorn": "^64.0.0",
+    "eslint-plugin-vue": "^10.9.1",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
     "sass-embedded": "^1.98.0",
+    "stylelint": "^17.12.0",
+    "stylelint-config-standard-scss": "14.0.0",
     "tsx": "^4.21.0",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.4",
     "unplugin-vue-components": "^28.8.0",
     "vite": "^7.3.1",
     "vite-plugin-vuetify": "^2.1.3",

package/src/components/Tiptapify.vue

@@ -1,22 +1,20 @@
 <script setup lang="ts">
 
-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 { default as Toolbar } from "@tiptapify/components/Toolbar/Index.vue";
+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 } 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";
+import { getTiptapEditor } from '@tiptapify/components/index'
 
 import Footer from '@tiptapify/components/Footer.vue'
-import { useTheme } from "vuetify/framework";
-
-const { t, i18n, setLocale } = useLocale();
+import { useTheme } from 'vuetify/framework'
 
 const props = defineProps({
   locale: { type: String, default () { return 'en' } },
@@ -25,7 +23,7 @@ const props = defineProps({
   variantBtn: { type: String, default () { return defaults.variantBtn } },
   variantField: { type: String, default () { return defaults.variantField } },
   toolbar: { type: Boolean, default () { return true } },
-  items: { type: [Array, Object as PropType<itemsPropType>], default() { return [] }},
+  items: { type: [Array, Object as PropType<itemsPropType>], default() { return [] } },
   itemsExclude: { type: Boolean, default() { return false } },
   bubbleMenu: { type: Boolean, default () { return true } },
   floatingMenu: { type: Boolean, default () { return true } },
@@ -40,14 +38,11 @@ const props = defineProps({
   interactiveStyles: { type: Boolean, default() { return true } },
 })
 
+const { t } = useI18n()
+
 const appTheme = useTheme()
 const currentTheme = ref(appTheme.global.name)
 
-const propsItems = computed(() => props.items)
-const propsItemsExclude = computed(() => props.itemsExclude)
-
-const interactiveStyles = computed(() => props.interactiveStyles)
-
 function contentChanged() {
   emit('content-changed', { html: editor.value?.getHTML(), json: editor.value?.getJSON() })
 }
@@ -57,38 +52,24 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
     computed(() => props.placeholder || t('content.placeholder')).value,
     props.slashCommands,
     props.customExtensions,
-    contentChanged
+    contentChanged,
+    (editorInstance) => {
+      editorInstance.interactiveStyles = props.interactiveStyles
+      emit('editor-ready', {
+        editor: editorInstance,
+        getHTML: () => editorInstance.getHTML(),
+        getJSON: () => editorInstance.getJSON(),
+      })
+    },
 )
 
-const emit = defineEmits(['update:modelValue', 'editor-ready', 'content-changed']);
+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(() => editor.value, (editorInstance) => {
-  if (editorInstance instanceof Editor) {
-    editor.value.interactiveStyles = interactiveStyles.value
-    emit('editor-ready', {
-      editor: editorInstance,
-      setLocale,
-      getHTML: () => editorInstance.getHTML(),
-      getJSON: () => editorInstance.getJSON(),
-    });
-  }
-}, { immediate: true });
-
-watch(() => props.locale, () => {
-  setLocale(props.locale)
-}, { immediate: true });
-
-watch(() => props.interactiveStyles, (_interactiveStyles) => {
-  if (editor.value instanceof Editor) {
-    editor.value.interactiveStyles = interactiveStyles
-  }
-})
-
 onBeforeUnmount(() => {
   editor.value?.destroy()
 })
@@ -99,15 +80,15 @@ onBeforeUnmount(() => {
     <div>
       <template v-if="toolbar">
         <Toolbar
-            v-if="editor"
-            :variant-btn="variantBtn"
-            :variant-field="variantField"
-            :font-measure="fontMeasure"
-            :items="propsItems"
-            :items-exclude="propsItemsExclude"
-            :rounded="rounded"
-            :custom-extensions="customExtensions"
-            :theme="currentTheme"
+          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>
 

package/src/components/index.ts

@@ -9,13 +9,15 @@ export function getTiptapEditor (
   placeholder: string,
   slashCommands: SlashCommandsConfig = true,
   customExtensions: toolbarSections,
-  onUpdate: Function = () => {}
+  onUpdate: Function = () => {},
+  onCreate?: (editor: Editor) => void,
 ): ShallowRef<Editor | undefined> {
   const extensions = editorExtensions(placeholder, slashCommands, customExtensions)
 
   return useEditor({
     content,
     extensions,
-    onUpdate: ({ editor }) => onUpdate()
+    onUpdate: ({ editor }) => onUpdate(),
+    onCreate: onCreate ? ({ editor }) => onCreate(editor) : undefined,
   })
 }

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 }