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.
		
		
		
		
		
			
		
			
				
					196 lines
				
				6.3 KiB
			
		
		
			
		
	
	
					196 lines
				
				6.3 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								'use strict';
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								Object.defineProperty(exports, '__esModule', {
							 | 
						||
| 
								 | 
							
								  value: true
							 | 
						||
| 
								 | 
							
								});
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var prosemirrorState = require('prosemirror-state');
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var prosemirrorTransform = require('prosemirror-transform');
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function dropCursor() {
							 | 
						||
| 
								 | 
							
								  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
							 | 
						||
| 
								 | 
							
								  return new prosemirrorState.Plugin({
							 | 
						||
| 
								 | 
							
								    view: function view(editorView) {
							 | 
						||
| 
								 | 
							
								      return new DropCursorView(editorView, options);
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  });
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var DropCursorView = function () {
							 | 
						||
| 
								 | 
							
								  function DropCursorView(editorView, options) {
							 | 
						||
| 
								 | 
							
								    var _this = this;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    _classCallCheck(this, DropCursorView);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    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(function (name) {
							 | 
						||
| 
								 | 
							
								      var handler = function handler(e) {
							 | 
						||
| 
								 | 
							
								        _this[name](e);
							 | 
						||
| 
								 | 
							
								      };
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      editorView.dom.addEventListener(name, handler);
							 | 
						||
| 
								 | 
							
								      return {
							 | 
						||
| 
								 | 
							
								        name: name,
							 | 
						||
| 
								 | 
							
								        handler: handler
							 | 
						||
| 
								 | 
							
								      };
							 | 
						||
| 
								 | 
							
								    });
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  _createClass(DropCursorView, [{
							 | 
						||
| 
								 | 
							
								    key: "destroy",
							 | 
						||
| 
								 | 
							
								    value: function destroy() {
							 | 
						||
| 
								 | 
							
								      var _this2 = this;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      this.handlers.forEach(function (_ref) {
							 | 
						||
| 
								 | 
							
								        var name = _ref.name,
							 | 
						||
| 
								 | 
							
								            handler = _ref.handler;
							 | 
						||
| 
								 | 
							
								        return _this2.editorView.dom.removeEventListener(name, handler);
							 | 
						||
| 
								 | 
							
								      });
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }, {
							 | 
						||
| 
								 | 
							
								    key: "update",
							 | 
						||
| 
								 | 
							
								    value: function 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();
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }, {
							 | 
						||
| 
								 | 
							
								    key: "setCursor",
							 | 
						||
| 
								 | 
							
								    value: function 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();
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }, {
							 | 
						||
| 
								 | 
							
								    key: "updateOverlay",
							 | 
						||
| 
								 | 
							
								    value: function updateOverlay() {
							 | 
						||
| 
								 | 
							
								      var $pos = this.editorView.state.doc.resolve(this.cursorPos),
							 | 
						||
| 
								 | 
							
								          rect;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      if (!$pos.parent.inlineContent) {
							 | 
						||
| 
								 | 
							
								        var before = $pos.nodeBefore,
							 | 
						||
| 
								 | 
							
								            after = $pos.nodeAfter;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        if (before || after) {
							 | 
						||
| 
								 | 
							
								          var nodeRect = this.editorView.nodeDOM(this.cursorPos - (before ? before.nodeSize : 0)).getBoundingClientRect();
							 | 
						||
| 
								 | 
							
								          var 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) {
							 | 
						||
| 
								 | 
							
								        var 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
							 | 
						||
| 
								 | 
							
								        };
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      var 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;
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      var parentLeft, parentTop;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      if (!parent || parent == document.body && getComputedStyle(parent).position == "static") {
							 | 
						||
| 
								 | 
							
								        parentLeft = -pageXOffset;
							 | 
						||
| 
								 | 
							
								        parentTop = -pageYOffset;
							 | 
						||
| 
								 | 
							
								      } else {
							 | 
						||
| 
								 | 
							
								        var _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";
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }, {
							 | 
						||
| 
								 | 
							
								    key: "scheduleRemoval",
							 | 
						||
| 
								 | 
							
								    value: function scheduleRemoval(timeout) {
							 | 
						||
| 
								 | 
							
								      var _this3 = this;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      clearTimeout(this.timeout);
							 | 
						||
| 
								 | 
							
								      this.timeout = setTimeout(function () {
							 | 
						||
| 
								 | 
							
								        return _this3.setCursor(null);
							 | 
						||
| 
								 | 
							
								      }, timeout);
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }, {
							 | 
						||
| 
								 | 
							
								    key: "dragover",
							 | 
						||
| 
								 | 
							
								    value: function dragover(event) {
							 | 
						||
| 
								 | 
							
								      if (!this.editorView.editable) return;
							 | 
						||
| 
								 | 
							
								      var pos = this.editorView.posAtCoords({
							 | 
						||
| 
								 | 
							
								        left: event.clientX,
							 | 
						||
| 
								 | 
							
								        top: event.clientY
							 | 
						||
| 
								 | 
							
								      });
							 | 
						||
| 
								 | 
							
								      var node = pos && pos.inside >= 0 && this.editorView.state.doc.nodeAt(pos.inside);
							 | 
						||
| 
								 | 
							
								      var disableDropCursor = node && node.type.spec.disableDropCursor;
							 | 
						||
| 
								 | 
							
								      var disabled = typeof disableDropCursor == "function" ? disableDropCursor(this.editorView, pos) : disableDropCursor;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      if (pos && !disabled) {
							 | 
						||
| 
								 | 
							
								        var target = pos.pos;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        if (this.editorView.dragging && this.editorView.dragging.slice) {
							 | 
						||
| 
								 | 
							
								          target = prosemirrorTransform.dropPoint(this.editorView.state.doc, target, this.editorView.dragging.slice);
							 | 
						||
| 
								 | 
							
								          if (target == null) return this.setCursor(null);
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        this.setCursor(target);
							 | 
						||
| 
								 | 
							
								        this.scheduleRemoval(5000);
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }, {
							 | 
						||
| 
								 | 
							
								    key: "dragend",
							 | 
						||
| 
								 | 
							
								    value: function dragend() {
							 | 
						||
| 
								 | 
							
								      this.scheduleRemoval(20);
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }, {
							 | 
						||
| 
								 | 
							
								    key: "drop",
							 | 
						||
| 
								 | 
							
								    value: function drop() {
							 | 
						||
| 
								 | 
							
								      this.scheduleRemoval(20);
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }, {
							 | 
						||
| 
								 | 
							
								    key: "dragleave",
							 | 
						||
| 
								 | 
							
								    value: function dragleave(event) {
							 | 
						||
| 
								 | 
							
								      if (event.target == this.editorView.dom || !this.editorView.dom.contains(event.relatedTarget)) this.setCursor(null);
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }]);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  return DropCursorView;
							 | 
						||
| 
								 | 
							
								}();
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.dropCursor = dropCursor;
							 |