diff --git a/packages/vue-2/src/BubbleMenu.ts b/packages/vue-2/src/BubbleMenu.ts index b97477a4..061f6d26 100644 --- a/packages/vue-2/src/BubbleMenu.ts +++ b/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) }, -}) +} diff --git a/packages/vue-2/src/EditorContent.ts b/packages/vue-2/src/EditorContent.ts index 0fcb6ca5..b1a8817e 100644 --- a/packages/vue-2/src/EditorContent.ts +++ b/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, }) }, -}) +} diff --git a/packages/vue-2/src/FloatingMenu.ts b/packages/vue-2/src/FloatingMenu.ts index e8c054ea..52619f1a 100644 --- a/packages/vue-2/src/FloatingMenu.ts +++ b/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) }, -}) +} diff --git a/packages/vue-2/src/NodeViewContent.ts b/packages/vue-2/src/NodeViewContent.ts index b356ed1c..25110254 100644 --- a/packages/vue-2/src/NodeViewContent.ts +++ b/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({ }, ) }, -}) +} diff --git a/packages/vue-2/src/NodeViewWrapper.ts b/packages/vue-2/src/NodeViewWrapper.ts index c67bd24e..c8c2563d 100644 --- a/packages/vue-2/src/NodeViewWrapper.ts +++ b/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, ) }, -}) +}