@codemirror/view 6.7.0 → 6.7.2

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## 6.7.2 (2023-01-04)
+
+### Bug fixes
+
+Fix a regression where the cursor didn't restart its blink cycle when moving it with the pointer.
+
+Even without a `key` property, measure request objects that are already scheduled will not be scheduled again by `requestMeasure`.
+
+Fix an issue where keymaps incorrectly interpreted key events that used Ctrl+Alt modifiers to simulate AltGr on Windows.
+
+Fix a bug where line decorations with a different `class` property would be treated as equal.
+
+Fix a bug that caused `drawSelection` to not notice when it was reconfigured.
+
+Fix a crash in the gutter extension caused by sharing of mutable arrays.
+
+Fix a regression that caused touch selection on mobile platforms to not work in an uneditable editor.
+
+Fix a bug where DOM events on the boundary between lines could get assigned to the wrong line.
+
+## 6.7.1 (2022-12-12)
+
+### Bug fixes
+
+Make the editor properly scroll when moving the pointer out of it during drag selection.
+
+Fix a regression where clicking below the content element in an editor with its own height didn't focus the editor.
+
 ## 6.7.0 (2022-12-07)
 
 ### Bug fixes

package/dist/index.cjs

@@ -191,6 +191,26 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
         }
     }
 }
