@codemirror/view 6.9.1 → 6.9.3

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 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
+
+Work around a Firefox CSS bug that caused cursors to stop blinking in a scrolled editor.
+
+Fix an issue in `drawSelection` where the selection extended into the editor's padding.
+
+Fix pasting of links copied from iOS share sheet.
+
 ## 6.9.1 (2023-02-17)
 
 ### 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)
@@ -3167,7 +3191,7 @@ function domPosInText(node, x, y) {
     return { node, offset: closestOffset > -1 ? closestOffset : generalSide > 0 ? node.nodeValue.length : 0 };
 }
 function posAtCoords(view, coords, precise, bias = -1) {
-    var _a;
+    var _a, _b;
     let content = view.contentDOM.getBoundingClientRect(), docTop = content.top + view.viewState.paddingTop;
     let block, { docHeight } = view.viewState;
     let { x, y } = coords, yOffset = y - docTop;
@@ -3244,7 +3268,7 @@ function posAtCoords(view, coords, precise, bias = -1) {
     let nearest = view.docView.nearest(node);
     if (!nearest)
         return null;
-    if (nearest.isWidget) {
+    if (nearest.isWidget && ((_b = nearest.dom) === null || _b === void 0 ? void 0 : _b.nodeType) == 1) {
         let rect = nearest.dom.getBoundingClientRect();
         return coords.y < rect.top || coords.y <= rect.bottom && coords.x <= (rect.left + rect.right) / 2
             ? nearest.posAtStart : nearest.posAtEnd;
@@ -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
@@ -3974,7 +4006,7 @@ handlers.paste = (view, event) => {
     view.observer.flush();
     let data = brokenClipboardAPI ? null : event.clipboardData;
     if (data) {
-        doPaste(view, data.getData("text/plain"));
+        doPaste(view, data.getData("text/plain") || data.getData("text/uri-text"));
         event.preventDefault();
     }
     else {
@@ -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 */;
@@ -5435,6 +5469,9 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
         padding: "0 2px 0 6px"
     },
     ".cm-layer": {
+        position: "absolute",
+        left: 0,
+        top: 0,
         contain: "size style",
         "& > *": {
             position: "absolute"
@@ -6595,7 +6632,7 @@ class EditorView {
         if (this.destroyed)
             return;
         if (this.measureScheduled > -1)
-            cancelAnimationFrame(this.measureScheduled);
+            this.win.cancelAnimationFrame(this.measureScheduled);
         this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
             this.observer.forceFlush();
@@ -7033,7 +7070,7 @@ class EditorView {
         this.dom.remove();
         this.observer.destroy();
         if (this.measureScheduled > -1)
-            cancelAnimationFrame(this.measureScheduled);
+            this.win.cancelAnimationFrame(this.measureScheduled);
         this.destroyed = true;
     }
     /**
@@ -7545,9 +7582,10 @@ function rectanglesForRange(view, className, range) {
     let from = Math.max(range.from, view.viewport.from), to = Math.min(range.to, view.viewport.to);
     let ltr = view.textDirection == exports.Direction.LTR;
     let content = view.contentDOM, contentRect = content.getBoundingClientRect(), base = getBase(view);
-    let lineStyle = window.getComputedStyle(content.firstChild);
-    let leftSide = contentRect.left + parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent));
-    let rightSide = contentRect.right - parseInt(lineStyle.paddingRight);
+    let lineElt = content.querySelector(".cm-line"), lineStyle = lineElt && window.getComputedStyle(lineElt);
+    let leftSide = contentRect.left +
+        (lineStyle ? parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent)) : 0);
+    let rightSide = contentRect.right - (lineStyle ? parseInt(lineStyle.paddingRight) : 0);
     let startBlock = blockAt(view, from), endBlock = blockAt(view, to);
     let visualStart = startBlock.type == exports.BlockType.Text ? startBlock : null;
     let visualEnd = endBlock.type == exports.BlockType.Text ? endBlock : null;

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)
@@ -3161,7 +3185,7 @@ function domPosInText(node, x, y) {
     return { node, offset: closestOffset > -1 ? closestOffset : generalSide > 0 ? node.nodeValue.length : 0 };
 }
 function posAtCoords(view, coords, precise, bias = -1) {
-    var _a;
+    var _a, _b;
     let content = view.contentDOM.getBoundingClientRect(), docTop = content.top + view.viewState.paddingTop;
     let block, { docHeight } = view.viewState;
     let { x, y } = coords, yOffset = y - docTop;
@@ -3238,7 +3262,7 @@ function posAtCoords(view, coords, precise, bias = -1) {
     let nearest = view.docView.nearest(node);
     if (!nearest)
         return null;
-    if (nearest.isWidget) {
+    if (nearest.isWidget && ((_b = nearest.dom) === null || _b === void 0 ? void 0 : _b.nodeType) == 1) {
         let rect = nearest.dom.getBoundingClientRect();
         return coords.y < rect.top || coords.y <= rect.bottom && coords.x <= (rect.left + rect.right) / 2
             ? nearest.posAtStart : nearest.posAtEnd;
@@ -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
@@ -3968,7 +4000,7 @@ handlers.paste = (view, event) => {
     view.observer.flush();
     let data = brokenClipboardAPI ? null : event.clipboardData;
     if (data) {
-        doPaste(view, data.getData("text/plain"));
+        doPaste(view, data.getData("text/plain") || data.getData("text/uri-text"));
         event.preventDefault();
     }
     else {
@@ -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 */;
@@ -5428,6 +5462,9 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
         padding: "0 2px 0 6px"
     },
     ".cm-layer": {
+        position: "absolute",
+        left: 0,
+        top: 0,
         contain: "size style",
         "& > *": {
             position: "absolute"
@@ -6588,7 +6625,7 @@ class EditorView {
         if (this.destroyed)
             return;
         if (this.measureScheduled > -1)
-            cancelAnimationFrame(this.measureScheduled);
+            this.win.cancelAnimationFrame(this.measureScheduled);
         this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
             this.observer.forceFlush();
@@ -7026,7 +7063,7 @@ class EditorView {
         this.dom.remove();
         this.observer.destroy();
         if (this.measureScheduled > -1)
-            cancelAnimationFrame(this.measureScheduled);
+            this.win.cancelAnimationFrame(this.measureScheduled);
         this.destroyed = true;
     }
     /**
@@ -7538,9 +7575,10 @@ function rectanglesForRange(view, className, range) {
     let from = Math.max(range.from, view.viewport.from), to = Math.min(range.to, view.viewport.to);
     let ltr = view.textDirection == Direction.LTR;
     let content = view.contentDOM, contentRect = content.getBoundingClientRect(), base = getBase(view);
-    let lineStyle = window.getComputedStyle(content.firstChild);
-    let leftSide = contentRect.left + parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent));
-    let rightSide = contentRect.right - parseInt(lineStyle.paddingRight);
+    let lineElt = content.querySelector(".cm-line"), lineStyle = lineElt && window.getComputedStyle(lineElt);
+    let leftSide = contentRect.left +
+        (lineStyle ? parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent)) : 0);
+    let rightSide = contentRect.right - (lineStyle ? parseInt(lineStyle.paddingRight) : 0);
     let startBlock = blockAt(view, from), endBlock = blockAt(view, to);
     let visualStart = startBlock.type == BlockType.Text ? startBlock : null;
     let visualEnd = endBlock.type == BlockType.Text ? endBlock : null;

package/package.json

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