@codemirror/view 0.19.11 → 0.19.12

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.19.12 (2021-11-04)
+
+### Bug fixes
+
+Make sure the workaround for the lost virtual keyboard on Chrome Android also works on slower phones. Slight style change in beforeinput handler
+
+Avoid failure cases in viewport-based rendering of very long lines.
+
 ## 0.19.11 (2021-11-03)
 
 ### Breaking changes

package/dist/index.cjs

@@ -321,25 +321,30 @@ class ContentView {
     sync(track) {
         var _a;
         if (this.dirty & 2 /* Node */) {
-            let parent = this.dom, pos = null;
+            let parent = this.dom;
+            let pos = parent.firstChild;
             for (let child of this.children) {
                 if (child.dirty) {
-                    let next = pos ? pos.nextSibling : parent.firstChild;
-                    if (!child.dom && next && !((_a = ContentView.get(next)) === null || _a === void 0 ? void 0 : _a.parent))
-                        child.reuseDOM(next);
+                    if (!child.dom && pos && !((_a = ContentView.get(pos)) === null || _a === void 0 ? void 0 : _a.parent))
+                        child.reuseDOM(pos);
                     child.sync(track);
                     child.dirty = 0 /* Not */;
                 }
-                if (track && track.node == parent && pos != child.dom)
+                if (track && !track.written && track.node == parent && pos != child.dom)
                     track.written = true;
-                syncNodeInto(parent, pos, child.dom);
-                pos = child.dom;
+                if (child.dom.parentNode == parent) {
+                    while (pos && pos != child.dom)
+                        pos = rm(pos);
+                    pos = child.dom.nextSibling;
+                }
+                else {
+                    parent.insertBefore(child.dom, pos);
+                }
             }
-            let next = pos ? pos.nextSibling : parent.firstChild;
-            if (next && track && track.node == parent)
+            if (pos && track && track.node == parent)
                 track.written = true;
-            while (next)
-                next = rm(next);
+            while (pos)
+                pos = rm(pos);
         }
         else if (this.dirty & 1 /* Child */) {
             for (let child of this.children)
@@ -479,14 +484,6 @@ function rm(dom) {
     dom.parentNode.removeChild(dom);
     return next;
 }
-function syncNodeInto(parent, after, dom) {
-    let next = after ? after.nextSibling : parent.firstChild;
-    if (dom.parentNode == parent)
-        while (next != dom)
-            next = rm(next);
-    else
-        parent.insertBefore(dom, next);
-}
 class ChildCursor {
     constructor(children, pos, i) {
         this.children = children;
@@ -3735,17 +3732,19 @@ handlers.beforeinput = (view, event) => {
     let pending;
     if (browser.chrome && browser.android && (pending = PendingKeys.find(key => key.inputType == event.inputType))) {
         view.inputState.setPendingKey(view, pending);
-        let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
-        setTimeout(() => {
-            var _a;
-            // Backspacing near uneditable nodes on Chrome Android sometimes
-            // closes the virtual keyboard. This tries to crudely detect
-            // that and refocus to get it back.
-            if ((((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0) > startViewHeight + 10 && view.hasFocus) {
-                view.contentDOM.blur();
-                view.focus();
-            }
-        }, 50);
+        if (pending.key == "Backspace" || pending.key == "Delete") {
+            let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
+            setTimeout(() => {
+                var _a;
+                // Backspacing near uneditable nodes on Chrome Android sometimes
+                // closes the virtual keyboard. This tries to crudely detect
+                // that and refocus to get it back.
+                if ((((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0) > startViewHeight + 10 && view.hasFocus) {
+                    view.contentDOM.blur();
+                    view.focus();
+                }
+            }, 100);
+        }
     }
 };
 
@@ -4533,7 +4532,7 @@ class ViewState {
             viewport = this.getViewport(0, scrollTarget);
         this.viewport = viewport;
         this.updateForViewport();
-        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
+        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 4000 /* DoubleMargin */)
             this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
         update.flags |= this.computeVisibleRanges();
         if (scrollTarget)
@@ -4593,7 +4592,7 @@ class ViewState {
             this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from || this.scrollTarget.range.head > this.viewport.to))
             this.viewport = this.getViewport(bias, this.scrollTarget);
         this.updateForViewport();
-        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
+        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 4000 /* DoubleMargin */)
             this.updateLineGaps(this.ensureLineGaps(refresh ? [] : this.lineGaps));
         result |= this.computeVisibleRanges();
         if (this.mustEnforceCursorAssoc) {
@@ -4668,52 +4667,50 @@ class ViewState {
         if (this.heightOracle.direction != exports.Direction.LTR)
             return gaps;
         this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.state.doc, 0, 0, line => {
-            if (line.length < 10000 /* Margin */)
+            if (line.length < 4000 /* DoubleMargin */)
                 return;
             let structure = lineStructure(line.from, line.to, this.state);
-            if (structure.total < 10000 /* Margin */)
+            if (structure.total < 4000 /* DoubleMargin */)
                 return;
             let viewFrom, viewTo;
             if (this.heightOracle.lineWrapping) {
-                if (line.from != this.viewport.from)
-                    viewFrom = line.from;
-                else
-                    viewFrom = findPosition(structure, (this.visibleTop - line.top) / line.height);
-                if (line.to != this.viewport.to)
-                    viewTo = line.to;
-                else
-                    viewTo = findPosition(structure, (this.visibleBottom - line.top) / line.height);
+                let marginHeight = (2000 /* Margin */ / this.heightOracle.lineLength) * this.heightOracle.lineHeight;
+                viewFrom = findPosition(structure, (this.visibleTop - line.top - marginHeight) / line.height);
+                viewTo = findPosition(structure, (this.visibleBottom - line.top + marginHeight) / line.height);
             }
             else {
                 let totalWidth = structure.total * this.heightOracle.charWidth;
-                viewFrom = findPosition(structure, this.pixelViewport.left / totalWidth);
-                viewTo = findPosition(structure, this.pixelViewport.right / totalWidth);
+                let marginWidth = 2000 /* Margin */ * this.heightOracle.charWidth;
+                viewFrom = findPosition(structure, (this.pixelViewport.left - marginWidth) / totalWidth);
+                viewTo = findPosition(structure, (this.pixelViewport.right + marginWidth) / totalWidth);
             }
+            let outside = [];
+            if (viewFrom > line.from)
+                outside.push({ from: line.from, to: viewFrom });
+            if (viewTo < line.to)
+                outside.push({ from: viewTo, to: line.to });
             let sel = this.state.selection.main;
-            // Make sure the gap doesn't cover a selection end
-            if (sel.from <= viewFrom && sel.to >= line.from)
-                viewFrom = sel.from;
-            if (sel.from <= line.to && sel.to >= viewTo)
-                viewTo = sel.to;
-            let gapTo = viewFrom - 10000 /* Margin */, gapFrom = viewTo + 10000 /* Margin */;
-            if (gapTo > line.from + 5000 /* HalfMargin */)
-                gaps.push(find(current, gap => gap.from == line.from && gap.to > gapTo - 5000 /* HalfMargin */ && gap.to < gapTo + 5000 /* HalfMargin */) ||
-                    new LineGap(line.from, gapTo, this.gapSize(line, gapTo, true, structure)));
-            if (gapFrom < line.to - 5000 /* HalfMargin */)
-                gaps.push(find(current, gap => gap.to == line.to && gap.from > gapFrom - 5000 /* HalfMargin */ &&
-                    gap.from < gapFrom + 5000 /* HalfMargin */) ||
-                    new LineGap(gapFrom, line.to, this.gapSize(line, gapFrom, false, structure)));
+            // Make sure the gaps don't cover a selection end
+            if (sel.from >= line.from && sel.from <= line.to)
+                cutRange(outside, sel.from - 10 /* SelectionMargin */, sel.from + 10 /* SelectionMargin */);
+            if (!sel.empty && sel.to >= line.from && sel.to <= line.to)
+                cutRange(outside, sel.to - 10 /* SelectionMargin */, sel.to + 10 /* SelectionMargin */);
+            for (let { from, to } of outside)
+                if (to - from > 1000 /* HalfMargin */) {
+                    gaps.push(find(current, gap => gap.from >= line.from && gap.to <= line.to &&
+                        Math.abs(gap.from - from) < 1000 /* HalfMargin */ && Math.abs(gap.to - to) < 1000 /* HalfMargin */) ||
+                        new LineGap(from, to, this.gapSize(line, from, to, structure)));
+                }
         });
         return gaps;
     }
-    gapSize(line, pos, start, structure) {
+    gapSize(line, from, to, structure) {
+        let fraction = findFraction(structure, to) - findFraction(structure, from);
         if (this.heightOracle.lineWrapping) {
-            let height = line.height * findFraction(structure, pos);
-            return start ? height : line.height - height;
+            return line.height * fraction;
         }
         else {
-            let ratio = findFraction(structure, pos);
-            return structure.total * this.heightOracle.charWidth * (start ? ratio : 1 - ratio);
+            return structure.total * this.heightOracle.charWidth * fraction;
         }
     }
     updateLineGaps(gaps) {
@@ -4807,6 +4804,20 @@ function findFraction(structure, pos) {
     }
     return counted / structure.total;
 }
+function cutRange(ranges, from, to) {
+    for (let i = 0; i < ranges.length; i++) {
+        let r = ranges[i];
+        if (r.from < to && r.to > from) {
+            let pieces = [];
+            if (r.from < from)
+                pieces.push({ from: r.from, to: from });
+            if (r.to > to)
+                pieces.push({ from: to, to: r.to });
+            ranges.splice(i, 1, ...pieces);
+            i += pieces.length - 1;
+        }
+    }
+}
 function find(array, f) {
     for (let val of array)
         if (f(val))
@@ -6271,7 +6282,7 @@ class EditorView {
     target editors with a dark or light theme.
     */
     static baseTheme(spec) {
-        return state.Prec.fallback(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
+        return state.Prec.lowest(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
     }
 }
 /**
@@ -6713,7 +6724,7 @@ const themeSpec = {
 };
 if (CanHidePrimary)
     themeSpec[".cm-line"].caretColor = "transparent !important";
-const hideNativeSelection = state.Prec.override(EditorView.theme(themeSpec));
+const hideNativeSelection = state.Prec.highest(EditorView.theme(themeSpec));
 function getBase(view) {
     let rect = view.scrollDOM.getBoundingClientRect();
     let left = view.textDirection == exports.Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth;

package/dist/index.js

@@ -318,25 +318,30 @@ class ContentView {
     sync(track) {
         var _a;
         if (this.dirty & 2 /* Node */) {
-            let parent = this.dom, pos = null;
+            let parent = this.dom;
+            let pos = parent.firstChild;
             for (let child of this.children) {
                 if (child.dirty) {
-                    let next = pos ? pos.nextSibling : parent.firstChild;
-                    if (!child.dom && next && !((_a = ContentView.get(next)) === null || _a === void 0 ? void 0 : _a.parent))
-                        child.reuseDOM(next);
+                    if (!child.dom && pos && !((_a = ContentView.get(pos)) === null || _a === void 0 ? void 0 : _a.parent))
+                        child.reuseDOM(pos);
                     child.sync(track);
                     child.dirty = 0 /* Not */;
                 }
-                if (track && track.node == parent && pos != child.dom)
+                if (track && !track.written && track.node == parent && pos != child.dom)
                     track.written = true;
-                syncNodeInto(parent, pos, child.dom);
-                pos = child.dom;
+                if (child.dom.parentNode == parent) {
+                    while (pos && pos != child.dom)
+                        pos = rm(pos);
+                    pos = child.dom.nextSibling;
+                }
+                else {
+                    parent.insertBefore(child.dom, pos);
+                }
             }
-            let next = pos ? pos.nextSibling : parent.firstChild;
-            if (next && track && track.node == parent)
+            if (pos && track && track.node == parent)
                 track.written = true;
-            while (next)
-                next = rm(next);
+            while (pos)
+                pos = rm(pos);
         }
         else if (this.dirty & 1 /* Child */) {
             for (let child of this.children)
@@ -476,14 +481,6 @@ function rm(dom) {
     dom.parentNode.removeChild(dom);
     return next;
 }
-function syncNodeInto(parent, after, dom) {
-    let next = after ? after.nextSibling : parent.firstChild;
-    if (dom.parentNode == parent)
-        while (next != dom)
-            next = rm(next);
-    else
-        parent.insertBefore(dom, next);
-}
 class ChildCursor {
     constructor(children, pos, i) {
         this.children = children;
@@ -3730,17 +3727,19 @@ handlers.beforeinput = (view, event) => {
     let pending;
     if (browser.chrome && browser.android && (pending = PendingKeys.find(key => key.inputType == event.inputType))) {
         view.inputState.setPendingKey(view, pending);
-        let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
-        setTimeout(() => {
-            var _a;
-            // Backspacing near uneditable nodes on Chrome Android sometimes
-            // closes the virtual keyboard. This tries to crudely detect
-            // that and refocus to get it back.
-            if ((((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0) > startViewHeight + 10 && view.hasFocus) {
-                view.contentDOM.blur();
-                view.focus();
-            }
-        }, 50);
+        if (pending.key == "Backspace" || pending.key == "Delete") {
+            let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
+            setTimeout(() => {
+                var _a;
+                // Backspacing near uneditable nodes on Chrome Android sometimes
+                // closes the virtual keyboard. This tries to crudely detect
+                // that and refocus to get it back.
+                if ((((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0) > startViewHeight + 10 && view.hasFocus) {
+                    view.contentDOM.blur();
+                    view.focus();
+                }
+            }, 100);
+        }
     }
 };
 
@@ -4527,7 +4526,7 @@ class ViewState {
             viewport = this.getViewport(0, scrollTarget);
         this.viewport = viewport;
         this.updateForViewport();
-        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
+        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 4000 /* DoubleMargin */)
             this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
         update.flags |= this.computeVisibleRanges();
         if (scrollTarget)
@@ -4587,7 +4586,7 @@ class ViewState {
             this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from || this.scrollTarget.range.head > this.viewport.to))
             this.viewport = this.getViewport(bias, this.scrollTarget);
         this.updateForViewport();
-        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
+        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 4000 /* DoubleMargin */)
             this.updateLineGaps(this.ensureLineGaps(refresh ? [] : this.lineGaps));
         result |= this.computeVisibleRanges();
         if (this.mustEnforceCursorAssoc) {
@@ -4662,52 +4661,50 @@ class ViewState {
         if (this.heightOracle.direction != Direction.LTR)
             return gaps;
         this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.state.doc, 0, 0, line => {
-            if (line.length < 10000 /* Margin */)
+            if (line.length < 4000 /* DoubleMargin */)
                 return;
             let structure = lineStructure(line.from, line.to, this.state);
-            if (structure.total < 10000 /* Margin */)
+            if (structure.total < 4000 /* DoubleMargin */)
                 return;
             let viewFrom, viewTo;
             if (this.heightOracle.lineWrapping) {
-                if (line.from != this.viewport.from)
-                    viewFrom = line.from;
-                else
-                    viewFrom = findPosition(structure, (this.visibleTop - line.top) / line.height);
-                if (line.to != this.viewport.to)
-                    viewTo = line.to;
-                else
-                    viewTo = findPosition(structure, (this.visibleBottom - line.top) / line.height);
+                let marginHeight = (2000 /* Margin */ / this.heightOracle.lineLength) * this.heightOracle.lineHeight;
+                viewFrom = findPosition(structure, (this.visibleTop - line.top - marginHeight) / line.height);
+                viewTo = findPosition(structure, (this.visibleBottom - line.top + marginHeight) / line.height);
             }
             else {
                 let totalWidth = structure.total * this.heightOracle.charWidth;
-                viewFrom = findPosition(structure, this.pixelViewport.left / totalWidth);
-                viewTo = findPosition(structure, this.pixelViewport.right / totalWidth);
+                let marginWidth = 2000 /* Margin */ * this.heightOracle.charWidth;
+                viewFrom = findPosition(structure, (this.pixelViewport.left - marginWidth) / totalWidth);
+                viewTo = findPosition(structure, (this.pixelViewport.right + marginWidth) / totalWidth);
             }
+            let outside = [];
+            if (viewFrom > line.from)
+                outside.push({ from: line.from, to: viewFrom });
+            if (viewTo < line.to)
+                outside.push({ from: viewTo, to: line.to });
             let sel = this.state.selection.main;
-            // Make sure the gap doesn't cover a selection end
-            if (sel.from <= viewFrom && sel.to >= line.from)
-                viewFrom = sel.from;
-            if (sel.from <= line.to && sel.to >= viewTo)
-                viewTo = sel.to;
-            let gapTo = viewFrom - 10000 /* Margin */, gapFrom = viewTo + 10000 /* Margin */;
-            if (gapTo > line.from + 5000 /* HalfMargin */)
-                gaps.push(find(current, gap => gap.from == line.from && gap.to > gapTo - 5000 /* HalfMargin */ && gap.to < gapTo + 5000 /* HalfMargin */) ||
-                    new LineGap(line.from, gapTo, this.gapSize(line, gapTo, true, structure)));
-            if (gapFrom < line.to - 5000 /* HalfMargin */)
-                gaps.push(find(current, gap => gap.to == line.to && gap.from > gapFrom - 5000 /* HalfMargin */ &&
-                    gap.from < gapFrom + 5000 /* HalfMargin */) ||
-                    new LineGap(gapFrom, line.to, this.gapSize(line, gapFrom, false, structure)));
+            // Make sure the gaps don't cover a selection end
+            if (sel.from >= line.from && sel.from <= line.to)
+                cutRange(outside, sel.from - 10 /* SelectionMargin */, sel.from + 10 /* SelectionMargin */);
+            if (!sel.empty && sel.to >= line.from && sel.to <= line.to)
+                cutRange(outside, sel.to - 10 /* SelectionMargin */, sel.to + 10 /* SelectionMargin */);
+            for (let { from, to } of outside)
+                if (to - from > 1000 /* HalfMargin */) {
+                    gaps.push(find(current, gap => gap.from >= line.from && gap.to <= line.to &&
+                        Math.abs(gap.from - from) < 1000 /* HalfMargin */ && Math.abs(gap.to - to) < 1000 /* HalfMargin */) ||
+                        new LineGap(from, to, this.gapSize(line, from, to, structure)));
+                }
         });
         return gaps;
     }
-    gapSize(line, pos, start, structure) {
+    gapSize(line, from, to, structure) {
+        let fraction = findFraction(structure, to) - findFraction(structure, from);
         if (this.heightOracle.lineWrapping) {
-            let height = line.height * findFraction(structure, pos);
-            return start ? height : line.height - height;
+            return line.height * fraction;
         }
         else {
-            let ratio = findFraction(structure, pos);
-            return structure.total * this.heightOracle.charWidth * (start ? ratio : 1 - ratio);
+            return structure.total * this.heightOracle.charWidth * fraction;
         }
     }
     updateLineGaps(gaps) {
@@ -4801,6 +4798,20 @@ function findFraction(structure, pos) {
     }
     return counted / structure.total;
 }
+function cutRange(ranges, from, to) {
+    for (let i = 0; i < ranges.length; i++) {
+        let r = ranges[i];
+        if (r.from < to && r.to > from) {
+            let pieces = [];
+            if (r.from < from)
+                pieces.push({ from: r.from, to: from });
+            if (r.to > to)
+                pieces.push({ from: to, to: r.to });
+            ranges.splice(i, 1, ...pieces);
+            i += pieces.length - 1;
+        }
+    }
+}
 function find(array, f) {
     for (let val of array)
         if (f(val))
@@ -6265,7 +6276,7 @@ class EditorView {
     target editors with a dark or light theme.
     */
     static baseTheme(spec) {
-        return Prec.fallback(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
+        return Prec.lowest(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
     }
 }
 /**
@@ -6707,7 +6718,7 @@ const themeSpec = {
 };
 if (CanHidePrimary)
     themeSpec[".cm-line"].caretColor = "transparent !important";
-const hideNativeSelection = /*@__PURE__*/Prec.override(/*@__PURE__*/EditorView.theme(themeSpec));
+const hideNativeSelection = /*@__PURE__*/Prec.highest(/*@__PURE__*/EditorView.theme(themeSpec));
 function getBase(view) {
     let rect = view.scrollDOM.getBoundingClientRect();
     let left = view.textDirection == Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "0.19.11",
+  "version": "0.19.12",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -27,7 +27,7 @@
   "license": "MIT",
   "dependencies": {
     "@codemirror/rangeset": "^0.19.0",
-    "@codemirror/state": "^0.19.2",
+    "@codemirror/state": "^0.19.3",
     "@codemirror/text": "^0.19.0",
     "style-mod": "^4.0.0",
     "w3c-keyname": "^2.2.4"