+function scrollableParent(dom) {
+    let doc = dom.ownerDocument;
+    for (let cur = dom.parentNode; cur;) {
+        if (cur == doc.body) {
+            break;
+        }
+        else if (cur.nodeType == 1) {
+            if (cur.scrollHeight > cur.clientHeight || cur.scrollWidth > cur.clientWidth)
+                return cur;
+            cur = cur.assignedSlot || cur.parentNode;
+        }
+        else if (cur.nodeType == 11) {
+            cur = cur.host;
+        }
+        else {
+            break;
+        }
+    }
+    return null;
+}
 class DOMSelectionState {
     constructor() {
         this.anchorNode = null;
@@ -1328,7 +1348,9 @@ class LineDecoration extends Decoration {
         super(-200000000 /* Side.Line */, -200000000 /* Side.Line */, null, spec);
     }
     eq(other) {
-        return other instanceof LineDecoration && attrsEq(this.spec.attributes, other.spec.attributes);
+        return other instanceof LineDecoration &&
+            this.spec.class == other.spec.class &&
+            attrsEq(this.spec.attributes, other.spec.attributes);
     }
     range(from, to = from) {
         if (to != from)
@@ -3391,22 +3413,30 @@ class InputState {
         this.compositionFirstChange = null;
         this.compositionEndedAt = 0;
         this.mouseSelection = null;
+        let handleEvent = (handler, event) => {
+            if (this.ignoreDuringComposition(event))
+                return;
+            if (event.type == "keydown" && this.keydown(view, event))
+                return;
+            if (this.mustFlushObserver(event))
+                view.observer.forceFlush();
+            if (this.runCustomHandlers(event.type, view, event))
+                event.preventDefault();
+            else
+                handler(view, event);
+        };
         for (let type in handlers) {
             let handler = handlers[type];
-            view.contentDOM.addEventListener(type, (event) => {
-                if (!eventBelongsToEditor(view, event) || this.ignoreDuringComposition(event))
-                    return;
-                if (type == "keydown" && this.keydown(view, event))
-                    return;
-                if (this.mustFlushObserver(event))
-                    view.observer.forceFlush();
-                if (this.runCustomHandlers(type, view, event))
-                    event.preventDefault();
-                else
-                    handler(view, event);
+            view.contentDOM.addEventListener(type, event => {
+                if (eventBelongsToEditor(view, event))
+                    handleEvent(handler, event);
             }, handlerOptions[type]);
             this.registeredEvents.push(type);
         }
+        view.scrollDOM.addEventListener("mousedown", (event) => {
+            if (event.target == view.scrollDOM)
+                handleEvent(handlers.mousedown, event);
+        });
         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
@@ -3563,12 +3593,18 @@ const PendingKeys = [
 const EmacsyPendingKeys = "dthko";
 // Key codes for modifier keys
 const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
+function dragScrollSpeed(dist) {
+    return dist * 0.7 + 8;
+}
 class MouseSelection {
     constructor(view, startEvent, style, mustSelect) {
         this.view = view;
         this.style = style;
         this.mustSelect = mustSelect;
+        this.scrollSpeed = { x: 0, y: 0 };
+        this.scrolling = -1;
         this.lastEvent = startEvent;
+        this.scrollParent = scrollableParent(view.contentDOM);
         let doc = view.contentDOM.ownerDocument;
         doc.addEventListener("mousemove", this.move = this.move.bind(this));
         doc.addEventListener("mouseup", this.up = this.up.bind(this));
@@ -3584,11 +3620,24 @@ class MouseSelection {
         }
     }
     move(event) {
+        var _a;
         if (event.buttons == 0)
             return this.destroy();
         if (this.dragging !== false)
             return;
         this.select(this.lastEvent = event);
+        let sx = 0, sy = 0;
+        let rect = ((_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect())
+            || { left: 0, top: 0, right: this.view.win.innerWidth, bottom: this.view.win.innerHeight };
+        if (event.clientX <= rect.left)
+            sx = -dragScrollSpeed(rect.left - event.clientX);
+        else if (event.clientX >= rect.right)
+            sx = dragScrollSpeed(event.clientX - rect.right);
+        if (event.clientY <= rect.top)
+            sy = -dragScrollSpeed(rect.top - event.clientY);
+        else if (event.clientY >= rect.bottom)
+            sy = dragScrollSpeed(event.clientY - rect.bottom);
+        this.setScrollSpeed(sx, sy);
     }
     up(event) {
         if (this.dragging == null)
@@ -3598,19 +3647,41 @@ class MouseSelection {
         this.destroy();
     }
     destroy() {
+        this.setScrollSpeed(0, 0);
         let doc = this.view.contentDOM.ownerDocument;
         doc.removeEventListener("mousemove", this.move);
         doc.removeEventListener("mouseup", this.up);
         this.view.inputState.mouseSelection = null;
     }
+    setScrollSpeed(sx, sy) {
+        this.scrollSpeed = { x: sx, y: sy };
+        if (sx || sy) {
+            if (this.scrolling < 0)
+                this.scrolling = setInterval(() => this.scroll(), 50);
+        }
+        else if (this.scrolling > -1) {
+            clearInterval(this.scrolling);
+            this.scrolling = -1;
+        }
+    }
+    scroll() {
+        if (this.scrollParent) {
+            this.scrollParent.scrollLeft += this.scrollSpeed.x;
+            this.scrollParent.scrollTop += this.scrollSpeed.y;
+        }
+        else {
+            this.view.win.scrollBy(this.scrollSpeed.x, this.scrollSpeed.y);
+        }
+        if (this.dragging === false)
+            this.select(this.lastEvent);
+    }
     select(event) {
         let selection = this.style.get(event, this.extend, this.multiple);
         if (this.mustSelect || !selection.eq(this.view.state.selection) ||
             selection.main.assoc != this.view.state.selection.main.assoc)
             this.view.dispatch({
                 selection,
-                userEvent: "select.pointer",
-                scrollIntoView: true
+                userEvent: "select.pointer"
             });
         this.mustSelect = false;
     }
@@ -3801,23 +3872,15 @@ function getClickType(event) {
 function basicMouseSelection(view, event) {
     let start = queryPos(view, event), type = getClickType(event);
     let startSel = view.state.selection;
-    let last = start, lastEvent = event;
     return {
         update(update) {
             if (update.docChanged) {
                 start.pos = update.changes.mapPos(start.pos);
                 startSel = startSel.map(update.changes);
-                lastEvent = null;
             }
         },
         get(event, extend, multiple) {
-            let cur;
-            if (lastEvent && event.clientX == lastEvent.clientX && event.clientY == lastEvent.clientY)
-                cur = last;
-            else {
-                cur = last = queryPos(view, event);
-                lastEvent = event;
-            }
+            let cur = queryPos(view, event);
             let range = rangeForClick(view, cur.pos, cur.bias, type);
             if (start.pos != cur.pos && !extend) {
                 let startRange = rangeForClick(view, start.pos, start.bias, type);
@@ -5264,7 +5327,7 @@ function buildTheme(main, spec, scopes) {
     });
 }
 const baseTheme$1 = buildTheme("." + baseThemeID, {
-    "&.cm-editor": {
+    "&": {
         position: "relative !important",
         boxSizing: "border-box",
         "&.cm-focused": {
@@ -5548,7 +5611,7 @@ function applyDOMChange(view, domChange) {
                 insert: state.Text.of(domChange.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
         }
     }
-    else if (newSel && (!view.hasFocus || !view.state.facet(editable) || newSel.main.eq(sel))) {
+    else if (newSel && (!view.hasFocus && view.state.facet(editable) || newSel.main.eq(sel))) {
         newSel = null;
     }
     if (!change && !newSel)
@@ -6612,6 +6675,8 @@ class EditorView {
         if (this.measureScheduled < 0)
             this.measureScheduled = this.win.requestAnimationFrame(() => this.measure());
         if (request) {
+            if (this.measureRequests.indexOf(request) > -1)
+                return;
             if (request.key != null)
                 for (let i = 0; i < this.measureRequests.length; i++) {
                     if (this.measureRequests[i].key === request.key) {
@@ -7295,6 +7360,8 @@ function runHandlers(map, event, view, scope) {
         if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)]))
             return true;
         if (isChar && (event.altKey || event.metaKey || event.ctrlKey) &&
+            // Ctrl-Alt may be used for AltGr on Windows
+            !(browser.windows && event.ctrlKey && event.altKey) &&
             (baseName = w3cKeyname.base[event.keyCode]) && baseName != name) {
             if (runFor(scopeObj[prefix + modifiers(baseName, event, true)]))
                 return true;
@@ -7589,7 +7656,7 @@ function drawSelection(config = {}) {
     ];
 }
 function configChanged(update) {
-    return update.startState.facet(selectionConfig) != update.startState.facet(selectionConfig);
+    return update.startState.facet(selectionConfig) != update.state.facet(selectionConfig);
 }
 const cursorLayer = layer({
     above: true,
@@ -7608,7 +7675,7 @@ const cursorLayer = layer({
         return cursors;
     },
     update(update, dom) {
-        if (update.transactions.some(tr => tr.scrollIntoView))
+        if (update.transactions.some(tr => tr.selection))
             dom.style.animationName = dom.style.animationName == "cm-blink" ? "cm-blink2" : "cm-blink";
         let confChange = configChanged(update);
         if (confChange)
@@ -9174,15 +9241,14 @@ class UpdateContext {
     constructor(gutter, viewport, height) {
         this.gutter = gutter;
         this.height = height;
-        this.localMarkers = [];
         this.i = 0;
         this.cursor = state.RangeSet.iter(gutter.markers, viewport.from);
     }
     line(view, line, extraMarkers) {
-        if (this.localMarkers.length)
-            this.localMarkers = [];
-        advanceCursor(this.cursor, this.localMarkers, line.from);
-        let localMarkers = extraMarkers.length ? this.localMarkers.concat(extraMarkers) : this.localMarkers;
+        let localMarkers = [];
+        advanceCursor(this.cursor, localMarkers, line.from);
+        if (extraMarkers.length)
+            localMarkers = localMarkers.concat(extraMarkers);
         let forLine = this.gutter.config.lineMarker(view, line, localMarkers);
         if (forLine)
             localMarkers.unshift(forLine);
@@ -9220,7 +9286,17 @@ class SingleGutterView {
         this.dom.className = "cm-gutter" + (this.config.class ? " " + this.config.class : "");
         for (let prop in config.domEventHandlers) {
             this.dom.addEventListener(prop, (event) => {
-                let line = view.lineBlockAtHeight(event.clientY - view.documentTop);
+                let target = event.target, y;
+                if (target != this.dom && this.dom.contains(target)) {
+                    while (target.parentNode != this.dom)
+                        target = target.parentNode;
+                    let rect = target.getBoundingClientRect();
+                    y = (rect.top + rect.bottom) / 2;
+                }
+                else {
+                    y = event.clientY;
+                }
+                let line = view.lineBlockAtHeight(y - view.documentTop);
                 if (config.domEventHandlers[prop](view, line, event))
                     event.preventDefault();
             });

package/dist/index.js

@@ -187,6 +187,26 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
         }
     }
 }
+function scrollableParent(dom) {
+    let doc = dom.ownerDocument;
+    for (let cur = dom.parentNode; cur;) {
+        if (cur == doc.body) {
+            break;
+        }
+        else if (cur.nodeType == 1) {
+            if (cur.scrollHeight > cur.clientHeight || cur.scrollWidth > cur.clientWidth)
+                return cur;
+            cur = cur.assignedSlot || cur.parentNode;
+        }
+        else if (cur.nodeType == 11) {
+            cur = cur.host;
+        }
+        else {
+            break;
+        }
+    }
+    return null;
+}
 class DOMSelectionState {
     constructor() {
         this.anchorNode = null;
@@ -1323,7 +1343,9 @@ class LineDecoration extends Decoration {
         super(-200000000 /* Side.Line */, -200000000 /* Side.Line */, null, spec);
     }
     eq(other) {
-        return other instanceof LineDecoration && attrsEq(this.spec.attributes, other.spec.attributes);
+        return other instanceof LineDecoration &&
+            this.spec.class == other.spec.class &&
+            attrsEq(this.spec.attributes, other.spec.attributes);
     }
     range(from, to = from) {
         if (to != from)
@@ -3385,22 +3407,30 @@ class InputState {
         this.compositionFirstChange = null;
         this.compositionEndedAt = 0;
         this.mouseSelection = null;
+        let handleEvent = (handler, event) => {
+            if (this.ignoreDuringComposition(event))
+                return;
+            if (event.type == "keydown" && this.keydown(view, event))
+                return;
+            if (this.mustFlushObserver(event))
+                view.observer.forceFlush();
+            if (this.runCustomHandlers(event.type, view, event))
+                event.preventDefault();
+            else
+                handler(view, event);
+        };
         for (let type in handlers) {
             let handler = handlers[type];
-            view.contentDOM.addEventListener(type, (event) => {
-                if (!eventBelongsToEditor(view, event) || this.ignoreDuringComposition(event))
-                    return;
-                if (type == "keydown" && this.keydown(view, event))
-                    return;
-                if (this.mustFlushObserver(event))
-                    view.observer.forceFlush();
-                if (this.runCustomHandlers(type, view, event))
-                    event.preventDefault();
-                else
-                    handler(view, event);
+            view.contentDOM.addEventListener(type, event => {
+                if (eventBelongsToEditor(view, event))
+                    handleEvent(handler, event);
             }, handlerOptions[type]);
             this.registeredEvents.push(type);
         }
+        view.scrollDOM.addEventListener("mousedown", (event) => {
+            if (event.target == view.scrollDOM)
+                handleEvent(handlers.mousedown, event);
+        });
         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
@@ -3557,12 +3587,18 @@ const PendingKeys = [
 const EmacsyPendingKeys = "dthko";
 // Key codes for modifier keys
 const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
+function dragScrollSpeed(dist) {
+    return dist * 0.7 + 8;
+}
 class MouseSelection {
     constructor(view, startEvent, style, mustSelect) {
         this.view = view;
         this.style = style;
         this.mustSelect = mustSelect;
+        this.scrollSpeed = { x: 0, y: 0 };
+        this.scrolling = -1;
         this.lastEvent = startEvent;
+        this.scrollParent = scrollableParent(view.contentDOM);
         let doc = view.contentDOM.ownerDocument;
         doc.addEventListener("mousemove", this.move = this.move.bind(this));
         doc.addEventListener("mouseup", this.up = this.up.bind(this));
@@ -3578,11 +3614,24 @@ class MouseSelection {
         }
     }
     move(event) {
+        var _a;
         if (event.buttons == 0)
             return this.destroy();
         if (this.dragging !== false)
             return;
         this.select(this.lastEvent = event);
+        let sx = 0, sy = 0;
+        let rect = ((_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect())
+            || { left: 0, top: 0, right: this.view.win.innerWidth, bottom: this.view.win.innerHeight };
+        if (event.clientX <= rect.left)
+            sx = -dragScrollSpeed(rect.left - event.clientX);
+        else if (event.clientX >= rect.right)
+            sx = dragScrollSpeed(event.clientX - rect.right);
+        if (event.clientY <= rect.top)
+            sy = -dragScrollSpeed(rect.top - event.clientY);
+        else if (event.clientY >= rect.bottom)
+            sy = dragScrollSpeed(event.clientY - rect.bottom);
+        this.setScrollSpeed(sx, sy);
     }
     up(event) {
         if (this.dragging == null)
@@ -3592,19 +3641,41 @@ class MouseSelection {
         this.destroy();
     }
     destroy() {
+        this.setScrollSpeed(0, 0);
         let doc = this.view.contentDOM.ownerDocument;
         doc.removeEventListener("mousemove", this.move);
         doc.removeEventListener("mouseup", this.up);
         this.view.inputState.mouseSelection = null;
     }
+    setScrollSpeed(sx, sy) {
+        this.scrollSpeed = { x: sx, y: sy };
+        if (sx || sy) {
+            if (this.scrolling < 0)
+                this.scrolling = setInterval(() => this.scroll(), 50);
+        }
+        else if (this.scrolling > -1) {
+            clearInterval(this.scrolling);
+            this.scrolling = -1;
+        }
+    }
+    scroll() {
+        if (this.scrollParent) {
+            this.scrollParent.scrollLeft += this.scrollSpeed.x;
+            this.scrollParent.scrollTop += this.scrollSpeed.y;
+        }
+        else {
+            this.view.win.scrollBy(this.scrollSpeed.x, this.scrollSpeed.y);
+        }
+        if (this.dragging === false)
+            this.select(this.lastEvent);
+    }
     select(event) {
         let selection = this.style.get(event, this.extend, this.multiple);
         if (this.mustSelect || !selection.eq(this.view.state.selection) ||
             selection.main.assoc != this.view.state.selection.main.assoc)
             this.view.dispatch({
                 selection,
-                userEvent: "select.pointer",
-                scrollIntoView: true
+                userEvent: "select.pointer"
             });
         this.mustSelect = false;
     }
@@ -3795,23 +3866,15 @@ function getClickType(event) {
 function basicMouseSelection(view, event) {
     let start = queryPos(view, event), type = getClickType(event);
     let startSel = view.state.selection;
-    let last = start, lastEvent = event;
     return {
         update(update) {
             if (update.docChanged) {
                 start.pos = update.changes.mapPos(start.pos);
                 startSel = startSel.map(update.changes);
-                lastEvent = null;
             }
         },
         get(event, extend, multiple) {
-            let cur;
-            if (lastEvent && event.clientX == lastEvent.clientX && event.clientY == lastEvent.clientY)
-                cur = last;
-            else {
-                cur = last = queryPos(view, event);
-                lastEvent = event;
-            }
+            let cur = queryPos(view, event);
             let range = rangeForClick(view, cur.pos, cur.bias, type);
             if (start.pos != cur.pos && !extend) {
                 let startRange = rangeForClick(view, start.pos, start.bias, type);
@@ -5257,7 +5320,7 @@ function buildTheme(main, spec, scopes) {
     });
 }
 const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
-    "&.cm-editor": {
+    "&": {
         position: "relative !important",
         boxSizing: "border-box",
         "&.cm-focused": {
@@ -5541,7 +5604,7 @@ function applyDOMChange(view, domChange) {
                 insert: Text.of(domChange.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
         }
     }
-    else if (newSel && (!view.hasFocus || !view.state.facet(editable) || newSel.main.eq(sel))) {
+    else if (newSel && (!view.hasFocus && view.state.facet(editable) || newSel.main.eq(sel))) {
         newSel = null;
     }
     if (!change && !newSel)
@@ -6605,6 +6668,8 @@ class EditorView {
         if (this.measureScheduled < 0)
             this.measureScheduled = this.win.requestAnimationFrame(() => this.measure());
         if (request) {
+            if (this.measureRequests.indexOf(request) > -1)
+                return;
             if (request.key != null)
                 for (let i = 0; i < this.measureRequests.length; i++) {
                     if (this.measureRequests[i].key === request.key) {
@@ -7288,6 +7353,8 @@ function runHandlers(map, event, view, scope) {
         if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)]))
             return true;
         if (isChar && (event.altKey || event.metaKey || event.ctrlKey) &&
+            // Ctrl-Alt may be used for AltGr on Windows
+            !(browser.windows && event.ctrlKey && event.altKey) &&
             (baseName = base[event.keyCode]) && baseName != name) {
             if (runFor(scopeObj[prefix + modifiers(baseName, event, true)]))
                 return true;
@@ -7582,7 +7649,7 @@ function drawSelection(config = {}) {
     ];
 }
 function configChanged(update) {
-    return update.startState.facet(selectionConfig) != update.startState.facet(selectionConfig);
+    return update.startState.facet(selectionConfig) != update.state.facet(selectionConfig);
 }
 const cursorLayer = /*@__PURE__*/layer({
     above: true,
@@ -7601,7 +7668,7 @@ const cursorLayer = /*@__PURE__*/layer({
         return cursors;
     },
     update(update, dom) {
-        if (update.transactions.some(tr => tr.scrollIntoView))
+        if (update.transactions.some(tr => tr.selection))
             dom.style.animationName = dom.style.animationName == "cm-blink" ? "cm-blink2" : "cm-blink";
         let confChange = configChanged(update);
         if (confChange)
@@ -9167,15 +9234,14 @@ class UpdateContext {
     constructor(gutter, viewport, height) {
         this.gutter = gutter;
         this.height = height;
-        this.localMarkers = [];
         this.i = 0;
         this.cursor = RangeSet.iter(gutter.markers, viewport.from);
     }
     line(view, line, extraMarkers) {
-        if (this.localMarkers.length)
-            this.localMarkers = [];
-        advanceCursor(this.cursor, this.localMarkers, line.from);
-        let localMarkers = extraMarkers.length ? this.localMarkers.concat(extraMarkers) : this.localMarkers;
+        let localMarkers = [];
+        advanceCursor(this.cursor, localMarkers, line.from);
+        if (extraMarkers.length)
+            localMarkers = localMarkers.concat(extraMarkers);
         let forLine = this.gutter.config.lineMarker(view, line, localMarkers);
         if (forLine)
             localMarkers.unshift(forLine);
@@ -9213,7 +9279,17 @@ class SingleGutterView {
         this.dom.className = "cm-gutter" + (this.config.class ? " " + this.config.class : "");
         for (let prop in config.domEventHandlers) {
             this.dom.addEventListener(prop, (event) => {
-                let line = view.lineBlockAtHeight(event.clientY - view.documentTop);
+                let target = event.target, y;
+                if (target != this.dom && this.dom.contains(target)) {
+                    while (target.parentNode != this.dom)
+                        target = target.parentNode;
+                    let rect = target.getBoundingClientRect();
+                    y = (rect.top + rect.bottom) / 2;
+                }
+                else {
+                    y = event.clientY;
+                }
+                let line = view.lineBlockAtHeight(y - view.documentTop);
                 if (config.domEventHandlers[prop](view, line, event))
                     event.preventDefault();
             });

package/package.json

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