mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-28 15:49:23 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

improve support for drag and drop

Browse Source
This commit is contained in:
Philipp Kühn 2020-11-24 11:40:09 +01:00
parent ae6630e6dc
commit f4368f9021
2 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/src/demos/Examples/NodeView/Component.vue
View File

@ -6,6 +6,7 @@
<div contenteditable="false"> <div contenteditable="false">
checked: {{ node.attrs.checked }} checked: {{ node.attrs.checked }}
</div> </div>
<div contenteditable="false" style="width: 20px; height: 20px; background: red" data-drag-handle />
<node-view-content /> <node-view-content />
</node-view-wrapper> </node-view-wrapper>
</template> </template>

33
packages/vue/src/VueRenderer.ts
View File

@ -23,6 +23,8 @@ class VueNodeView implements NodeView {
getPos!: any getPos!: any
isDragging = false
constructor(component: Vue | VueConstructor, props: NodeViewRendererProps) { constructor(component: Vue | VueConstructor, props: NodeViewRendererProps) {
this.editor = props.editor this.editor = props.editor
this.extension = props.extension this.extension = props.extension
@ -38,7 +40,6 @@ class VueNodeView implements NodeView {
createNodeViewWrapper() { createNodeViewWrapper() {
return Vue.extend({ return Vue.extend({
inheritAttrs: false,
props: { props: {
as: { as: {
type: String, type: String,
@ -125,14 +126,32 @@ class VueNodeView implements NodeView {
return this.vm.$el.querySelector(`#${this.id}`) return this.vm.$el.querySelector(`#${this.id}`)
} }
stopEvent(event: Event): boolean { stopEvent(event: Event) {
const isDraggable = this.node.type.spec.draggable const isDraggable = this.node.type.spec.draggable
const isCopy = event.type === 'copy' const isCopyEvent = event.type === 'copy'
const isPaste = event.type === 'paste' const isPasteEvent = event.type === 'paste'
const isCut = event.type === 'cut' const isCutEvent = event.type === 'cut'
const isDrag = event.type.startsWith('drag') || event.type === 'drop' 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 return false
} }