From d93897958453583a3af5c2e6335453fd3f14d0b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 24 Nov 2020 21:50:54 +0100
Subject: [PATCH] try to solve nested drag handles

---
 .../src/demos/Examples/NodeView/Component.vue |  2 +-
 docs/src/demos/Examples/NodeView/Test.ts      |  5 ++-
 docs/src/demos/Examples/NodeView/index.vue    |  5 ++-
 packages/vue/src/VueRenderer.ts               | 43 ++++++++++++++++---
 4 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/docs/src/demos/Examples/NodeView/Component.vue b/docs/src/demos/Examples/NodeView/Component.vue
index 386c68a6..14ff48f1 100644
--- a/docs/src/demos/Examples/NodeView/Component.vue
+++ b/docs/src/demos/Examples/NodeView/Component.vue
@@ -1,5 +1,5 @@
 <template>
-  <node-view-wrapper>
+  <node-view-wrapper style="padding-left: 1rem">
     <button @click="toggleChecked" contenteditable="false">
       toggle checked
     </button>
diff --git a/docs/src/demos/Examples/NodeView/Test.ts b/docs/src/demos/Examples/NodeView/Test.ts
index 5d4b7911..15d956e8 100644
--- a/docs/src/demos/Examples/NodeView/Test.ts
+++ b/docs/src/demos/Examples/NodeView/Test.ts
@@ -7,11 +7,12 @@ export default Node.create({
 
   group: 'block',
 
-  content: 'inline*',
+  // content: 'inline*',
+  content: 'block*',
 
   draggable: true,
 
-  selectable: false,
+  selectable: true,
 
   addAttributes() {
     return {
diff --git a/docs/src/demos/Examples/NodeView/index.vue b/docs/src/demos/Examples/NodeView/index.vue
index c83fb0b3..c9cc7850 100644
--- a/docs/src/demos/Examples/NodeView/index.vue
+++ b/docs/src/demos/Examples/NodeView/index.vue
@@ -36,7 +36,10 @@ export default {
       content: `
         <p>paragraph</p>
         <div data-type="test">
-          text
+          one
+          <div data-type="test">
+            two
+          </div>
         </div>
         <p>paragraph</p>
       `,
diff --git a/packages/vue/src/VueRenderer.ts b/packages/vue/src/VueRenderer.ts
index 5cdb96e2..34f48a70 100644
--- a/packages/vue/src/VueRenderer.ts
+++ b/packages/vue/src/VueRenderer.ts
@@ -1,9 +1,7 @@
 import { Editor, Node, NodeViewRendererProps } from '@tiptap/core'
 import { Decoration, NodeView } from 'prosemirror-view'
-
-import {
-  Node as ProseMirrorNode,
-} from 'prosemirror-model'
+import { NodeSelection } from 'prosemirror-state'
+import { Node as ProseMirrorNode } from 'prosemirror-model'
 import Vue from 'vue'
 import { VueConstructor } from 'vue/types/umd'
 
@@ -39,6 +37,10 @@ class VueNodeView implements NodeView {
   }
 
   createNodeViewWrapper() {
+    const nodeview = this
+    const { view } = this.editor
+    const { getPos } = this
+
     return Vue.extend({
       props: {
         as: {
@@ -52,6 +54,21 @@ class VueNodeView implements NodeView {
             style: {
               whiteSpace: 'normal',
             },
+            // attrs: {
+            //   // draggable: false,
+            //   contenteditable: false,
+            // },
+            on: {
+              dragstart: (event: Event) => {
+                const target = (event.target as HTMLElement)
+
+                if (nodeview.contentDOM?.contains(target)) {
+                  return
+                }
+
+                view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, getPos())))
+              },
+            },
           },
           this.$slots.default,
         )
@@ -127,6 +144,7 @@ class VueNodeView implements NodeView {
   }
 
   stopEvent(event: Event) {
+    const target = (event.target as HTMLElement)
     const isDraggable = this.node.type.spec.draggable
     const isCopyEvent = event.type === 'copy'
     const isPasteEvent = event.type === 'paste'
@@ -138,10 +156,11 @@ class VueNodeView implements NodeView {
     }
 
     if (isDraggable && !this.isDragging && event.type === 'mousedown') {
-      const target = (event.target as HTMLElement)
       const dragHandle = target.closest('[data-drag-handle]')
+      // const isValidDragHandle = dragHandle
+      //   && (this.dom === dragHandle || (this.dom.contains(dragHandle) && !this.contentDOM?.contains(dragHandle)))
       const isValidDragHandle = dragHandle
-        && (this.dom === dragHandle || this.dom.contains(dragHandle))
+        && (this.dom === dragHandle || (this.dom.contains(dragHandle)))
 
       if (isValidDragHandle) {
         this.isDragging = true
@@ -173,6 +192,18 @@ class VueNodeView implements NodeView {
     return contentDOMHasChanged
   }
 
+  selectNode() {
+    // this.updateComponentProps({
+    //   selected: true,
+    // })
+  }
+
+  deselectNode() {
+    // this.updateComponentProps({
+    //   selected: false,
+    // })
+  }
+
   update(node: ProseMirrorNode, decorations: Decoration[]) {
     if (node.type !== this.node.type) {
       return false