From f0f6e7940819e4dd0d725a573514e3e47a0cbd6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 17 Mar 2021 21:43:45 +0100
Subject: [PATCH] add nodeViewProps, fix #214

---
 .../Guide/NodeViews/DragHandle/Component.vue  |  4 ++-
 .../NodeViews/TableOfContents/Component.vue   | 13 ++------
 .../NodeViews/VueComponent/Component.vue      | 14 ++------
 .../VueComponentContent/Component.vue         |  4 ++-
 packages/vue-2/src/VueNodeViewRenderer.ts     | 33 ++++++++++++++++++-
 packages/vue-3/src/VueNodeViewRenderer.ts     | 32 ++++++++++++++++++
 6 files changed, 74 insertions(+), 26 deletions(-)

diff --git a/docs/src/demos/Guide/NodeViews/DragHandle/Component.vue b/docs/src/demos/Guide/NodeViews/DragHandle/Component.vue
index a5ba27a2..72673b39 100644
--- a/docs/src/demos/Guide/NodeViews/DragHandle/Component.vue
+++ b/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,
diff --git a/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue b/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
index 00dcfb3f..ebbc2b01 100644
--- a/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
+++ b/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: {
-    editor: {
-      type: Object,
-      required: true,
-    },
-  },
+  props: nodeViewProps,
 
   data() {
     return {
@@ -58,10 +53,6 @@ export default {
 }
 </script>
 
-<style>
-
-</style>
-
 <style lang="scss">
 /* Basic editor styles */
 .ProseMirror {
diff --git a/docs/src/demos/Guide/NodeViews/VueComponent/Component.vue b/docs/src/demos/Guide/NodeViews/VueComponent/Component.vue
index 391fd8d4..41a2d903 100644
--- a/docs/src/demos/Guide/NodeViews/VueComponent/Component.vue
+++ b/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: {
-    updateAttributes: {
-      type: Function,
-      required: true,
-    },
-
-    node: {
-      type: Object,
-      required: true,
-    },
-  },
+  props: nodeViewProps,
 
   methods: {
     increase() {
diff --git a/docs/src/demos/Guide/NodeViews/VueComponentContent/Component.vue b/docs/src/demos/Guide/NodeViews/VueComponentContent/Component.vue
index 14d3e302..e5a241ba 100644
--- a/docs/src/demos/Guide/NodeViews/VueComponentContent/Component.vue
+++ b/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>
 
diff --git a/packages/vue-2/src/VueNodeViewRenderer.ts b/packages/vue-2/src/VueNodeViewRenderer.ts
index 98d60493..389638c0 100644
--- a/packages/vue-2/src/VueNodeViewRenderer.ts
+++ b/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,
diff --git a/packages/vue-3/src/VueNodeViewRenderer.ts b/packages/vue-3/src/VueNodeViewRenderer.ts
index 2805a0b7..d1e9afe6 100644
--- a/packages/vue-3/src/VueNodeViewRenderer.ts
+++ b/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,