feat(vue-demi): 兼容vue2.7.x

package.json

@@ -65,6 +65,11 @@
     "vue": "^2.6.0",
     "vuetify": "^2.0.0"
   },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
@@ -129,5 +134,8 @@
     "vue-types": "^4.1.1",
     "vuetify": "^2.6.7",
     "xss": "^1.0.13"
+  },
+  "dependencies": {
+    "vue-demi": "^0.13.5"
   }
 }

src/components/BubbleMenu/hooks/use-bubble.ts

@@ -1,4 +1,4 @@
-import { unref, computed } from '@vue/composition-api'
+import { unref, computed } from 'vue-demi'
 import type { Editor } from '@tiptap/vue-2'
 import { useLocale } from '@/locales'
 import type { Definitions } from '@/constants/toolbar-definitions'

src/components/BubbleMenu/index.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, unref } from '@vue/composition-api'
+import { computed, defineComponent, reactive, unref } from 'vue-demi'
 import { BubbleMenu } from '@tiptap/vue-2'
 import type { Editor, BubbleMenuInterface } from '@tiptap/vue-2'
 import { bool, object, array } from 'vue-types'

src/components/ColorPicker.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api'
+import { defineComponent, ref } from 'vue-demi'
 import { string, bool, oneOfType } from 'vue-types'
 import { mdiCircle } from '@/constants/icons'
 

src/components/TableMenu/CreateTablePopover.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, unref } from '@vue/composition-api'
+import { defineComponent, reactive, ref, unref } from 'vue-demi'
 import { bool } from 'vue-types'
 import { useLocale } from '@/locales'
 

src/components/TableMenu/index.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, unref } from '@vue/composition-api'
+import { computed, defineComponent, ref, unref } from 'vue-demi'
 import { object, bool } from 'vue-types'
 import type { Editor } from '@tiptap/vue-2'
 import * as icons from '@/constants/icons'

src/components/TipTapToolbar.vue

@@ -91,7 +91,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api'
+import { defineComponent, ref } from 'vue-demi'
 import { object, bool, array } from 'vue-types'
 import type { Editor } from '@tiptap/vue-2'
 import type { Definitions } from '@/constants/toolbar-definitions'

src/components/VuetifyTiptap.vue

@@ -59,8 +59,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, unref, computed, watch, onUnmounted } from '@vue/composition-api'
-import type { Ref } from '@vue/composition-api'
+import { defineComponent, ref, unref, computed, watch, onUnmounted } from 'vue-demi'
+import type { Ref } from 'vue-demi'
 import { string, bool, array, object, oneOfType } from 'vue-types'
 import throttle from 'lodash.throttle'
 import merge from 'lodash.merge'

src/components/VuetifyViewer.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, unref } from '@vue/composition-api'
+import { defineComponent, computed, unref } from 'vue-demi'
 import { string, object, bool, oneOfType } from 'vue-types'
 
 import xss from 'xss'

src/constants/toolbar-definitions.ts

@@ -1,4 +1,4 @@
-import { Ref, unref, computed } from '@vue/composition-api'
+import { Ref, unref, computed } from 'vue-demi'
 import type { Editor } from '@tiptap/vue-2'
 import { useLocale } from '@/locales'
 import * as icons from './icons'

src/extensions/image/Image.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, ref, unref } from '@vue/composition-api'
+import { computed, defineComponent, onMounted, onUnmounted, ref, unref } from 'vue-demi'
 import { NodeViewWrapper } from '@tiptap/vue-2'
 import { nodeViewProps } from '@/utils/node-view-props'
 import { bool } from 'vue-types'

src/extensions/image/ImageDialog.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, unref, onMounted, watchEffect } from '@vue/composition-api'
+import { computed, defineComponent, ref, unref, onMounted, watchEffect } from 'vue-demi'
 import { array, bool, func, object } from 'vue-types'
 import type { Editor } from '@tiptap/vue-2'
 import { useLocale } from '@/locales'

src/extensions/image/ImageUpload.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, unref } from '@vue/composition-api'
+import { defineComponent, ref, computed, unref } from 'vue-demi'
 import { func, object } from 'vue-types'
 import { mdiLinkVariant, mdiText } from '@/constants/icons'
 import type { ImageForm } from './types'

src/extensions/image/ImageUrl.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
+import { defineComponent, computed } from 'vue-demi'
 import { object, func } from 'vue-types'
 import { mdiLinkVariant, mdiText } from '@/constants/icons'
 import type { ImageForm } from './types'

src/extensions/image/show.ts

