@codemirror/view 6.9.2 → 6.9.3

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 6.9.3 (2023-03-21)
+
+### Bug fixes
+
+Work around a Firefox issue that caused `coordsAtPos` to return rectangles with the full line height on empty lines.
+
+Opening a context menu by clicking below the content element but inside the editor now properly shows the browser's menu for editable elements.
+
+Fix an issue that broke composition (especially of Chinese IME) after widget decorations.
+
+Fix an issue that would cause the cursor to jump around during compositions inside nested mark decorations.
+
 ## 6.9.2 (2023-03-08)
 
 ### Bug fixes

package/dist/index.cjs

@@ -957,8 +957,9 @@ function scanCompositionTree(pos, side, view, text, enterView, fromText) {
 }
 function posFromDOMInCompositionTree(node, offset, view, text) {
     if (view instanceof MarkView) {
+        let pos = 0;
         for (let child of view.children) {
-            let pos = 0, hasComp = contains(child.dom, text);
+            let 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;
@@ -992,7 +993,7 @@ class WidgetBufferView extends ContentView {
         }
     }
     getSide() { return this.side; }
-    domAtPos(pos) { return DOMPos.before(this.dom); }
+    domAtPos(pos) { return this.side > 0 ? DOMPos.before(this.dom) : DOMPos.after(this.dom); }
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
@@ -1516,7 +1517,7 @@ class LineView extends ContentView {
     measureTextSize() {
         if (this.children.length == 0 || this.length > 20)
             return null;
-        let totalWidth = 0;
+        let totalWidth = 0, textHeight;
         for (let child of this.children) {
             if (!(child instanceof TextView) || /[^ -~]/.test(child.text))
                 return null;
@@ -1524,14 +1525,26 @@ class LineView extends ContentView {
             if (rects.length != 1)
                 return null;
             totalWidth += rects[0].width;
+            textHeight = rects[0].height;
         }
         return !totalWidth ? null : {
             lineHeight: this.dom.getBoundingClientRect().height,
-            charWidth: totalWidth / this.length
+            charWidth: totalWidth / this.length,
+            textHeight
         };
     }
     coordsAt(pos, side) {
-        return coordsInChildren(this, pos, side);
+        let rect = coordsInChildren(this, pos, side);
+        // Correct rectangle height for empty lines when the returned
+        // height is larger than the text height.
+        if (!this.children.length && rect && this.parent) {
+            let { heightOracle } = this.parent.view.viewState, height = rect.bottom - rect.top;
+            if (Math.abs(height - heightOracle.lineHeight) < 2 && heightOracle.textHeight < height) {
+                let dist = (height - heightOracle.textHeight) / 2;
+                return { top: rect.top + dist, bottom: rect.bottom - dist, left: rect.left, right: rect.left };
+            }
+        }
+        return rect;
     }
     become(_other) { return false; }
     get type() { return exports.BlockType.Text; }
@@ -2812,7 +2825,7 @@ class DocView extends ContentView {
             }
         }
         // If no workable line exists, force a layout of a measurable element
-        let dummy = document.createElement("div"), lineHeight, charWidth;
+        let dummy = document.createElement("div"), lineHeight, charWidth, textHeight;
         dummy.className = "cm-line";
         dummy.style.width = "99999px";
         dummy.textContent = "abc def ghi jkl mno pqr stu";
@@ -2821,9 +2834,10 @@ class DocView extends ContentView {
             let rect = clientRectsFor(dummy.firstChild)[0];
             lineHeight = dummy.getBoundingClientRect().height;
             charWidth = rect ? rect.width / 27 : 7;
+            textHeight = rect ? rect.height : lineHeight;
             dummy.remove();
         });
-        return { lineHeight, charWidth };
+        return { lineHeight, charWidth, textHeight };
     }
     childCursor(pos = this.length) {
         // Move back to start of last element when possible, so that
@@ -2988,22 +3002,32 @@ class CompositionWidget extends WidgetType {
     ignoreEvent() { return false; }
     get customView() { return CompositionView; }
 }
-function nearbyTextNode(node, offset, side) {
-    for (;;) {
-        if (node.nodeType == 3)
-            return node;
-        if (node.nodeType == 1 && offset > 0 && side <= 0) {
-            node = node.childNodes[offset - 1];
-            offset = maxOffset(node);
-        }
-        else if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
-            node = node.childNodes[offset];
-            offset = 0;
+function nearbyTextNode(startNode, startOffset, side) {
+    if (side <= 0)
+        for (let node = startNode, offset = startOffset;;) {
+            if (node.nodeType == 3)
+                return node;
+            if (node.nodeType == 1 && offset > 0) {
+                node = node.childNodes[offset - 1];
+                offset = maxOffset(node);
+            }
+            else {
+                break;
+            }
         }
-        else {
-            return null;
+    if (side >= 0)
+        for (let node = startNode, offset = startOffset;;) {
+            if (node.nodeType == 3)
+                return node;
+            if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
+                node = node.childNodes[offset];
+                offset = 0;
+            }
+            else {
+                break;
+            }
         }
-    }
+    return null;
 }
 function nextToUneditable(node, offset) {
     if (node.nodeType != 1)
@@ -3439,8 +3463,16 @@ class InputState {
             this.registeredEvents.push(type);
         }
         view.scrollDOM.addEventListener("mousedown", (event) => {
-            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom)
+            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom) {
                 handleEvent(handlers.mousedown, event);
+                if (!event.defaultPrevented && event.button == 2) {
+                    // Make sure the content covers the entire scroller height, in order
+                    // to catch a native context menu click below it
+                    let start = view.contentDOM.style.minHeight;
+                    view.contentDOM.style.minHeight = "100%";
+                    setTimeout(() => view.contentDOM.style.minHeight = start, 200);
+                }
+            }
         });
         if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
             // On Chrome 102, viewport updates somehow stop wheel-based
@@ -4134,8 +4166,9 @@ class HeightOracle {
         this.lineWrapping = lineWrapping;
         this.doc = state.Text.empty;
         this.heightSamples = {};
-        this.lineHeight = 14;
+        this.lineHeight = 14; // The height of an entire line (line-height)
         this.charWidth = 7;
+        this.textHeight = 14; // The height of the actual font (font-size)
         this.lineLength = 30;
         // Used to track, during updateHeight, if any actual heights changed
         this.heightChanged = false;
@@ -4170,12 +4203,13 @@ class HeightOracle {
         }
         return newHeight;
     }
-    refresh(whiteSpace, lineHeight, charWidth, lineLength, knownHeights) {
+    refresh(whiteSpace, lineHeight, charWidth, textHeight, lineLength, knownHeights) {
         let lineWrapping = wrappingWhiteSpace.indexOf(whiteSpace) > -1;
         let changed = Math.round(lineHeight) != Math.round(this.lineHeight) || this.lineWrapping != lineWrapping;
         this.lineWrapping = lineWrapping;
         this.lineHeight = lineHeight;
         this.charWidth = charWidth;
+        this.textHeight = textHeight;
         this.lineLength = lineLength;
         if (changed) {
             this.heightSamples = {};
@@ -5023,8 +5057,8 @@ class ViewState {
             if (oracle.mustRefreshForHeights(lineHeights))
                 refresh = true;
             if (refresh || oracle.lineWrapping && Math.abs(contentWidth - this.contentDOMWidth) > oracle.charWidth) {
-                let { lineHeight, charWidth } = view.docView.measureTextSize();
-                refresh = lineHeight > 0 && oracle.refresh(whiteSpace, lineHeight, charWidth, contentWidth / charWidth, lineHeights);
+                let { lineHeight, charWidth, textHeight } = view.docView.measureTextSize();
+                refresh = lineHeight > 0 && oracle.refresh(whiteSpace, lineHeight, charWidth, textHeight, contentWidth / charWidth, lineHeights);
                 if (refresh) {
                     view.docView.minWidth = 0;
                     result |= 8 /* UpdateFlag.Geometry */;

package/dist/index.js

@@ -953,8 +953,9 @@ function scanCompositionTree(pos, side, view, text, enterView, fromText) {
 }
 function posFromDOMInCompositionTree(node, offset, view, text) {
     if (view instanceof MarkView) {
+        let pos = 0;
         for (let child of view.children) {
-            let pos = 0, hasComp = contains(child.dom, text);
+            let 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;
@@ -988,7 +989,7 @@ class WidgetBufferView extends ContentView {
         }
     }
     getSide() { return this.side; }
-    domAtPos(pos) { return DOMPos.before(this.dom); }
+    domAtPos(pos) { return this.side > 0 ? DOMPos.before(this.dom) : DOMPos.after(this.dom); }
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
@@ -1511,7 +1512,7 @@ class LineView extends ContentView {
     measureTextSize() {
         if (this.children.length == 0 || this.length > 20)
             return null;
-        let totalWidth = 0;
+        let totalWidth = 0, textHeight;
         for (let child of this.children) {
             if (!(child instanceof TextView) || /[^ -~]/.test(child.text))
                 return null;
@@ -1519,14 +1520,26 @@ class LineView extends ContentView {
             if (rects.length != 1)
                 return null;
             totalWidth += rects[0].width;
+            textHeight = rects[0].height;
         }
         return !totalWidth ? null : {
             lineHeight: this.dom.getBoundingClientRect().height,
-            charWidth: totalWidth / this.length
+            charWidth: totalWidth / this.length,
+            textHeight
         };
     }
     coordsAt(pos, side) {
-        return coordsInChildren(this, pos, side);
+        let rect = coordsInChildren(this, pos, side);
+        // Correct rectangle height for empty lines when the returned
+        // height is larger than the text height.
+        if (!this.children.length && rect && this.parent) {
+            let { heightOracle } = this.parent.view.viewState, height = rect.bottom - rect.top;
+            if (Math.abs(height - heightOracle.lineHeight) < 2 && heightOracle.textHeight < height) {
+                let dist = (height - heightOracle.textHeight) / 2;
+                return { top: rect.top + dist, bottom: rect.bottom - dist, left: rect.left, right: rect.left };
+            }
+        }
+        return rect;
     }
     become(_other) { return false; }
     get type() { return BlockType.Text; }
@@ -2806,7 +2819,7 @@ class DocView extends ContentView {
             }
         }
         // If no workable line exists, force a layout of a measurable element
-        let dummy = document.createElement("div"), lineHeight, charWidth;
+        let dummy = document.createElement("div"), lineHeight, charWidth, textHeight;
         dummy.className = "cm-line";
         dummy.style.width = "99999px";
         dummy.textContent = "abc def ghi jkl mno pqr stu";
@@ -2815,9 +2828,10 @@ class DocView extends ContentView {
             let rect = clientRectsFor(dummy.firstChild)[0];
             lineHeight = dummy.getBoundingClientRect().height;
             charWidth = rect ? rect.width / 27 : 7;
+            textHeight = rect ? rect.height : lineHeight;
             dummy.remove();
         });
-        return { lineHeight, charWidth };
+        return { lineHeight, charWidth, textHeight };
     }
     childCursor(pos = this.length) {
         // Move back to start of last element when possible, so that
@@ -2982,22 +2996,32 @@ class CompositionWidget extends WidgetType {
     ignoreEvent() { return false; }
     get customView() { return CompositionView; }
 }
-function nearbyTextNode(node, offset, side) {
-    for (;;) {
-        if (node.nodeType == 3)
-            return node;
-        if (node.nodeType == 1 && offset > 0 && side <= 0) {
-            node = node.childNodes[offset - 1];
-            offset = maxOffset(node);
-        }
-        else if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
-            node = node.childNodes[offset];
-            offset = 0;
+function nearbyTextNode(startNode, startOffset, side) {
+    if (side <= 0)
+        for (let node = startNode, offset = startOffset;;) {
+            if (node.nodeType == 3)
+                return node;
+            if (node.nodeType == 1 && offset > 0) {
+                node = node.childNodes[offset - 1];
+                offset = maxOffset(node);
+            }
+            else {
+                break;
+            }
         }
-        else {
-            return null;
+    if (side >= 0)
+        for (let node = startNode, offset = startOffset;;) {
+            if (node.nodeType == 3)
+                return node;
+            if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
+                node = node.childNodes[offset];
+                offset = 0;
+            }
+            else {
+                break;
+            }
         }
-    }
+    return null;
 }
 function nextToUneditable(node, offset) {
     if (node.nodeType != 1)
@@ -3433,8 +3457,16 @@ class InputState {
             this.registeredEvents.push(type);
         }
         view.scrollDOM.addEventListener("mousedown", (event) => {
-            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom)
+            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom) {
                 handleEvent(handlers.mousedown, event);
+                if (!event.defaultPrevented && event.button == 2) {
+                    // Make sure the content covers the entire scroller height, in order
+                    // to catch a native context menu click below it
+                    let start = view.contentDOM.style.minHeight;
+                    view.contentDOM.style.minHeight = "100%";
+                    setTimeout(() => view.contentDOM.style.minHeight = start, 200);
+                }
+            }
         });
         if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
             // On Chrome 102, viewport updates somehow stop wheel-based
@@ -4128,8 +4160,9 @@ class HeightOracle {
         this.lineWrapping = lineWrapping;
         this.doc = Text.empty;
         this.heightSamples = {};
-        this.lineHeight = 14;
+        this.lineHeight = 14; // The height of an entire line (line-height)
         this.charWidth = 7;
+        this.textHeight = 14; // The height of the actual font (font-size)
         this.lineLength = 30;
         // Used to track, during updateHeight, if any actual heights changed
         this.heightChanged = false;
@@ -4164,12 +4197,13 @@ class HeightOracle {
         }
         return newHeight;
     }
-    refresh(whiteSpace, lineHeight, charWidth, lineLength, knownHeights) {
+    refresh(whiteSpace, lineHeight, charWidth, textHeight, lineLength, knownHeights) {
         let lineWrapping = wrappingWhiteSpace.indexOf(whiteSpace) > -1;
         let changed = Math.round(lineHeight) != Math.round(this.lineHeight) || this.lineWrapping != lineWrapping;
         this.lineWrapping = lineWrapping;
         this.lineHeight = lineHeight;
         this.charWidth = charWidth;
+        this.textHeight = textHeight;
         this.lineLength = lineLength;
         if (changed) {
             this.heightSamples = {};
@@ -5016,8 +5050,8 @@ class ViewState {
             if (oracle.mustRefreshForHeights(lineHeights))
                 refresh = true;
             if (refresh || oracle.lineWrapping && Math.abs(contentWidth - this.contentDOMWidth) > oracle.charWidth) {
-                let { lineHeight, charWidth } = view.docView.measureTextSize();
-                refresh = lineHeight > 0 && oracle.refresh(whiteSpace, lineHeight, charWidth, contentWidth / charWidth, lineHeights);
+                let { lineHeight, charWidth, textHeight } = view.docView.measureTextSize();
+                refresh = lineHeight > 0 && oracle.refresh(whiteSpace, lineHeight, charWidth, textHeight, contentWidth / charWidth, lineHeights);
                 if (refresh) {
                     view.docView.minWidth = 0;
                     result |= 8 /* UpdateFlag.Geometry */;

package/package.json

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