@codemirror/view 6.1.0 → 6.1.3

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## 6.1.3 (2022-08-03)
+
+### Bug fixes
+
+Fix a bug where a document that contains only non-printing characters would lead to bogus text measurements (and, from those, to crashing).
+
+Make sure differences between estimated and actual block heights don't cause visible scroll glitches.
+
+## 6.1.2 (2022-07-27)
+
+### Bug fixes
+
+Fix an issue where double tapping enter to confirm IME input and insert a newline on iOS would sometimes insert two newlines.
+
+Fix an issue on iOS where a composition could get aborted if the editor scrolled on backspace.
+
+## 6.1.1 (2022-07-25)
+
+### Bug fixes
+
+Make `highlightSpecialChars` replace directional isolate characters by default.
+
+The editor will now try to suppress browsers' native behavior of resetting the selection in the editable content when the editable element is focused (programmatically, with tab, etc).
+
+Fix a CSS issue that made it possible, when the gutters were wide enough, for them to overlap with the content.
+
 ## 6.1.0 (2022-07-19)
 
 ### New features

package/dist/index.cjs

@@ -268,6 +268,31 @@ function clearAttributes(node) {
     while (node.attributes.length)
         node.removeAttributeNode(node.attributes[0]);
 }
+function atElementStart(doc, selection) {
+    let node = selection.focusNode, offset = selection.focusOffset;
+    if (!node || selection.anchorNode != node || selection.anchorOffset != offset)
+        return false;
+    for (;;) {
+        if (offset) {
+            if (node.nodeType != 1)
+                return false;
+            let prev = node.childNodes[offset - 1];
+            if (prev.contentEditable == "false")
+                offset--;
+            else {
+                node = prev;
+                offset = maxOffset(node);
+            }
+        }
+        else if (node == doc) {
+            return true;
+        }
+        else {
+            offset = domIndex(node);
+            node = node.parentNode;
+        }
+    }
+}
 
 class DOMPos {
     constructor(node, offset, precise = true) {
@@ -1448,15 +1473,17 @@ class LineView extends ContentView {
             return null;
         let totalWidth = 0;
         for (let child of this.children) {
-            if (!(child instanceof TextView))
+            if (!(child instanceof TextView) || /[^ -~]/.test(child.text))
                 return null;
             let rects = clientRectsFor(child.dom);
             if (rects.length != 1)
                 return null;
             totalWidth += rects[0].width;
         }
-        return { lineHeight: this.dom.getBoundingClientRect().height,
-            charWidth: totalWidth / this.length };
+        return !totalWidth ? null : {
+            lineHeight: this.dom.getBoundingClientRect().height,
+            charWidth: totalWidth / this.length
+        };
     }
     coordsAt(pos, side) {
         return coordsInChildren(this, pos, side);
@@ -3289,6 +3316,10 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
+        this.lastTouchTime = 0;
+        this.lastFocusTime = 0;
+        this.lastScrollTop = 0;
+        this.lastScrollLeft = 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
@@ -3327,10 +3358,10 @@ class InputState {
                     event.preventDefault();
                 else
                     handler(view, event);
-            });
+            }, handlerOptions[type]);
             this.registeredEvents.push(type);
         }
