@codemirror/view 0.20.6 → 0.20.7

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.20.7 (2022-05-30)
+
+### Bug fixes
+
+Fix an issue on Chrome Android where the DOM could fail to display the actual document after backspace.
+
+Avoid an issue on Chrome Android where DOM changes were sometimes inappropriately replace by a backspace key effect due to spurious beforeinput events.
+
+Fix a problem where the content element's width didn't cover the width of the actual content.
+
+Work around a bug in Chrome 102 which caused wheel scrolling of the editor to be interrupted every few lines.
+
 ## 0.20.6 (2022-05-20)
 
 ### Bug fixes

package/dist/index.cjs

@@ -754,7 +754,7 @@ function textCoords(text, pos, side) {
                 from--;
                 flatten = 1;
             } // FIXME this is wrong in RTL text
-            else {
+            else if (to < length) {
                 to++;
                 flatten = -1;
             }
@@ -763,7 +763,7 @@ function textCoords(text, pos, side) {
     else {
         if (side < 0)
             from--;
-        else
+        else if (to < length)
             to++;
     }
     let rects = textRange(text, from, to).getClientRects();
@@ -1379,6 +1379,7 @@ class LineView extends ContentView {
     transferDOM(other) {
         if (!this.dom)
             return;
+        this.markDirty();
         other.setDOM(this.dom);
         other.prevAttrs = this.prevAttrs === undefined ? this.attrs : this.prevAttrs;
         this.prevAttrs = undefined;
@@ -2510,7 +2511,7 @@ class DocView extends ContentView {
             // no relayout is triggered and I cannot imagine how it can
             // recompute the scroll position without a layout)
             this.dom.style.height = this.view.viewState.contentHeight + "px";
-            this.dom.style.minWidth = this.minWidth ? this.minWidth + "px" : "";
+            this.dom.style.flexBasis = this.minWidth ? this.minWidth + "px" : "";
             // Chrome will sometimes, when DOM mutations occur directly
             // around the selection, get confused and report a different
             // selection from the one it displays (issue #218). This tries
@@ -3268,6 +3269,7 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
+        this.chromeScrollHack = -1;
         // On iOS, some keys need to have their default behavior happen
         // (after which we retroactively handle them and reset the DOM) to
         // avoid messing up the virtual keyboard state.
@@ -3308,6 +3310,21 @@ class InputState {
             });
             this.registeredEvents.push(type);
         }
+        if (browser.chrome && browser.chrome_version >= 102) {
+            // On Chrome 102, viewport updates somehow stop wheel-based
+            // scrolling. Turning off pointer events during the scroll seems
+            // to avoid the issue.
+            view.scrollDOM.addEventListener("wheel", () => {
+                if (this.chromeScrollHack < 0)
+                    view.contentDOM.style.pointerEvents = "none";
+                else
+                    window.clearTimeout(this.chromeScrollHack);
+                this.chromeScrollHack = setTimeout(() => {
+                    this.chromeScrollHack = -1;
+                    view.contentDOM.style.pointerEvents = "";
+                }, 100);
+            }, { passive: true });
+        }
         this.notifiedFocused = view.hasFocus;
         // On Safari adding an input event handler somehow prevents an
         // issue where the composition vanishes when you press enter.
@@ -5564,21 +5581,16 @@ class DOMObserver {
     // composition events that, when interrupted, cause text duplication
     // or other kinds of corruption. This hack makes the editor back off
     // from handling DOM changes for a moment when such a key is
-    // detected (via beforeinput or keydown), and then dispatches the
-    // key event, throwing away the DOM changes if it gets handled.
+    // detected (via beforeinput or keydown), and then tries to flush
+    // them or, if that has no effect, dispatches the given key.
     delayAndroidKey(key, keyCode) {
         if (!this.delayedAndroidKey)
             requestAnimationFrame(() => {
                 let key = this.delayedAndroidKey;
                 this.delayedAndroidKey = null;
-                let startState = this.view.state;
-                this.readSelectionRange();
-                if (dispatchKey(this.view.contentDOM, key.key, key.keyCode))
-                    this.processRecords();
-                else
-                    this.flush();
-                if (this.view.state == startState)
-                    this.view.update([]);
+                this.delayedFlush = -1;
+                if (!this.flush())
+                    dispatchKey(this.view.contentDOM, key.key, key.keyCode);
             });
         // Since backspace beforeinput is sometimes signalled spuriously,
         // Enter always takes precedence.
@@ -5634,10 +5646,11 @@ class DOMObserver {
             return;
         this.selectionChanged = false;
         let startState = this.view.state;
-        this.onChange(from, to, typeOver);
+        let handled = this.onChange(from, to, typeOver);
         // The view wasn't updated
         if (this.view.state == startState)
             this.view.update([]);
+        return handled;
     }
     readMutation(rec) {
         let cView = this.view.docView.nearest(rec.target);
@@ -5720,7 +5733,7 @@ function applyDOMChange(view, start, end, typeOver) {
     if (start > -1) {
         let bounds = view.docView.domBoundsAround(start, end, 0);
         if (!bounds || view.state.readOnly)
-            return;
+            return false;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
         let reader = new DOMReader(selPoints, view.state);
@@ -5760,7 +5773,7 @@ function applyDOMChange(view, start, end, typeOver) {
             newSel = state.EditorSelection.single(anchor, head);
     }
     if (!change && !newSel)
-        return;
+        return false;
     // Heuristic to notice typing over a selected character
     if (!change && typeOver && !sel.empty && newSel && newSel.main.empty)
         change = { from: sel.from, to: sel.to, insert: view.state.doc.slice(sel.from, sel.to) };
@@ -5776,13 +5789,13 @@ function applyDOMChange(view, start, end, typeOver) {
         };
     // Detect insert-period-on-double-space Mac behavior, and transform
     // it into a regular space insert.
-    else if (browser.mac && change && change.from == change.to && change.from == sel.head - 1 &&
+    else if ((browser.mac || browser.android) && change && change.from == change.to && change.from == sel.head - 1 &&
         change.insert.toString() == ".")
         change = { from: sel.from, to: sel.to, insert: state.Text.of([" "]) };
     if (change) {
         let startState = view.state;
         if (browser.ios && view.inputState.flushIOSKey(view))
-            return;
+            return true;
         // Android browsers don't fire reasonable key events for enter,
         // backspace, or delete. So this detects changes that look like
         // they're caused by those keys, and reinterprets them as key
@@ -5797,10 +5810,10 @@ function applyDOMChange(view, start, end, typeOver) {
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Delete", 46))))
-            return;
+            return true;
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
-            return;
+            return true;
         if (view.inputState.composing >= 0)
             view.inputState.composing++;
         let tr;
@@ -5856,6 +5869,7 @@ function applyDOMChange(view, start, end, typeOver) {
             }
         }
         view.dispatch(tr, { scrollIntoView: true, userEvent });
+        return true;
     }
     else if (newSel && !newSel.main.eq(sel)) {
         let scrollIntoView = false, userEvent = "select";
@@ -5865,6 +5879,10 @@ function applyDOMChange(view, start, end, typeOver) {
             userEvent = view.inputState.lastSelectionOrigin;
         }
         view.dispatch({ selection: newSel, scrollIntoView, userEvent });
+        return true;
+    }
+    else {
+        return false;
     }
 }
 function findDiff(a, b, preferredPos, preferredSide) {
@@ -5983,7 +6001,7 @@ class EditorView {
         for (let plugin of this.plugins)
             plugin.update(this);
         this.observer = new DOMObserver(this, (from, to, typeOver) => {
-            applyDOMChange(this, from, to, typeOver);
+            return applyDOMChange(this, from, to, typeOver);
         }, event => {
             this.inputState.runScrollHandlers(this, event);
             if (this.observer.intersecting)
@@ -6064,6 +6082,7 @@ class EditorView {
             this.viewState.state = state$1;
             return;
         }
+        this.observer.clear();
         // When the phrases change, redraw the editor
         if (state$1.facet(state.EditorState.phrases) != this.state.facet(state.EditorState.phrases))
             return this.setState(state$1);

package/dist/index.js

@@ -750,7 +750,7 @@ function textCoords(text, pos, side) {
                 from--;
                 flatten = 1;
             } // FIXME this is wrong in RTL text
-            else {
+            else if (to < length) {
                 to++;
                 flatten = -1;
             }
@@ -759,7 +759,7 @@ function textCoords(text, pos, side) {
     else {
         if (side < 0)
             from--;
-        else
+        else if (to < length)
             to++;
     }
     let rects = textRange(text, from, to).getClientRects();
@@ -1374,6 +1374,7 @@ class LineView extends ContentView {
     transferDOM(other) {
         if (!this.dom)
             return;
+        this.markDirty();
         other.setDOM(this.dom);
         other.prevAttrs = this.prevAttrs === undefined ? this.attrs : this.prevAttrs;
         this.prevAttrs = undefined;
@@ -2504,7 +2505,7 @@ class DocView extends ContentView {
             // no relayout is triggered and I cannot imagine how it can
             // recompute the scroll position without a layout)
             this.dom.style.height = this.view.viewState.contentHeight + "px";
-            this.dom.style.minWidth = this.minWidth ? this.minWidth + "px" : "";
+            this.dom.style.flexBasis = this.minWidth ? this.minWidth + "px" : "";
             // Chrome will sometimes, when DOM mutations occur directly
             // around the selection, get confused and report a different
             // selection from the one it displays (issue #218). This tries
@@ -3262,6 +3263,7 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
+        this.chromeScrollHack = -1;
         // On iOS, some keys need to have their default behavior happen
         // (after which we retroactively handle them and reset the DOM) to
         // avoid messing up the virtual keyboard state.
@@ -3302,6 +3304,21 @@ class InputState {
             });
             this.registeredEvents.push(type);
         }
+        if (browser.chrome && browser.chrome_version >= 102) {
+            // On Chrome 102, viewport updates somehow stop wheel-based
+            // scrolling. Turning off pointer events during the scroll seems
+            // to avoid the issue.
+            view.scrollDOM.addEventListener("wheel", () => {
+                if (this.chromeScrollHack < 0)
+                    view.contentDOM.style.pointerEvents = "none";
+                else
+                    window.clearTimeout(this.chromeScrollHack);
+                this.chromeScrollHack = setTimeout(() => {
+                    this.chromeScrollHack = -1;
+                    view.contentDOM.style.pointerEvents = "";
+                }, 100);
+            }, { passive: true });
+        }
         this.notifiedFocused = view.hasFocus;
         // On Safari adding an input event handler somehow prevents an
         // issue where the composition vanishes when you press enter.
@@ -5557,21 +5574,16 @@ class DOMObserver {
     // composition events that, when interrupted, cause text duplication
     // or other kinds of corruption. This hack makes the editor back off
     // from handling DOM changes for a moment when such a key is
-    // detected (via beforeinput or keydown), and then dispatches the
-    // key event, throwing away the DOM changes if it gets handled.
+    // detected (via beforeinput or keydown), and then tries to flush
+    // them or, if that has no effect, dispatches the given key.
     delayAndroidKey(key, keyCode) {
         if (!this.delayedAndroidKey)
             requestAnimationFrame(() => {
                 let key = this.delayedAndroidKey;
                 this.delayedAndroidKey = null;
-                let startState = this.view.state;
-                this.readSelectionRange();
-                if (dispatchKey(this.view.contentDOM, key.key, key.keyCode))
-                    this.processRecords();
-                else
-                    this.flush();
-                if (this.view.state == startState)
-                    this.view.update([]);
+                this.delayedFlush = -1;
+                if (!this.flush())
+                    dispatchKey(this.view.contentDOM, key.key, key.keyCode);
             });
         // Since backspace beforeinput is sometimes signalled spuriously,
         // Enter always takes precedence.
@@ -5627,10 +5639,11 @@ class DOMObserver {
             return;
         this.selectionChanged = false;
         let startState = this.view.state;
-        this.onChange(from, to, typeOver);
+        let handled = this.onChange(from, to, typeOver);
         // The view wasn't updated
         if (this.view.state == startState)
             this.view.update([]);
+        return handled;
     }
     readMutation(rec) {
         let cView = this.view.docView.nearest(rec.target);
@@ -5713,7 +5726,7 @@ function applyDOMChange(view, start, end, typeOver) {
     if (start > -1) {
         let bounds = view.docView.domBoundsAround(start, end, 0);
         if (!bounds || view.state.readOnly)
-            return;
+            return false;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
         let reader = new DOMReader(selPoints, view.state);
@@ -5753,7 +5766,7 @@ function applyDOMChange(view, start, end, typeOver) {
             newSel = EditorSelection.single(anchor, head);
     }
     if (!change && !newSel)
-        return;
+        return false;
     // Heuristic to notice typing over a selected character
     if (!change && typeOver && !sel.empty && newSel && newSel.main.empty)
         change = { from: sel.from, to: sel.to, insert: view.state.doc.slice(sel.from, sel.to) };
@@ -5769,13 +5782,13 @@ function applyDOMChange(view, start, end, typeOver) {
         };
     // Detect insert-period-on-double-space Mac behavior, and transform
     // it into a regular space insert.
-    else if (browser.mac && change && change.from == change.to && change.from == sel.head - 1 &&
+    else if ((browser.mac || browser.android) && change && change.from == change.to && change.from == sel.head - 1 &&
         change.insert.toString() == ".")
         change = { from: sel.from, to: sel.to, insert: Text.of([" "]) };
     if (change) {
         let startState = view.state;
         if (browser.ios && view.inputState.flushIOSKey(view))
-            return;
+            return true;
         // Android browsers don't fire reasonable key events for enter,
         // backspace, or delete. So this detects changes that look like
         // they're caused by those keys, and reinterprets them as key
@@ -5790,10 +5803,10 @@ function applyDOMChange(view, start, end, typeOver) {
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Delete", 46))))
-            return;
+            return true;
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
-            return;
+            return true;
         if (view.inputState.composing >= 0)
             view.inputState.composing++;
         let tr;
@@ -5849,6 +5862,7 @@ function applyDOMChange(view, start, end, typeOver) {
             }
         }
         view.dispatch(tr, { scrollIntoView: true, userEvent });
+        return true;
     }
     else if (newSel && !newSel.main.eq(sel)) {
         let scrollIntoView = false, userEvent = "select";
@@ -5858,6 +5872,10 @@ function applyDOMChange(view, start, end, typeOver) {
             userEvent = view.inputState.lastSelectionOrigin;
         }
         view.dispatch({ selection: newSel, scrollIntoView, userEvent });
+        return true;
+    }
+    else {
+        return false;
     }
 }
 function findDiff(a, b, preferredPos, preferredSide) {
@@ -5976,7 +5994,7 @@ class EditorView {
         for (let plugin of this.plugins)
             plugin.update(this);
         this.observer = new DOMObserver(this, (from, to, typeOver) => {
-            applyDOMChange(this, from, to, typeOver);
+            return applyDOMChange(this, from, to, typeOver);
         }, event => {
             this.inputState.runScrollHandlers(this, event);
             if (this.observer.intersecting)
@@ -6057,6 +6075,7 @@ class EditorView {
             this.viewState.state = state;
             return;
         }
+        this.observer.clear();
         // When the phrases change, redraw the editor
         if (state.facet(EditorState.phrases) != this.state.facet(EditorState.phrases))
             return this.setState(state);

package/package.json

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