@codemirror/view 0.19.45 → 0.19.46

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.19.46 (2022-03-03)
+
+### Bug fixes
+
+Fix a bug where block widgets on the edges of viewports could cause the positioning of content to misalign with the gutter and height computations.
+
+Improve cursor height next to widgets.
+
+Fix a bug where mapping positions to screen coordinates could return incorred coordinates during composition.
+
 ## 0.19.45 (2022-02-23)
 
 ### Bug fixes

package/dist/index.cjs

@@ -22,7 +22,7 @@ function getSelection(root) {
     return target.getSelection();
 }
 function contains(dom, node) {
-    return node ? dom.contains(node.nodeType != 1 ? node.parentNode : node) : false;
+    return node ? dom == node || dom.contains(node.nodeType != 1 ? node.parentNode : node) : false;
 }
 function deepActiveElement() {
     let elt = document.activeElement;
@@ -856,18 +856,26 @@ class WidgetView extends ContentView {
 }
 class CompositionView extends WidgetView {
     domAtPos(pos) {
-        let { topView } = this.widget;
+        let { topView, text } = this.widget;
         if (!topView)
-            return new DOMPos(this.widget.text, Math.min(pos, this.widget.text.nodeValue.length));
-        return posInCompositionTree(pos, topView, this.widget.text);
+            return new DOMPos(text, Math.min(pos, text.nodeValue.length));
+        return scanCompositionTree(pos, 0, topView, text, (v, p) => v.domAtPos(p), p => new DOMPos(text, Math.min(p, text.nodeValue.length)));
     }
     sync() { this.setDOM(this.widget.toDOM()); }
     localPosFromDOM(node, offset) {
-        return !offset ? 0 : node.nodeType == 3 ? Math.min(offset, this.length) : this.length;
+        let { topView, text } = this.widget;
+        if (!topView)
+            return Math.min(offset, this.length);
+        return posFromDOMInCompositionTree(node, offset, topView, text);
     }
     ignoreMutation() { return false; }
     get overrideDOMText() { return null; }
-    coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
+    coordsAt(pos, side) {
+        let { topView, text } = this.widget;
+        if (!topView)
+            return textCoords(text, pos, side);
+        return scanCompositionTree(pos, side, topView, text, (v, pos, side) => v.coordsAt(pos, side), (pos, side) => textCoords(text, pos, side));
+    }
     destroy() {
         var _a;
         super.destroy();
@@ -878,23 +886,37 @@ class CompositionView extends WidgetView {
 // Uses the old structure of a chunk of content view frozen for
 // composition to try and find a reasonable DOM location for the given
 // offset.
-function posInCompositionTree(pos, view, text) {
+function scanCompositionTree(pos, side, view, text, enterView, fromText) {
     if (view instanceof MarkView) {
         for (let child of view.children) {
-            let hasComp = child.dom == text || child.dom.contains(text.parentNode);
+            let hasComp = contains(child.dom, text);
             let len = hasComp ? text.nodeValue.length : child.length;
             if (pos < len || pos == len && child.getSide() <= 0)
-                return hasComp ? posInCompositionTree(pos, child, text) : child.domAtPos(pos);
+                return hasComp ? scanCompositionTree(pos, side, child, text, enterView, fromText) : enterView(child, pos, side);
             pos -= len;
         }
-        return view.domAtPos(view.length);
+        return enterView(view, view.length, -1);
     }
     else if (view.dom == text) {
-        return new DOMPos(text, Math.min(pos, text.nodeValue.length));
+        return fromText(pos, side);
     }
     else {
-        return view.domAtPos(pos);
+        return enterView(view, pos, side);
+    }
+}
+function posFromDOMInCompositionTree(node, offset, view, text) {
+    if (view instanceof MarkView) {
+        for (let child of view.children) {
+            let pos = 0, hasComp = contains(child.dom, text);
+            if (contains(child.dom, node))
+                return pos + (hasComp ? posFromDOMInCompositionTree(node, offset, child, text) : child.localPosFromDOM(node, offset));
+            pos += hasComp ? text.nodeValue.length : child.length;
+        }
     }
+    else if (view.dom == text) {
+        return Math.min(offset, text.nodeValue.length);
+    }
+    return view.localPosFromDOM(node, offset);
 }
 // These are drawn around uneditable widgets to avoid a number of
 // browser bugs that show up when the cursor is directly next to
@@ -922,13 +944,43 @@ class WidgetBufferView extends ContentView {
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
-        return this.dom.getBoundingClientRect();
+        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;
     }
     get overrideDOMText() {
         return text.Text.empty;
     }
 }
 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(dom, children, pos) {
     let i = 0;
     for (let off = 0; i < children.length; i++) {
@@ -1154,7 +1206,7 @@ class Decoration extends rangeset.RangeValue {
     */
     static widget(spec) {
         let side = spec.side || 0, block = !!spec.block;
-        side += block ? (side > 0 ? 300000000 /* BlockAfter */ : -400000000 /* BlockBefore */) : (side > 0 ? 100000000 /* InlineAfter */ : -100000000 /* InlineBefore */);
+        side += block ? (side > 0 ? 400000000 /* BlockAfter */ : -500000000 /* BlockBefore */) : (side > 0 ? 100000000 /* InlineAfter */ : -100000000 /* InlineBefore */);
         return new PointDecoration(spec, side, side, block, spec.widget || null, false);
     }
     /**
@@ -1162,10 +1214,16 @@ class Decoration extends rangeset.RangeValue {
     a widget, or simply hides it.
     */
     static replace(spec) {
-        let block = !!spec.block;
-        let { start, end } = getInclusive(spec, block);
-        let startSide = (start ? (block ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 400000000 /* NonIncStart */) - 1;
-        let endSide = (end ? (block ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -500000000 /* NonIncEnd */) + 1;
+        let block = !!spec.block, startSide, endSide;
+        if (spec.isBlockGap) {
+            startSide = -400000000 /* GapStart */;
+            endSide = 300000000 /* GapEnd */;
+        }
+        else {
+            let { start, end } = getInclusive(spec, block);
+            startSide = (start ? (block ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 500000000 /* NonIncStart */) - 1;
+            endSide = (end ? (block ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -600000000 /* NonIncEnd */) + 1;
+        }
         return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
     }
     /**
@@ -1195,7 +1253,7 @@ Decoration.none = rangeset.RangeSet.empty;
 class MarkDecoration extends Decoration {
     constructor(spec) {
         let { start, end } = getInclusive(spec);
-        super(start ? -1 /* InlineIncStart */ : 400000000 /* NonIncStart */, end ? 1 /* InlineIncEnd */ : -500000000 /* NonIncEnd */, null, spec);
+        super(start ? -1 /* InlineIncStart */ : 500000000 /* NonIncStart */, end ? 1 /* InlineIncEnd */ : -600000000 /* NonIncEnd */, null, spec);
         this.tagName = spec.tagName || "span";
         this.class = spec.class || "";
         this.attrs = spec.attributes || null;
@@ -2774,7 +2832,12 @@ class DocView extends ContentView {
             let end = next ? next.from - 1 : this.length;
             if (end > pos) {
                 let height = vs.lineBlockAt(end).bottom - vs.lineBlockAt(pos).top;
-                deco.push(Decoration.replace({ widget: new BlockGapWidget(height), block: true, inclusive: true }).range(pos, end));
+                deco.push(Decoration.replace({
+                    widget: new BlockGapWidget(height),
+                    block: true,
+                    inclusive: true,
+                    isBlockGap: true,
+                }).range(pos, end));
             }
             if (!next)
                 break;

package/dist/index.js

@@ -19,7 +19,7 @@ function getSelection(root) {
     return target.getSelection();
 }
 function contains(dom, node) {
-    return node ? dom.contains(node.nodeType != 1 ? node.parentNode : node) : false;
+    return node ? dom == node || dom.contains(node.nodeType != 1 ? node.parentNode : node) : false;
 }
 function deepActiveElement() {
     let elt = document.activeElement;
@@ -853,18 +853,26 @@ class WidgetView extends ContentView {
 }
 class CompositionView extends WidgetView {
     domAtPos(pos) {
-        let { topView } = this.widget;
+        let { topView, text } = this.widget;
         if (!topView)
-            return new DOMPos(this.widget.text, Math.min(pos, this.widget.text.nodeValue.length));
-        return posInCompositionTree(pos, topView, this.widget.text);
+            return new DOMPos(text, Math.min(pos, text.nodeValue.length));
+        return scanCompositionTree(pos, 0, topView, text, (v, p) => v.domAtPos(p), p => new DOMPos(text, Math.min(p, text.nodeValue.length)));
     }
     sync() { this.setDOM(this.widget.toDOM()); }
     localPosFromDOM(node, offset) {
-        return !offset ? 0 : node.nodeType == 3 ? Math.min(offset, this.length) : this.length;
+        let { topView, text } = this.widget;
+        if (!topView)
+            return Math.min(offset, this.length);
+        return posFromDOMInCompositionTree(node, offset, topView, text);
     }
     ignoreMutation() { return false; }
     get overrideDOMText() { return null; }
-    coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
+    coordsAt(pos, side) {
+        let { topView, text } = this.widget;
+        if (!topView)
+            return textCoords(text, pos, side);
+        return scanCompositionTree(pos, side, topView, text, (v, pos, side) => v.coordsAt(pos, side), (pos, side) => textCoords(text, pos, side));
+    }
     destroy() {
         var _a;
         super.destroy();
@@ -875,23 +883,37 @@ class CompositionView extends WidgetView {
 // Uses the old structure of a chunk of content view frozen for
 // composition to try and find a reasonable DOM location for the given
 // offset.
-function posInCompositionTree(pos, view, text) {
+function scanCompositionTree(pos, side, view, text, enterView, fromText) {
     if (view instanceof MarkView) {
         for (let child of view.children) {
-            let hasComp = child.dom == text || child.dom.contains(text.parentNode);
+            let hasComp = contains(child.dom, text);
             let len = hasComp ? text.nodeValue.length : child.length;
             if (pos < len || pos == len && child.getSide() <= 0)
-                return hasComp ? posInCompositionTree(pos, child, text) : child.domAtPos(pos);
+                return hasComp ? scanCompositionTree(pos, side, child, text, enterView, fromText) : enterView(child, pos, side);
             pos -= len;
         }
-        return view.domAtPos(view.length);
+        return enterView(view, view.length, -1);
     }
     else if (view.dom == text) {
-        return new DOMPos(text, Math.min(pos, text.nodeValue.length));
+        return fromText(pos, side);
     }
     else {
-        return view.domAtPos(pos);
+        return enterView(view, pos, side);
+    }
+}
+function posFromDOMInCompositionTree(node, offset, view, text) {
+    if (view instanceof MarkView) {
+        for (let child of view.children) {
+            let pos = 0, hasComp = contains(child.dom, text);
+            if (contains(child.dom, node))
+                return pos + (hasComp ? posFromDOMInCompositionTree(node, offset, child, text) : child.localPosFromDOM(node, offset));
+            pos += hasComp ? text.nodeValue.length : child.length;
+        }
     }
+    else if (view.dom == text) {
+        return Math.min(offset, text.nodeValue.length);
+    }
+    return view.localPosFromDOM(node, offset);
 }
 // These are drawn around uneditable widgets to avoid a number of
 // browser bugs that show up when the cursor is directly next to
@@ -919,13 +941,43 @@ class WidgetBufferView extends ContentView {
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
-        return this.dom.getBoundingClientRect();
+        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;
     }
     get overrideDOMText() {
         return Text.empty;
     }
 }
 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(dom, children, pos) {
     let i = 0;
     for (let off = 0; i < children.length; i++) {
@@ -1150,7 +1202,7 @@ class Decoration extends RangeValue {
     */
     static widget(spec) {
         let side = spec.side || 0, block = !!spec.block;
-        side += block ? (side > 0 ? 300000000 /* BlockAfter */ : -400000000 /* BlockBefore */) : (side > 0 ? 100000000 /* InlineAfter */ : -100000000 /* InlineBefore */);
+        side += block ? (side > 0 ? 400000000 /* BlockAfter */ : -500000000 /* BlockBefore */) : (side > 0 ? 100000000 /* InlineAfter */ : -100000000 /* InlineBefore */);
         return new PointDecoration(spec, side, side, block, spec.widget || null, false);
     }
     /**
@@ -1158,10 +1210,16 @@ class Decoration extends RangeValue {
     a widget, or simply hides it.
     */
     static replace(spec) {
-        let block = !!spec.block;
-        let { start, end } = getInclusive(spec, block);
-        let startSide = (start ? (block ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 400000000 /* NonIncStart */) - 1;
-        let endSide = (end ? (block ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -500000000 /* NonIncEnd */) + 1;
+        let block = !!spec.block, startSide, endSide;
+        if (spec.isBlockGap) {
+            startSide = -400000000 /* GapStart */;
+            endSide = 300000000 /* GapEnd */;
+        }
+        else {
+            let { start, end } = getInclusive(spec, block);
+            startSide = (start ? (block ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 500000000 /* NonIncStart */) - 1;
+            endSide = (end ? (block ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -600000000 /* NonIncEnd */) + 1;
+        }
         return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
     }
     /**
@@ -1191,7 +1249,7 @@ Decoration.none = RangeSet.empty;
 class MarkDecoration extends Decoration {
     constructor(spec) {
         let { start, end } = getInclusive(spec);
-        super(start ? -1 /* InlineIncStart */ : 400000000 /* NonIncStart */, end ? 1 /* InlineIncEnd */ : -500000000 /* NonIncEnd */, null, spec);
+        super(start ? -1 /* InlineIncStart */ : 500000000 /* NonIncStart */, end ? 1 /* InlineIncEnd */ : -600000000 /* NonIncEnd */, null, spec);
         this.tagName = spec.tagName || "span";
         this.class = spec.class || "";
         this.attrs = spec.attributes || null;
@@ -2769,7 +2827,12 @@ class DocView extends ContentView {
             let end = next ? next.from - 1 : this.length;
             if (end > pos) {
                 let height = vs.lineBlockAt(end).bottom - vs.lineBlockAt(pos).top;
-                deco.push(Decoration.replace({ widget: new BlockGapWidget(height), block: true, inclusive: true }).range(pos, end));
+                deco.push(Decoration.replace({
+                    widget: new BlockGapWidget(height),
+                    block: true,
+                    inclusive: true,
+                    isBlockGap: true,
+                }).range(pos, end));
             }
             if (!next)
                 break;

package/package.json

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