1 | import { Plugin } from 'prosemirror-state';
|
2 | import { dropPoint } from 'prosemirror-transform';
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 | function dropCursor(options) {
|
20 | if ( options === void 0 ) options = {};
|
21 |
|
22 | return new Plugin({
|
23 | view: function view(editorView) { return new DropCursorView(editorView, options) }
|
24 | })
|
25 | }
|
26 |
|
27 | var DropCursorView = function DropCursorView(editorView, options) {
|
28 | var this$1 = this;
|
29 |
|
30 | this.editorView = editorView;
|
31 | this.width = options.width || 1;
|
32 | this.color = options.color || "black";
|
33 | this.class = options.class;
|
34 | this.cursorPos = null;
|
35 | this.element = null;
|
36 | this.timeout = null;
|
37 |
|
38 | this.handlers = ["dragover", "dragend", "drop", "dragleave"].map(function (name) {
|
39 | var handler = function (e) { return this$1[name](e); };
|
40 | editorView.dom.addEventListener(name, handler);
|
41 | return {name: name, handler: handler}
|
42 | });
|
43 | };
|
44 |
|
45 | DropCursorView.prototype.destroy = function destroy () {
|
46 | var this$1 = this;
|
47 |
|
48 | this.handlers.forEach(function (ref) {
|
49 | var name = ref.name;
|
50 | var handler = ref.handler;
|
51 |
|
52 | return this$1.editorView.dom.removeEventListener(name, handler);
|
53 | });
|
54 | };
|
55 |
|
56 | DropCursorView.prototype.update = function update (editorView, prevState) {
|
57 | if (this.cursorPos != null && prevState.doc != editorView.state.doc) {
|
58 | if (this.cursorPos > editorView.state.doc.content.size) { this.setCursor(null); }
|
59 | else { this.updateOverlay(); }
|
60 | }
|
61 | };
|
62 |
|
63 | DropCursorView.prototype.setCursor = function setCursor (pos) {
|
64 | if (pos == this.cursorPos) { return }
|
65 | this.cursorPos = pos;
|
66 | if (pos == null) {
|
67 | this.element.parentNode.removeChild(this.element);
|
68 | this.element = null;
|
69 | } else {
|
70 | this.updateOverlay();
|
71 | }
|
72 | };
|
73 |
|
74 | DropCursorView.prototype.updateOverlay = function updateOverlay () {
|
75 | var $pos = this.editorView.state.doc.resolve(this.cursorPos), rect;
|
76 | if (!$pos.parent.inlineContent) {
|
77 | var before = $pos.nodeBefore, after = $pos.nodeAfter;
|
78 | if (before || after) {
|
79 | var nodeRect = this.editorView.nodeDOM(this.cursorPos - (before ?before.nodeSize : 0)).getBoundingClientRect();
|
80 | var top = before ? nodeRect.bottom : nodeRect.top;
|
81 | if (before && after)
|
82 | { top = (top + this.editorView.nodeDOM(this.cursorPos).getBoundingClientRect().top) / 2; }
|
83 | rect = {left: nodeRect.left, right: nodeRect.right, top: top - this.width / 2, bottom: top + this.width / 2};
|
84 | }
|
85 | }
|
86 | if (!rect) {
|
87 | var coords = this.editorView.coordsAtPos(this.cursorPos);
|
88 | rect = {left: coords.left - this.width / 2, right: coords.left + this.width / 2, top: coords.top, bottom: coords.bottom};
|
89 | }
|
90 |
|
91 | var parent = this.editorView.dom.offsetParent;
|
92 | if (!this.element) {
|
93 | this.element = parent.appendChild(document.createElement("div"));
|
94 | if (this.class) { this.element.className = this.class; }
|
95 | this.element.style.cssText = "position: absolute; z-index: 50; pointer-events: none; background-color: " + this.color;
|
96 | }
|
97 | var parentLeft, parentTop;
|
98 | if (!parent || parent == document.body && getComputedStyle(parent).position == "static") {
|
99 | parentLeft = -pageXOffset;
|
100 | parentTop = -pageYOffset;
|
101 | } else {
|
102 | var rect$1 = parent.getBoundingClientRect();
|
103 | parentLeft = rect$1.left - parent.scrollLeft;
|
104 | parentTop = rect$1.top - parent.scrollTop;
|
105 | }
|
106 | this.element.style.left = (rect.left - parentLeft) + "px";
|
107 | this.element.style.top = (rect.top - parentTop) + "px";
|
108 | this.element.style.width = (rect.right - rect.left) + "px";
|
109 | this.element.style.height = (rect.bottom - rect.top) + "px";
|
110 | };
|
111 |
|
112 | DropCursorView.prototype.scheduleRemoval = function scheduleRemoval (timeout) {
|
113 | var this$1 = this;
|
114 |
|
115 | clearTimeout(this.timeout);
|
116 | this.timeout = setTimeout(function () { return this$1.setCursor(null); }, timeout);
|
117 | };
|
118 |
|
119 | DropCursorView.prototype.dragover = function dragover (event) {
|
120 | if (!this.editorView.editable) { return }
|
121 | var pos = this.editorView.posAtCoords({left: event.clientX, top: event.clientY});
|
122 | if (pos) {
|
123 | var target = pos.pos;
|
124 | if (this.editorView.dragging && this.editorView.dragging.slice) {
|
125 | target = dropPoint(this.editorView.state.doc, target, this.editorView.dragging.slice);
|
126 | if (target == null) { return this.setCursor(null) }
|
127 | }
|
128 | this.setCursor(target);
|
129 | this.scheduleRemoval(5000);
|
130 | }
|
131 | };
|
132 |
|
133 | DropCursorView.prototype.dragend = function dragend () {
|
134 | this.scheduleRemoval(20);
|
135 | };
|
136 |
|
137 | DropCursorView.prototype.drop = function drop () {
|
138 | this.scheduleRemoval(20);
|
139 | };
|
140 |
|
141 | DropCursorView.prototype.dragleave = function dragleave (event) {
|
142 | if (event.target == this.editorView.dom || !this.editorView.dom.contains(event.relatedTarget))
|
143 | { this.setCursor(null); }
|
144 | };
|
145 |
|
146 | export { dropCursor };
|
147 |
|