feat: better types for Vue 2

packages/vue-2/src/BubbleMenu.ts

@@ -1,7 +1,12 @@
-import Vue, { PropType } from 'vue'
+import Vue, { Component, PropType } from 'vue'
 import { BubbleMenuPlugin, BubbleMenuPluginKey, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
 
-export const BubbleMenu = Vue.extend({
+interface BubleMenuInterface extends Vue {
+  tippyOptions: BubbleMenuPluginProps['tippyOptions'],
+  editor: BubbleMenuPluginProps['editor']
+}
+
+export const BubbleMenu: Component = {
   name: 'BubbleMenu',
 
   props: {
@@ -19,7 +24,7 @@ export const BubbleMenu = Vue.extend({
   watch: {
     editor: {
       immediate: true,
-      handler(editor: BubbleMenuPluginProps['editor']) {
+      handler(this: BubleMenuInterface, editor: BubbleMenuPluginProps['editor']) {
         if (!editor) {
           return
         }
@@ -35,11 +40,11 @@ export const BubbleMenu = Vue.extend({
     },
   },
 
-  render(createElement) {
+  render(this: BubleMenuInterface, createElement) {
     return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)
   },
 
-  beforeDestroy() {
+  beforeDestroy(this: BubleMenuInterface) {
     this.editor.unregisterPlugin(BubbleMenuPluginKey)
   },
-})
+}

packages/vue-2/src/EditorContent.ts

@@ -1,7 +1,12 @@
-import Vue, { PropType } from 'vue'
+import Vue, { PropType, Component } from 'vue'
 import { Editor } from './Editor'
 
-export const EditorContent = Vue.extend({
+interface EditorContentInterface extends Vue {
+  editor: Editor
+}
+
+/** @this Component */
+export const EditorContent: Component = {
   name: 'EditorContent',
 
   props: {
@@ -14,7 +19,7 @@ export const EditorContent = Vue.extend({
   watch: {
     editor: {
       immediate: true,
-      handler(editor: Editor) {
+      handler(this: EditorContentInterface, editor: Editor) {
         if (editor && editor.options.element) {
           this.$nextTick(() => {
             const element = this.$el
@@ -24,7 +29,6 @@ export const EditorContent = Vue.extend({
             }
 
             element.appendChild(editor.options.element.firstChild)
-
             editor.contentComponent = this
 
             editor.setOptions({
@@ -43,6 +47,7 @@ export const EditorContent = Vue.extend({
   },
 
   beforeDestroy() {
+    // @ts-ignore
     const { editor } = this
 
     if (!editor.isDestroyed) {
@@ -65,4 +70,4 @@ export const EditorContent = Vue.extend({
       element: newElement,
     })
   },
-})
+}

packages/vue-2/src/FloatingMenu.ts

@@ -1,7 +1,12 @@
-import Vue, { PropType } from 'vue'
+import Vue, { Component, PropType } from 'vue'
 import { FloatingMenuPlugin, FloatingMenuPluginKey, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
 
-export const FloatingMenu = Vue.extend({
+interface FloatingMenuInterface extends Vue {
+  tippyOptions: FloatingMenuPluginProps['tippyOptions'],
+  editor: FloatingMenuPluginProps['editor']
+}
+
+export const FloatingMenu: Component = {
   name: 'FloatingMenu',
 
   props: {
@@ -19,7 +24,7 @@ export const FloatingMenu = Vue.extend({
   watch: {
     editor: {
       immediate: true,
-      handler(editor: FloatingMenuPluginProps['editor']) {
+      handler(this: FloatingMenuInterface, editor: FloatingMenuPluginProps['editor']) {
         if (!editor) {
           return
         }
@@ -35,11 +40,11 @@ export const FloatingMenu = Vue.extend({
     },
   },
 
-  render(createElement) {
+  render(this: FloatingMenuInterface, createElement) {
     return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)
   },
 
-  beforeDestroy() {
+  beforeDestroy(this: FloatingMenuInterface) {
     this.editor.unregisterPlugin(FloatingMenuPluginKey)
   },
-})
+}

packages/vue-2/src/NodeViewContent.ts

@@ -1,6 +1,10 @@
-import Vue from 'vue'
+import Vue, { Component } from 'vue'
 
-export const NodeViewContent = Vue.extend({
+interface NodeViewContentInterface extends Vue {
+  as: string
+}
+
+export const NodeViewContent: Component = {
   props: {
     as: {
       type: String,
@@ -8,7 +12,7 @@ export const NodeViewContent = Vue.extend({
     },
   },
 
-  render(createElement) {
+  render(this: NodeViewContentInterface, createElement) {
     return createElement(
       this.as, {
         style: {
@@ -20,4 +24,4 @@ export const NodeViewContent = Vue.extend({
       },
     )
   },
-})
+}

packages/vue-2/src/NodeViewWrapper.ts

@@ -1,6 +1,16 @@
-import Vue from 'vue'
+import Vue, { Component } from 'vue'
 
-export const NodeViewWrapper = Vue.extend({
+interface DecorationClass {
+  value: string
+}
+
+interface NodeViewWrapperInterface extends Vue {
+  as: string,
+  decorationClasses: DecorationClass,
+  onDragStart: Function
+}
+
+export const NodeViewWrapper: Component = {
   props: {
     as: {
       type: String,
@@ -10,10 +20,9 @@ export const NodeViewWrapper = Vue.extend({
 
   inject: ['onDragStart', 'decorationClasses'],
 
-  render(createElement) {
+  render(this: NodeViewWrapperInterface, createElement) {
     return createElement(
       this.as, {
-        // @ts-ignore
         class: this.decorationClasses.value,
         style: {
           whiteSpace: 'normal',
@@ -22,11 +31,10 @@ export const NodeViewWrapper = Vue.extend({
           'data-node-view-wrapper': '',
         },
         on: {
-          // @ts-ignore
           dragstart: this.onDragStart,
         },
       },
       this.$slots.default,
     )
   },
-})
+}