@codemirror/view 6.9.5 → 6.10.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## 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
+
+Fix an issue where, when escape was pressed followed by a key that the editor handled, followed by tab, the tab would still move focus.
+
+Fix an issue where, in some circumstances, the editor would ignore text changes at the end of a composition.
+
+Allow inline widgets to be updated to a different length via `updateDOM`.
+
 ## 6.9.5 (2023-04-17)
 
 ### 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;
@@ -856,15 +851,15 @@ class WidgetView extends ContentView {
         return true;
     }
     become(other) {
-        if (other.length == this.length && other instanceof WidgetView && other.side == this.side) {
-            if (this.widget.constructor == other.widget.constructor) {
-                if (!this.widget.compare(other.widget))
-                    this.markDirty(true);
-                if (this.dom && !this.prevWidget)
-                    this.prevWidget = this.widget;
-                this.widget = other.widget;
-                return true;
-            }
+        if (other instanceof WidgetView && other.side == this.side &&
+            this.widget.constructor == other.widget.constructor) {
+            if (!this.widget.compare(other.widget))
+                this.markDirty(true);
+            if (this.dom && !this.prevWidget)
+                this.prevWidget = this.widget;
+            this.widget = other.widget;
+            this.length = other.length;
+            return true;
         }
         return false;
     }
@@ -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
@@ -3631,6 +3614,8 @@ class InputState {
         this.lastKeyTime = Date.now();
         if (event.keyCode == 9 && Date.now() < this.lastEscPress + 2000)
             return true;
+        if (event.keyCode != 27 && modifierCodes.indexOf(event.keyCode) < 0)
+            view.inputState.lastEscPress = 0;
         // Chrome for Android usually doesn't fire proper key events, but
         // occasionally does, usually surrounded by a bunch of complicated
         // composition changes. When an enter or backspace key event is
@@ -3900,8 +3885,6 @@ handlers.keydown = (view, event) => {
     view.inputState.setSelectionOrigin("select");
     if (event.keyCode == 27)
         view.inputState.lastEscPress = Date.now();
-    else if (modifierCodes.indexOf(event.keyCode) < 0)
-        view.inputState.lastEscPress = 0;
 };
 handlers.touchstart = (view, e) => {
     view.inputState.lastTouchTime = Date.now();
@@ -4203,13 +4186,23 @@ handlers.compositionend = view => {
     view.inputState.compositionPendingKey = true;
     view.inputState.compositionPendingChange = view.observer.pendingRecords().length > 0;
     view.inputState.compositionFirstChange = null;
-    if (browser.chrome && browser.android)
+    if (browser.chrome && browser.android) {
+        // Delay flushing for a bit on Android because it'll often fire a
+        // bunch of contradictory changes in a row at end of compositon
         view.observer.flushSoon();
-    setTimeout(() => {
-        // Force the composition state to be cleared if it hasn't already been
-        if (view.inputState.composing < 0 && view.docView.compositionDeco.size)
-            view.update([]);
-    }, 50);
+    }
+    else if (view.inputState.compositionPendingChange) {
+        // If we found pending records, schedule a flush.
+        Promise.resolve().then(() => view.observer.flush());
+    }
+    else {
+        // Otherwise, make sure that, if no changes come in soon, the
+        // composition view is cleared.
+        setTimeout(() => {
+            if (view.inputState.composing < 0 && view.docView.compositionDeco.size)
+                view.update([]);
+        }, 50);
+    }
 };
 handlers.contextmenu = view => {
     view.inputState.lastContextMenu = Date.now();
@@ -6057,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)
@@ -7714,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)
@@ -8355,6 +8350,10 @@ class Placeholder extends WidgetType {
             wrap.setAttribute("aria-hidden", "true");
         return wrap;
     }
+    coordsAt(dom) {
+        let rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+        return rects.length ? flattenRect(rects[0], window.getComputedStyle(dom).direction != "rtl") : null;
+    }
     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;
@@ -852,15 +847,15 @@ class WidgetView extends ContentView {
         return true;
     }
     become(other) {
-        if (other.length == this.length && other instanceof WidgetView && other.side == this.side) {
-            if (this.widget.constructor == other.widget.constructor) {
-                if (!this.widget.compare(other.widget))
-                    this.markDirty(true);
-                if (this.dom && !this.prevWidget)
-                    this.prevWidget = this.widget;
-                this.widget = other.widget;
-                return true;
-            }
+        if (other instanceof WidgetView && other.side == this.side &&
+            this.widget.constructor == other.widget.constructor) {
+            if (!this.widget.compare(other.widget))
+                this.markDirty(true);
+            if (this.dom && !this.prevWidget)
+                this.prevWidget = this.widget;
+            this.widget = other.widget;
+            this.length = other.length;
+            return true;
         }
         return false;
     }
@@ -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
@@ -3625,6 +3608,8 @@ class InputState {
         this.lastKeyTime = Date.now();
         if (event.keyCode == 9 && Date.now() < this.lastEscPress + 2000)
             return true;
+        if (event.keyCode != 27 && modifierCodes.indexOf(event.keyCode) < 0)
+            view.inputState.lastEscPress = 0;
         // Chrome for Android usually doesn't fire proper key events, but
         // occasionally does, usually surrounded by a bunch of complicated
         // composition changes. When an enter or backspace key event is
@@ -3894,8 +3879,6 @@ handlers.keydown = (view, event) => {
     view.inputState.setSelectionOrigin("select");
     if (event.keyCode == 27)
         view.inputState.lastEscPress = Date.now();
-    else if (modifierCodes.indexOf(event.keyCode) < 0)
-        view.inputState.lastEscPress = 0;
 };
 handlers.touchstart = (view, e) => {
     view.inputState.lastTouchTime = Date.now();
@@ -4197,13 +4180,23 @@ handlers.compositionend = view => {
     view.inputState.compositionPendingKey = true;
     view.inputState.compositionPendingChange = view.observer.pendingRecords().length > 0;
     view.inputState.compositionFirstChange = null;
-    if (browser.chrome && browser.android)
+    if (browser.chrome && browser.android) {
+        // Delay flushing for a bit on Android because it'll often fire a
+        // bunch of contradictory changes in a row at end of compositon
         view.observer.flushSoon();
-    setTimeout(() => {
-        // Force the composition state to be cleared if it hasn't already been
-        if (view.inputState.composing < 0 && view.docView.compositionDeco.size)
-            view.update([]);
-    }, 50);
+    }
+    else if (view.inputState.compositionPendingChange) {
+        // If we found pending records, schedule a flush.
+        Promise.resolve().then(() => view.observer.flush());
+    }
+    else {
+        // Otherwise, make sure that, if no changes come in soon, the
+        // composition view is cleared.
+        setTimeout(() => {
+            if (view.inputState.composing < 0 && view.docView.compositionDeco.size)
+                view.update([]);
+        }, 50);
+    }
 };
 handlers.contextmenu = view => {
     view.inputState.lastContextMenu = Date.now();
@@ -6050,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)
@@ -7707,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)
@@ -8348,6 +8343,10 @@ class Placeholder extends WidgetType {
             wrap.setAttribute("aria-hidden", "true");
         return wrap;
     }
+    coordsAt(dom) {
+        let rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+        return rects.length ? flattenRect(rects[0], window.getComputedStyle(dom).direction != "rtl") : null;
+    }
     ignoreEvent() { return false; }
 }
 /**

package/package.json

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