@@ -1,4 +1,4 @@
-import { createApp } from '@vue/composition-api'
+import { createApp } from 'vue-demi'
 import type { Editor } from '@tiptap/vue-2'
 import type { NodeSelection } from 'prosemirror-state'
 

src/extensions/link/LinkDialog.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, unref, computed, watchEffect } from '@vue/composition-api'
+import { defineComponent, ref, unref, computed, watchEffect } from 'vue-demi'
 import { string, bool, object } from 'vue-types'
 import type { Editor } from '@tiptap/vue-2'
 import { useLocale } from '@/locales'

src/extensions/link/show.ts

@@ -1,4 +1,4 @@
-import { createApp } from '@vue/composition-api'
+import { createApp } from 'vue-demi'
 import type { Editor } from '@tiptap/vue-2'
 
 import { getVuetifyInstance } from '@/utils/vuetify-instance'

src/extensions/video/VideoDialog.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, unref, computed, watchEffect } from '@vue/composition-api'
+import { defineComponent, ref, unref, computed, watchEffect } from 'vue-demi'
 import { string, bool, object } from 'vue-types'
 import type { Editor } from '@tiptap/vue-2'
 import { useLocale } from '@/locales'

src/extensions/video/show.ts

@@ -1,4 +1,4 @@
-import { createApp } from '@vue/composition-api'
+import { createApp } from 'vue-demi'
 import type { Editor } from '@tiptap/vue-2'
 
 import { getVuetifyInstance } from '@/utils/vuetify-instance'

src/hooks/use-context.ts

@@ -1,4 +1,4 @@
-import { getCurrentInstance } from '@vue/composition-api'
+import { getCurrentInstance } from 'vue-demi'
 
 export default function useContext() {
   const vm = getCurrentInstance()

src/index.ts

@@ -1,4 +1,4 @@
-import type { VueConstructor, PluginFunction } from 'vue'
+import type { Plugin } from 'vue-demi'
 import type { default as Vuetify } from 'vuetify/lib'
 import { setVuetifyInstance } from './utils/vuetify-instance'
 import Logger from './utils/logger'
@@ -12,7 +12,7 @@ import locale, { zhHans, en } from './locales'
 interface InstallationOptions {
   vuetify: Vuetify
   lang?: string
-  components?: Record<string, VueConstructor>
+  components?: Record<string, any>
   config?: Partial<StarterKitOptions>
 }
 
@@ -31,8 +31,8 @@ if (typeof window !== 'undefined' && window.Vue) {
   window.Vue.component('VuetifyViewer', VuetifyViewer)
 }
 
-const createVuetifyProTipTap = (opts: InstallationOptions): PluginFunction<InstallationOptions> => {
-  const install: PluginFunction<InstallationOptions> = (Vue): void => {
+const createVuetifyProTipTap = (opts: InstallationOptions): Plugin => {
+  const install: Plugin = (_Vue): void => {
     const { vuetify, lang, components = {}, config } = opts || {}
 
     if (!vuetify) {
@@ -43,9 +43,9 @@ const createVuetifyProTipTap = (opts: InstallationOptions): PluginFunction<Insta
     setVuetifyInstance(vuetify)
     if (lang) locale.setLang(lang)
 
-    Object.keys(components).forEach(key => Vue.component(key, components[key]))
+    Object.keys(components).forEach(key => _Vue.component(key, components[key]))
 
-    Vue.prototype.$vuetifyProTiptap = {
+    _Vue.prototype.$vuetifyProTiptap = {
       defaultLang: lang,
       config
     }

src/locales/index.ts

@@ -1,4 +1,4 @@
-import { unref, computed, onUnmounted, ref } from '@vue/composition-api'
+import { unref, computed, onUnmounted, ref } from 'vue-demi'
 import Logger from '@/utils/logger'
 import mitt, { EventType } from '@/utils/mitt'
 

vite.config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
     })
   ],
   optimizeDeps: {
-    include: ['vue', '@vue/composition-api', 'vuetify', 'vuetify/lib']
+    include: ['vue', 'vue-demi', 'vuetify', 'vuetify/lib']
   },
   resolve: {
     alias: {
@@ -44,12 +44,12 @@ export default defineConfig({
       output: {
         globals: {
           vue: 'Vue',
-          vueCompositionApi: '@vue/composition-api',
+          vueDemi: 'vue-demi',
           vuetify: 'Vuetify',
           'vuetify/lib': 'VuetifyLib'
         }
       },
-      external: ['vue', '@vue/composition-api', 'vuetify', 'vuetify/lib']
+      external: ['vue', 'vue-demi', 'vuetify', 'vuetify/lib']
     }
   }
 })