@tiptap/vue-2 2.0.0-beta.21 → 2.0.0-beta.210

package/src/NodeViewContent.ts

@@ -1,6 +1,10 @@
-import Vue from 'vue'
+import Vue, { Component } from 'vue'
 
-export const NodeViewContent = Vue.extend({
+export interface NodeViewContentInterface extends Vue {
+  as: string,
+}
+
+export const NodeViewContent: Component = {
   props: {
     as: {
       type: String,
@@ -8,16 +12,14 @@ export const NodeViewContent = Vue.extend({
     },
   },
 
-  render(createElement) {
-    return createElement(
-      this.as, {
-        style: {
-          whiteSpace: 'pre-wrap',
-        },
-        attrs: {
-          'data-node-view-content': '',
-        },
+  render(this: NodeViewContentInterface, createElement) {
+    return createElement(this.as, {
+      style: {
+        whiteSpace: 'pre-wrap',
+      },
+      attrs: {
+        'data-node-view-content': '',
       },
-    )
+    })
   },
-})
+}

package/src/NodeViewWrapper.ts

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

package/src/VueNodeViewRenderer.ts

@@ -2,53 +2,65 @@ import {
   NodeView,
   NodeViewProps,
   NodeViewRenderer,
+  NodeViewRendererOptions,
   NodeViewRendererProps,
 } from '@tiptap/core'
-import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
-import { Node as ProseMirrorNode } from 'prosemirror-model'
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { Decoration, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
 import Vue from 'vue'
-import { VueConstructor, PropType } from 'vue/types/umd'
+import { PropType, VueConstructor } from 'vue/types/umd'
+
 import { Editor } from './Editor'
 import { VueRenderer } from './VueRenderer'
 
 export const nodeViewProps = {
   editor: {
     type: Object as PropType<NodeViewProps['editor']>,
-    required: true,
+    required: true as const,
   },
   node: {
     type: Object as PropType<NodeViewProps['node']>,
-    required: true,
+    required: true as const,
   },
   decorations: {
     type: Object as PropType<NodeViewProps['decorations']>,
-    required: true,
+    required: true as const,
   },
   selected: {
     type: Boolean as PropType<NodeViewProps['selected']>,
-    required: true,
+    required: true as const,
   },
   extension: {
     type: Object as PropType<NodeViewProps['extension']>,
-    required: true,
+    required: true as const,
   },
   getPos: {
     type: Function as PropType<NodeViewProps['getPos']>,
-    required: true,
+    required: true as const,
   },
   updateAttributes: {
     type: Function as PropType<NodeViewProps['updateAttributes']>,
-    required: true,
+    required: true as const,
+  },
+  deleteNode: {
+    type: Function as PropType<NodeViewProps['deleteNode']>,
+    required: true as const,
   },
 }
 
-interface VueNodeViewRendererOptions {
-  stopEvent: ((event: Event) => boolean) | null,
-  update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
+export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
+  update:
+    | ((props: {
+        oldNode: ProseMirrorNode
+        oldDecorations: Decoration[]
+        newNode: ProseMirrorNode
+        newDecorations: Decoration[]
+        updateProps: () => void
+      }) => boolean)
+    | null
 }
 
-class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
-
+class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRendererOptions> {
   renderer!: VueRenderer
 
   decorationClasses!: {
@@ -64,6 +76,7 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
       extension: this.extension,
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+      deleteNode: () => this.deleteNode(),
     }
 
     const onDragStart = this.onDragStart.bind(this)
@@ -72,17 +85,18 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
       value: this.getDecorationClasses(),
     })
 
-    const Component = Vue
-      .extend(this.component)
-      .extend({
-        props: Object.keys(props),
-        provide: () => {
-          return {
-            onDragStart,
-            decorationClasses: this.decorationClasses,
-          }
-        },
-      })
+    // @ts-ignore
+    const vue = this.editor.contentComponent?.$options._base ?? Vue // eslint-disable-line
+
+    const Component = vue.extend(this.component).extend({
+      props: Object.keys(props),
+      provide: () => {
+        return {
+          onDragStart,
+          decorationClasses: this.decorationClasses,
+        }
+      },
+    })
 
     this.renderer = new VueRenderer(Component, {
       parent: this.editor.contentComponent,
@@ -95,7 +109,7 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
       throw Error('Please use the NodeViewWrapper component for your node view.')
     }
 
-    return this.renderer.element
+    return this.renderer.element as HTMLElement
   }
 
   get contentDOM() {
@@ -105,12 +119,29 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
 
     const contentElement = this.dom.querySelector('[data-node-view-content]')
 
-    return contentElement || this.dom
+    return (contentElement || this.dom) as HTMLElement | null
   }
 
   update(node: ProseMirrorNode, decorations: Decoration[]) {
+    const updateProps = (props?: Record<string, any>) => {
+      this.decorationClasses.value = this.getDecorationClasses()
+      this.renderer.updateProps(props)
+    }
+
     if (typeof this.options.update === 'function') {
-      return this.options.update(node, decorations)
+      const oldNode = this.node
+      const oldDecorations = this.decorations
+
+      this.node = node
+      this.decorations = decorations
+
+      return this.options.update({
+        oldNode,
+        oldDecorations,
+        newNode: node,
+        newDecorations: decorations,
+        updateProps: () => updateProps({ node, decorations }),
+      })
     }
 
     if (node.type !== this.node.type) {
@@ -123,8 +154,8 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
 
     this.node = node
     this.decorations = decorations
-    this.decorationClasses.value = this.getDecorationClasses()
-    this.renderer.updateProps({ node, decorations })
+
+    updateProps({ node, decorations })
 
     return true
   }
@@ -142,20 +173,24 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
   }
 
   getDecorationClasses() {
-    return this.decorations
-      // @ts-ignore
-      .map(item => item.type.attrs.class)
-      .flat()
-      .join(' ')
+    return (
+      this.decorations
+        // @ts-ignore
+        .map(item => item.type.attrs.class)
+        .flat()
+        .join(' ')
+    )
   }
 
   destroy() {
     this.renderer.destroy()
   }
-
 }
 
-export function VueNodeViewRenderer(component: Vue | VueConstructor, options?: Partial<VueNodeViewRendererOptions>): NodeViewRenderer {
+export function VueNodeViewRenderer(
+  component: Vue | VueConstructor,
+  options?: Partial<VueNodeViewRendererOptions>,
+): NodeViewRenderer {
   return (props: NodeViewRendererProps) => {
     // try to get the parent component
     // this is important for vue devtools to show the component hierarchy correctly
@@ -164,6 +199,6 @@ export function VueNodeViewRenderer(component: Vue | VueConstructor, options?: P
       return {}
     }
 
-    return new VueNodeView(component, props, options) as ProseMirrorNodeView
+    return new VueNodeView(component, props, options) as unknown as ProseMirrorNodeView
   }
 }

package/src/VueRenderer.ts

@@ -5,7 +5,7 @@ export class VueRenderer {
   ref!: Vue
 
   constructor(component: Vue | VueConstructor, props: any) {
-    const Component = Vue.extend(component)
+    const Component = (typeof component === 'function') ? component : Vue.extend(component)
 
     this.ref = new Component(props).$mount()
   }
@@ -20,8 +20,11 @@ export class VueRenderer {
     }
 
     // prevents `Avoid mutating a prop directly` error message
-    const originalSilent = Vue.config.silent
-    Vue.config.silent = true
+    // Fix: `VueNodeViewRenderer` change vue Constructor `config.silent` not working
+    const currentVueConstructor = this.ref.$props.editor?.contentComponent?.$options._base ?? Vue // eslint-disable-line
+    const originalSilent = currentVueConstructor.config.silent
+
+    currentVueConstructor.config.silent = true
 
     Object
       .entries(props)
@@ -29,7 +32,7 @@ export class VueRenderer {
         this.ref.$props[key] = value
       })
 
-    Vue.config.silent = originalSilent
+    currentVueConstructor.config.silent = originalSilent
   }
 
   destroy(): void {

package/src/index.ts

@@ -1,9 +1,9 @@
-export * from '@tiptap/core'
 export * from './BubbleMenu'
 export { Editor } from './Editor'
 export * from './EditorContent'
 export * from './FloatingMenu'
-export * from './VueRenderer'
-export * from './VueNodeViewRenderer'
-export * from './NodeViewWrapper'
 export * from './NodeViewContent'
+export * from './NodeViewWrapper'
+export * from './VueNodeViewRenderer'
+export * from './VueRenderer'
+export * from '@tiptap/core'

package/CHANGELOG.md

@@ -1,180 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [2.0.0-beta.21](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.20...@tiptap/vue-2@2.0.0-beta.21) (2021-04-23)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.20](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.19...@tiptap/vue-2@2.0.0-beta.20) (2021-04-22)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.19](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.18...@tiptap/vue-2@2.0.0-beta.19) (2021-04-21)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.18](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.17...@tiptap/vue-2@2.0.0-beta.18) (2021-04-16)
-
-
-### Features
-
-* add tippyOptions prop ([9a56f66](https://github.com/ueberdosis/tiptap/commit/9a56f666a118ca7c59a6f1f67f40e6490e20d3b8))
-* remove keepInBounds ([d7282f1](https://github.com/ueberdosis/tiptap/commit/d7282f168bc6cfae4e1630d14bb8462bc135b254))
-
-
-
-
-
-# [2.0.0-beta.17](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.16...@tiptap/vue-2@2.0.0-beta.17) (2021-04-15)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.16](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.15...@tiptap/vue-2@2.0.0-beta.16) (2021-04-08)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.15](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.14...@tiptap/vue-2@2.0.0-beta.15) (2021-04-08)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.14](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.13...@tiptap/vue-2@2.0.0-beta.14) (2021-04-03)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.13](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.12...@tiptap/vue-2@2.0.0-beta.13) (2021-04-01)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.12](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.11...@tiptap/vue-2@2.0.0-beta.12) (2021-04-01)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.11](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.10...@tiptap/vue-2@2.0.0-beta.11) (2021-04-01)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.10](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.9...@tiptap/vue-2@2.0.0-beta.10) (2021-04-01)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.9](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.8...@tiptap/vue-2@2.0.0-beta.9) (2021-03-31)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.8](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.7...@tiptap/vue-2@2.0.0-beta.8) (2021-03-31)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.7](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.6...@tiptap/vue-2@2.0.0-beta.7) (2021-03-31)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.6](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.5...@tiptap/vue-2@2.0.0-beta.6) (2021-03-28)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.5](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.4...@tiptap/vue-2@2.0.0-beta.5) (2021-03-24)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.4](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.3...@tiptap/vue-2@2.0.0-beta.4) (2021-03-18)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.3](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.2...@tiptap/vue-2@2.0.0-beta.3) (2021-03-17)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.2](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.1...@tiptap/vue-2@2.0.0-beta.2) (2021-03-16)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# [2.0.0-beta.1](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-alpha.1...@tiptap/vue-2@2.0.0-beta.1) (2021-03-05)
-
-**Note:** Version bump only for package @tiptap/vue-2
-
-
-
-
-
-# 2.0.0-alpha.1 (2021-02-28)
-
-**Note:** Version bump only for package @tiptap/vue-2

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020, überdosis GbR
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/packages/vue-2/src/BubbleMenu.d.ts

@@ -1,5 +0,0 @@
-import Vue from 'vue';
-export declare const BubbleMenu: import("vue/types/vue").ExtendedVue<Vue, unknown, unknown, unknown, {
-    editor: import("@tiptap/core").Editor;
-    tippyOptions: {} | undefined;
-}>;

package/dist/packages/vue-2/src/Editor.d.ts

@@ -1,5 +0,0 @@
-import { Editor as CoreEditor } from '@tiptap/core';
-import Vue from 'vue';
-export declare class Editor extends CoreEditor {
-    contentComponent: Vue | null;
-}

package/dist/packages/vue-2/src/EditorContent.d.ts

@@ -1,5 +0,0 @@
-import Vue from 'vue';
-import { Editor } from './Editor';
-export declare const EditorContent: import("vue/types/vue").ExtendedVue<Vue, unknown, unknown, unknown, {
-    editor: Editor;
-}>;

package/dist/packages/vue-2/src/FloatingMenu.d.ts

@@ -1,5 +0,0 @@
-import Vue from 'vue';
-export declare const FloatingMenu: import("vue/types/vue").ExtendedVue<Vue, unknown, unknown, unknown, {
-    editor: import("@tiptap/core").Editor;
-    tippyOptions: {} | undefined;
-}>;

package/dist/packages/vue-2/src/NodeViewContent.d.ts

@@ -1,4 +0,0 @@
-import Vue from 'vue';
-export declare const NodeViewContent: import("vue/types/vue").ExtendedVue<Vue, unknown, unknown, unknown, {
-    as: string;
-}>;

package/dist/packages/vue-2/src/NodeViewWrapper.d.ts

@@ -1,4 +0,0 @@
-import Vue from 'vue';
-export declare const NodeViewWrapper: import("vue/types/vue").ExtendedVue<Vue, unknown, unknown, unknown, {
-    as: string;
-}>;

package/dist/packages/vue-2/src/VueNodeViewRenderer.d.ts

@@ -1,43 +0,0 @@
-import { NodeViewRenderer } from '@tiptap/core';
-import { Decoration } from 'prosemirror-view';
-import { Node as ProseMirrorNode } from 'prosemirror-model';
-import Vue from 'vue';
-import { VueConstructor, PropType } from 'vue/types/umd';
-export declare const nodeViewProps: {
-    editor: {
-        type: PropType<import("@tiptap/core").Editor>;
-        required: boolean;
-    };
-    node: {
-        type: PropType<ProseMirrorNode<any>>;
-        required: boolean;
-    };
-    decorations: {
-        type: PropType<Decoration<{
-            [key: string]: any;
-        }>[]>;
-        required: boolean;
-    };
-    selected: {
-        type: PropType<boolean>;
-        required: boolean;
-    };
-    extension: {
-        type: PropType<import("@tiptap/core").Node<any>>;
-        required: boolean;
-    };
-    getPos: {
-        type: PropType<() => number>;
-        required: boolean;
-    };
-    updateAttributes: {
-        type: PropType<(attributes: Record<string, any>) => void>;
-        required: boolean;
-    };
-};
-interface VueNodeViewRendererOptions {
-    stopEvent: ((event: Event) => boolean) | null;
-    update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null;
-}
-export declare function VueNodeViewRenderer(component: Vue | VueConstructor, options?: Partial<VueNodeViewRendererOptions>): NodeViewRenderer;
-export {};

package/dist/packages/vue-2/src/VueRenderer.d.ts

@@ -1,9 +0,0 @@
-import Vue from 'vue';
-import { VueConstructor } from 'vue/types/umd';
-export declare class VueRenderer {
-    ref: Vue;
-    constructor(component: Vue | VueConstructor, props: any);
-    get element(): Element;
-    updateProps(props?: Record<string, any>): void;
-    destroy(): void;
-}

package/dist/packages/vue-2/src/index.d.ts

@@ -1,9 +0,0 @@
-export * from '@tiptap/core';
-export * from './BubbleMenu';
-export { Editor } from './Editor';
-export * from './EditorContent';
-export * from './FloatingMenu';
-export * from './VueRenderer';
-export * from './VueNodeViewRenderer';
-export * from './NodeViewWrapper';
-export * from './NodeViewContent';