You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					131 lines
				
				5.2 KiB
			
		
		
			
		
	
	
					131 lines
				
				5.2 KiB
			| 
											3 years ago
										 | import { Plugin } from 'prosemirror-state'; | ||
|  | import { dropPoint } from 'prosemirror-transform'; | ||
|  | 
 | ||
|  | /** | ||
|  | Create a plugin that, when added to a ProseMirror instance, | ||
|  | causes a decoration to show up at the drop position when something | ||
|  | is dragged over the editor. | ||
|  | 
 | ||
|  | Nodes may add a `disableDropCursor` property to their spec to | ||
|  | control the showing of a drop cursor inside them. This may be a | ||
|  | boolean or a function, which will be called with a view and a | ||
|  | position, and should return a boolean. | ||
|  | */ | ||
|  | function dropCursor(options = {}) { | ||
|  |     return new Plugin({ | ||
|  |         view(editorView) { return new DropCursorView(editorView, options); } | ||
|  |     }); | ||
|  | } | ||
|  | class DropCursorView { | ||
|  |     constructor(editorView, options) { | ||
|  |         this.editorView = editorView; | ||
|  |         this.cursorPos = null; | ||
|  |         this.element = null; | ||
|  |         this.timeout = -1; | ||
|  |         this.width = options.width || 1; | ||
|  |         this.color = options.color || "black"; | ||
|  |         this.class = options.class; | ||
|  |         this.handlers = ["dragover", "dragend", "drop", "dragleave"].map(name => { | ||
|  |             let handler = (e) => { this[name](e); }; | ||
|  |             editorView.dom.addEventListener(name, handler); | ||
|  |             return { name, handler }; | ||
|  |         }); | ||
|  |     } | ||
|  |     destroy() { | ||
|  |         this.handlers.forEach(({ name, handler }) => this.editorView.dom.removeEventListener(name, handler)); | ||
|  |     } | ||
|  |     update(editorView, prevState) { | ||
|  |         if (this.cursorPos != null && prevState.doc != editorView.state.doc) { | ||
|  |             if (this.cursorPos > editorView.state.doc.content.size) | ||
|  |                 this.setCursor(null); | ||
|  |             else | ||
|  |                 this.updateOverlay(); | ||
|  |         } | ||
|  |     } | ||
|  |     setCursor(pos) { | ||
|  |         if (pos == this.cursorPos) | ||
|  |             return; | ||
|  |         this.cursorPos = pos; | ||
|  |         if (pos == null) { | ||
|  |             this.element.parentNode.removeChild(this.element); | ||
|  |             this.element = null; | ||
|  |         } | ||
|  |         else { | ||
|  |             this.updateOverlay(); | ||
|  |         } | ||
|  |     } | ||
|  |     updateOverlay() { | ||
|  |         let $pos = this.editorView.state.doc.resolve(this.cursorPos), rect; | ||
|  |         if (!$pos.parent.inlineContent) { | ||
|  |             let before = $pos.nodeBefore, after = $pos.nodeAfter; | ||
|  |             if (before || after) { | ||
|  |                 let nodeRect = this.editorView.nodeDOM(this.cursorPos - (before ? before.nodeSize : 0)) | ||
|  |                     .getBoundingClientRect(); | ||
|  |                 let top = before ? nodeRect.bottom : nodeRect.top; | ||
|  |                 if (before && after) | ||
|  |                     top = (top + this.editorView.nodeDOM(this.cursorPos).getBoundingClientRect().top) / 2; | ||
|  |                 rect = { left: nodeRect.left, right: nodeRect.right, top: top - this.width / 2, bottom: top + this.width / 2 }; | ||
|  |             } | ||
|  |         } | ||
|  |         if (!rect) { | ||
|  |             let coords = this.editorView.coordsAtPos(this.cursorPos); | ||
|  |             rect = { left: coords.left - this.width / 2, right: coords.left + this.width / 2, top: coords.top, bottom: coords.bottom }; | ||
|  |         } | ||
|  |         let parent = this.editorView.dom.offsetParent; | ||
|  |         if (!this.element) { | ||
|  |             this.element = parent.appendChild(document.createElement("div")); | ||
|  |             if (this.class) | ||
|  |                 this.element.className = this.class; | ||
|  |             this.element.style.cssText = "position: absolute; z-index: 50; pointer-events: none; background-color: " + this.color; | ||
|  |         } | ||
|  |         let parentLeft, parentTop; | ||
|  |         if (!parent || parent == document.body && getComputedStyle(parent).position == "static") { | ||
|  |             parentLeft = -pageXOffset; | ||
|  |             parentTop = -pageYOffset; | ||
|  |         } | ||
|  |         else { | ||
|  |             let rect = parent.getBoundingClientRect(); | ||
|  |             parentLeft = rect.left - parent.scrollLeft; | ||
|  |             parentTop = rect.top - parent.scrollTop; | ||
|  |         } | ||
|  |         this.element.style.left = (rect.left - parentLeft) + "px"; | ||
|  |         this.element.style.top = (rect.top - parentTop) + "px"; | ||
|  |         this.element.style.width = (rect.right - rect.left) + "px"; | ||
|  |         this.element.style.height = (rect.bottom - rect.top) + "px"; | ||
|  |     } | ||
|  |     scheduleRemoval(timeout) { | ||
|  |         clearTimeout(this.timeout); | ||
|  |         this.timeout = setTimeout(() => this.setCursor(null), timeout); | ||
|  |     } | ||
|  |     dragover(event) { | ||
|  |         if (!this.editorView.editable) | ||
|  |             return; | ||
|  |         let pos = this.editorView.posAtCoords({ left: event.clientX, top: event.clientY }); | ||
|  |         let node = pos && pos.inside >= 0 && this.editorView.state.doc.nodeAt(pos.inside); | ||
|  |         let disableDropCursor = node && node.type.spec.disableDropCursor; | ||
|  |         let disabled = typeof disableDropCursor == "function" ? disableDropCursor(this.editorView, pos) : disableDropCursor; | ||
|  |         if (pos && !disabled) { | ||
|  |             let target = pos.pos; | ||
|  |             if (this.editorView.dragging && this.editorView.dragging.slice) { | ||
|  |                 target = dropPoint(this.editorView.state.doc, target, this.editorView.dragging.slice); | ||
|  |                 if (target == null) | ||
|  |                     return this.setCursor(null); | ||
|  |             } | ||
|  |             this.setCursor(target); | ||
|  |             this.scheduleRemoval(5000); | ||
|  |         } | ||
|  |     } | ||
|  |     dragend() { | ||
|  |         this.scheduleRemoval(20); | ||
|  |     } | ||
|  |     drop() { | ||
|  |         this.scheduleRemoval(20); | ||
|  |     } | ||
|  |     dragleave(event) { | ||
|  |         if (event.target == this.editorView.dom || !this.editorView.dom.contains(event.relatedTarget)) | ||
|  |             this.setCursor(null); | ||
|  |     } | ||
|  | } | ||
|  | 
 | ||
|  | export { dropCursor }; |