From b5ba3fd3eb03f20dcd338ff36c47d9da059cd0a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 25 Nov 2020 22:11:17 +0100
Subject: [PATCH] improve node views

---
 .../demos/Examples/DragHandle/Component.vue   | 21 -----------
 packages/vue/src/VueRenderer.ts               | 35 +++++++++++++++----
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/docs/src/demos/Examples/DragHandle/Component.vue b/docs/src/demos/Examples/DragHandle/Component.vue
index 1424fffc..b4677359 100644
--- a/docs/src/demos/Examples/DragHandle/Component.vue
+++ b/docs/src/demos/Examples/DragHandle/Component.vue
@@ -10,27 +10,6 @@
   </node-view-wrapper>
 </template>
 
-<script>
-export default {
-  props: {
-    editor: {
-      type: Object,
-      required: true,
-    },
-
-    node: {
-      type: Object,
-      required: true,
-    },
-
-    updateAttributes: {
-      type: Function,
-      required: true,
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .draggable-item {
   display: flex;
diff --git a/packages/vue/src/VueRenderer.ts b/packages/vue/src/VueRenderer.ts
index 48575487..90542623 100644
--- a/packages/vue/src/VueRenderer.ts
+++ b/packages/vue/src/VueRenderer.ts
@@ -132,11 +132,15 @@ class VueNodeView implements NodeView {
       })
 
     const props = {
-      editor: this.editor,
       NodeViewWrapper,
       NodeViewContent,
+      editor: this.editor,
       node: this.node,
-      updateAttributes: (attrs: {}) => this.updateAttributes(attrs),
+      decorations: this.decorations,
+      selected: false,
+      extension: this.extension,
+      getPos: () => this.getPos(),
+      updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
     }
 
     this.vm = new Component({
@@ -242,14 +246,21 @@ class VueNodeView implements NodeView {
 
     this.node = node
     this.decorations = decorations
-    this.updateComponentProps()
+    this.updateComponentProps({ node, decorations })
 
     return true
   }
 
-  updateComponentProps() {
-    this.vm.$props.node = this.node
-    this.vm.$props.decorations = this.decorations
+  updateComponentProps(data: { [key: string]: any } = {}) {
+    if (!this.vm.$props) {
+      return
+    }
+
+    Object
+      .entries(data)
+      .forEach(([key, value]) => {
+        this.vm.$props[key] = value
+      })
   }
 
   updateAttributes(attributes: {}) {
@@ -267,6 +278,18 @@ class VueNodeView implements NodeView {
     this.editor.view.dispatch(transaction)
   }
 
+  selectNode() {
+    this.updateComponentProps({
+      selected: true,
+    })
+  }
+
+  deselectNode() {
+    this.updateComponentProps({
+      selected: false,
+    })
+  }
+
 }
 
 export default function VueRenderer(component: Vue | VueConstructor, options?: Partial<VueRendererOptions>) {