prosemirror-dropcursor - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0-beta.1

dist/index.es.js

@@ -33,3 +33,3 @@ import { Plugin } from 'prosemirror-state';
 var DropCursorView = function DropCursorView(editorView, options) {
-  var this$1 = this;
+  var this$1$1 = this;
 
@@ -45,3 +45,3 @@ this.editorView = editorView;
   this.handlers = ["dragover", "dragend", "drop", "dragleave"].map(function (name) {
-    var handler = function (e) { return this$1[name](e); };
+    var handler = function (e) { return this$1$1[name](e); };
     editorView.dom.addEventListener(name, handler);
@@ -53,3 +53,3 @@ return {name: name, handler: handler}
 DropCursorView.prototype.destroy = function destroy () {
-    var this$1 = this;
+    var this$1$1 = this;
 
@@ -60,3 +60,3 @@ this.handlers.forEach(function (ref) {
 
-      return this$1.editorView.dom.removeEventListener(name, handler);
+      return this$1$1.editorView.dom.removeEventListener(name, handler);
     });
@@ -122,6 +122,6 @@ };
 DropCursorView.prototype.scheduleRemoval = function scheduleRemoval (timeout) {
-    var this$1 = this;
+    var this$1$1 = this;
 
   clearTimeout(this.timeout);
-  this.timeout = setTimeout(function () { return this$1.setCursor(null); }, timeout);
+  this.timeout = setTimeout(function () { return this$1$1.setCursor(null); }, timeout);
 };
@@ -128,0 +128,0 @@

dist/index.js

@@ -1,161 +0,130 @@
-'use strict';
+import { Plugin } from 'prosemirror-state';
+import { dropPoint } from 'prosemirror-transform';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+/**
+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.
 
-var prosemirrorState = require('prosemirror-state');
-var prosemirrorTransform = require('prosemirror-transform');
-
-// :: (options: ?Object) → Plugin
-// 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.
-//
-//   options::- These options are supported:
-//
-//     color:: ?string
-//     The color of the cursor. Defaults to `black`.
-//
-//     width:: ?number
-//     The precise width of the cursor in pixels. Defaults to 1.
-//
-//     class:: ?string
-//     A CSS class name to add to the cursor element.
-function dropCursor(options) {
-  if ( options === void 0 ) options = {};
-
-  return new prosemirrorState.Plugin({
-    view: function view(editorView) { return new DropCursorView(editorView, options) }
-  })
+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); }
+    });
 }
-
-var DropCursorView = function DropCursorView(editorView, options) {
-  var this$1 = this;
-
-  this.editorView = editorView;
-  this.width = options.width || 1;
-  this.color = options.color || "black";
-  this.class = options.class;
-  this.cursorPos = null;
-  this.element = null;
-  this.timeout = null;
-
-  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}
-  });
-};
-
-DropCursorView.prototype.destroy = function destroy () {
-    var this$1 = this;
-
-  this.handlers.forEach(function (ref) {
-      var name = ref.name;
-      var handler = ref.handler;
-
-      return this$1.editorView.dom.removeEventListener(name, handler);
-    });
-};
-
-DropCursorView.prototype.update = 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(); }
-  }
-};
-
-DropCursorView.prototype.setCursor = 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();
-  }
-};
-
-DropCursorView.prototype.updateOverlay = 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};
+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 };
+        });
     }
-  }
-  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$1 = parent.getBoundingClientRect();
-    parentLeft = rect$1.left - parent.scrollLeft;
-    parentTop = rect$1.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";
-};
-
-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) {
-  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) }
+    destroy() {
+        this.handlers.forEach(({ name, handler }) => this.editorView.dom.removeEventListener(name, handler));
     }
-    this.setCursor(target);
-    this.scheduleRemoval(5000);
-  }
-};
+    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);
+    }
+}
 
-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=index.js.map
+export { dropCursor };

package.json

 {
   "name": "prosemirror-dropcursor",
-  "version": "1.4.0",
+  "version": "1.5.0-beta.1",
   "description": "Drop cursor plugin for ProseMirror",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "sideEffects": false,
   "license": "MIT",
@@ -19,6 +26,2 @@ "maintainers": [
   },
-  "devDependencies": {
-    "rollup": "^2.26.3",
-    "@rollup/plugin-buble": "^0.21.3"
-  },
   "dependencies": {
@@ -29,7 +32,9 @@ "prosemirror-state": "^1.0.0",
   },
+  "devDependencies": {
+    "@prosemirror/buildhelper": "^0.1.5"
+  },
   "scripts": {
-    "build": "rollup -c",
-    "watch": "rollup -c -w",
-    "prepare": "npm run build"
+    "test": "pm-runtests",
+    "prepare": "pm-buildhelper src/dropcursor.ts"
   }
 }

README.md

@@ -31,13 +31,21 @@ # prosemirror-dropcursor
 
-**`dropCursor`**`(options: ?Object) → Plugin`
+* **`dropCursor`**`(options?: interface = {}) → Plugin`\
+   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.
 
-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.
 
- - **`options`**`: ?Object`
-   - **`color`**`: ?string (default: black)`
-   - **`width`**`: ?number (default: 1)`
-   - **`class`**`: ?string`\
-   Adds a class to the cursor.\
-   *Layout overrides such as `width` are not recommended*
+    * **`options`**
+
+       * **`color`**`?: string`\
+         The color of the cursor. Defaults to `black`.
+
+       * **`width`**`?: number`\
+         The precise width of the cursor in pixels. Defaults to 1.
+
+       * **`class`**`?: string`\
+         A CSS class name to add to the cursor element.

New alerts

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56467

increased by17.49%

Dev dependency count

1

decreased by-50%

Number of package files

12

increased by9.09%

Lines of code

586

increased by40.87%

Number of lines in readme file

51

increased by18.6%

Is type module

Yes

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes