@codemirror/view 6.9.6 → 6.10.1

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 6.10.1 (2023-05-01)
+
+### Bug fixes
+
+Limit cursor height in front of custom placeholder DOM elements.
+
+## 6.10.0 (2023-04-25)
+
+### Bug fixes
+
+Fix a crash in `drawSelection` when a measured position falls on a position that doesn't have corresponding screen coordinates.
+
+Work around unhelpful interaction observer behavior that could cause the editor to not notice it was visible.
+
+Give the cursor next to a line-wrapped placeholder a single-line height.
+
+Make sure drop events below the editable element in a fixed-height editor get handled properly.
+
+### New features
+
+Widget decorations can now define custom `coordsAtPos` methods to control the way the editor computes screen positions at or in the widget.
+
 ## 6.9.6 (2023-04-21)
 
 ### Bug fixes

package/dist/index.cjs

@@ -90,7 +90,6 @@ function scanFor(node, off, targetNode, targetOff, dir) {
 function maxOffset(node) {
     return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
 }
-const Rect0 = { left: 0, right: 0, top: 0, bottom: 0 };
 function flattenRect(rect, left) {
     let x = left ? rect.left : rect.right;
     return { left: x, right: x, top: rect.top, bottom: rect.bottom };
@@ -353,10 +352,6 @@ class ContentView {
     posAfter(view) {
         return this.posBefore(view) + view.length;
     }
-    // Will return a rectangle directly before (when side < 0), after
-    // (side > 0) or directly on (when the browser supports it) the
-    // given position.
-    coordsAt(_pos, _side) { return null; }
     sync(view, track) {
         if (this.dirty & 2 /* Dirty.Node */) {
             let parent = this.dom;
@@ -815,7 +810,7 @@ function textCoords(text, pos, side) {
     }
     let rects = textRange(text, from, to).getClientRects();
     if (!rects.length)
-        return Rect0;
+        return null;
     let rect = rects[(flatten ? flatten < 0 : side >= 0) ? 0 : rects.length - 1];
     if (browser.safari && !flatten && rect.width == 0)
         rect = Array.prototype.find.call(rects, r => r.width) || rect;
@@ -886,9 +881,12 @@ class WidgetView extends ContentView {
     }
     domBoundsAround() { return null; }
     coordsAt(pos, side) {
+        let custom = this.widget.coordsAt(this.dom, pos, side);
+        if (custom)
+            return custom;
         let rects = this.dom.getClientRects(), rect = null;
         if (!rects.length)
-            return Rect0;
+            return null;
         for (let i = pos > 0 ? rects.length - 1 : 0;; i += (pos > 0 ? -1 : 1)) {
             rect = rects[i];
             if (pos > 0 ? i == 0 : i == rects.length - 1 || rect.top < rect.bottom)
@@ -1055,12 +1053,7 @@ class WidgetBufferView extends ContentView {
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
-        let imgRect = this.dom.getBoundingClientRect();
-        // Since the <img> height doesn't correspond to text height, try
-        // to borrow the height from some sibling node.
-        let siblingRect = inlineSiblingRect(this, this.side > 0 ? -1 : 1);
-        return siblingRect && siblingRect.top < imgRect.bottom && siblingRect.bottom > imgRect.top
-            ? { left: imgRect.left, right: imgRect.right, top: siblingRect.top, bottom: siblingRect.bottom } : imgRect;
+        return this.dom.getBoundingClientRect();
     }
     get overrideDOMText() {
         return state.Text.empty;
@@ -1068,31 +1061,6 @@ class WidgetBufferView extends ContentView {
     get isHidden() { return true; }
 }
 TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
-function inlineSiblingRect(view, side) {
-    let parent = view.parent, index = parent ? parent.children.indexOf(view) : -1;
-    while (parent && index >= 0) {
-        if (side < 0 ? index > 0 : index < parent.children.length) {
-            let next = parent.children[index + side];
-            if (next instanceof TextView) {
-                let nextRect = next.coordsAt(side < 0 ? next.length : 0, side);
-                if (nextRect)
-                    return nextRect;
-            }
-            index += side;
-        }
-        else if (parent instanceof MarkView && parent.parent) {
-            index = parent.parent.children.indexOf(parent) + (side < 0 ? 0 : 1);
-            parent = parent.parent;
-        }
-        else {
-            let last = parent.dom.lastChild;
-            if (last && last.nodeName == "BR")
-                return last.getClientRects()[0];
-            break;
-        }
-    }
-    return undefined;
-}
 function inlineDOMAtPos(parent, pos) {
     let dom = parent.dom, { children } = parent, i = 0;
     for (let off = 0; i < children.length; i++) {
@@ -1139,12 +1107,12 @@ function coordsInChildren(view, pos, side) {
                 if (child.children.length) {
                     scan(child, pos - off);
                 }
-                else if ((!after || after instanceof WidgetBufferView && side > 0) &&
+                else if ((!after || after.isHidden && side > 0) &&
                     (end > pos || off == end && child.getSide() > 0)) {
                     after = child;
                     afterPos = pos - off;
                 }
-                else if (off < pos || (off == end && child.getSide() < 0)) {
+                else if (off < pos || (off == end && child.getSide() < 0) && !child.isHidden) {
                     before = child;
                     beforePos = pos - off;
                 }
@@ -1250,6 +1218,14 @@ class WidgetType {
     */
     ignoreEvent(event) { return true; }
     /**
+    Override the way screen coordinates for positions at/in the
+    widget are found. `pos` will be the offset into the widget, and
+    `side` the side of the position that is being queried—less than
+    zero for before, greater than zero for after, and zero for
+    directly at that position.
+    */
+    coordsAt(dom, pos, side) { return null; }
+    /**
     @internal
     */
     get customView() { return null; }
@@ -1684,6 +1660,9 @@ class BlockWidgetView extends ContentView {
     ignoreEvent(event) { return this.widget.ignoreEvent(event); }
     get isEditable() { return false; }
     get isWidget() { return true; }
+    coordsAt(pos, side) {
+        return this.widget.coordsAt(this.dom, pos, side);
+    }
     destroy() {
         super.destroy();
         if (this.dom)
@@ -3551,6 +3530,10 @@ class InputState {
                 }
             }
         });
+        view.scrollDOM.addEventListener("drop", (event) => {
+            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom)
+                handleEvent(handlers.drop, event);
+        });
         if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
             // On Chrome 102, viewport updates somehow stop wheel-based
             // scrolling. Turning off pointer events during the scroll seems
@@ -6067,7 +6050,7 @@ class DOMObserver {
                     if (this.intersecting != this.view.inView)
                         this.onScrollChanged(document.createEvent("Event"));
                 }
-            }, {});
+            }, { threshold: [0, .001] });
             this.intersection.observe(this.dom);
             this.gapIntersection = new IntersectionObserver(entries => {
                 if (entries.length > 0 && entries[entries.length - 1].intersectionRatio > 0)
@@ -7724,6 +7707,8 @@ function rectanglesForRange(view, className, range) {
             // coordsAtPos queries, would break selection drawing.
             let fromCoords = view.coordsAtPos(from, (from == line.to ? -2 : 2));
             let toCoords = view.coordsAtPos(to, (to == line.from ? 2 : -2));
+            if (!fromCoords || !toCoords)
+                return;
             top = Math.min(fromCoords.top, toCoords.top, top);
             bottom = Math.max(fromCoords.bottom, toCoords.bottom, bottom);
             if (dir == exports.Direction.LTR)
@@ -8365,6 +8350,17 @@ class Placeholder extends WidgetType {
             wrap.setAttribute("aria-hidden", "true");
         return wrap;
     }
+    coordsAt(dom) {
+        let rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+        if (!rects.length)
+            return null;
+        let style = window.getComputedStyle(dom.parentNode);
+        let rect = flattenRect(rects[0], style.direction != "rtl");
+        let lineHeight = parseInt(style.lineHeight);
+        if (rect.bottom - rect.top > lineHeight * 1.5)
+            return { left: rect.left, right: rect.right, top: rect.top, bottom: rect.top + lineHeight };
+        return rect;
+    }
     ignoreEvent() { return false; }
 }
 /**

package/dist/index.d.ts

@@ -6,6 +6,17 @@ declare type Attrs = {
     [name: string]: string;
 };
 
+/**
+Basic rectangle type.
+*/
+interface Rect {
+    readonly left: number;
+    readonly right: number;
+    readonly top: number;
+    readonly bottom: number;
+}
+declare type ScrollStrategy = "nearest" | "start" | "end" | "center";
+
 interface MarkDecorationSpec {
     /**
     Whether the mark covers its start and end position or not. This
@@ -169,6 +180,14 @@ declare abstract class WidgetType {
     */
     ignoreEvent(event: Event): boolean;
     /**
+    Override the way screen coordinates for positions at/in the
+    widget are found. `pos` will be the offset into the widget, and
+    `side` the side of the position that is being queried—less than
+    zero for before, greater than zero for after, and zero for
+    directly at that position.
+    */
+    coordsAt(dom: HTMLElement, pos: number, side: number): Rect | null;
+    /**
     This is called when the an instance of the widget is removed
     from the editor view.
     */
@@ -271,17 +290,6 @@ declare abstract class Decoration extends RangeValue {
     static none: DecorationSet;
 }
 
-/**
-Basic rectangle type.
-*/
-interface Rect {
-    readonly left: number;
-    readonly right: number;
-    readonly top: number;
-    readonly bottom: number;
-}
-declare type ScrollStrategy = "nearest" | "start" | "end" | "center";
-
 /**
 Command functions are used in key bindings and other types of user
 actions. Given an editor view, they check whether their effect can

package/dist/index.js

@@ -86,7 +86,6 @@ function scanFor(node, off, targetNode, targetOff, dir) {
 function maxOffset(node) {
     return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
 }
-const Rect0 = { left: 0, right: 0, top: 0, bottom: 0 };
 function flattenRect(rect, left) {
     let x = left ? rect.left : rect.right;
     return { left: x, right: x, top: rect.top, bottom: rect.bottom };
@@ -349,10 +348,6 @@ class ContentView {
     posAfter(view) {
         return this.posBefore(view) + view.length;
     }
-    // Will return a rectangle directly before (when side < 0), after
-    // (side > 0) or directly on (when the browser supports it) the
-    // given position.
-    coordsAt(_pos, _side) { return null; }
     sync(view, track) {
         if (this.dirty & 2 /* Dirty.Node */) {
             let parent = this.dom;
@@ -811,7 +806,7 @@ function textCoords(text, pos, side) {
     }
     let rects = textRange(text, from, to).getClientRects();
     if (!rects.length)
-        return Rect0;
+        return null;
     let rect = rects[(flatten ? flatten < 0 : side >= 0) ? 0 : rects.length - 1];
     if (browser.safari && !flatten && rect.width == 0)
         rect = Array.prototype.find.call(rects, r => r.width) || rect;
@@ -882,9 +877,12 @@ class WidgetView extends ContentView {
     }
     domBoundsAround() { return null; }
     coordsAt(pos, side) {
+        let custom = this.widget.coordsAt(this.dom, pos, side);
+        if (custom)
+            return custom;
         let rects = this.dom.getClientRects(), rect = null;
         if (!rects.length)
-            return Rect0;
+            return null;
         for (let i = pos > 0 ? rects.length - 1 : 0;; i += (pos > 0 ? -1 : 1)) {
             rect = rects[i];
             if (pos > 0 ? i == 0 : i == rects.length - 1 || rect.top < rect.bottom)
@@ -1051,12 +1049,7 @@ class WidgetBufferView extends ContentView {
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
-        let imgRect = this.dom.getBoundingClientRect();
-        // Since the <img> height doesn't correspond to text height, try
-        // to borrow the height from some sibling node.
-        let siblingRect = inlineSiblingRect(this, this.side > 0 ? -1 : 1);
-        return siblingRect && siblingRect.top < imgRect.bottom && siblingRect.bottom > imgRect.top
-            ? { left: imgRect.left, right: imgRect.right, top: siblingRect.top, bottom: siblingRect.bottom } : imgRect;
+        return this.dom.getBoundingClientRect();
     }
     get overrideDOMText() {
         return Text.empty;
@@ -1064,31 +1057,6 @@ class WidgetBufferView extends ContentView {
     get isHidden() { return true; }
 }
 TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
-function inlineSiblingRect(view, side) {
-    let parent = view.parent, index = parent ? parent.children.indexOf(view) : -1;
-    while (parent && index >= 0) {
-        if (side < 0 ? index > 0 : index < parent.children.length) {
-            let next = parent.children[index + side];
-            if (next instanceof TextView) {
-                let nextRect = next.coordsAt(side < 0 ? next.length : 0, side);
-                if (nextRect)
-                    return nextRect;
-            }
-            index += side;
-        }
-        else if (parent instanceof MarkView && parent.parent) {
-            index = parent.parent.children.indexOf(parent) + (side < 0 ? 0 : 1);
-            parent = parent.parent;
-        }
-        else {
-            let last = parent.dom.lastChild;
-            if (last && last.nodeName == "BR")
-                return last.getClientRects()[0];
-            break;
-        }
-    }
-    return undefined;
-}
 function inlineDOMAtPos(parent, pos) {
     let dom = parent.dom, { children } = parent, i = 0;
     for (let off = 0; i < children.length; i++) {
@@ -1135,12 +1103,12 @@ function coordsInChildren(view, pos, side) {
                 if (child.children.length) {
                     scan(child, pos - off);
                 }
-                else if ((!after || after instanceof WidgetBufferView && side > 0) &&
+                else if ((!after || after.isHidden && side > 0) &&
                     (end > pos || off == end && child.getSide() > 0)) {
                     after = child;
                     afterPos = pos - off;
                 }
-                else if (off < pos || (off == end && child.getSide() < 0)) {
+                else if (off < pos || (off == end && child.getSide() < 0) && !child.isHidden) {
                     before = child;
                     beforePos = pos - off;
                 }
@@ -1246,6 +1214,14 @@ class WidgetType {
     */
     ignoreEvent(event) { return true; }
     /**
+    Override the way screen coordinates for positions at/in the
+    widget are found. `pos` will be the offset into the widget, and
+    `side` the side of the position that is being queried—less than
+    zero for before, greater than zero for after, and zero for
+    directly at that position.
+    */
+    coordsAt(dom, pos, side) { return null; }
+    /**
     @internal
     */
     get customView() { return null; }
@@ -1679,6 +1655,9 @@ class BlockWidgetView extends ContentView {
     ignoreEvent(event) { return this.widget.ignoreEvent(event); }
     get isEditable() { return false; }
     get isWidget() { return true; }
+    coordsAt(pos, side) {
+        return this.widget.coordsAt(this.dom, pos, side);
+    }
     destroy() {
         super.destroy();
         if (this.dom)
@@ -3545,6 +3524,10 @@ class InputState {
                 }
             }
         });
+        view.scrollDOM.addEventListener("drop", (event) => {
+            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom)
+                handleEvent(handlers.drop, event);
+        });
         if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
             // On Chrome 102, viewport updates somehow stop wheel-based
             // scrolling. Turning off pointer events during the scroll seems
@@ -6060,7 +6043,7 @@ class DOMObserver {
                     if (this.intersecting != this.view.inView)
                         this.onScrollChanged(document.createEvent("Event"));
                 }
-            }, {});
+            }, { threshold: [0, .001] });
             this.intersection.observe(this.dom);
             this.gapIntersection = new IntersectionObserver(entries => {
                 if (entries.length > 0 && entries[entries.length - 1].intersectionRatio > 0)
@@ -7717,6 +7700,8 @@ function rectanglesForRange(view, className, range) {
             // coordsAtPos queries, would break selection drawing.
             let fromCoords = view.coordsAtPos(from, (from == line.to ? -2 : 2));
             let toCoords = view.coordsAtPos(to, (to == line.from ? 2 : -2));
+            if (!fromCoords || !toCoords)
+                return;
             top = Math.min(fromCoords.top, toCoords.top, top);
             bottom = Math.max(fromCoords.bottom, toCoords.bottom, bottom);
             if (dir == Direction.LTR)
@@ -8358,6 +8343,17 @@ class Placeholder extends WidgetType {
             wrap.setAttribute("aria-hidden", "true");
         return wrap;
     }
+    coordsAt(dom) {
+        let rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+        if (!rects.length)
+            return null;
+        let style = window.getComputedStyle(dom.parentNode);
+        let rect = flattenRect(rects[0], style.direction != "rtl");
+        let lineHeight = parseInt(style.lineHeight);
+        if (rect.bottom - rect.top > lineHeight * 1.5)
+            return { left: rect.left, right: rect.right, top: rect.top, bottom: rect.top + lineHeight };
+        return rect;
+    }
     ignoreEvent() { return false; }
 }
 /**

package/package.json

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