add nodeViewProps, fix #214

docs/src/demos/Guide/NodeViews/DragHandle/Component.vue

@@ -11,9 +11,11 @@
 </template>
 
 <script>
-import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
+import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-2'
 
 export default {
+  props: nodeViewProps,
+
   components: {
     NodeViewWrapper,
     NodeViewContent,

docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue

@@ -14,19 +14,14 @@
 </template>
 
 <script>
-import { NodeViewWrapper } from '@tiptap/vue-2'
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2'
 
 export default {
   components: {
     NodeViewWrapper,
   },
 
-  props: {
+  props: nodeViewProps,
-    editor: {
-      type: Object,
-      required: true,
-    },
-  },
 
   data() {
     return {
@@ -58,10 +53,6 @@ export default {
 }
 </script>
 
-<style>
-
-</style>
-
 <style lang="scss">
 /* Basic editor styles */
 .ProseMirror {

docs/src/demos/Guide/NodeViews/VueComponent/Component.vue

@@ -11,24 +11,14 @@
 </template>
 
 <script>
-import { NodeViewWrapper } from '@tiptap/vue-2'
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2'
 
 export default {
   components: {
     NodeViewWrapper,
   },
 
-  props: {
+  props: nodeViewProps,
-    updateAttributes: {
-      type: Function,
-      required: true,
-    },
-
-    node: {
-      type: Object,
-      required: true,
-    },
-  },
 
   methods: {
     increase() {

docs/src/demos/Guide/NodeViews/VueComponentContent/Component.vue

@@ -7,13 +7,15 @@
 </template>
 
 <script>
-import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
+import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-2'
 
 export default {
   components: {
     NodeViewWrapper,
     NodeViewContent,
   },
+
+  props: nodeViewProps,
 }
 </script>
 

packages/vue-2/src/VueNodeViewRenderer.ts

@@ -7,10 +7,41 @@ import {
 import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
 import { Node as ProseMirrorNode } from 'prosemirror-model'
 import Vue from 'vue'
-import { VueConstructor } from 'vue/types/umd'
+import { VueConstructor, PropType } from 'vue/types/umd'
 import { Editor } from './Editor'
 import { VueRenderer } from './VueRenderer'
 
+export const nodeViewProps = {
+  editor: {
+    type: Object as PropType<NodeViewProps['editor']>,
+    required: true,
+  },
+  node: {
+    type: Object as PropType<NodeViewProps['node']>,
+    required: true,
+  },
+  decorations: {
+    type: Object as PropType<NodeViewProps['decorations']>,
+    required: true,
+  },
+  selected: {
+    type: Boolean as PropType<NodeViewProps['selected']>,
+    required: true,
+  },
+  extension: {
+    type: Object as PropType<NodeViewProps['extension']>,
+    required: true,
+  },
+  getPos: {
+    type: Function as PropType<NodeViewProps['getPos']>,
+    required: true,
+  },
+  updateAttributes: {
+    type: Function as PropType<NodeViewProps['updateAttributes']>,
+    required: true,
+  },
+}
+
 interface VueNodeViewRendererOptions {
   stopEvent: ((event: Event) => boolean) | null,
   update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,

packages/vue-3/src/VueNodeViewRenderer.ts

@@ -7,6 +7,7 @@ import {
 import {
   ref,
   provide,
+  PropType,
   Component,
   defineComponent,
 } from 'vue'
@@ -15,6 +16,37 @@ import { Node as ProseMirrorNode } from 'prosemirror-model'
 import { Editor } from './Editor'
 import { VueRenderer } from './VueRenderer'
 
+export const nodeViewProps = {
+  editor: {
+    type: Object as PropType<NodeViewProps['editor']>,
+    required: true,
+  },
+  node: {
+    type: Object as PropType<NodeViewProps['node']>,
+    required: true,
+  },
+  decorations: {
+    type: Object as PropType<NodeViewProps['decorations']>,
+    required: true,
+  },
+  selected: {
+    type: Boolean as PropType<NodeViewProps['selected']>,
+    required: true,
+  },
+  extension: {
+    type: Object as PropType<NodeViewProps['extension']>,
+    required: true,
+  },
+  getPos: {
+    type: Function as PropType<NodeViewProps['getPos']>,
+    required: true,
+  },
+  updateAttributes: {
+    type: Function as PropType<NodeViewProps['updateAttributes']>,
+    required: true,
+  },
+}
+
 interface VueNodeViewRendererOptions {
   stopEvent: ((event: Event) => boolean) | null,
   update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,