@codemirror/view 0.19.29 → 0.19.30

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.19.30 (2021-12-13)
+
+### Bug fixes
+
+Refine Android key event handling to work properly in a GBoard corner case where pressing Enter fires a bunch of spurious deleteContentBackward events.
+
+Fix a crash in `drawSelection` for some kinds of selections.
+
+Prevent a possibility where some content updates causes duplicate text to remain in DOM.
+
+### New features
+
+Support a `maxLength` option to `MatchDecorator` that allows user code to control how far it scans into hidden parts of viewport lines.
+
 ## 0.19.29 (2021-12-09)
 
 ### Bug fixes

package/dist/index.cjs

@@ -658,6 +658,7 @@ class TextView extends ContentView {
     split(from) {
         let result = new TextView(this.text.slice(from));
         this.text = this.text.slice(0, from);
+        this.markDirty();
         return result;
     }
     localPosFromDOM(node, offset) {
@@ -2398,16 +2399,6 @@ class DocView extends ContentView {
             return true;
         }
     }
-    reset(sel) {
-        if (this.dirty) {
-            this.view.observer.ignore(() => this.view.docView.sync());
-            this.dirty = 0 /* Not */;
-            this.updateSelection(true);
-        }
-        else {
-            this.updateSelection();
-        }
-    }
     // Used by update and the constructor do perform the actual DOM
     // update
     updateInner(changes, deco, oldLength) {
@@ -2483,7 +2474,8 @@ class DocView extends ContentView {
                 // inside an uneditable node, and not bring it back when we
                 // move the cursor to its proper position. This tries to
                 // restore the keyboard by cycling focus.
-                if (browser.android && browser.chrome && this.dom.contains(domSel.focusNode) && inUneditable(domSel.focusNode, this.dom)) {
+                if (browser.android && browser.chrome && this.dom.contains(domSel.focusNode) &&
+                    inUneditable(domSel.focusNode, this.dom)) {
                     this.dom.blur();
                     this.dom.focus({ preventScroll: true });
                 }
@@ -3136,14 +3128,6 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
-        // On Chrome Android, backspace near widgets is just completely
-        // broken, and there are no key events, so we need to handle the
-        // beforeinput event. Deleting stuff will often create a flurry of
-        // events, and interrupting it before it is done just makes
-        // subsequent events even more broken, so again, we hold off doing
-        // anything until the browser is finished with whatever it is trying
-        // to do.
-        this.pendingAndroidKey = undefined;
         // 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.
@@ -3212,22 +3196,15 @@ class InputState {
     }
     runCustomHandlers(type, view, event) {
         for (let set of this.customHandlers) {
-            let handler = set.handlers[type], handled = false;
+            let handler = set.handlers[type];
             if (handler) {
                 try {
-                    handled = handler.call(set.plugin, event, view);
+                    if (handler.call(set.plugin, event, view))
+                        return true;
                 }
                 catch (e) {
                     logException(view.state, e);
                 }
-                if (handled || event.defaultPrevented) {
-                    // Chrome for Android often applies a bunch of nonsensical
-                    // DOM changes after an enter press, even when
-                    // preventDefault-ed. This tries to ignore those.
-                    if (browser.android && type == "keydown" && event.keyCode == 13)
-                        view.observer.flushSoon();
-                    return true;
-                }
             }
         }
         return false;
@@ -3251,6 +3228,16 @@ class InputState {
         this.lastKeyTime = Date.now();
         if (this.screenKeyEvent(view, event))
             return true;
+        // Chrome for Android usually doesn't fire proper key events, but
+        // occasionally does, usually surrounded by a bunch of complicated
+        // composition changes. When an enter or backspace key event is
+        // seen, hold off on handling DOM events for a bit, and then
+        // dispatch it.
+        if (browser.android && browser.chrome && !event.synthetic &&
+            (event.keyCode == 13 || event.keyCode == 8)) {
+            view.observer.delayAndroidKey(event.key, event.keyCode);
+            return true;
+        }
         // Prevent the default behavior of Enter on iOS makes the
         // virtual keyboard get stuck in the wrong (lowercase)
         // state. So we let it go through, and then, in
@@ -3272,24 +3259,6 @@ class InputState {
         this.pendingIOSKey = undefined;
         return dispatchKey(view.contentDOM, key.key, key.keyCode);
     }
-    // This causes the DOM observer to pause for a bit, and sets an
-    // animation frame (which seems the most reliable way to detect
-    // 'Chrome is done flailing about messing with the DOM') to fire a
-    // fake key event and re-sync the view again.
-    setPendingAndroidKey(view, pending) {
-        this.pendingAndroidKey = pending;
-        requestAnimationFrame(() => {
-            let key = this.pendingAndroidKey;
-            if (!key)
-                return;
-            this.pendingAndroidKey = undefined;
-            view.observer.processRecords();
-            let startState = view.state;
-            dispatchKey(view.contentDOM, key.key, key.keyCode);
-            if (view.state == startState)
-                view.docView.reset(true);
-        });
-    }
     ignoreDuringComposition(event) {
         if (!/^key/.test(event.type))
             return false;
@@ -3768,12 +3737,12 @@ handlers.compositionstart = handlers.compositionupdate = view => {
     if (view.inputState.compositionFirstChange == null)
         view.inputState.compositionFirstChange = true;
     if (view.inputState.composing < 0) {
+        // FIXME possibly set a timeout to clear it again on Android
+        view.inputState.composing = 0;
         if (view.docView.compositionDeco.size) {
             view.observer.flush();
             forceClearComposition(view, true);
         }
-        // FIXME possibly set a timeout to clear it again on Android
-        view.inputState.composing = 0;
     }
 };
 handlers.compositionend = view => {
@@ -3799,7 +3768,7 @@ handlers.beforeinput = (view, event) => {
     // seems to do nothing at all on Chrome).
     let pending;
     if (browser.chrome && browser.android && (pending = PendingKeys.find(key => key.inputType == event.inputType))) {
-        view.inputState.setPendingAndroidKey(view, pending);
+        view.observer.delayAndroidKey(pending.key, pending.keyCode);
         if (pending.key == "Backspace" || pending.key == "Delete") {
             let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
             setTimeout(() => {
@@ -5188,6 +5157,7 @@ class DOMObserver {
         this.delayedFlush = -1;
         this.resizeTimeout = -1;
         this.queue = [];
+        this.delayedAndroidKey = null;
         this.scrollTargets = [];
         this.intersection = null;
         this.resize = null;
@@ -5271,7 +5241,7 @@ class DOMObserver {
         }
     }
     onSelectionChange(event) {
-        if (!this.readSelectionRange())
+        if (!this.readSelectionRange() || this.delayedAndroidKey)
             return;
         let { view } = this, sel = this.selectionRange;
         if (view.state.facet(editable) ? view.root.activeElement != this.dom : !hasSelection(view.dom, sel))
@@ -5367,6 +5337,32 @@ class DOMObserver {
         this.queue.length = 0;
         this.selectionChanged = false;
     }
+    // Chrome Android, especially in combination with GBoard, not only
+    // doesn't reliably fire regular key events, but also often
+    // surrounds the effect of enter or backspace with a bunch of
+    // 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.
+    delayAndroidKey(key, keyCode) {
+        if (!this.delayedAndroidKey)
+            requestAnimationFrame(() => {
+                let key = this.delayedAndroidKey;
+                this.delayedAndroidKey = null;
+                let startState = this.view.state;
+                if (dispatchKey(this.view.contentDOM, key.key, key.keyCode))
+                    this.processRecords();
+                else
+                    this.flush();
+                if (this.view.state == startState)
+                    this.view.update([]);
+            });
+        // Since backspace beforeinput is sometimes signalled spuriously,
+        // Enter always takes precedence.
+        if (!this.delayedAndroidKey || key == "Enter")
+            this.delayedAndroidKey = { key, keyCode };
+    }
     flushSoon() {
         if (this.delayedFlush < 0)
             this.delayedFlush = window.setTimeout(() => { this.delayedFlush = -1; this.flush(); }, 20);
@@ -5403,13 +5399,13 @@ class DOMObserver {
     }
     // Apply pending changes, if any
     flush(readSelection = true) {
-        if (readSelection)
-            this.readSelectionRange();
         // Completely hold off flushing when pending keys are set—the code
         // managing those will make sure processRecords is called and the
         // view is resynchronized after
-        if (this.delayedFlush >= 0 || this.view.inputState.pendingAndroidKey)
+        if (this.delayedFlush >= 0 || this.delayedAndroidKey)
             return;
+        if (readSelection)
+            this.readSelectionRange();
         let { from, to, typeOver } = this.processRecords();
         let newSel = this.selectionChanged && hasSelection(this.dom, this.selectionRange);
         if (from < 0 && !newSel)
@@ -6929,7 +6925,7 @@ function measureRange(view, range) {
         let between = [];
         if ((visualStart || startBlock).to < (visualEnd || endBlock).from - 1)
             between.push(piece(leftSide, top.bottom, rightSide, bottom.top));
-        else if (top.bottom < bottom.top && blockAt(view, (top.bottom + bottom.top) / 2).type == exports.BlockType.Text)
+        else if (top.bottom < bottom.top && view.elementAtHeight((top.bottom + bottom.top) / 2).type == exports.BlockType.Text)
             top.bottom = bottom.top = (top.bottom + bottom.top) / 2;
         return pieces(top).concat(between).concat(pieces(bottom));
     }
@@ -7002,6 +6998,22 @@ function iterMatches(doc, re, from, to, f) {
                 f(pos + m.index, pos + m.index + m[0].length, m);
     }
 }
+function matchRanges(view, maxLength) {
+    let visible = view.visibleRanges;
+    if (visible.length == 1 && visible[0].from == view.viewport.from &&
+        visible[0].to == view.viewport.to)
+        return visible;
+    let result = [];
+    for (let { from, to } of visible) {
+        from = Math.max(view.state.doc.lineAt(from).from, from - maxLength);
+        to = Math.min(view.state.doc.lineAt(to).to, to + maxLength);
+        if (result.length && result[result.length - 1].to >= from)
+            result[result.length - 1].to = to;
+        else
+            result.push({ from, to });
+    }
+    return result;
+}
 /**
 Helper class used to make it easier to maintain decorations on
 visible code that matches a given regular expression. To be used
@@ -7013,12 +7025,13 @@ class MatchDecorator {
     Create a decorator.
     */
     constructor(config) {
-        let { regexp, decoration, boundary } = config;
+        let { regexp, decoration, boundary, maxLength = 1000 } = config;
         if (!regexp.global)
             throw new RangeError("The regular expression given to MatchDecorator should have its 'g' flag set");
         this.regexp = regexp;
         this.getDeco = typeof decoration == "function" ? decoration : () => decoration;
         this.boundary = boundary;
+        this.maxLength = maxLength;
     }
     /**
     Compute the full set of decorations for matches in the given
@@ -7027,7 +7040,7 @@ class MatchDecorator {
     */
     createDeco(view) {
         let build = new rangeset.RangeSetBuilder();
-        for (let { from, to } of view.visibleRanges)
+        for (let { from, to } of matchRanges(view, this.maxLength))
             iterMatches(view.state.doc, this.regexp, from, to, (a, b, m) => build.add(a, b, this.getDeco(m, view, a)));
         return build.finish();
     }

package/dist/index.d.ts

@@ -1362,6 +1362,7 @@ declare class MatchDecorator {
     private regexp;
     private getDeco;
     private boundary;
+    private maxLength;
     /**
     Create a decorator.
     */
@@ -1384,6 +1385,14 @@ declare class MatchDecorator {
         the amount of re-matching.
         */
         boundary?: RegExp;
+        /**
+        Matching happens by line, by default, but when lines are
+        folded or very long lines are only partially drawn, the
+        decorator may avoid matching part of them for speed. This
+        controls how much additional invisible content it should
+        include in its matches. Defaults to 1000.
+        */
+        maxLength?: number;
     });
     /**
     Compute the full set of decorations for matches in the given

package/dist/index.js

@@ -655,6 +655,7 @@ class TextView extends ContentView {
     split(from) {
         let result = new TextView(this.text.slice(from));
         this.text = this.text.slice(0, from);
+        this.markDirty();
         return result;
     }
     localPosFromDOM(node, offset) {
@@ -2393,16 +2394,6 @@ class DocView extends ContentView {
             return true;
         }
     }
-    reset(sel) {
-        if (this.dirty) {
-            this.view.observer.ignore(() => this.view.docView.sync());
-            this.dirty = 0 /* Not */;
-            this.updateSelection(true);
-        }
-        else {
-            this.updateSelection();
-        }
-    }
     // Used by update and the constructor do perform the actual DOM
     // update
     updateInner(changes, deco, oldLength) {
@@ -2478,7 +2469,8 @@ class DocView extends ContentView {
                 // inside an uneditable node, and not bring it back when we
                 // move the cursor to its proper position. This tries to
                 // restore the keyboard by cycling focus.
-                if (browser.android && browser.chrome && this.dom.contains(domSel.focusNode) && inUneditable(domSel.focusNode, this.dom)) {
+                if (browser.android && browser.chrome && this.dom.contains(domSel.focusNode) &&
+                    inUneditable(domSel.focusNode, this.dom)) {
                     this.dom.blur();
                     this.dom.focus({ preventScroll: true });
                 }
@@ -3131,14 +3123,6 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
-        // On Chrome Android, backspace near widgets is just completely
-        // broken, and there are no key events, so we need to handle the
-        // beforeinput event. Deleting stuff will often create a flurry of
-        // events, and interrupting it before it is done just makes
-        // subsequent events even more broken, so again, we hold off doing
-        // anything until the browser is finished with whatever it is trying
-        // to do.
-        this.pendingAndroidKey = undefined;
         // 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.
@@ -3207,22 +3191,15 @@ class InputState {
     }
     runCustomHandlers(type, view, event) {
         for (let set of this.customHandlers) {
-            let handler = set.handlers[type], handled = false;
+            let handler = set.handlers[type];
             if (handler) {
                 try {
-                    handled = handler.call(set.plugin, event, view);
+                    if (handler.call(set.plugin, event, view))
+                        return true;
                 }
                 catch (e) {
                     logException(view.state, e);
                 }
-                if (handled || event.defaultPrevented) {
-                    // Chrome for Android often applies a bunch of nonsensical
-                    // DOM changes after an enter press, even when
-                    // preventDefault-ed. This tries to ignore those.
-                    if (browser.android && type == "keydown" && event.keyCode == 13)
-                        view.observer.flushSoon();
-                    return true;
-                }
             }
         }
         return false;
@@ -3246,6 +3223,16 @@ class InputState {
         this.lastKeyTime = Date.now();
         if (this.screenKeyEvent(view, event))
             return true;
+        // Chrome for Android usually doesn't fire proper key events, but
+        // occasionally does, usually surrounded by a bunch of complicated
+        // composition changes. When an enter or backspace key event is
+        // seen, hold off on handling DOM events for a bit, and then
+        // dispatch it.
+        if (browser.android && browser.chrome && !event.synthetic &&
+            (event.keyCode == 13 || event.keyCode == 8)) {
+            view.observer.delayAndroidKey(event.key, event.keyCode);
+            return true;
+        }
         // Prevent the default behavior of Enter on iOS makes the
         // virtual keyboard get stuck in the wrong (lowercase)
         // state. So we let it go through, and then, in
@@ -3267,24 +3254,6 @@ class InputState {
         this.pendingIOSKey = undefined;
         return dispatchKey(view.contentDOM, key.key, key.keyCode);
     }
-    // This causes the DOM observer to pause for a bit, and sets an
-    // animation frame (which seems the most reliable way to detect
-    // 'Chrome is done flailing about messing with the DOM') to fire a
-    // fake key event and re-sync the view again.
-    setPendingAndroidKey(view, pending) {
-        this.pendingAndroidKey = pending;
-        requestAnimationFrame(() => {
-            let key = this.pendingAndroidKey;
-            if (!key)
-                return;
-            this.pendingAndroidKey = undefined;
-            view.observer.processRecords();
-            let startState = view.state;
-            dispatchKey(view.contentDOM, key.key, key.keyCode);
-            if (view.state == startState)
-                view.docView.reset(true);
-        });
-    }
     ignoreDuringComposition(event) {
         if (!/^key/.test(event.type))
             return false;
@@ -3763,12 +3732,12 @@ handlers.compositionstart = handlers.compositionupdate = view => {
     if (view.inputState.compositionFirstChange == null)
         view.inputState.compositionFirstChange = true;
     if (view.inputState.composing < 0) {
+        // FIXME possibly set a timeout to clear it again on Android
+        view.inputState.composing = 0;
         if (view.docView.compositionDeco.size) {
             view.observer.flush();
             forceClearComposition(view, true);
         }
-        // FIXME possibly set a timeout to clear it again on Android
-        view.inputState.composing = 0;
     }
 };
 handlers.compositionend = view => {
@@ -3794,7 +3763,7 @@ handlers.beforeinput = (view, event) => {
     // seems to do nothing at all on Chrome).
     let pending;
     if (browser.chrome && browser.android && (pending = PendingKeys.find(key => key.inputType == event.inputType))) {
-        view.inputState.setPendingAndroidKey(view, pending);
+        view.observer.delayAndroidKey(pending.key, pending.keyCode);
         if (pending.key == "Backspace" || pending.key == "Delete") {
             let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
             setTimeout(() => {
@@ -5182,6 +5151,7 @@ class DOMObserver {
         this.delayedFlush = -1;
         this.resizeTimeout = -1;
         this.queue = [];
+        this.delayedAndroidKey = null;
         this.scrollTargets = [];
         this.intersection = null;
         this.resize = null;
@@ -5265,7 +5235,7 @@ class DOMObserver {
         }
     }
     onSelectionChange(event) {
-        if (!this.readSelectionRange())
+        if (!this.readSelectionRange() || this.delayedAndroidKey)
             return;
         let { view } = this, sel = this.selectionRange;
         if (view.state.facet(editable) ? view.root.activeElement != this.dom : !hasSelection(view.dom, sel))
@@ -5361,6 +5331,32 @@ class DOMObserver {
         this.queue.length = 0;
         this.selectionChanged = false;
     }
+    // Chrome Android, especially in combination with GBoard, not only
+    // doesn't reliably fire regular key events, but also often
+    // surrounds the effect of enter or backspace with a bunch of
+    // 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.
+    delayAndroidKey(key, keyCode) {
+        if (!this.delayedAndroidKey)
+            requestAnimationFrame(() => {
+                let key = this.delayedAndroidKey;
+                this.delayedAndroidKey = null;
+                let startState = this.view.state;
+                if (dispatchKey(this.view.contentDOM, key.key, key.keyCode))
+                    this.processRecords();
+                else
+                    this.flush();
+                if (this.view.state == startState)
+                    this.view.update([]);
+            });
+        // Since backspace beforeinput is sometimes signalled spuriously,
+        // Enter always takes precedence.
+        if (!this.delayedAndroidKey || key == "Enter")
+            this.delayedAndroidKey = { key, keyCode };
+    }
     flushSoon() {
         if (this.delayedFlush < 0)
             this.delayedFlush = window.setTimeout(() => { this.delayedFlush = -1; this.flush(); }, 20);
@@ -5397,13 +5393,13 @@ class DOMObserver {
     }
     // Apply pending changes, if any
     flush(readSelection = true) {
-        if (readSelection)
-            this.readSelectionRange();
         // Completely hold off flushing when pending keys are set—the code
         // managing those will make sure processRecords is called and the
         // view is resynchronized after
-        if (this.delayedFlush >= 0 || this.view.inputState.pendingAndroidKey)
+        if (this.delayedFlush >= 0 || this.delayedAndroidKey)
             return;
+        if (readSelection)
+            this.readSelectionRange();
         let { from, to, typeOver } = this.processRecords();
         let newSel = this.selectionChanged && hasSelection(this.dom, this.selectionRange);
         if (from < 0 && !newSel)
@@ -6923,7 +6919,7 @@ function measureRange(view, range) {
         let between = [];
         if ((visualStart || startBlock).to < (visualEnd || endBlock).from - 1)
             between.push(piece(leftSide, top.bottom, rightSide, bottom.top));
-        else if (top.bottom < bottom.top && blockAt(view, (top.bottom + bottom.top) / 2).type == BlockType.Text)
+        else if (top.bottom < bottom.top && view.elementAtHeight((top.bottom + bottom.top) / 2).type == BlockType.Text)
             top.bottom = bottom.top = (top.bottom + bottom.top) / 2;
         return pieces(top).concat(between).concat(pieces(bottom));
     }
@@ -6996,6 +6992,22 @@ function iterMatches(doc, re, from, to, f) {
                 f(pos + m.index, pos + m.index + m[0].length, m);
     }
 }
+function matchRanges(view, maxLength) {
+    let visible = view.visibleRanges;
+    if (visible.length == 1 && visible[0].from == view.viewport.from &&
+        visible[0].to == view.viewport.to)
+        return visible;
+    let result = [];
+    for (let { from, to } of visible) {
+        from = Math.max(view.state.doc.lineAt(from).from, from - maxLength);
+        to = Math.min(view.state.doc.lineAt(to).to, to + maxLength);
+        if (result.length && result[result.length - 1].to >= from)
+            result[result.length - 1].to = to;
+        else
+            result.push({ from, to });
+    }
+    return result;
+}
 /**
 Helper class used to make it easier to maintain decorations on
 visible code that matches a given regular expression. To be used
@@ -7007,12 +7019,13 @@ class MatchDecorator {
     Create a decorator.
     */
     constructor(config) {
-        let { regexp, decoration, boundary } = config;
+        let { regexp, decoration, boundary, maxLength = 1000 } = config;
         if (!regexp.global)
             throw new RangeError("The regular expression given to MatchDecorator should have its 'g' flag set");
         this.regexp = regexp;
         this.getDeco = typeof decoration == "function" ? decoration : () => decoration;
         this.boundary = boundary;
+        this.maxLength = maxLength;
     }
     /**
     Compute the full set of decorations for matches in the given
@@ -7021,7 +7034,7 @@ class MatchDecorator {
     */
     createDeco(view) {
         let build = new RangeSetBuilder();
-        for (let { from, to } of view.visibleRanges)
+        for (let { from, to } of matchRanges(view, this.maxLength))
             iterMatches(view.state.doc, this.regexp, from, to, (a, b, m) => build.add(a, b, this.getDeco(m, view, a)));
         return build.finish();
     }

package/package.json

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