diff --git a/packages/tiptap-extensions/src/nodes/TodoItem.js b/packages/tiptap-extensions/src/nodes/TodoItem.js index a4dff5a7..ed9b47a5 100644 --- a/packages/tiptap-extensions/src/nodes/TodoItem.js +++ b/packages/tiptap-extensions/src/nodes/TodoItem.js @@ -24,7 +24,7 @@ export default class TodoItem extends Node { }, }, template: ` -
  • +
  • diff --git a/packages/tiptap/src/Utils/ComponentView.js b/packages/tiptap/src/Utils/ComponentView.js index e50ebc34..e22cc30e 100644 --- a/packages/tiptap/src/Utils/ComponentView.js +++ b/packages/tiptap/src/Utils/ComponentView.js @@ -23,6 +23,7 @@ export default class ComponentView { this.isNode = !!this.node.marks this.isMark = !this.isNode this.getPos = this.isMark ? this.getMarkPos : getPos + this.captureEvents = true this.dom = this.createDOM() this.contentDOM = this.vm.$refs.content } @@ -123,14 +124,31 @@ export default class ComponentView { return this.extension.stopEvent(event) } - const isPaste = event.type === 'paste' const draggable = !!this.extension.schema.draggable - if (draggable || isPaste) { + // support a custom drag handle + if (draggable && event.type === 'mousedown') { + const dragHandle = event.target.closest + && event.target.closest('[data-drag-handle]') + const isValidDragHandle = dragHandle + && (this.dom === dragHandle || this.dom.contains(dragHandle)) + + if (isValidDragHandle) { + this.captureEvents = false + document.addEventListener('dragend', () => { + this.captureEvents = true + }, { once: true }) + } + } + + const isPaste = event.type === 'paste' + const isDrag = event.type.startsWith('drag') || event.type === 'drop' + + if ((draggable && isDrag) || isPaste) { return false } - return true + return this.captureEvents } selectNode() {