-        if (browser.chrome && browser.chrome_version >= 102) {
+        if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
             // On Chrome 102, viewport updates somehow stop wheel-based
             // scrolling. Turning off pointer events during the scroll seems
             // to avoid the issue.
@@ -3390,6 +3421,8 @@ class InputState {
         return false;
     }
     runScrollHandlers(view, event) {
+        this.lastScrollTop = view.scrollDOM.scrollTop;
+        this.lastScrollLeft = view.scrollDOM.scrollLeft;
         for (let set of this.customHandlers) {
             let handler = set.handlers.scroll;
             if (handler) {
@@ -3450,7 +3483,7 @@ class InputState {
         // compositionend and keydown events are sometimes emitted in the
         // wrong order. The key event should still be ignored, even when
         // it happens after the compositionend event.
-        if (browser.safari && Date.now() - this.compositionEndedAt < 100) {
+        if (browser.safari && !browser.ios && Date.now() - this.compositionEndedAt < 100) {
             this.compositionEndedAt = 0;
             return true;
         }
@@ -3578,6 +3611,7 @@ function eventBelongsToEditor(view, event) {
     return true;
 }
 const handlers = Object.create(null);
+const handlerOptions = Object.create(null);
 // This is very crude, but unfortunately both these browsers _pretend_
 // that they have a clipboard API—all the objects and methods are
 // there, they just don't work, and they are hard to test.
@@ -3634,17 +3668,17 @@ handlers.keydown = (view, event) => {
     else if (modifierCodes.indexOf(event.keyCode) < 0)
         view.inputState.lastEscPress = 0;
 };
-let lastTouch = 0;
 handlers.touchstart = (view, e) => {
-    lastTouch = Date.now();
+    view.inputState.lastTouchTime = Date.now();
     view.inputState.setSelectionOrigin("select.pointer");
 };
 handlers.touchmove = view => {
     view.inputState.setSelectionOrigin("select.pointer");
 };
+handlerOptions.touchstart = handlerOptions.touchmove = { passive: true };
 handlers.mousedown = (view, event) => {
     view.observer.flush();
-    if (lastTouch > Date.now() - 2000 && getClickType(event) == 1)
+    if (view.inputState.lastTouchTime > Date.now() - 2000 && getClickType(event) == 1)
         return; // Ignore touch interaction
     let style = null;
     for (let makeStyle of view.state.facet(mouseSelectionStyle)) {
@@ -3898,7 +3932,15 @@ function updateForFocusChange(view) {
             view.update([]);
     }, 10);
 }
-handlers.focus = updateForFocusChange;
+handlers.focus = view => {
+    view.inputState.lastFocusTime = Date.now();
+    // When focusing reset the scroll position, move it back to where it was
+    if (!view.scrollDOM.scrollTop && (view.inputState.lastScrollTop || view.inputState.lastScrollLeft)) {
+        view.scrollDOM.scrollTop = view.inputState.lastScrollTop;
+        view.scrollDOM.scrollLeft = view.inputState.lastScrollLeft;
+    }
+    updateForFocusChange(view);
+};
 handlers.blur = view => {
     view.observer.clearSelectionRange();
     updateForFocusChange(view);
@@ -4635,7 +4677,7 @@ function visiblePixelRange(dom, paddingTop) {
                 left = Math.max(left, parentRect.left);
                 right = Math.min(right, parentRect.right);
                 top = Math.max(top, parentRect.top);
-                bottom = Math.min(bottom, parentRect.bottom);
+                bottom = parent == dom.parentNode ? parentRect.bottom : Math.min(bottom, parentRect.bottom);
             }
             parent = style.position == "absolute" || style.position == "fixed" ? elt.offsetParent : elt.parentNode;
         }
@@ -5269,6 +5311,7 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     "&light .cm-specialChar": { color: "red" },
     "&dark .cm-specialChar": { color: "#f78" },
     ".cm-gutters": {
+        flexShrink: 0,
         display: "flex",
         height: "100%",
         boxSizing: "border-box",
@@ -5525,15 +5568,28 @@ class DOMObserver {
             this.flush(false);
     }
     readSelectionRange() {
-        let { root } = this.view;
+        let { view } = this;
         // The Selection object is broken in shadow roots in Safari. See
         // https://github.com/codemirror/dev/issues/414
-        let range = browser.safari && root.nodeType == 11 && deepActiveElement() == this.view.contentDOM &&
-            safariSelectionRangeHack(this.view) || getSelection(root);
+        let range = browser.safari && view.root.nodeType == 11 && deepActiveElement() == this.dom &&
+            safariSelectionRangeHack(this.view) || getSelection(view.root);
         if (!range || this.selectionRange.eq(range))
             return false;
+        let local = hasSelection(this.dom, range);
+        // Detect the situation where the browser has, on focus, moved the
+        // selection to the start of the content element. Reset it to the
+        // position from the editor state.
+        if (local && !this.selectionChanged && this.selectionRange.focusNode &&
+            view.inputState.lastFocusTime > Date.now() - 200 &&
+            view.inputState.lastTouchTime < Date.now() - 300 &&
+            atElementStart(this.dom, range)) {
+            view.docView.updateSelection();
+            return false;
+        }
         this.selectionRange.setRange(range);
-        return this.selectionChanged = true;
+        if (local)
+            this.selectionChanged = true;
+        return true;
     }
     setSelectionRange(anchor, head) {
         this.selectionRange.set(anchor.node, anchor.offset, head.node, head.offset);
@@ -5620,7 +5676,7 @@ class DOMObserver {
                 this.delayedAndroidKey = null;
                 this.delayedFlush = -1;
                 if (!this.flush())
-                    dispatchKey(this.view.contentDOM, key.key, key.keyCode);
+                    dispatchKey(this.dom, key.key, key.keyCode);
             });
         // Since backspace beforeinput is sometimes signalled spuriously,
         // Enter always takes precedence.
@@ -5635,8 +5691,8 @@ class DOMObserver {
         if (this.delayedFlush >= 0) {
             window.clearTimeout(this.delayedFlush);
             this.delayedFlush = -1;
-            this.flush();
         }
+        this.flush();
     }
     processRecords() {
         let records = this.queue;
@@ -5674,6 +5730,7 @@ class DOMObserver {
         let newSel = this.selectionChanged && hasSelection(this.dom, this.selectionRange);
         if (from < 0 && !newSel)
             return;
+        this.view.inputState.lastFocusTime = 0;
         this.selectionChanged = false;
         let startState = this.view.state;
         let handled = this.onChange(from, to, typeOver);
@@ -6227,12 +6284,15 @@ class EditorView {
             cancelAnimationFrame(this.measureScheduled);
         this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
-            this.observer.flush();
+            this.observer.forceFlush();
         let updated = null;
+        let { scrollHeight, scrollTop, clientHeight } = this.scrollDOM;
+        let refHeight = scrollTop > scrollHeight - clientHeight - 4 ? scrollHeight : scrollTop;
         try {
             for (let i = 0;; i++) {
                 this.updateState = 1 /* Measuring */;
                 let oldViewport = this.viewport;
+                let refBlock = this.viewState.lineBlockAtHeight(refHeight);
                 let changed = this.viewState.measure(this);
                 if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
@@ -6284,6 +6344,13 @@ class EditorView {
                     this.viewState.scrollTarget = null;
                     scrolled = true;
                 }
+                else {
+                    let diff = this.viewState.lineBlockAt(refBlock.from).top - refBlock.top;
+                    if (diff > 1 || diff < -1) {
+                        this.scrollDOM.scrollTop += diff;
+                        scrolled = true;
+                    }
+                }
                 if (redrawn)
                     this.docView.updateSelection(true);
                 if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to &&
@@ -7495,7 +7562,7 @@ class MatchDecorator {
 }
 
 const UnicodeRegexpSupport = /x/.unicode != null ? "gu" : "g";
-const Specials = new RegExp("[\u0000-\u0008\u000a-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\u202d\u202e\ufeff\ufff9-\ufffc]", UnicodeRegexpSupport);
+const Specials = new RegExp("[\u0000-\u0008\u000a-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\u202d\u202e\u2066\u2067\u2069\ufeff\ufff9-\ufffc]", UnicodeRegexpSupport);
 const Names = {
     0: "null",
     7: "bell",
@@ -7512,6 +7579,9 @@ const Names = {
     8232: "line separator",
     8237: "left-to-right override",
     8238: "right-to-left override",
+    8294: "left-to-right isolate",
+    8295: "right-to-left isolate",
+    8297: "pop directional isolate",
     8233: "paragraph separator",
     65279: "zero width no-break space",
     65532: "object replacement"

package/dist/index.js

@@ -264,6 +264,31 @@ function clearAttributes(node) {
     while (node.attributes.length)
         node.removeAttributeNode(node.attributes[0]);
 }
+function atElementStart(doc, selection) {
+    let node = selection.focusNode, offset = selection.focusOffset;
+    if (!node || selection.anchorNode != node || selection.anchorOffset != offset)
+        return false;
+    for (;;) {
+        if (offset) {
+            if (node.nodeType != 1)
+                return false;
+            let prev = node.childNodes[offset - 1];
+            if (prev.contentEditable == "false")
+                offset--;
+            else {
+                node = prev;
+                offset = maxOffset(node);
+            }
+        }
+        else if (node == doc) {
+            return true;
+        }
+        else {
+            offset = domIndex(node);
+            node = node.parentNode;
+        }
+    }
+}
 
 class DOMPos {
     constructor(node, offset, precise = true) {
@@ -1443,15 +1468,17 @@ class LineView extends ContentView {
             return null;
         let totalWidth = 0;
         for (let child of this.children) {
-            if (!(child instanceof TextView))
+            if (!(child instanceof TextView) || /[^ -~]/.test(child.text))
                 return null;
             let rects = clientRectsFor(child.dom);
             if (rects.length != 1)
                 return null;
             totalWidth += rects[0].width;
         }
-        return { lineHeight: this.dom.getBoundingClientRect().height,
-            charWidth: totalWidth / this.length };
+        return !totalWidth ? null : {
+            lineHeight: this.dom.getBoundingClientRect().height,
+            charWidth: totalWidth / this.length
+        };
     }
     coordsAt(pos, side) {
         return coordsInChildren(this, pos, side);
@@ -3283,6 +3310,10 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
+        this.lastTouchTime = 0;
+        this.lastFocusTime = 0;
+        this.lastScrollTop = 0;
+        this.lastScrollLeft = 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
@@ -3321,10 +3352,10 @@ class InputState {
                     event.preventDefault();
                 else
                     handler(view, event);
-            });
+            }, handlerOptions[type]);
             this.registeredEvents.push(type);
         }
-        if (browser.chrome && browser.chrome_version >= 102) {
+        if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
             // On Chrome 102, viewport updates somehow stop wheel-based
             // scrolling. Turning off pointer events during the scroll seems
             // to avoid the issue.
@@ -3384,6 +3415,8 @@ class InputState {
         return false;
     }
     runScrollHandlers(view, event) {
+        this.lastScrollTop = view.scrollDOM.scrollTop;
+        this.lastScrollLeft = view.scrollDOM.scrollLeft;
         for (let set of this.customHandlers) {
             let handler = set.handlers.scroll;
             if (handler) {
@@ -3444,7 +3477,7 @@ class InputState {
         // compositionend and keydown events are sometimes emitted in the
         // wrong order. The key event should still be ignored, even when
         // it happens after the compositionend event.
-        if (browser.safari && Date.now() - this.compositionEndedAt < 100) {
+        if (browser.safari && !browser.ios && Date.now() - this.compositionEndedAt < 100) {
             this.compositionEndedAt = 0;
             return true;
         }
@@ -3572,6 +3605,7 @@ function eventBelongsToEditor(view, event) {
     return true;
 }
 const handlers = /*@__PURE__*/Object.create(null);
+const handlerOptions = /*@__PURE__*/Object.create(null);
 // This is very crude, but unfortunately both these browsers _pretend_
 // that they have a clipboard API—all the objects and methods are
 // there, they just don't work, and they are hard to test.
@@ -3628,17 +3662,17 @@ handlers.keydown = (view, event) => {
     else if (modifierCodes.indexOf(event.keyCode) < 0)
         view.inputState.lastEscPress = 0;
 };
-let lastTouch = 0;
 handlers.touchstart = (view, e) => {
-    lastTouch = Date.now();
+    view.inputState.lastTouchTime = Date.now();
     view.inputState.setSelectionOrigin("select.pointer");
 };
 handlers.touchmove = view => {
     view.inputState.setSelectionOrigin("select.pointer");
 };
+handlerOptions.touchstart = handlerOptions.touchmove = { passive: true };
 handlers.mousedown = (view, event) => {
     view.observer.flush();
-    if (lastTouch > Date.now() - 2000 && getClickType(event) == 1)
+    if (view.inputState.lastTouchTime > Date.now() - 2000 && getClickType(event) == 1)
         return; // Ignore touch interaction
     let style = null;
     for (let makeStyle of view.state.facet(mouseSelectionStyle)) {
@@ -3892,7 +3926,15 @@ function updateForFocusChange(view) {
             view.update([]);
     }, 10);
 }
-handlers.focus = updateForFocusChange;
+handlers.focus = view => {
+    view.inputState.lastFocusTime = Date.now();
+    // When focusing reset the scroll position, move it back to where it was
+    if (!view.scrollDOM.scrollTop && (view.inputState.lastScrollTop || view.inputState.lastScrollLeft)) {
+        view.scrollDOM.scrollTop = view.inputState.lastScrollTop;
+        view.scrollDOM.scrollLeft = view.inputState.lastScrollLeft;
+    }
+    updateForFocusChange(view);
+};
 handlers.blur = view => {
     view.observer.clearSelectionRange();
     updateForFocusChange(view);
@@ -4628,7 +4670,7 @@ function visiblePixelRange(dom, paddingTop) {
                 left = Math.max(left, parentRect.left);
                 right = Math.min(right, parentRect.right);
                 top = Math.max(top, parentRect.top);
-                bottom = Math.min(bottom, parentRect.bottom);
+                bottom = parent == dom.parentNode ? parentRect.bottom : Math.min(bottom, parentRect.bottom);
             }
             parent = style.position == "absolute" || style.position == "fixed" ? elt.offsetParent : elt.parentNode;
         }
@@ -5262,6 +5304,7 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     "&light .cm-specialChar": { color: "red" },
     "&dark .cm-specialChar": { color: "#f78" },
     ".cm-gutters": {
+        flexShrink: 0,
         display: "flex",
         height: "100%",
         boxSizing: "border-box",
@@ -5518,15 +5561,28 @@ class DOMObserver {
             this.flush(false);
     }
     readSelectionRange() {
-        let { root } = this.view;
+        let { view } = this;
         // The Selection object is broken in shadow roots in Safari. See
         // https://github.com/codemirror/dev/issues/414
-        let range = browser.safari && root.nodeType == 11 && deepActiveElement() == this.view.contentDOM &&
-            safariSelectionRangeHack(this.view) || getSelection(root);
+        let range = browser.safari && view.root.nodeType == 11 && deepActiveElement() == this.dom &&
+            safariSelectionRangeHack(this.view) || getSelection(view.root);
         if (!range || this.selectionRange.eq(range))
             return false;
+        let local = hasSelection(this.dom, range);
+        // Detect the situation where the browser has, on focus, moved the
+        // selection to the start of the content element. Reset it to the
+        // position from the editor state.
+        if (local && !this.selectionChanged && this.selectionRange.focusNode &&
+            view.inputState.lastFocusTime > Date.now() - 200 &&
+            view.inputState.lastTouchTime < Date.now() - 300 &&
+            atElementStart(this.dom, range)) {
+            view.docView.updateSelection();
+            return false;
+        }
         this.selectionRange.setRange(range);
-        return this.selectionChanged = true;
+        if (local)
+            this.selectionChanged = true;
+        return true;
     }
     setSelectionRange(anchor, head) {
         this.selectionRange.set(anchor.node, anchor.offset, head.node, head.offset);
@@ -5613,7 +5669,7 @@ class DOMObserver {
                 this.delayedAndroidKey = null;
                 this.delayedFlush = -1;
                 if (!this.flush())
-                    dispatchKey(this.view.contentDOM, key.key, key.keyCode);
+                    dispatchKey(this.dom, key.key, key.keyCode);
             });
         // Since backspace beforeinput is sometimes signalled spuriously,
         // Enter always takes precedence.
@@ -5628,8 +5684,8 @@ class DOMObserver {
         if (this.delayedFlush >= 0) {
             window.clearTimeout(this.delayedFlush);
             this.delayedFlush = -1;
-            this.flush();
         }
+        this.flush();
     }
     processRecords() {
         let records = this.queue;
@@ -5667,6 +5723,7 @@ class DOMObserver {
         let newSel = this.selectionChanged && hasSelection(this.dom, this.selectionRange);
         if (from < 0 && !newSel)
             return;
+        this.view.inputState.lastFocusTime = 0;
         this.selectionChanged = false;
         let startState = this.view.state;
         let handled = this.onChange(from, to, typeOver);
@@ -6220,12 +6277,15 @@ class EditorView {
             cancelAnimationFrame(this.measureScheduled);
         this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
-            this.observer.flush();
+            this.observer.forceFlush();
         let updated = null;
+        let { scrollHeight, scrollTop, clientHeight } = this.scrollDOM;
+        let refHeight = scrollTop > scrollHeight - clientHeight - 4 ? scrollHeight : scrollTop;
         try {
             for (let i = 0;; i++) {
                 this.updateState = 1 /* Measuring */;
                 let oldViewport = this.viewport;
+                let refBlock = this.viewState.lineBlockAtHeight(refHeight);
                 let changed = this.viewState.measure(this);
                 if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
@@ -6277,6 +6337,13 @@ class EditorView {
                     this.viewState.scrollTarget = null;
                     scrolled = true;
                 }
+                else {
+                    let diff = this.viewState.lineBlockAt(refBlock.from).top - refBlock.top;
+                    if (diff > 1 || diff < -1) {
+                        this.scrollDOM.scrollTop += diff;
+                        scrolled = true;
+                    }
+                }
                 if (redrawn)
                     this.docView.updateSelection(true);
                 if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to &&
@@ -7488,7 +7555,7 @@ class MatchDecorator {
 }
 
 const UnicodeRegexpSupport = /x/.unicode != null ? "gu" : "g";
-const Specials = /*@__PURE__*/new RegExp("[\u0000-\u0008\u000a-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\u202d\u202e\ufeff\ufff9-\ufffc]", UnicodeRegexpSupport);
+const Specials = /*@__PURE__*/new RegExp("[\u0000-\u0008\u000a-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\u202d\u202e\u2066\u2067\u2069\ufeff\ufff9-\ufffc]", UnicodeRegexpSupport);
 const Names = {
     0: "null",
     7: "bell",
@@ -7505,6 +7572,9 @@ const Names = {
     8232: "line separator",
     8237: "left-to-right override",
     8238: "right-to-left override",
+    8294: "left-to-right isolate",
+    8295: "right-to-left isolate",
+    8297: "pop directional isolate",
     8233: "paragraph separator",
     65279: "zero width no-break space",
     65532: "object replacement"

package/package.json

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