diff --git a/docs/src/demos/Examples/NodeView/Component.vue b/docs/src/demos/Examples/NodeView/Component.vue index 14ff48f1..dfdadd50 100644 --- a/docs/src/demos/Examples/NodeView/Component.vue +++ b/docs/src/demos/Examples/NodeView/Component.vue @@ -46,6 +46,7 @@ export default { }, mounted() { + console.log('MOUNTED') // setInterval(() => { // this.random = `foo${Math.random()}` // }, 1000) diff --git a/packages/vue/src/VueRenderer.ts b/packages/vue/src/VueRenderer.ts index 34f48a70..e2a2116a 100644 --- a/packages/vue/src/VueRenderer.ts +++ b/packages/vue/src/VueRenderer.ts @@ -30,6 +30,8 @@ class VueNodeView implements NodeView { this.getPos = props.getPos this.createUniqueId() this.mount(component) + + document.addEventListener('dragend', this.onDragEnd) } createUniqueId() { @@ -151,6 +153,15 @@ class VueNodeView implements NodeView { const isCutEvent = event.type === 'cut' const isDragEvent = event.type.startsWith('drag') || event.type === 'drop' + const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target) + + // console.log({ isInElement }) + if (!isInElement) { + return false + } + + // console.log(this.isDragging, event.type) + if (isDragEvent && !this.isDragging) { event.preventDefault() } @@ -164,9 +175,21 @@ class VueNodeView implements NodeView { if (isValidDragHandle) { this.isDragging = true - document.addEventListener('dragend', () => { - this.isDragging = false - }, { once: true }) + // document.addEventListener('dragend', (e: Event) => { + // console.log('DRAGEEEND') + // // const t = (e.target as HTMLElement) + // // if (t === this.dom) { + // // console.log('JEP') + // // } else { + // // console.log('NOPE') + // // } + // // // if (t === this.dom) { + // // // this.isDragging = false + // // // } + // this.isDragging = false + // }, { once: true }) + console.log('BIND EVENT', this.dom) + // document.addEventListener('dragend', this.onDragEnd, { once: true }) } } @@ -177,6 +200,18 @@ class VueNodeView implements NodeView { return true } + onDragEnd(event: Event) { + console.log('ONDRAGEND') + const target = (event.target as HTMLElement) + + if (target === this.dom) { + console.log('JEP') + this.isDragging = false + } else { + console.log('NOPE') + } + } + ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) { if (mutation.type === 'selection') { return true @@ -204,6 +239,11 @@ class VueNodeView implements NodeView { // }) } + destroy() { + this.vm.$destroy() + document.removeEventListener('dragend', this.onDragEnd) + } + update(node: ProseMirrorNode, decorations: Decoration[]) { if (node.type !== this.node.type) { return false