index.cjs 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. 'use strict';
  2. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  3. 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); } }
  4. function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
  5. Object.defineProperty(exports, '__esModule', {
  6. value: true
  7. });
  8. var prosemirrorState = require('prosemirror-state');
  9. var prosemirrorTransform = require('prosemirror-transform');
  10. function dropCursor() {
  11. var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  12. return new prosemirrorState.Plugin({
  13. view: function view(editorView) {
  14. return new DropCursorView(editorView, options);
  15. }
  16. });
  17. }
  18. var DropCursorView = function () {
  19. function DropCursorView(editorView, options) {
  20. var _this = this;
  21. _classCallCheck(this, DropCursorView);
  22. var _a;
  23. this.editorView = editorView;
  24. this.cursorPos = null;
  25. this.element = null;
  26. this.timeout = -1;
  27. this.width = (_a = options.width) !== null && _a !== void 0 ? _a : 1;
  28. this.color = options.color === false ? undefined : options.color || "black";
  29. this["class"] = options["class"];
  30. this.handlers = ["dragover", "dragend", "drop", "dragleave"].map(function (name) {
  31. var handler = function handler(e) {
  32. _this[name](e);
  33. };
  34. editorView.dom.addEventListener(name, handler);
  35. return {
  36. name: name,
  37. handler: handler
  38. };
  39. });
  40. }
  41. _createClass(DropCursorView, [{
  42. key: "destroy",
  43. value: function destroy() {
  44. var _this2 = this;
  45. this.handlers.forEach(function (_ref) {
  46. var name = _ref.name,
  47. handler = _ref.handler;
  48. return _this2.editorView.dom.removeEventListener(name, handler);
  49. });
  50. }
  51. }, {
  52. key: "update",
  53. value: function update(editorView, prevState) {
  54. if (this.cursorPos != null && prevState.doc != editorView.state.doc) {
  55. if (this.cursorPos > editorView.state.doc.content.size) this.setCursor(null);else this.updateOverlay();
  56. }
  57. }
  58. }, {
  59. key: "setCursor",
  60. value: function setCursor(pos) {
  61. if (pos == this.cursorPos) return;
  62. this.cursorPos = pos;
  63. if (pos == null) {
  64. this.element.parentNode.removeChild(this.element);
  65. this.element = null;
  66. } else {
  67. this.updateOverlay();
  68. }
  69. }
  70. }, {
  71. key: "updateOverlay",
  72. value: function updateOverlay() {
  73. var $pos = this.editorView.state.doc.resolve(this.cursorPos);
  74. var isBlock = !$pos.parent.inlineContent,
  75. rect;
  76. if (isBlock) {
  77. var before = $pos.nodeBefore,
  78. after = $pos.nodeAfter;
  79. if (before || after) {
  80. var node = this.editorView.nodeDOM(this.cursorPos - (before ? before.nodeSize : 0));
  81. if (node) {
  82. var nodeRect = node.getBoundingClientRect();
  83. var top = before ? nodeRect.bottom : nodeRect.top;
  84. if (before && after) top = (top + this.editorView.nodeDOM(this.cursorPos).getBoundingClientRect().top) / 2;
  85. rect = {
  86. left: nodeRect.left,
  87. right: nodeRect.right,
  88. top: top - this.width / 2,
  89. bottom: top + this.width / 2
  90. };
  91. }
  92. }
  93. }
  94. if (!rect) {
  95. var coords = this.editorView.coordsAtPos(this.cursorPos);
  96. rect = {
  97. left: coords.left - this.width / 2,
  98. right: coords.left + this.width / 2,
  99. top: coords.top,
  100. bottom: coords.bottom
  101. };
  102. }
  103. var parent = this.editorView.dom.offsetParent;
  104. if (!this.element) {
  105. this.element = parent.appendChild(document.createElement("div"));
  106. if (this["class"]) this.element.className = this["class"];
  107. this.element.style.cssText = "position: absolute; z-index: 50; pointer-events: none;";
  108. if (this.color) {
  109. this.element.style.backgroundColor = this.color;
  110. }
  111. }
  112. this.element.classList.toggle("prosemirror-dropcursor-block", isBlock);
  113. this.element.classList.toggle("prosemirror-dropcursor-inline", !isBlock);
  114. var parentLeft, parentTop;
  115. if (!parent || parent == document.body && getComputedStyle(parent).position == "static") {
  116. parentLeft = -pageXOffset;
  117. parentTop = -pageYOffset;
  118. } else {
  119. var _rect = parent.getBoundingClientRect();
  120. parentLeft = _rect.left - parent.scrollLeft;
  121. parentTop = _rect.top - parent.scrollTop;
  122. }
  123. this.element.style.left = rect.left - parentLeft + "px";
  124. this.element.style.top = rect.top - parentTop + "px";
  125. this.element.style.width = rect.right - rect.left + "px";
  126. this.element.style.height = rect.bottom - rect.top + "px";
  127. }
  128. }, {
  129. key: "scheduleRemoval",
  130. value: function scheduleRemoval(timeout) {
  131. var _this3 = this;
  132. clearTimeout(this.timeout);
  133. this.timeout = setTimeout(function () {
  134. return _this3.setCursor(null);
  135. }, timeout);
  136. }
  137. }, {
  138. key: "dragover",
  139. value: function dragover(event) {
  140. if (!this.editorView.editable) return;
  141. var pos = this.editorView.posAtCoords({
  142. left: event.clientX,
  143. top: event.clientY
  144. });
  145. var node = pos && pos.inside >= 0 && this.editorView.state.doc.nodeAt(pos.inside);
  146. var disableDropCursor = node && node.type.spec.disableDropCursor;
  147. var disabled = typeof disableDropCursor == "function" ? disableDropCursor(this.editorView, pos, event) : disableDropCursor;
  148. if (pos && !disabled) {
  149. var target = pos.pos;
  150. if (this.editorView.dragging && this.editorView.dragging.slice) {
  151. var point = prosemirrorTransform.dropPoint(this.editorView.state.doc, target, this.editorView.dragging.slice);
  152. if (point != null) target = point;
  153. }
  154. this.setCursor(target);
  155. this.scheduleRemoval(5000);
  156. }
  157. }
  158. }, {
  159. key: "dragend",
  160. value: function dragend() {
  161. this.scheduleRemoval(20);
  162. }
  163. }, {
  164. key: "drop",
  165. value: function drop() {
  166. this.scheduleRemoval(20);
  167. }
  168. }, {
  169. key: "dragleave",
  170. value: function dragleave(event) {
  171. if (event.target == this.editorView.dom || !this.editorView.dom.contains(event.relatedTarget)) this.setCursor(null);
  172. }
  173. }]);
  174. return DropCursorView;
  175. }();
  176. exports.dropCursor = dropCursor;