@codemirror/view 6.11.0 → 6.11.2

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 6.11.2 (2023-05-13)
+
+### Bug fixes
+
+Fix a bug where the `crosshairCursor` extension could, when non-native key events were fired, trigger disruptive and needless view updates.
+
+Fix an Android issue where backspacing at the front of a line with widget decorations could replace those decorations with their text content.
+
+Respect scroll margins when scrolling the target of drag-selection into view.
+
+Validate selection offsets reported by the browser, to work around Safari giving us invalid values in some cases.
+
+## 6.11.1 (2023-05-09)
+
+### Bug fixes
+
+Don't preserve the DOM around a composition that spans multiple lines.
 ## 6.11.0 (2023-05-03)
 
 ### New features

package/dist/index.cjs

@@ -222,7 +222,9 @@ class DOMSelectionState {
             this.focusNode == domSel.focusNode && this.focusOffset == domSel.focusOffset;
     }
     setRange(range) {
-        this.set(range.anchorNode, range.anchorOffset, range.focusNode, range.focusOffset);
+        let { anchorNode, focusNode } = range;
+        // Clip offsets to node size to avoid crashes when Safari reports bogus offsets (#1152)
+        this.set(anchorNode, Math.min(range.anchorOffset, anchorNode ? maxOffset(anchorNode) : 0), focusNode, Math.min(range.focusOffset, focusNode ? maxOffset(focusNode) : 0));
     }
     set(anchorNode, anchorOffset, focusNode, focusOffset) {
         this.anchorNode = anchorNode;
@@ -295,6 +297,8 @@ function atElementStart(doc, selection) {
     let node = selection.focusNode, offset = selection.focusOffset;
     if (!node || selection.anchorNode != node || selection.anchorOffset != offset)
         return false;
+    // Safari can report bogus offsets (#1152)
+    offset = Math.min(offset, maxOffset(node));
     for (;;) {
         if (offset) {
             if (node.nodeType != 1)
@@ -2007,6 +2011,23 @@ const contentAttributes = state.Facet.define();
 const decorations = state.Facet.define();
 const atomicRanges = state.Facet.define();
 const scrollMargins = state.Facet.define();
+function getScrollMargins(view) {
+    let left = 0, right = 0, top = 0, bottom = 0;
+    for (let source of view.state.facet(scrollMargins)) {
+        let m = source(view);
+        if (m) {
+            if (m.left != null)
+                left = Math.max(left, m.left);
+            if (m.right != null)
+                right = Math.max(right, m.right);
+            if (m.top != null)
+                top = Math.max(top, m.top);
+            if (m.bottom != null)
+                bottom = Math.max(bottom, m.bottom);
+        }
+    }
+    return { left, right, top, bottom };
+}
 const styleModule = state.Facet.define();
 class ChangedRange {
     constructor(fromA, toA, fromB, toB) {
@@ -2938,22 +2959,10 @@ class DocView extends ContentView {
         if (!range.empty && (other = this.coordsAt(range.anchor, range.anchor > range.head ? -1 : 1)))
             rect = { left: Math.min(rect.left, other.left), top: Math.min(rect.top, other.top),
                 right: Math.max(rect.right, other.right), bottom: Math.max(rect.bottom, other.bottom) };
-        let mLeft = 0, mRight = 0, mTop = 0, mBottom = 0;
-        for (let margins of this.view.state.facet(scrollMargins).map(f => f(this.view)))
-            if (margins) {
-                let { left, right, top, bottom } = margins;
-                if (left != null)
-                    mLeft = Math.max(mLeft, left);
-                if (right != null)
-                    mRight = Math.max(mRight, right);
-                if (top != null)
-                    mTop = Math.max(mTop, top);
-                if (bottom != null)
-                    mBottom = Math.max(mBottom, bottom);
-            }
+        let margins = getScrollMargins(this.view);
         let targetRect = {
-            left: rect.left - mLeft, top: rect.top - mTop,
-            right: rect.right + mRight, bottom: rect.bottom + mBottom
+            left: rect.left - margins.left, top: rect.top - margins.top,
+            right: rect.right + margins.right, bottom: rect.bottom + margins.bottom
         };
         scrollRectIntoView(this.view.scrollDOM, targetRect, range.head < range.anchor ? -1 : 1, target.x, target.y, target.xMargin, target.yMargin, this.view.textDirection == exports.Direction.LTR);
     }
@@ -3019,15 +3028,17 @@ function computeCompositionDeco(view, changes) {
     let newFrom = changes.mapPos(from, 1), newTo = Math.max(newFrom, changes.mapPos(to, -1));
     let { state } = view, text = node.nodeType == 3 ? node.nodeValue :
         new DOMReader([], state).readRange(node.firstChild, null).text;
+    if (text.indexOf(LineBreakPlaceholder) > -1)
+        return Decoration.none; // Don't try to preserve multi-line compositions
     if (newTo - newFrom < text.length) {
-        if (state.doc.sliceString(newFrom, Math.min(state.doc.length, newFrom + text.length), LineBreakPlaceholder) == text)
+        if (state.doc.sliceString(newFrom, Math.min(state.doc.length, newFrom + text.length)) == text)
             newTo = newFrom + text.length;
-        else if (state.doc.sliceString(Math.max(0, newTo - text.length), newTo, LineBreakPlaceholder) == text)
+        else if (state.doc.sliceString(Math.max(0, newTo - text.length), newTo) == text)
             newFrom = newTo - text.length;
         else
             return Decoration.none;
     }
-    else if (state.doc.sliceString(newFrom, newTo, LineBreakPlaceholder) != text) {
+    else if (state.doc.sliceString(newFrom, newTo) != text) {
         return Decoration.none;
     }
     let topView = ContentView.get(node);
@@ -3731,13 +3742,14 @@ class MouseSelection {
         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 + dragScrollMargin)
+        let margins = getScrollMargins(this.view);
+        if (event.clientX - margins.left <= rect.left + dragScrollMargin)
             sx = -dragScrollSpeed(rect.left - event.clientX);
-        else if (event.clientX >= rect.right - dragScrollMargin)
+        else if (event.clientX + margins.right >= rect.right - dragScrollMargin)
             sx = dragScrollSpeed(event.clientX - rect.right);
-        if (event.clientY <= rect.top + dragScrollMargin)
+        if (event.clientY - margins.top <= rect.top + dragScrollMargin)
             sy = -dragScrollSpeed(rect.top - event.clientY);
-        else if (event.clientY >= rect.bottom - dragScrollMargin)
+        else if (event.clientY + margins.bottom >= rect.bottom - dragScrollMargin)
             sy = dragScrollSpeed(event.clientY - rect.bottom);
         this.setScrollSpeed(sx, sy);
     }
@@ -5779,13 +5791,13 @@ class DOMChange {
 function applyDOMChange(view, domChange) {
     let change;
     let { newSel } = domChange, sel = view.state.selection.main;
+    let lastKey = view.inputState.lastKeyTime > Date.now() - 100 ? view.inputState.lastKeyCode : -1;
     if (domChange.bounds) {
         let { from, to } = domChange.bounds;
         let preferredPos = sel.from, preferredSide = null;
         // Prefer anchoring to end when Backspace is pressed (or, on
         // Android, when something was deleted)
-        if (view.inputState.lastKeyCode === 8 && view.inputState.lastKeyTime > Date.now() - 100 ||
-            browser.android && domChange.text.length < to - from) {
+        if (lastKey === 8 || browser.android && domChange.text.length < to - from) {
             preferredPos = sel.to;
             preferredSide = "end";
         }
@@ -5793,7 +5805,7 @@ function applyDOMChange(view, domChange) {
         if (diff) {
             // Chrome inserts two newlines when pressing shift-enter at the
             // end of a line. DomChange drops one of those.
-            if (browser.chrome && view.inputState.lastKeyCode == 13 &&
+            if (browser.chrome && lastKey == 13 &&
                 diff.toB == diff.from + 2 && domChange.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
                 diff.toB--;
             change = { from: from + diff.from, to: from + diff.toA,
@@ -5851,7 +5863,8 @@ function applyDOMChange(view, domChange) {
             ((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 &&
+                ((change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 ||
+                    lastKey == 8 && change.insert.length < change.to - change.from) &&
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Delete", 46))))
@@ -6249,7 +6262,10 @@ class DOMObserver {
                 let key = this.delayedAndroidKey;
                 if (key) {
                     this.clearDelayedAndroidKey();
-                    if (!this.flush() && key.force)
+                    this.view.inputState.lastKeyCode = key.keyCode;
+                    this.view.inputState.lastKeyTime = Date.now();
+                    let flushed = this.flush();
+                    if (!flushed && key.force)
                         dispatchKey(this.dom, key.key, key.keyCode);
                 }
             };
@@ -8478,10 +8494,10 @@ function rectangularSelection(options) {
     return EditorView.mouseSelectionStyle.of((view, event) => filter(event) ? rectangleSelectionStyle(view, event) : null);
 }
 const keys = {
-    Alt: [18, e => e.altKey],
-    Control: [17, e => e.ctrlKey],
-    Shift: [16, e => e.shiftKey],
-    Meta: [91, e => e.metaKey]
+    Alt: [18, e => !!e.altKey],
+    Control: [17, e => !!e.ctrlKey],
+    Shift: [16, e => !!e.shiftKey],
+    Meta: [91, e => !!e.metaKey]
 };
 const showCrosshair = { style: "cursor: crosshair" };
 /**

package/dist/index.js

@@ -218,7 +218,9 @@ class DOMSelectionState {
             this.focusNode == domSel.focusNode && this.focusOffset == domSel.focusOffset;
     }
     setRange(range) {
-        this.set(range.anchorNode, range.anchorOffset, range.focusNode, range.focusOffset);
+        let { anchorNode, focusNode } = range;
+        // Clip offsets to node size to avoid crashes when Safari reports bogus offsets (#1152)
+        this.set(anchorNode, Math.min(range.anchorOffset, anchorNode ? maxOffset(anchorNode) : 0), focusNode, Math.min(range.focusOffset, focusNode ? maxOffset(focusNode) : 0));
     }
     set(anchorNode, anchorOffset, focusNode, focusOffset) {
         this.anchorNode = anchorNode;
@@ -291,6 +293,8 @@ function atElementStart(doc, selection) {
     let node = selection.focusNode, offset = selection.focusOffset;
     if (!node || selection.anchorNode != node || selection.anchorOffset != offset)
         return false;
+    // Safari can report bogus offsets (#1152)
+    offset = Math.min(offset, maxOffset(node));
     for (;;) {
         if (offset) {
             if (node.nodeType != 1)
@@ -2002,6 +2006,23 @@ const contentAttributes = /*@__PURE__*/Facet.define();
 const decorations = /*@__PURE__*/Facet.define();
 const atomicRanges = /*@__PURE__*/Facet.define();
 const scrollMargins = /*@__PURE__*/Facet.define();
+function getScrollMargins(view) {
+    let left = 0, right = 0, top = 0, bottom = 0;
+    for (let source of view.state.facet(scrollMargins)) {
+        let m = source(view);
+        if (m) {
+            if (m.left != null)
+                left = Math.max(left, m.left);
+            if (m.right != null)
+                right = Math.max(right, m.right);
+            if (m.top != null)
+                top = Math.max(top, m.top);
+            if (m.bottom != null)
+                bottom = Math.max(bottom, m.bottom);
+        }
+    }
+    return { left, right, top, bottom };
+}
 const styleModule = /*@__PURE__*/Facet.define();
 class ChangedRange {
     constructor(fromA, toA, fromB, toB) {
@@ -2932,22 +2953,10 @@ class DocView extends ContentView {
         if (!range.empty && (other = this.coordsAt(range.anchor, range.anchor > range.head ? -1 : 1)))
             rect = { left: Math.min(rect.left, other.left), top: Math.min(rect.top, other.top),
                 right: Math.max(rect.right, other.right), bottom: Math.max(rect.bottom, other.bottom) };
-        let mLeft = 0, mRight = 0, mTop = 0, mBottom = 0;
-        for (let margins of this.view.state.facet(scrollMargins).map(f => f(this.view)))
-            if (margins) {
-                let { left, right, top, bottom } = margins;
-                if (left != null)
-                    mLeft = Math.max(mLeft, left);
-                if (right != null)
-                    mRight = Math.max(mRight, right);
-                if (top != null)
-                    mTop = Math.max(mTop, top);
-                if (bottom != null)
-                    mBottom = Math.max(mBottom, bottom);
-            }
+        let margins = getScrollMargins(this.view);
         let targetRect = {
-            left: rect.left - mLeft, top: rect.top - mTop,
-            right: rect.right + mRight, bottom: rect.bottom + mBottom
+            left: rect.left - margins.left, top: rect.top - margins.top,
+            right: rect.right + margins.right, bottom: rect.bottom + margins.bottom
         };
         scrollRectIntoView(this.view.scrollDOM, targetRect, range.head < range.anchor ? -1 : 1, target.x, target.y, target.xMargin, target.yMargin, this.view.textDirection == Direction.LTR);
     }
@@ -3013,15 +3022,17 @@ function computeCompositionDeco(view, changes) {
     let newFrom = changes.mapPos(from, 1), newTo = Math.max(newFrom, changes.mapPos(to, -1));
     let { state } = view, text = node.nodeType == 3 ? node.nodeValue :
         new DOMReader([], state).readRange(node.firstChild, null).text;
+    if (text.indexOf(LineBreakPlaceholder) > -1)
+        return Decoration.none; // Don't try to preserve multi-line compositions
     if (newTo - newFrom < text.length) {
-        if (state.doc.sliceString(newFrom, Math.min(state.doc.length, newFrom + text.length), LineBreakPlaceholder) == text)
+        if (state.doc.sliceString(newFrom, Math.min(state.doc.length, newFrom + text.length)) == text)
             newTo = newFrom + text.length;
-        else if (state.doc.sliceString(Math.max(0, newTo - text.length), newTo, LineBreakPlaceholder) == text)
+        else if (state.doc.sliceString(Math.max(0, newTo - text.length), newTo) == text)
             newFrom = newTo - text.length;
         else
             return Decoration.none;
     }
-    else if (state.doc.sliceString(newFrom, newTo, LineBreakPlaceholder) != text) {
+    else if (state.doc.sliceString(newFrom, newTo) != text) {
         return Decoration.none;
     }
     let topView = ContentView.get(node);
@@ -3725,13 +3736,14 @@ class MouseSelection {
         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 + dragScrollMargin)
+        let margins = getScrollMargins(this.view);
+        if (event.clientX - margins.left <= rect.left + dragScrollMargin)
             sx = -dragScrollSpeed(rect.left - event.clientX);
-        else if (event.clientX >= rect.right - dragScrollMargin)
+        else if (event.clientX + margins.right >= rect.right - dragScrollMargin)
             sx = dragScrollSpeed(event.clientX - rect.right);
-        if (event.clientY <= rect.top + dragScrollMargin)
+        if (event.clientY - margins.top <= rect.top + dragScrollMargin)
             sy = -dragScrollSpeed(rect.top - event.clientY);
-        else if (event.clientY >= rect.bottom - dragScrollMargin)
+        else if (event.clientY + margins.bottom >= rect.bottom - dragScrollMargin)
             sy = dragScrollSpeed(event.clientY - rect.bottom);
         this.setScrollSpeed(sx, sy);
     }
@@ -5772,13 +5784,13 @@ class DOMChange {
 function applyDOMChange(view, domChange) {
     let change;
     let { newSel } = domChange, sel = view.state.selection.main;
+    let lastKey = view.inputState.lastKeyTime > Date.now() - 100 ? view.inputState.lastKeyCode : -1;
     if (domChange.bounds) {
         let { from, to } = domChange.bounds;
         let preferredPos = sel.from, preferredSide = null;
         // Prefer anchoring to end when Backspace is pressed (or, on
         // Android, when something was deleted)
-        if (view.inputState.lastKeyCode === 8 && view.inputState.lastKeyTime > Date.now() - 100 ||
-            browser.android && domChange.text.length < to - from) {
+        if (lastKey === 8 || browser.android && domChange.text.length < to - from) {
             preferredPos = sel.to;
             preferredSide = "end";
         }
@@ -5786,7 +5798,7 @@ function applyDOMChange(view, domChange) {
         if (diff) {
             // Chrome inserts two newlines when pressing shift-enter at the
             // end of a line. DomChange drops one of those.
-            if (browser.chrome && view.inputState.lastKeyCode == 13 &&
+            if (browser.chrome && lastKey == 13 &&
                 diff.toB == diff.from + 2 && domChange.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
                 diff.toB--;
             change = { from: from + diff.from, to: from + diff.toA,
@@ -5844,7 +5856,8 @@ function applyDOMChange(view, domChange) {
             ((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 &&
+                ((change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 ||
+                    lastKey == 8 && change.insert.length < change.to - change.from) &&
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Delete", 46))))
@@ -6242,7 +6255,10 @@ class DOMObserver {
                 let key = this.delayedAndroidKey;
                 if (key) {
                     this.clearDelayedAndroidKey();
-                    if (!this.flush() && key.force)
+                    this.view.inputState.lastKeyCode = key.keyCode;
+                    this.view.inputState.lastKeyTime = Date.now();
+                    let flushed = this.flush();
+                    if (!flushed && key.force)
                         dispatchKey(this.dom, key.key, key.keyCode);
                 }
             };
@@ -8471,10 +8487,10 @@ function rectangularSelection(options) {
     return EditorView.mouseSelectionStyle.of((view, event) => filter(event) ? rectangleSelectionStyle(view, event) : null);
 }
 const keys = {
-    Alt: [18, e => e.altKey],
-    Control: [17, e => e.ctrlKey],
-    Shift: [16, e => e.shiftKey],
-    Meta: [91, e => e.metaKey]
+    Alt: [18, e => !!e.altKey],
+    Control: [17, e => !!e.ctrlKey],
+    Shift: [16, e => !!e.shiftKey],
+    Meta: [91, e => !!e.metaKey]
 };
 const showCrosshair = { style: "cursor: crosshair" };
 /**

package/package.json

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