try to solve nested drag handles

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>

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 {

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>
       `,

packages/vue/src/VueRenderer.ts

@@ -1,9 +1,7 @@
 import { Editor, Node, NodeViewRendererProps } from '@tiptap/core'
 import { Decoration, NodeView } from 'prosemirror-view'
-
+import { NodeSelection } from 'prosemirror-state'
-import {
+import { Node as ProseMirrorNode } from 'prosemirror-model'
-  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