tiptapify 0.1.0 → 0.1.2

package/index.d.ts

@@ -1,4 +1,13 @@
 import { Editor } from "@tiptap/vue-3";
+import {
+  Component,
+  ComponentOptionsMixin, ComponentProvideOptions,
+  ComputedOptions, Directive,
+  EmitsOptions,
+  ExtractDefaultPropTypes,
+  MethodOptions,
+  PublicProps, SlotsType
+} from "@vue/runtime-core";
 import type { DefineComponent } from 'vue'
 import { toolbarSections } from "./src/types/toolbarTypes";
 
@@ -22,6 +31,7 @@ export interface TiptapifyProps {
 }
 
 export interface TiptapifyEmits {
+  [key: string]: ((...args: any[]) => any) | null
   'editor-ready': (options: {
     getHTML: () => string
     getJSON: () => any
@@ -31,7 +41,6 @@ export interface TiptapifyEmits {
 
 export declare const Tiptapify: DefineComponent<TiptapifyProps, {}, {}, {}, {}, {}, {}, TiptapifyEmits>
 
-// Плагин
 export interface TiptapifyOptions {
   locale?: string
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "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,45 +64,45 @@
   "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",
+    "@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",
@@ -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, watch } 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 { useLocale } from '@tiptapify/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, setLocale } = useLocale(props.locale)
+
 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,36 +52,27 @@ 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,
+        setLocale,
+        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 })
 
 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(() => {
@@ -99,15 +85,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,
   })
 }