@codemirror/view 0.19.30 → 0.19.31

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.19.31 (2021-12-13)
+
+### New features
+
+The package now exports a `dropCursor` extension that draws a cursor at the current drop position when dragging content over the editor.
+
 ## 0.19.30 (2021-12-13)
 
 ### Bug fixes

package/dist/index.cjs

@@ -5065,11 +5065,13 @@ const baseTheme = buildTheme("." + baseThemeID, {
     // recomputation.
     "@keyframes cm-blink": { "0%": {}, "50%": { visibility: "hidden" }, "100%": {} },
     "@keyframes cm-blink2": { "0%": {}, "50%": { visibility: "hidden" }, "100%": {} },
-    ".cm-cursor": {
+    ".cm-cursor, .cm-dropCursor": {
         position: "absolute",
         borderLeft: "1.2px solid black",
         marginLeft: "-0.6px",
         pointerEvents: "none",
+    },
+    ".cm-cursor": {
         display: "none"
     },
     "&dark .cm-cursor": {
@@ -6990,6 +6992,94 @@ function measureCursor(view, cursor, primary) {
     return new Piece(pos.left - base.left, pos.top - base.top, -1, pos.bottom - pos.top, primary ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary");
 }
 
+const setDropCursorPos = state.StateEffect.define({
+    map(pos, mapping) { return pos == null ? null : mapping.mapPos(pos); }
+});
+const dropCursorPos = state.StateField.define({
+    create() { return null; },
+    update(pos, tr) {
+        if (pos != null)
+            pos = tr.changes.mapPos(pos);
+        return tr.effects.reduce((pos, e) => e.is(setDropCursorPos) ? e.value : pos, pos);
+    }
+});
+const drawDropCursor = ViewPlugin.fromClass(class {
+    constructor(view) {
+        this.view = view;
+        this.cursor = null;
+        this.measureReq = { read: this.readPos.bind(this), write: this.drawCursor.bind(this) };
+    }
+    update(update) {
+        var _a;
+        let cursorPos = update.state.field(dropCursorPos);
+        if (cursorPos == null) {
+            if (this.cursor != null) {
+                (_a = this.cursor) === null || _a === void 0 ? void 0 : _a.remove();
+                this.cursor = null;
+            }
+        }
+        else {
+            if (!this.cursor) {
+                this.cursor = this.view.scrollDOM.appendChild(document.createElement("div"));
+                this.cursor.className = "cm-dropCursor";
+            }
+            if (update.startState.field(dropCursorPos) != cursorPos || update.docChanged || update.geometryChanged)
+                this.view.requestMeasure(this.measureReq);
+        }
+    }
+    readPos() {
+        let pos = this.view.state.field(dropCursorPos);
+        let rect = pos != null && this.view.coordsAtPos(pos);
+        if (!rect)
+            return null;
+        let outer = this.view.scrollDOM.getBoundingClientRect();
+        return { left: rect.left - outer.left, top: rect.top - outer.top, height: rect.bottom - rect.top };
+    }
+    drawCursor(pos) {
+        if (this.cursor) {
+            if (pos) {
+                this.cursor.style.left = pos.left + "px";
+                this.cursor.style.top = pos.top + "px";
+                this.cursor.style.height = pos.height + "px";
+            }
+            else {
+                this.cursor.style.left = "-100000px";
+            }
+        }
+    }
+    destroy() {
+        if (this.cursor)
+            this.cursor.remove();
+    }
+    setDropPos(pos) {
+        if (this.view.state.field(dropCursorPos) != pos)
+            this.view.dispatch({ effects: setDropCursorPos.of(pos) });
+    }
+}, {
+    eventHandlers: {
+        dragover(event) {
+            this.setDropPos(this.view.posAtCoords({ x: event.clientX, y: event.clientY }));
+        },
+        dragleave(event) {
+            if (event.target == this.view.contentDOM || !this.view.contentDOM.contains(event.relatedTarget))
+                this.setDropPos(null);
+        },
+        dragend() {
+            this.setDropPos(null);
+        },
+        drop() {
+            this.setDropPos(null);
+        }
+    }
+});
+/**
+Draws a cursor at the current drop position when something is
+dragged over the editor.
+*/
+function dropCursor() {
+    return [dropCursorPos, drawDropCursor];
+}
+
 function iterMatches(doc, re, from, to, f) {
     re.lastIndex = 0;
     for (let cursor = doc.iterRange(from, to), pos = from, m; !cursor.next().done; pos += cursor.value.length) {
@@ -7357,6 +7447,7 @@ exports.ViewUpdate = ViewUpdate;
 exports.WidgetType = WidgetType;
 exports.__test = __test;
 exports.drawSelection = drawSelection;
+exports.dropCursor = dropCursor;
 exports.highlightActiveLine = highlightActiveLine;
 exports.highlightSpecialChars = highlightSpecialChars;
 exports.keymap = keymap;

package/dist/index.d.ts

@@ -1291,6 +1291,12 @@ content).
 */
 declare function drawSelection(config?: SelectionConfig): Extension;
 
+/**
+Draws a cursor at the current drop position when something is
+dragged over the editor.
+*/
+declare function dropCursor(): Extension;
+
 interface SpecialCharConfig {
     /**
     An optional function that renders the placeholder elements.
@@ -1409,4 +1415,4 @@ declare class MatchDecorator {
     private updateRange;
 }
 
-export { BidiSpan, BlockInfo, BlockType, Command, DOMEventHandlers, DOMEventMap, Decoration, DecorationSet, Direction, EditorView, KeyBinding, MatchDecorator, MouseSelectionStyle, PluginField, PluginFieldProvider, PluginSpec, PluginValue, Rect, ViewPlugin, ViewUpdate, WidgetType, drawSelection, highlightActiveLine, highlightSpecialChars, keymap, logException, placeholder, runScopeHandlers, scrollPastEnd };
+export { BidiSpan, BlockInfo, BlockType, Command, DOMEventHandlers, DOMEventMap, Decoration, DecorationSet, Direction, EditorView, KeyBinding, MatchDecorator, MouseSelectionStyle, PluginField, PluginFieldProvider, PluginSpec, PluginValue, Rect, ViewPlugin, ViewUpdate, WidgetType, drawSelection, dropCursor, highlightActiveLine, highlightSpecialChars, keymap, logException, placeholder, runScopeHandlers, scrollPastEnd };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { MapMode, Text as Text$1, Facet, StateEffect, ChangeSet, EditorSelection, CharCategory, EditorState, Transaction, Prec, combineConfig } from '@codemirror/state';
+import { MapMode, Text as Text$1, Facet, StateEffect, ChangeSet, EditorSelection, CharCategory, EditorState, Transaction, Prec, combineConfig, StateField } from '@codemirror/state';
 import { StyleModule } from 'style-mod';
 import { RangeSet, RangeValue, RangeSetBuilder } from '@codemirror/rangeset';
 export { Range } from '@codemirror/rangeset';
@@ -5059,11 +5059,13 @@ const baseTheme = /*@__PURE__*/buildTheme("." + baseThemeID, {
     // recomputation.
     "@keyframes cm-blink": { "0%": {}, "50%": { visibility: "hidden" }, "100%": {} },
     "@keyframes cm-blink2": { "0%": {}, "50%": { visibility: "hidden" }, "100%": {} },
-    ".cm-cursor": {
+    ".cm-cursor, .cm-dropCursor": {
         position: "absolute",
         borderLeft: "1.2px solid black",
         marginLeft: "-0.6px",
         pointerEvents: "none",
+    },
+    ".cm-cursor": {
         display: "none"
     },
     "&dark .cm-cursor": {
@@ -6984,6 +6986,94 @@ function measureCursor(view, cursor, primary) {
     return new Piece(pos.left - base.left, pos.top - base.top, -1, pos.bottom - pos.top, primary ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary");
 }
 
+const setDropCursorPos = /*@__PURE__*/StateEffect.define({
+    map(pos, mapping) { return pos == null ? null : mapping.mapPos(pos); }
+});
+const dropCursorPos = /*@__PURE__*/StateField.define({
+    create() { return null; },
+    update(pos, tr) {
+        if (pos != null)
+            pos = tr.changes.mapPos(pos);
+        return tr.effects.reduce((pos, e) => e.is(setDropCursorPos) ? e.value : pos, pos);
+    }
+});
+const drawDropCursor = /*@__PURE__*/ViewPlugin.fromClass(class {
+    constructor(view) {
+        this.view = view;
+        this.cursor = null;
+        this.measureReq = { read: this.readPos.bind(this), write: this.drawCursor.bind(this) };
+    }
+    update(update) {
+        var _a;
+        let cursorPos = update.state.field(dropCursorPos);
+        if (cursorPos == null) {
+            if (this.cursor != null) {
+                (_a = this.cursor) === null || _a === void 0 ? void 0 : _a.remove();
+                this.cursor = null;
+            }
+        }
+        else {
+            if (!this.cursor) {
+                this.cursor = this.view.scrollDOM.appendChild(document.createElement("div"));
+                this.cursor.className = "cm-dropCursor";
+            }
+            if (update.startState.field(dropCursorPos) != cursorPos || update.docChanged || update.geometryChanged)
+                this.view.requestMeasure(this.measureReq);
+        }
+    }
+    readPos() {
+        let pos = this.view.state.field(dropCursorPos);
+        let rect = pos != null && this.view.coordsAtPos(pos);
+        if (!rect)
+            return null;
+        let outer = this.view.scrollDOM.getBoundingClientRect();
+        return { left: rect.left - outer.left, top: rect.top - outer.top, height: rect.bottom - rect.top };
+    }
+    drawCursor(pos) {
+        if (this.cursor) {
+            if (pos) {
+                this.cursor.style.left = pos.left + "px";
+                this.cursor.style.top = pos.top + "px";
+                this.cursor.style.height = pos.height + "px";
+            }
+            else {
+                this.cursor.style.left = "-100000px";
+            }
+        }
+    }
+    destroy() {
+        if (this.cursor)
+            this.cursor.remove();
+    }
+    setDropPos(pos) {
+        if (this.view.state.field(dropCursorPos) != pos)
+            this.view.dispatch({ effects: setDropCursorPos.of(pos) });
+    }
+}, {
+    eventHandlers: {
+        dragover(event) {
+            this.setDropPos(this.view.posAtCoords({ x: event.clientX, y: event.clientY }));
+        },
+        dragleave(event) {
+            if (event.target == this.view.contentDOM || !this.view.contentDOM.contains(event.relatedTarget))
+                this.setDropPos(null);
+        },
+        dragend() {
+            this.setDropPos(null);
+        },
+        drop() {
+            this.setDropPos(null);
+        }
+    }
+});
+/**
+Draws a cursor at the current drop position when something is
+dragged over the editor.
+*/
+function dropCursor() {
+    return [dropCursorPos, drawDropCursor];
+}
+
 function iterMatches(doc, re, from, to, f) {
     re.lastIndex = 0;
     for (let cursor = doc.iterRange(from, to), pos = from, m; !cursor.next().done; pos += cursor.value.length) {
@@ -7335,4 +7425,4 @@ function placeholder(content) {
 */
 const __test = { HeightMap, HeightOracle, MeasuredHeights, QueryType, ChangedRange, computeOrder, moveVisually };
 
-export { BidiSpan, BlockInfo, BlockType, Decoration, Direction, EditorView, MatchDecorator, PluginField, PluginFieldProvider, ViewPlugin, ViewUpdate, WidgetType, __test, drawSelection, highlightActiveLine, highlightSpecialChars, keymap, logException, placeholder, runScopeHandlers, scrollPastEnd };
+export { BidiSpan, BlockInfo, BlockType, Decoration, Direction, EditorView, MatchDecorator, PluginField, PluginFieldProvider, ViewPlugin, ViewUpdate, WidgetType, __test, drawSelection, dropCursor, highlightActiveLine, highlightSpecialChars, keymap, logException, placeholder, runScopeHandlers, scrollPastEnd };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "0.19.30",
+  "version": "0.19.31",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",