@codemirror/view 6.17.0 → 6.17.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 6.17.1 (2023-08-31)
+
+### Bug fixes
+
+Don't close the hover tooltip when the pointer moves over empty space caused by line breaks within the hovered range.
+
+Fix a bug where on Chrome Android, if a virtual keyboard was slow to apply a change, the editor could end up dropping it.
+
+Work around an issue where line-wise copy/cut didn't work in Firefox because the browser wasn't firing those events when nothing was selected.
+
+Fix a crash triggered by the way some Android IME systems update the DOM.
+
+Fix a bug that caused replacing a word by an emoji on Chrome Android to be treated as a backspace press.
+
 ## 6.17.0 (2023-08-28)
 
 ### Bug fixes

package/dist/index.cjs

@@ -3184,7 +3184,7 @@ class BlockGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.height; }
 }
-function findCompositionNode(view) {
+function findCompositionNode(view, dLen) {
     let sel = view.observer.selectionRange;
     let textNode = sel.focusNode && nearbyTextNode(sel.focusNode, sel.focusOffset, 0);
     if (!textNode)
@@ -3196,10 +3196,12 @@ function findCompositionNode(view) {
         to = from + cView.length;
     }
     else {
+        let oldLen = Math.max(0, textNode.nodeValue.length - dLen);
         up: for (let offset = 0, node = textNode;;) {
             for (let sibling = node.previousSibling, cView; sibling; sibling = sibling.previousSibling) {
                 if (cView = ContentView.get(sibling)) {
-                    from = to = cView.posAtEnd + offset;
+                    to = cView.posAtEnd + offset;
+                    from = Math.max(0, to - oldLen);
                     break up;
                 }
                 let reader = new DOMReader([], view.state);
@@ -3213,15 +3215,16 @@ function findCompositionNode(view) {
                 return null;
             let parentView = ContentView.get(node);
             if (parentView) {
-                from = to = parentView.posAtStart + offset;
+                from = parentView.posAtStart + offset;
+                to = from + oldLen;
                 break;
             }
         }
     }
-    return { from, to, node: textNode };
+    return { from, to: to, node: textNode };
 }
 function findCompositionRange(view, changes) {
-    let found = findCompositionNode(view);
+    let found = findCompositionNode(view, changes.newLength - changes.length);
     if (!found)
         return null;
     let { from: fromA, to: toA, node: textNode } = found;
@@ -3785,6 +3788,8 @@ class InputState {
         // issue where the composition vanishes when you press enter.
         if (browser.safari)
             view.contentDOM.addEventListener("input", () => null);
+        if (browser.gecko)
+            firefoxCopyCutHack(view.contentDOM.ownerDocument);
     }
     ensureHandlers(view, plugins) {
         var _a;
@@ -4490,6 +4495,18 @@ handlers.beforeinput = (view, event) => {
         }
     }
 };
+const appliedFirefoxHack = new Set;
+// In Firefox, when cut/copy handlers are added to the document, that
+// somehow avoids a bug where those events aren't fired when the
+// selection is empty. See https://github.com/codemirror/dev/issues/1082
+// and https://bugzilla.mozilla.org/show_bug.cgi?id=995961
+function firefoxCopyCutHack(doc) {
+    if (!appliedFirefoxHack.has(doc)) {
+        appliedFirefoxHack.add(doc);
+        doc.addEventListener("copy", () => { });
+        doc.addEventListener("cut", () => { });
+    }
+}
 
 const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line", "break-spaces"];
 class HeightOracle {
@@ -6146,7 +6163,7 @@ function applyDOMChange(view, domChange) {
                 change.insert.length == 1 && change.insert.lines == 2 &&
                 dispatchKey(view.contentDOM, "Enter", 13)) ||
                 ((change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 ||
-                    lastKey == 8 && change.insert.length < change.to - change.from) &&
+                    lastKey == 8 && change.insert.length < change.to - change.from && change.to > sel.head) &&
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Delete", 46))))
@@ -6190,7 +6207,8 @@ function applyDefaultInsert(view, change, newSel) {
         if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
             change.to <= sel.to && change.to >= sel.to - 10) {
             let replaced = view.state.sliceDoc(change.from, change.to);
-            let composition = findCompositionNode(view) || view.state.doc.lineAt(sel.head);
+            let composition = findCompositionNode(view, change.insert.length - (change.to - change.from)) ||
+                view.state.doc.lineAt(sel.head);
             let offset = sel.to - change.to, size = sel.to - sel.from;
             tr = startState.changeByRange(range => {
                 if (range.from == sel.from && range.to == sel.to)
@@ -7040,6 +7058,11 @@ class EditorView {
             return;
         if (this.measureScheduled > -1)
             this.win.cancelAnimationFrame(this.measureScheduled);
+        if (this.observer.delayedAndroidKey) {
+            this.measureScheduled = -1;
+            this.requestMeasure();
+            return;
+        }
         this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
             this.observer.forceFlush();
@@ -9370,7 +9393,7 @@ class HoverPlugin {
         if (tooltip && !isInTooltip(this.lastMove.target) || this.pending) {
             let { pos } = tooltip || this.pending, end = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.end) !== null && _a !== void 0 ? _a : pos;
             if ((pos == end ? this.view.posAtCoords(this.lastMove) != pos
-                : !isOverRange(this.view, pos, end, event.clientX, event.clientY, 6 /* Hover.MaxDist */))) {
+                : !isOverRange(this.view, pos, end, event.clientX, event.clientY))) {
                 this.view.dispatch({ effects: this.setHover.of(null) });
                 this.pending = null;
             }
@@ -9395,19 +9418,12 @@ function isInTooltip(elt) {
     return false;
 }
 function isOverRange(view, from, to, x, y, margin) {
-    let range = document.createRange();
-    let fromDOM = view.domAtPos(from), toDOM = view.domAtPos(to);
-    range.setEnd(toDOM.node, toDOM.offset);
-    range.setStart(fromDOM.node, fromDOM.offset);
-    let rects = range.getClientRects();
-    range.detach();
-    for (let i = 0; i < rects.length; i++) {
-        let rect = rects[i];
-        let dist = Math.max(rect.top - y, y - rect.bottom, rect.left - x, x - rect.right);
-        if (dist <= margin)
-            return true;
-    }
-    return false;
+    let rect = view.scrollDOM.getBoundingClientRect();
+    let docBottom = view.documentTop + view.documentPadding.top + view.contentHeight;
+    if (rect.left > x || rect.right < x || rect.top > y || Math.min(rect.bottom, docBottom) < y)
+        return false;
+    let pos = view.posAtCoords({ x, y }, false);
+    return pos >= from && pos <= to;
 }
 /**
 Set up a hover tooltip, which shows up when the pointer hovers

package/dist/index.js

@@ -3180,7 +3180,7 @@ class BlockGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.height; }
 }
-function findCompositionNode(view) {
+function findCompositionNode(view, dLen) {
     let sel = view.observer.selectionRange;
     let textNode = sel.focusNode && nearbyTextNode(sel.focusNode, sel.focusOffset, 0);
     if (!textNode)
@@ -3192,10 +3192,12 @@ function findCompositionNode(view) {
         to = from + cView.length;
     }
     else {
+        let oldLen = Math.max(0, textNode.nodeValue.length - dLen);
         up: for (let offset = 0, node = textNode;;) {
             for (let sibling = node.previousSibling, cView; sibling; sibling = sibling.previousSibling) {
                 if (cView = ContentView.get(sibling)) {
-                    from = to = cView.posAtEnd + offset;
+                    to = cView.posAtEnd + offset;
+                    from = Math.max(0, to - oldLen);
                     break up;
                 }
                 let reader = new DOMReader([], view.state);
@@ -3209,15 +3211,16 @@ function findCompositionNode(view) {
                 return null;
             let parentView = ContentView.get(node);
             if (parentView) {
-                from = to = parentView.posAtStart + offset;
+                from = parentView.posAtStart + offset;
+                to = from + oldLen;
                 break;
             }
         }
     }
-    return { from, to, node: textNode };
+    return { from, to: to, node: textNode };
 }
 function findCompositionRange(view, changes) {
-    let found = findCompositionNode(view);
+    let found = findCompositionNode(view, changes.newLength - changes.length);
     if (!found)
         return null;
     let { from: fromA, to: toA, node: textNode } = found;
@@ -3781,6 +3784,8 @@ class InputState {
         // issue where the composition vanishes when you press enter.
         if (browser.safari)
             view.contentDOM.addEventListener("input", () => null);
+        if (browser.gecko)
+            firefoxCopyCutHack(view.contentDOM.ownerDocument);
     }
     ensureHandlers(view, plugins) {
         var _a;
@@ -4486,6 +4491,18 @@ handlers.beforeinput = (view, event) => {
         }
     }
 };
+const appliedFirefoxHack = /*@__PURE__*/new Set;
+// In Firefox, when cut/copy handlers are added to the document, that
+// somehow avoids a bug where those events aren't fired when the
+// selection is empty. See https://github.com/codemirror/dev/issues/1082
+// and https://bugzilla.mozilla.org/show_bug.cgi?id=995961
+function firefoxCopyCutHack(doc) {
+    if (!appliedFirefoxHack.has(doc)) {
+        appliedFirefoxHack.add(doc);
+        doc.addEventListener("copy", () => { });
+        doc.addEventListener("cut", () => { });
+    }
+}
 
 const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line", "break-spaces"];
 class HeightOracle {
@@ -6141,7 +6158,7 @@ function applyDOMChange(view, domChange) {
                 change.insert.length == 1 && change.insert.lines == 2 &&
                 dispatchKey(view.contentDOM, "Enter", 13)) ||
                 ((change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 ||
-                    lastKey == 8 && change.insert.length < change.to - change.from) &&
+                    lastKey == 8 && change.insert.length < change.to - change.from && change.to > sel.head) &&
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Delete", 46))))
@@ -6185,7 +6202,8 @@ function applyDefaultInsert(view, change, newSel) {
         if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
             change.to <= sel.to && change.to >= sel.to - 10) {
             let replaced = view.state.sliceDoc(change.from, change.to);
-            let composition = findCompositionNode(view) || view.state.doc.lineAt(sel.head);
+            let composition = findCompositionNode(view, change.insert.length - (change.to - change.from)) ||
+                view.state.doc.lineAt(sel.head);
             let offset = sel.to - change.to, size = sel.to - sel.from;
             tr = startState.changeByRange(range => {
                 if (range.from == sel.from && range.to == sel.to)
@@ -7035,6 +7053,11 @@ class EditorView {
             return;
         if (this.measureScheduled > -1)
             this.win.cancelAnimationFrame(this.measureScheduled);
+        if (this.observer.delayedAndroidKey) {
+            this.measureScheduled = -1;
+            this.requestMeasure();
+            return;
+        }
         this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
             this.observer.forceFlush();
@@ -9365,7 +9388,7 @@ class HoverPlugin {
         if (tooltip && !isInTooltip(this.lastMove.target) || this.pending) {
             let { pos } = tooltip || this.pending, end = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.end) !== null && _a !== void 0 ? _a : pos;
             if ((pos == end ? this.view.posAtCoords(this.lastMove) != pos
-                : !isOverRange(this.view, pos, end, event.clientX, event.clientY, 6 /* Hover.MaxDist */))) {
+                : !isOverRange(this.view, pos, end, event.clientX, event.clientY))) {
                 this.view.dispatch({ effects: this.setHover.of(null) });
                 this.pending = null;
             }
@@ -9390,19 +9413,12 @@ function isInTooltip(elt) {
     return false;
 }
 function isOverRange(view, from, to, x, y, margin) {
-    let range = document.createRange();
-    let fromDOM = view.domAtPos(from), toDOM = view.domAtPos(to);
-    range.setEnd(toDOM.node, toDOM.offset);
-    range.setStart(fromDOM.node, fromDOM.offset);
-    let rects = range.getClientRects();
-    range.detach();
-    for (let i = 0; i < rects.length; i++) {
-        let rect = rects[i];
-        let dist = Math.max(rect.top - y, y - rect.bottom, rect.left - x, x - rect.right);
-        if (dist <= margin)
-            return true;
-    }
-    return false;
+    let rect = view.scrollDOM.getBoundingClientRect();
+    let docBottom = view.documentTop + view.documentPadding.top + view.contentHeight;
+    if (rect.left > x || rect.right < x || rect.top > y || Math.min(rect.bottom, docBottom) < y)
+        return false;
+    let pos = view.posAtCoords({ x, y }, false);
+    return pos >= from && pos <= to;
 }
 /**
 Set up a hover tooltip, which shows up when the pointer hovers

package/package.json

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