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
						
					
					
				| 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 };
 |