diff --git a/docs/src/demos/Examples/NodeView/Component.vue b/docs/src/demos/Examples/NodeView/Component.vue index e03e04903..386c68a6e 100644 --- a/docs/src/demos/Examples/NodeView/Component.vue +++ b/docs/src/demos/Examples/NodeView/Component.vue @@ -6,6 +6,7 @@
checked: {{ node.attrs.checked }}
+
diff --git a/packages/vue/src/VueRenderer.ts b/packages/vue/src/VueRenderer.ts index 2d132f5ca..5cdb96e2c 100644 --- a/packages/vue/src/VueRenderer.ts +++ b/packages/vue/src/VueRenderer.ts @@ -23,6 +23,8 @@ class VueNodeView implements NodeView { getPos!: any + isDragging = false + constructor(component: Vue | VueConstructor, props: NodeViewRendererProps) { this.editor = props.editor this.extension = props.extension @@ -38,7 +40,6 @@ class VueNodeView implements NodeView { createNodeViewWrapper() { return Vue.extend({ - inheritAttrs: false, props: { as: { type: String, @@ -125,14 +126,32 @@ class VueNodeView implements NodeView { return this.vm.$el.querySelector(`#${this.id}`) } - stopEvent(event: Event): boolean { + stopEvent(event: Event) { 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' + const isCopyEvent = event.type === 'copy' + const isPasteEvent = event.type === 'paste' + const isCutEvent = event.type === 'cut' + const isDragEvent = event.type.startsWith('drag') || event.type === 'drop' - if ((isDraggable && isDrag) || isCopy || isPaste || isCut) { + if (isDragEvent && !this.isDragging) { + event.preventDefault() + } + + 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)) + + if (isValidDragHandle) { + this.isDragging = true + document.addEventListener('dragend', () => { + this.isDragging = false + }, { once: true }) + } + } + + if (this.isDragging || isCopyEvent || isPasteEvent || isCutEvent) { return false }