@codemirror/view 6.20.1 → 6.21.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 6.21.0 (2023-09-29)
+
+### Bug fixes
+
+Fix a bug that could cause zero-length widgets at the start of a line to be left in the view even after they were removed.
+
+### New features
+
+`RectangleMarker`'s dimension properties are now public.
+
+## 6.20.2 (2023-09-25)
+
+### Bug fixes
+
+Fix an issue in the way the DOM selection is being read that could break backspacing of widgets on Android.
+
+Fix a bug where the editor could incorrectly computate its transform scale when it was small.
+
 ## 6.20.1 (2023-09-22)
 
 ### Bug fixes

package/dist/index.cjs

@@ -596,7 +596,7 @@ function replaceRange(parent, fromI, fromOff, toI, toOff, insert, breakAtStart,
             else {
                 // Remove the start of the after element, if necessary, and
                 // add it to `content`.
-                if (toOff)
+                if (toOff || after.children.length && !after.children[0].length)
                     after.merge(0, toOff, null, false, 0, openEnd);
                 insert.push(after);
             }
@@ -5335,9 +5335,9 @@ class ViewState {
         if (domRect.width && domRect.height) {
             let scaleX = domRect.width / dom.offsetWidth;
             let scaleY = domRect.height / dom.offsetHeight;
-            if (scaleX > 0.995 && scaleX < 1.005 || !isFinite(scaleX))
+            if (scaleX > 0.995 && scaleX < 1.005 || !isFinite(scaleX) || Math.abs(domRect.width - dom.offsetWidth) < 1)
                 scaleX = 1;
-            if (scaleY > 0.995 && scaleY < 1.005 || !isFinite(scaleY))
+            if (scaleY > 0.995 && scaleY < 1.005 || !isFinite(scaleY) || Math.abs(domRect.height - dom.offsetHeight) < 1)
                 scaleY = 1;
             if (this.scaleX != scaleX || this.scaleY != scaleY) {
                 this.scaleX = scaleX;
@@ -6075,10 +6075,20 @@ class DOMReader {
             if (point.node == node && node.childNodes[point.offset] == next)
                 point.pos = this.text.length;
     }
-    findPointInside(node, maxLen) {
+    findPointInside(node, length) {
         for (let point of this.points)
             if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
-                point.pos = this.text.length + Math.min(maxLen, point.offset);
+                point.pos = this.text.length + (isAtEnd(node, point.node, point.offset) ? length : 0);
+    }
+}
+function isAtEnd(parent, node, offset) {
+    for (;;) {
+        if (!node || offset < maxOffset(node))
+            return false;
+        if (node == parent)
+            return true;
+        offset = domIndex(node) + 1;
+        node = node.parentNode;
     }
 }
 function isBlockElement(node) {
@@ -8077,7 +8087,23 @@ class RectangleMarker {
     Create a marker with the given class and dimensions. If `width`
     is null, the DOM element will get no width style.
     */
-    constructor(className, left, top, width, height) {
+    constructor(className, 
+    /**
+    The left position of the marker (in pixels, document-relative).
+    */
+    left, 
+    /**
+    The top position of the marker.
+    */
+    top, 
+    /**
+    The width of the marker, or null if it shouldn't get a width assigned.
+    */
+    width, 
+    /**
+    The height of the marker.
+    */
+    height) {
         this.className = className;
         this.left = left;
         this.top = top;
@@ -10023,14 +10049,14 @@ class UpdateContext {
         this.cursor = state.RangeSet.iter(gutter.markers, viewport.from);
     }
     addElement(view, block, markers) {
-        let { gutter } = this, above = block.top - this.height;
+        let { gutter } = this, above = (block.top - this.height) / view.scaleY, height = block.height / view.scaleY;
         if (this.i == gutter.elements.length) {
-            let newElt = new GutterElement(view, block.height, above, markers);
+            let newElt = new GutterElement(view, height, above, markers);
             gutter.elements.push(newElt);
             gutter.dom.appendChild(newElt.dom);
         }
         else {
-            gutter.elements[this.i].update(view, block.height, above, markers);
+            gutter.elements[this.i].update(view, height, above, markers);
         }
         this.height = block.bottom;
         this.i++;
@@ -10123,10 +10149,10 @@ class GutterElement {
     update(view, height, above, markers) {
         if (this.height != height) {
             this.height = height;
-            this.dom.style.height = height / view.scaleY + "px";
+            this.dom.style.height = height + "px";
         }
         if (this.above != above)
-            this.dom.style.marginTop = (this.above = above) ? above / view.scaleY + "px" : "";
+            this.dom.style.marginTop = (this.above = above) ? above + "px" : "";
         if (!sameMarkers(this.markers, markers))
             this.setMarkers(view, markers);
     }

package/dist/index.d.cts

@@ -1519,15 +1519,43 @@ a rectangle at a given set of coordinates.
 */
 declare class RectangleMarker implements LayerMarker {
     private className;
-    private left;
-    private top;
-    private width;
-    private height;
+    /**
+    The left position of the marker (in pixels, document-relative).
+    */
+    readonly left: number;
+    /**
+    The top position of the marker.
+    */
+    readonly top: number;
+    /**
+    The width of the marker, or null if it shouldn't get a width assigned.
+    */
+    readonly width: number | null;
+    /**
+    The height of the marker.
+    */
+    readonly height: number;
     /**
     Create a marker with the given class and dimensions. If `width`
     is null, the DOM element will get no width style.
     */
-    constructor(className: string, left: number, top: number, width: number | null, height: number);
+    constructor(className: string, 
+    /**
+    The left position of the marker (in pixels, document-relative).
+    */
+    left: number, 
+    /**
+    The top position of the marker.
+    */
+    top: number, 
+    /**
+    The width of the marker, or null if it shouldn't get a width assigned.
+    */
+    width: number | null, 
+    /**
+    The height of the marker.
+    */
+    height: number);
     draw(): HTMLDivElement;
     update(elt: HTMLElement, prev: RectangleMarker): boolean;
     private adjust;

package/dist/index.d.ts

@@ -1519,15 +1519,43 @@ a rectangle at a given set of coordinates.
 */
 declare class RectangleMarker implements LayerMarker {
     private className;
-    private left;
-    private top;
-    private width;
-    private height;
+    /**
+    The left position of the marker (in pixels, document-relative).
+    */
+    readonly left: number;
+    /**
+    The top position of the marker.
+    */
+    readonly top: number;
+    /**
+    The width of the marker, or null if it shouldn't get a width assigned.
+    */
+    readonly width: number | null;
+    /**
+    The height of the marker.
+    */
+    readonly height: number;
     /**
     Create a marker with the given class and dimensions. If `width`
     is null, the DOM element will get no width style.
     */
-    constructor(className: string, left: number, top: number, width: number | null, height: number);
+    constructor(className: string, 
+    /**
+    The left position of the marker (in pixels, document-relative).
+    */
+    left: number, 
+    /**
+    The top position of the marker.
+    */
+    top: number, 
+    /**
+    The width of the marker, or null if it shouldn't get a width assigned.
+    */
+    width: number | null, 
+    /**
+    The height of the marker.
+    */
+    height: number);
     draw(): HTMLDivElement;
     update(elt: HTMLElement, prev: RectangleMarker): boolean;
     private adjust;

package/dist/index.js

@@ -594,7 +594,7 @@ function replaceRange(parent, fromI, fromOff, toI, toOff, insert, breakAtStart,
             else {
                 // Remove the start of the after element, if necessary, and
                 // add it to `content`.
-                if (toOff)
+                if (toOff || after.children.length && !after.children[0].length)
                     after.merge(0, toOff, null, false, 0, openEnd);
                 insert.push(after);
             }
@@ -5330,9 +5330,9 @@ class ViewState {
         if (domRect.width && domRect.height) {
             let scaleX = domRect.width / dom.offsetWidth;
             let scaleY = domRect.height / dom.offsetHeight;
-            if (scaleX > 0.995 && scaleX < 1.005 || !isFinite(scaleX))
+            if (scaleX > 0.995 && scaleX < 1.005 || !isFinite(scaleX) || Math.abs(domRect.width - dom.offsetWidth) < 1)
                 scaleX = 1;
-            if (scaleY > 0.995 && scaleY < 1.005 || !isFinite(scaleY))
+            if (scaleY > 0.995 && scaleY < 1.005 || !isFinite(scaleY) || Math.abs(domRect.height - dom.offsetHeight) < 1)
                 scaleY = 1;
             if (this.scaleX != scaleX || this.scaleY != scaleY) {
                 this.scaleX = scaleX;
@@ -6070,10 +6070,20 @@ class DOMReader {
             if (point.node == node && node.childNodes[point.offset] == next)
                 point.pos = this.text.length;
     }
-    findPointInside(node, maxLen) {
+    findPointInside(node, length) {
         for (let point of this.points)
             if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
-                point.pos = this.text.length + Math.min(maxLen, point.offset);
+                point.pos = this.text.length + (isAtEnd(node, point.node, point.offset) ? length : 0);
+    }
+}
+function isAtEnd(parent, node, offset) {
+    for (;;) {
+        if (!node || offset < maxOffset(node))
+            return false;
+        if (node == parent)
+            return true;
+        offset = domIndex(node) + 1;
+        node = node.parentNode;
     }
 }
 function isBlockElement(node) {
@@ -8072,7 +8082,23 @@ class RectangleMarker {
     Create a marker with the given class and dimensions. If `width`
     is null, the DOM element will get no width style.
     */
-    constructor(className, left, top, width, height) {
+    constructor(className, 
+    /**
+    The left position of the marker (in pixels, document-relative).
+    */
+    left, 
+    /**
+    The top position of the marker.
+    */
+    top, 
+    /**
+    The width of the marker, or null if it shouldn't get a width assigned.
+    */
+    width, 
+    /**
+    The height of the marker.
+    */
+    height) {
         this.className = className;
         this.left = left;
         this.top = top;
@@ -10018,14 +10044,14 @@ class UpdateContext {
         this.cursor = RangeSet.iter(gutter.markers, viewport.from);
     }
     addElement(view, block, markers) {
-        let { gutter } = this, above = block.top - this.height;
+        let { gutter } = this, above = (block.top - this.height) / view.scaleY, height = block.height / view.scaleY;
         if (this.i == gutter.elements.length) {
-            let newElt = new GutterElement(view, block.height, above, markers);
+            let newElt = new GutterElement(view, height, above, markers);
             gutter.elements.push(newElt);
             gutter.dom.appendChild(newElt.dom);
         }
         else {
-            gutter.elements[this.i].update(view, block.height, above, markers);
+            gutter.elements[this.i].update(view, height, above, markers);
         }
         this.height = block.bottom;
         this.i++;
@@ -10118,10 +10144,10 @@ class GutterElement {
     update(view, height, above, markers) {
         if (this.height != height) {
             this.height = height;
-            this.dom.style.height = height / view.scaleY + "px";
+            this.dom.style.height = height + "px";
         }
         if (this.above != above)
-            this.dom.style.marginTop = (this.above = above) ? above / view.scaleY + "px" : "";
+            this.dom.style.marginTop = (this.above = above) ? above + "px" : "";
         if (!sameMarkers(this.markers, markers))
             this.setMarkers(view, markers);
     }

package/package.json

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