@codemirror/view 0.19.13 → 0.19.14

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.19.14 (2021-11-07)
+
+### Bug fixes
+
+Fix an issue where typing into a read-only editor would move the selection.
+
+Fix slowness when backspace is held down on iOS.
+
 ## 0.19.13 (2021-11-06)
 
 ### Bug fixes

package/dist/index.cjs

@@ -267,9 +267,9 @@ function contentEditablePlainTextSupported() {
 }
 function getRoot(node) {
     while (node) {
-        node = node.assignedSlot || node.parentNode;
         if (node && (node.nodeType == 9 || node.nodeType == 11 && node.host))
             return node;
+        node = node.assignedSlot || node.parentNode;
     }
     return null;
 }
@@ -3078,10 +3078,6 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
-        // 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.
-        //
         // 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
@@ -3089,12 +3085,11 @@ class InputState {
         // subsequent events even more broken, so again, we hold off doing
         // anything until the browser is finished with whatever it is trying
         // to do.
-        //
-        // setPendingKey sets this, causing the DOM observer to pause for a
-        // bit, and setting an animation frame (which seems the most
-        // reliable way to detect 'browser is done flailing') to fire a fake
-        // key event and re-sync the view again.
-        this.pendingKey = undefined;
+        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.
+        this.pendingIOSKey = undefined;
         this.lastSelectionOrigin = null;
         this.lastSelectionTime = 0;
         this.lastEscPress = 0;
@@ -3206,28 +3201,36 @@ class InputState {
         let pending;
         if (browser.ios && (pending = PendingKeys.find(key => key.keyCode == event.keyCode)) &&
             !(event.ctrlKey || event.altKey || event.metaKey) && !event.synthetic) {
-            this.setPendingKey(view, pending);
+            this.pendingIOSKey = pending;
+            setTimeout(() => this.flushIOSKey(view), 250);
             return true;
         }
         return false;
     }
-    setPendingKey(view, pending) {
-        this.pendingKey = pending;
-        let flush = () => {
-            if (!this.pendingKey)
-                return false;
-            let key = this.pendingKey;
-            this.pendingKey = undefined;
+    flushIOSKey(view) {
+        let key = this.pendingIOSKey;
+        if (!key)
+            return false;
+        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);
-        };
-        if (browser.ios)
-            setTimeout(() => requestAnimationFrame(flush), 50);
-        else
-            requestAnimationFrame(flush);
+        });
     }
     ignoreDuringComposition(event) {
         if (!/^key/.test(event.type))
@@ -3735,7 +3738,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.setPendingKey(view, pending);
+        view.inputState.setPendingAndroidKey(view, pending);
         if (pending.key == "Backspace" || pending.key == "Delete") {
             let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
             setTimeout(() => {
@@ -5283,7 +5286,7 @@ class DOMObserver {
         // 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.pendingKey)
+        if (this.delayedFlush >= 0 || this.view.inputState.pendingAndroidKey)
             return;
         this.lastFlush = Date.now();
         let { from, to, typeOver } = this.processRecords();
@@ -5370,8 +5373,11 @@ function safariSelectionRangeHack(view) {
 
 function applyDOMChange(view, start, end, typeOver) {
     let change, newSel;
-    let sel = view.state.selection.main, bounds;
-    if (start > -1 && !view.state.readOnly && (bounds = view.docView.domBoundsAround(start, end, 0))) {
+    let sel = view.state.selection.main;
+    if (start > -1) {
+        let bounds = view.docView.domBoundsAround(start, end, 0);
+        if (!bounds || view.state.readOnly)
+            return;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
         let reader = new DOMReader(selPoints, view);
@@ -5425,16 +5431,8 @@ function applyDOMChange(view, start, end, typeOver) {
         // backspace, or delete. So this detects changes that look like
         // they're caused by those keys, and reinterprets them as key
         // events.
-        if (browser.android &&
-            ((change.from == sel.from && change.to == sel.to &&
-                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 &&
-                    dispatchKey(view.contentDOM, "Backspace", 8)) ||
-                (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
-                    dispatchKey(view.contentDOM, "Delete", 46)))) {
+        if (browser.ios && view.inputState.flushIOSKey(view))
             return;
-        }
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
             return;

package/dist/index.js

@@ -264,9 +264,9 @@ function contentEditablePlainTextSupported() {
 }
 function getRoot(node) {
     while (node) {
-        node = node.assignedSlot || node.parentNode;
         if (node && (node.nodeType == 9 || node.nodeType == 11 && node.host))
             return node;
+        node = node.assignedSlot || node.parentNode;
     }
     return null;
 }
@@ -3073,10 +3073,6 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
-        // 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.
-        //
         // 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
@@ -3084,12 +3080,11 @@ class InputState {
         // subsequent events even more broken, so again, we hold off doing
         // anything until the browser is finished with whatever it is trying
         // to do.
-        //
-        // setPendingKey sets this, causing the DOM observer to pause for a
-        // bit, and setting an animation frame (which seems the most
-        // reliable way to detect 'browser is done flailing') to fire a fake
-        // key event and re-sync the view again.
-        this.pendingKey = undefined;
+        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.
+        this.pendingIOSKey = undefined;
         this.lastSelectionOrigin = null;
         this.lastSelectionTime = 0;
         this.lastEscPress = 0;
@@ -3201,28 +3196,36 @@ class InputState {
         let pending;
         if (browser.ios && (pending = PendingKeys.find(key => key.keyCode == event.keyCode)) &&
             !(event.ctrlKey || event.altKey || event.metaKey) && !event.synthetic) {
-            this.setPendingKey(view, pending);
+            this.pendingIOSKey = pending;
+            setTimeout(() => this.flushIOSKey(view), 250);
             return true;
         }
         return false;
     }
-    setPendingKey(view, pending) {
-        this.pendingKey = pending;
-        let flush = () => {
-            if (!this.pendingKey)
-                return false;
-            let key = this.pendingKey;
-            this.pendingKey = undefined;
+    flushIOSKey(view) {
+        let key = this.pendingIOSKey;
+        if (!key)
+            return false;
+        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);
-        };
-        if (browser.ios)
-            setTimeout(() => requestAnimationFrame(flush), 50);
-        else
-            requestAnimationFrame(flush);
+        });
     }
     ignoreDuringComposition(event) {
         if (!/^key/.test(event.type))
@@ -3730,7 +3733,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.setPendingKey(view, pending);
+        view.inputState.setPendingAndroidKey(view, pending);
         if (pending.key == "Backspace" || pending.key == "Delete") {
             let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
             setTimeout(() => {
@@ -5277,7 +5280,7 @@ class DOMObserver {
         // 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.pendingKey)
+        if (this.delayedFlush >= 0 || this.view.inputState.pendingAndroidKey)
             return;
         this.lastFlush = Date.now();
         let { from, to, typeOver } = this.processRecords();
@@ -5364,8 +5367,11 @@ function safariSelectionRangeHack(view) {
 
 function applyDOMChange(view, start, end, typeOver) {
     let change, newSel;
-    let sel = view.state.selection.main, bounds;
-    if (start > -1 && !view.state.readOnly && (bounds = view.docView.domBoundsAround(start, end, 0))) {
+    let sel = view.state.selection.main;
+    if (start > -1) {
+        let bounds = view.docView.domBoundsAround(start, end, 0);
+        if (!bounds || view.state.readOnly)
+            return;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
         let reader = new DOMReader(selPoints, view);
@@ -5419,16 +5425,8 @@ function applyDOMChange(view, start, end, typeOver) {
         // backspace, or delete. So this detects changes that look like
         // they're caused by those keys, and reinterprets them as key
         // events.
-        if (browser.android &&
-            ((change.from == sel.from && change.to == sel.to &&
-                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 &&
-                    dispatchKey(view.contentDOM, "Backspace", 8)) ||
-                (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
-                    dispatchKey(view.contentDOM, "Delete", 46)))) {
+        if (browser.ios && view.inputState.flushIOSKey(view))
             return;
-        }
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
             return;

package/package.json

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