prosemirror-dropcursor - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

CHANGELOG.md

@@ -0,1 +1,11 @@
+## 1.1.0 (2018-10-22)
+
+### Bug fixes
+
+Fixes an issue where drop cursors changed line breaking, causing the content to jump around during dragging.
+
+### New features
+
+Between-blocks drop cursors are now shown as a horizontal line.
+
 ## 1.0.1 (2018-06-20)
@@ -2,0 +12,0 @@

dist/dropcursor.js

@@ -7,101 +7,118 @@ 'use strict';
 var prosemirrorTransform = require('prosemirror-transform');
-var prosemirrorView = require('prosemirror-view');
 
-var gecko = typeof navigator != "undefined" && /gecko\/\d/i.test(navigator.userAgent);
-var linux = typeof navigator != "undefined" && /linux/i.test(navigator.platform);
-
 function dropCursor(options) {
-  function dispatch(view, data) {
-    view.dispatch(view.state.tr.setMeta(plugin, data));
-  }
+  if ( options === void 0 ) options = {};
 
-  var timeout = null;
-  function scheduleRemoval(view, time) {
-    clearTimeout(timeout);
-    timeout = setTimeout(function () {
-      if (plugin.getState(view.state)) { dispatch(view, {type: "remove"}); }
-    }, time);
-  }
+  return new prosemirrorState.Plugin({
+    view: function view(editorView) { return new DropCursorView(editorView, options) }
+  })
+}
 
-  var plugin = new prosemirrorState.Plugin({
-    state: {
-      init: function init() { return null },
-      apply: function apply(tr, prev, state) {
-        // Firefox on Linux gets really confused an breaks dragging when we
-        // mess with the nodes around the target node during a drag. So
-        // disable this plugin there. See https://bugzilla.mozilla.org/show_bug.cgi?id=1323170
-        if (gecko && linux) { return null }
-        var command = tr.getMeta("uiEvent") == "drop" ? {type: "remove"} : tr.getMeta(plugin);
-        if (!command) { return prev }
-        if (command.type == "set") { return pluginStateFor(state, command.pos, options) }
-        return null
-      }
-    },
-    props: {
-      handleDOMEvents: {
-        dragover: function dragover(view, event) {
-          var active = plugin.getState(view.state);
-          var pos = view.posAtCoords({left: event.clientX, top: event.clientY});
-          if (pos) {
-            var target = pos.pos;
-            if (view.dragging && view.dragging.slice) {
-              target = prosemirrorTransform.dropPoint(view.state.doc, target, view.dragging.slice);
-              if (target == null) { target = pos.pos; }
-            }
-            if (!active || active.pos != target)
-              { dispatch(view, {type: "set", pos: target}); }
-          }
-          scheduleRemoval(view, 5000);
-          return false
-        },
+var DropCursorView = function DropCursorView(editorView, options) {
+  var this$1 = this;
 
-        dragend: function dragend(view) {
-          scheduleRemoval(view, 20);
-          return false
-        },
+  this.editorView = editorView;
+  this.width = options.width || 1;
+  this.color = options.color || "black";
+  this.cursorPos = null;
+  this.element = null;
+  this.timeout = null;
 
-        drop: function drop(view) {
-          scheduleRemoval(view, 20);
-          return false
-        },
-
-        dragleave: function dragleave(view, event) {
-          if (event.target == view.dom || !view.dom.contains(event.relatedTarget)) { dispatch(view, {type: "remove"}); }
-          return false
-        }
-      },
-      decorations: function decorations(state) {
-        var active = plugin.getState(state);
-        return active && active.deco
-      }
-    }
+  this.handlers = ["dragover", "dragend", "drop", "dragleave"].map(function (name) {
+    var handler = function (e) { return this$1[name](e); };
+    editorView.dom.addEventListener(name, handler);
+    return {name: name, handler: handler}
   });
-  return plugin
-}
+};
 
-function style(options, side) {
-  var width = (options && options.width) || 1;
-  var color = (options && options.color) || "black";
-  return ("border-" + side + ": " + width + "px solid " + color + "; margin-" + side + ": -" + width + "px")
-}
+DropCursorView.prototype.destroy = function destroy () {
+    var this$1 = this;
 
-function pluginStateFor(state, pos, options) {
-  var $pos = state.doc.resolve(pos), deco;
+  this.handlers.forEach(function (ref) {
+      var name = ref.name;
+      var handler = ref.handler;
+
+      return this$1.editorView.dom.removeEventHandler(name, handler);
+    });
+};
+
+DropCursorView.prototype.update = function update (editorView, prevState) {
+  if (this.cursorPos != null && prevState.doc != editorView.state.doc) { this.updateOverlay(); }
+};
+
+DropCursorView.prototype.setCursor = function setCursor (pos) {
+  if (pos == this.cursorPos) { return }
+  this.cursorPos = pos;
+  if (pos == null) {
+    this.element.remove();
+    this.element = null;
+  } else {
+    this.updateOverlay();
+  }
+};
+
+DropCursorView.prototype.updateOverlay = function updateOverlay () {
+  var $pos = this.editorView.state.doc.resolve(this.cursorPos), rect;
   if (!$pos.parent.inlineContent) {
-    var before, after;
-    if (before = $pos.nodeBefore)
-      { deco = prosemirrorView.Decoration.node(pos - before.nodeSize, pos, {nodeName: "div", style: style(options, "right")}); }
-    else if (after = $pos.nodeAfter)
-      { deco = prosemirrorView.Decoration.node(pos, pos + after.nodeSize, {nodeName: "div", style: style(options, "left")}); }
+    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 (!deco) {
-    var node = document.createElement("span");
-    node.textContent = "\u200b";
-    node.style.cssText = style(options, "left") + "; display: inline-block; pointer-events: none";
-    deco = prosemirrorView.Decoration.widget(pos, node);
+  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};
   }
-  return {pos: pos, deco: prosemirrorView.DecorationSet.create(state.doc, [deco])}
-}
 
+  var parent = this.editorView.dom.offsetParent;
+  if (!this.element) {
+    this.element = parent.appendChild(document.createElement("div"));
+    this.element.style.cssText = "position: absolute; z-index: 50; pointer-events: none; background-color: " + this.color;
+  }
+  var parentRect = parent == document.body && getComputedStyle(parent).position == "static"
+      ? {left: -pageXOffset, top: -pageYOffset} : parent.getBoundingClientRect();
+  this.element.style.left = (rect.left - parentRect.left) + "px";
+  this.element.style.top = (rect.top - parentRect.top) + "px";
+  this.element.style.width = (rect.right - rect.left) + "px";
+  this.element.style.height = (rect.bottom - rect.top) + "px";
+};
+
+DropCursorView.prototype.scheduleRemoval = function scheduleRemoval (timeout) {
+    var this$1 = this;
+
+  clearTimeout(this.timeout);
+  this.timeout = setTimeout(function () { return this$1.setCursor(null); }, timeout);
+};
+
+DropCursorView.prototype.dragover = function dragover (event) {
+  var pos = this.editorView.posAtCoords({left: event.clientX, top: event.clientY});
+  if (pos) {
+    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) { target = pos.pos; }
+    }
+    this.setCursor(target);
+    this.scheduleRemoval(5000);
+  }
+};
+
+DropCursorView.prototype.dragend = function dragend () {
+  this.scheduleRemoval(20);
+};
+
+DropCursorView.prototype.drop = function drop () {
+  this.scheduleRemoval(20);
+};
+
+DropCursorView.prototype.dragleave = function dragleave (event) {
+  if (event.target == this.editorView.dom || !this.editorView.dom.contains(event.relatedTarget))
+    { this.setCursor(null); }
+};
+
 exports.dropCursor = dropCursor;
 //# sourceMappingURL=dropcursor.js.map

