refactor(VuetifyTiptap): override configurations for duplicate extens…

…ions, update tsconfig

examples/App.vue

@@ -7,14 +7,24 @@
 <script setup lang="ts">
 import { computed, ref, unref } from 'vue'
 import { useTheme } from 'vuetify'
-import { locale, type VuetifyTiptapOnChange } from 'vuetify-pro-tiptap'
+import { BaseKit, Heading, locale, type VuetifyTiptapOnChange } from 'vuetify-pro-tiptap'
 import JsonEditorVue from 'json-editor-vue'
 
 import CustomLang from './components/CustomLang.vue'
 import preview from './extensions/preview'
 import { jsonValue } from './html'
 
-const extensions = [preview.configure({ spacer: true })]
+const extensions = [
+  preview.configure({ spacer: true }),
+  BaseKit.configure({
+    placeholder: {
+      placeholder: 'Placeholder...'
+    }
+  }),
+  Heading.configure({
+    levels: [1, 2, 3, 4]
+  })
+]
 
 const theme = useTheme()
 

examples/extensions/preview.ts

@@ -1,11 +1,9 @@
-import type { ButtonView, GeneralOptions } from 'vuetify-pro-tiptap'
+import type { GeneralOptions } from 'vuetify-pro-tiptap'
 import { Extension } from '@tiptap/core'
 
 import PreviewActionButton from '../components/PreviewActionButton.vue'
 
-export interface PreviewOptions extends GeneralOptions {
-  button: ButtonView
-}
+export type PreviewOptions = GeneralOptions<PreviewOptions>
 
 export default Extension.create<PreviewOptions>({
   name: 'preview',

src/components/VuetifyTiptap.vue

@@ -12,7 +12,7 @@ import { EDITOR_UPDATE_THROTTLE_WAIT_TIME, EDITOR_UPDATE_WATCH_THROTTLE_WAIT_TIM
 import { useMarkdownTheme, useProvideTiptapStore } from '@/hooks'
 import { useLocale } from '@/locales'
 import { VuetifyTiptapOnChange } from '@/type'
-import { getUnitWithPxAsDefault, hasExtension, isBoolean, isEqual, throttle } from '@/utils/utils'
+import { differenceBy, getUnitWithPxAsDefault, hasExtension, isBoolean, isEqual, throttle } from '@/utils/utils'
 
 type HandleKeyDown = NonNullable<EditorOptions['editorProps']['handleKeyDown']>
 type OnUpdate = NonNullable<EditorOptions['onUpdate']>
@@ -81,8 +81,17 @@ const { markdownThemeStyle } = useMarkdownTheme(
 )
 
 const sortExtensions = computed<AnyExtension[]>(() => {
-  const exts = [...state.extensions, ...props.extensions]
-  return exts.map((k, i) => k.configure({ sort: i }))
+  const diff = differenceBy(props.extensions, state.extensions, 'name')
+
+  // Override configurations for duplicate extensions
+  const exts = state.extensions.map((k, i) => {
+    const find = props.extensions.find(ext => ext.name === k.name)
+    if (!find) return k
+
+    return k.configure(find.options)
+  })
+
+  return [...exts, ...diff].map((k, i) => k.configure({ sort: i }))
 })
 
 const editor = new Editor({

src/utils/utils.ts

@@ -44,4 +44,4 @@ export function hasExtension(editor: Editor, name: string): boolean {
   return true
 }
 
-export { isEqual, throttle } from 'lodash-unified'
+export { differenceBy, isEqual, throttle } from 'lodash-unified'

tsconfig.json

@@ -14,8 +14,7 @@
     "types": ["vite/client", "vuetify"],
     "lib": ["esnext", "dom"],
     "paths": {
-      "@/*":["./src/*"],
-      "*": ["./node_modules/*"]
+      "@/*":["./src/*"]
     }
   },
   "vueCompilerOptions": {