add node view playground

packages/core/src/ExtensionManager.ts

@@ -130,6 +130,7 @@ export default class ExtensionManager {
             getPos,
             decorations,
             HTMLAttributes,
+            extension,
           })
         }
 

packages/core/src/types.ts

@@ -90,6 +90,7 @@ export type NodeViewRendererProps = {
   getPos: (() => number) | boolean,
   decorations: Decoration[],
   HTMLAttributes: { [key: string]: any },
+  extension: Node,
 }
 
 export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView

packages/vue/src/VueRenderer.ts

@@ -1,5 +1,9 @@
-import { NodeViewRendererProps } from '@tiptap/core'
+import { Node, NodeViewRendererProps } from '@tiptap/core'
 import { NodeView } from 'prosemirror-view'
+
+import {
+  Node as ProseMirrorNode,
+} from 'prosemirror-model'
 import Vue from 'vue'
 import { VueConstructor } from 'vue/types/umd'
 
@@ -7,12 +11,19 @@ class VueNodeView implements NodeView {
 
   vm!: Vue
 
+  extension!: Node
+
+  node!: ProseMirrorNode
+
   constructor(component: Vue | VueConstructor, props: NodeViewRendererProps) {
     // eslint-disable-next-line
     const { node, editor, getPos } = props
     // eslint-disable-next-line
     const { view } = editor
 
+    this.extension = props.extension
+    this.node = props.node
+
     this.mount(component)
   }
 
@@ -33,7 +44,17 @@ class VueNodeView implements NodeView {
     return this.vm.$refs.content as Element
   }
 
-  stopEvent() {
+  stopEvent(event: Event): boolean {
+    const isDraggable = this.node.type.spec.draggable
+    const isCopy = event.type === 'copy'
+    const isPaste = event.type === 'paste'
+    const isCut = event.type === 'cut'
+    const isDrag = event.type.startsWith('drag') || event.type === 'drop'
+
+    if ((isDraggable && isDrag) || isCopy || isPaste || isCut) {
+      return false
+    }
+
     return true
   }