package.json

 {
   "name": "prosemirror-dropcursor",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Drop cursor plugin for ProseMirror",
@@ -5,0 +5,0 @@ "main": "dist/dropcursor.js",

README.md

@@ -24,2 +24,7 @@ # prosemirror-dropcursor
 
+We aim to be an inclusive, welcoming community. To make that explicit,
+we have a [code of
+conduct](http://contributor-covenant.org/version/1/1/0/) that applies
+to communication around the project.
+
 ## Documentation
@@ -35,6 +40,1 @@
 to black) and `width` to set its with in pixels (defaults to 1).
-
-We aim to be an inclusive, welcoming community. To make that explicit,
-we have a [code of
-conduct](http://contributor-covenant.org/version/1/1/0/) that applies
-to communication around the project.

src/dropcursor.js

 import {Plugin} from "prosemirror-state"
 import {dropPoint} from "prosemirror-transform"
-import {Decoration, DecorationSet} from "prosemirror-view"
 
-const gecko = typeof navigator != "undefined" && /gecko\/\d/i.test(navigator.userAgent)
-const linux = typeof navigator != "undefined" && /linux/i.test(navigator.platform)
+export function dropCursor(options = {}) {
+  return new Plugin({
+    view(editorView) { return new DropCursorView(editorView, options) }
+  })
+}
 
-export function dropCursor(options) {
-  function dispatch(view, data) {
-    view.dispatch(view.state.tr.setMeta(plugin, data))
+class DropCursorView {
+  constructor(editorView, options) {
+    this.editorView = editorView
+    this.width = options.width || 1
+    this.color = options.color || "black"
+    this.cursorPos = null
+    this.element = null
+    this.timeout = null
+
+    this.handlers = ["dragover", "dragend", "drop", "dragleave"].map(name => {
+      let handler = e => this[name](e)
+      editorView.dom.addEventListener(name, handler)
+      return {name, handler}
+    })
   }
 
-  let timeout = null
-  function scheduleRemoval(view, time) {
-    clearTimeout(timeout)
-    timeout = setTimeout(() => {
-      if (plugin.getState(view.state)) dispatch(view, {type: "remove"})
-    }, time)
+  destroy() {
+    this.handlers.forEach(({name, handler}) => this.editorView.dom.removeEventHandler(name, handler))
   }
 
-  let plugin = new Plugin({
-    state: {
-      init() { return null },
-      apply(tr, prev, state) {
-        // Firefox on Linux gets really confused an breaks dragging when we
-        // mess with the nodes around the target node during a drag. So
-        // disable this plugin there. See https://bugzilla.mozilla.org/show_bug.cgi?id=1323170
-        if (gecko && linux) return null
-        let command = tr.getMeta("uiEvent") == "drop" ? {type: "remove"} : tr.getMeta(plugin)
-        if (!command) return prev
-        if (command.type == "set") return pluginStateFor(state, command.pos, options)
-        return null
+  update(editorView, prevState) {
+    if (this.cursorPos != null && prevState.doc != editorView.state.doc) this.updateOverlay()
+  }
+
+  setCursor(pos) {
+    if (pos == this.cursorPos) return
+    this.cursorPos = pos
+    if (pos == null) {
+      this.element.remove()
+      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}
       }
-    },
-    props: {
-      handleDOMEvents: {
-        dragover(view, event) {
-          let active = plugin.getState(view.state)
-          let pos = view.posAtCoords({left: event.clientX, top: event.clientY})
-          if (pos) {
-            let target = pos.pos
-            if (view.dragging && view.dragging.slice) {
-              target = dropPoint(view.state.doc, target, view.dragging.slice)
-              if (target == null) target = pos.pos
-            }
-            if (!active || active.pos != target)
-              dispatch(view, {type: "set", pos: target})
-          }
-          scheduleRemoval(view, 5000)
-          return false
-        },
+    }
+    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}
+    }
 
-        dragend(view) {
-          scheduleRemoval(view, 20)
-          return false
-        },
+    let parent = this.editorView.dom.offsetParent
+    if (!this.element) {
+      this.element = parent.appendChild(document.createElement("div"))
+      this.element.style.cssText = "position: absolute; z-index: 50; pointer-events: none; background-color: " + this.color
+    }
+    let parentRect = parent == document.body && getComputedStyle(parent).position == "static"
+        ? {left: -pageXOffset, top: -pageYOffset} : parent.getBoundingClientRect()
+    this.element.style.left = (rect.left - parentRect.left) + "px"
+    this.element.style.top = (rect.top - parentRect.top) + "px"
+    this.element.style.width = (rect.right - rect.left) + "px"
+    this.element.style.height = (rect.bottom - rect.top) + "px"
+  }
 
-        drop(view) {
-          scheduleRemoval(view, 20)
-          return false
-        },
+  scheduleRemoval(timeout) {
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => this.setCursor(null), timeout)
+  }
 
-        dragleave(view, event) {
-          if (event.target == view.dom || !view.dom.contains(event.relatedTarget)) dispatch(view, {type: "remove"})
-          return false
-        }
-      },
-      decorations(state) {
-        let active = plugin.getState(state)
-        return active && active.deco
+  dragover(event) {
+    let pos = this.editorView.posAtCoords({left: event.clientX, top: event.clientY})
+    if (pos) {
+      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) target = pos.pos
       }
+      this.setCursor(target)
+      this.scheduleRemoval(5000)
     }
-  })
-  return plugin
-}
+  }
 
-function style(options, side) {
-  let width = (options && options.width) || 1
-  let color = (options && options.color) || "black"
-  return `border-${side}: ${width}px solid ${color}; margin-${side}: -${width}px`
-}
+  dragend() {
+    this.scheduleRemoval(20)
+  }
 
-function pluginStateFor(state, pos, options) {
-  let $pos = state.doc.resolve(pos), deco
-  if (!$pos.parent.inlineContent) {
-    let before, after
-    if (before = $pos.nodeBefore)
-      deco = Decoration.node(pos - before.nodeSize, pos, {nodeName: "div", style: style(options, "right")})
-    else if (after = $pos.nodeAfter)
-      deco = Decoration.node(pos, pos + after.nodeSize, {nodeName: "div", style: style(options, "left")})
+  drop() {
+    this.scheduleRemoval(20)
   }
-  if (!deco) {
-    let node = document.createElement("span")
-    node.textContent = "\u200b"
-    node.style.cssText = style(options, "left") + "; display: inline-block; pointer-events: none"
-    deco = Decoration.widget(pos, node)
+
+  dragleave(event) {
+    if (event.target == this.editorView.dom || !this.editorView.dom.contains(event.relatedTarget))
+      this.setCursor(null)
   }
-  return {pos, deco: DecorationSet.create(state.doc, [deco])}
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24186

increased by7.57%

Lines of code

201

increased by5.24%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes