@codemirror/view 6.0.0 → 6.0.3

package/.github/workflows/dispatch.yml

@@ -11,6 +11,6 @@ jobs:
         with:
           # You should create a personal access token and store it in your repository
           token: ${{ secrets.DISPATCH_AUTH }}
-          repo: codemirror.next
+          repo: dev
           owner: codemirror
           event_type: push

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## 6.0.3 (2022-07-08)
+
+### Bug fixes
+
+Fix a problem where `posAtCoords` could incorrectly return the start of the next line when querying positions between lines.
+
+Fix an issue where registering a high-precedence keymap made keymap handling take precedence over other keydown event handlers.
+
+Ctrl/Cmd-clicking can now remove ranges from a multi-range selection.
+
+## 6.0.2 (2022-06-23)
+
+### Bug fixes
+
+Fix a CSS issue that broke horizontal scroll width stabilization.
+
+Fix a bug where `defaultLineHeight` could get an incorrect value in very narrow editors.
+
+## 6.0.1 (2022-06-17)
+
+### Bug fixes
+
+Avoid DOM selection corruption when the editor doesn't have focus but has selection and updates its content.
+
+Fall back to dispatching by key code when a key event produces a non-ASCII character (so that Cyrillic and Arabic keyboards can still use bindings specified with Latin characters).
+
 ## 6.0.0 (2022-06-08)
 
 ### New features

package/README.md

@@ -1,13 +1,13 @@
 # @codemirror/view [![NPM version](https://img.shields.io/npm/v/@codemirror/view.svg)](https://www.npmjs.org/package/@codemirror/view)
 
-[ [**WEBSITE**](https://codemirror.net/6/) | [**DOCS**](https://codemirror.net/6/docs/ref/#view) | [**ISSUES**](https://github.com/codemirror/codemirror.next/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/view/blob/main/CHANGELOG.md) ]
+[ [**WEBSITE**](https://codemirror.net/) | [**DOCS**](https://codemirror.net/docs/ref/#view) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/view/blob/main/CHANGELOG.md) ]
 
 This package implements the DOM view component for the
-[CodeMirror](https://codemirror.net/6/) code editor.
+[CodeMirror](https://codemirror.net/) code editor.
 
-The [project page](https://codemirror.net/6/) has more information, a
-number of [examples](https://codemirror.net/6/examples/) and the
-[documentation](https://codemirror.net/6/docs/).
+The [project page](https://codemirror.net/) has more information, a
+number of [examples](https://codemirror.net/examples/) and the
+[documentation](https://codemirror.net/docs/).
 
 This code is released under an
 [MIT license](https://github.com/codemirror/view/tree/main/LICENSE).

package/dist/index.cjs

@@ -2545,7 +2545,7 @@ class DocView extends ContentView {
     }
     // Sync the DOM selection to this.state.selection
     updateSelection(mustRead = false, fromPointer = false) {
-        if (mustRead)
+        if (mustRead || !this.view.observer.selectionRange.focusNode)
             this.view.observer.readSelectionRange();
         if (!(fromPointer || this.mayControlSelection()) ||
             browser.ios && this.view.inputState.rapidCompositionStart)
@@ -2580,7 +2580,8 @@ class DocView extends ContentView {
                     this.dom.focus({ preventScroll: true });
                 }
                 let rawSel = getSelection(this.root);
-                if (main.empty) {
+                if (!rawSel) ;
+                else if (main.empty) {
                     // Work around https://bugzilla.mozilla.org/show_bug.cgi?id=1612076
                     if (browser.gecko) {
                         let nextTo = nextToUneditable(anchor.node, anchor.offset);
@@ -2622,7 +2623,7 @@ class DocView extends ContentView {
             return;
         let cursor = this.view.state.selection.main;
         let sel = getSelection(this.root);
-        if (!cursor.empty || !cursor.assoc || !sel.modify)
+        if (!sel || !cursor.empty || !cursor.assoc || !sel.modify)
             return;
         let line = LineView.find(this, cursor.head);
         if (!line)
@@ -2638,8 +2639,9 @@ class DocView extends ContentView {
         sel.modify("move", cursor.assoc < 0 ? "forward" : "backward", "lineboundary");
     }
     mayControlSelection() {
-        return this.view.state.facet(editable) ? this.root.activeElement == this.dom
-            : hasSelection(this.dom, this.view.observer.selectionRange);
+        let active = this.root.activeElement;
+        return active == this.dom ||
+            hasSelection(this.dom, this.view.observer.selectionRange) && !(active && this.dom.contains(active));
     }
     nearest(dom) {
         for (let cur = dom; cur;) {
@@ -2724,6 +2726,7 @@ class DocView extends ContentView {
         // If no workable line exists, force a layout of a measurable element
         let dummy = document.createElement("div"), lineHeight, charWidth;
         dummy.className = "cm-line";
+        dummy.style.width = "99999px";
         dummy.textContent = "abc def ghi jkl mno pqr stu";
         this.view.observer.ignore(() => {
             this.dom.appendChild(dummy);
@@ -3134,7 +3137,8 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
             let range = doc.caretRangeFromPoint(x, y);
             if (range) {
                 ({ startContainer: node, startOffset: offset } = range);
-                if (browser.safari && isSuspiciousCaretResult(node, offset, x))
+                if (browser.safari && isSuspiciousSafariCaretResult(node, offset, x) ||
+                    browser.chrome && isSuspiciousChromeCaretResult(node, offset, x))
                     node = undefined;
             }
         }
@@ -3161,7 +3165,7 @@ function posAtCoordsImprecise(view, contentRect, block, x, y) {
 // the space between lines as belonging to the last character of the
 // line before. This is used to detect such a result so that it can be
 // ignored (issue #401).
-function isSuspiciousCaretResult(node, offset, x) {
+function isSuspiciousSafariCaretResult(node, offset, x) {
     let len;
     if (node.nodeType != 3 || offset != (len = node.nodeValue.length))
         return false;
@@ -3170,6 +3174,22 @@ function isSuspiciousCaretResult(node, offset, x) {
             return false;
     return textRange(node, len - 1, len).getBoundingClientRect().left > x;
 }
+// Chrome will move positions between lines to the start of the next line
+function isSuspiciousChromeCaretResult(node, offset, x) {
+    if (offset != 0)
+        return false;
+    for (let cur = node;;) {
+        let parent = cur.parentNode;
+        if (!parent || parent.nodeType != 1 || parent.firstChild != cur)
+            return false;
+        if (parent.classList.contains("cm-line"))
+            break;
+        cur = parent;
+    }
+    let rect = node.nodeType == 1 ? node.getBoundingClientRect()
+        : textRange(node, 0, Math.max(node.nodeValue.length, 1)).getBoundingClientRect();
+    return x - rect.left > 5;
+}
 function moveToLineBoundary(view, start, forward, includeWrap) {
     let line = view.state.doc.lineAt(start.head);
     let coords = !includeWrap || !view.lineWrapping ? null
@@ -3536,7 +3556,7 @@ function isInPrimarySelection(view, event) {
     // On boundary clicks, check whether the coordinates are inside the
     // selection's client rectangles
     let sel = getSelection(view.root);
-    if (sel.rangeCount == 0)
+    if (!sel || sel.rangeCount == 0)
         return true;
     let rects = sel.getRangeAt(0).getClientRects();
     for (let i = 0; i < rects.length; i++) {
@@ -3728,6 +3748,8 @@ function basicMouseSelection(view, event) {
             }
             if (extend)
                 return startSel.replaceRange(startSel.main.extend(range.from, range.to));
+            else if (multiple && startSel.ranges.length > 1 && startSel.ranges.some(r => r.eq(range)))
+                return removeRange(startSel, range);
             else if (multiple)
                 return startSel.addRange(range);
             else
@@ -3735,6 +3757,12 @@ function basicMouseSelection(view, event) {
         }
     };
 }
+function removeRange(sel, range) {
+    for (let i = 0;; i++) {
+        if (sel.ranges[i].eq(range))
+            return state.EditorSelection.create(sel.ranges.slice(0, i).concat(sel.ranges.slice(i + 1)), sel.mainIndex == i ? 0 : sel.mainIndex - (sel.mainIndex > i ? 1 : 0));
+    }
+}
 handlers.dragstart = (view, event) => {
     let { selection: { main } } = view.state;
     let { mouseSelection } = view.inputState;
@@ -5164,6 +5192,7 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     ".cm-content": {
         margin: 0,
         flexGrow: 2,
+        flexShrink: 0,
         minHeight: "100%",
         display: "block",
         whiteSpace: "pre",
@@ -5179,7 +5208,8 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
         whiteSpace_fallback: "pre-wrap",
         whiteSpace: "break-spaces",
         wordBreak: "break-word",
-        overflowWrap: "anywhere"
+        overflowWrap: "anywhere",
+        flexShrink: 1
     },
     "&light .cm-content": { caretColor: "black" },
     "&dark .cm-content": { caretColor: "white" },
@@ -5217,8 +5247,8 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     // Two animations defined so that we can switch between them to
     // restart the animation without forcing another style
     // recomputation.
-    "@keyframes cm-blink": { "0%": {}, "50%": { visibility: "hidden" }, "100%": {} },
-    "@keyframes cm-blink2": { "0%": {}, "50%": { visibility: "hidden" }, "100%": {} },
+    "@keyframes cm-blink": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
+    "@keyframes cm-blink2": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
     ".cm-cursor, .cm-dropCursor": {
         position: "absolute",
         borderLeft: "1.2px solid black",
@@ -5495,12 +5525,12 @@ class DOMObserver {
             this.flush(false);
     }
     readSelectionRange() {
-        let { root } = this.view, domSel = getSelection(root);
+        let { root } = this.view;
         // The Selection object is broken in shadow roots in Safari. See
-        // https://github.com/codemirror/codemirror.next/issues/414
+        // https://github.com/codemirror/dev/issues/414
         let range = browser.safari && root.nodeType == 11 && deepActiveElement() == this.view.contentDOM &&
-            safariSelectionRangeHack(this.view) || domSel;
-        if (this.selectionRange.eq(range))
+            safariSelectionRangeHack(this.view) || getSelection(root);
+        if (!range || this.selectionRange.eq(range))
             return false;
         this.selectionRange.setRange(range);
         return this.selectionChanged = true;
@@ -6885,11 +6915,11 @@ function modifiers(name, event, shift) {
         name = "Shift-" + name;
     return name;
 }
-const handleKeyEvents = EditorView.domEventHandlers({
+const handleKeyEvents = state.Prec.default(EditorView.domEventHandlers({
     keydown(event, view) {
         return runHandlers(getKeymap(view.state), event, view, "editor");
     }
-});
+}));
 /**
 Facet used for registering keymaps.
 
@@ -6966,7 +6996,8 @@ function buildKeymap(bindings, platform = currentPlatform) {
     return bound;
 }
 function runHandlers(map, event, view, scope) {
-    let name = w3cKeyname.keyName(event), isChar = name.length == 1 && name != " ";
+    let name = w3cKeyname.keyName(event);
+    let charCode = state.codePointAt(name, 0), isChar = state.codePointSize(charCode) == name.length && name != " ";
     let prefix = "", fallthrough = false;
     if (storedPrefix && storedPrefix.view == view && storedPrefix.scope == scope) {
         prefix = storedPrefix.prefix + " ";
@@ -6987,10 +7018,13 @@ function runHandlers(map, event, view, scope) {
     if (scopeObj) {
         if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)]))
             return true;
-        if (isChar && (event.shiftKey || event.altKey || event.metaKey) &&
+        if (isChar && (event.shiftKey || event.altKey || event.metaKey || charCode > 127) &&
             (baseName = w3cKeyname.base[event.keyCode]) && baseName != name) {
             if (runFor(scopeObj[prefix + modifiers(baseName, event, true)]))
                 return true;
+            else if (event.shiftKey && w3cKeyname.shift[event.keyCode] != baseName &&
+                runFor(scopeObj[prefix + modifiers(w3cKeyname.shift[event.keyCode], event, false)]))
+                return true;
         }
         else if (isChar && event.shiftKey) {
             if (runFor(scopeObj[prefix + modifiers(name, event, true)]))

package/dist/index.js

@@ -1,6 +1,6 @@
-import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, EditorState, findColumn, CharCategory, Prec, Transaction, combineConfig, StateField, RangeSetBuilder, codePointAt, countColumn } from '@codemirror/state';
+import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, EditorState, findColumn, CharCategory, Prec, Transaction, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
 import { StyleModule } from 'style-mod';
-import { keyName, base } from 'w3c-keyname';
+import { keyName, base, shift } from 'w3c-keyname';
 
 function getSelection(root) {
     let target;
@@ -2539,7 +2539,7 @@ class DocView extends ContentView {
     }
     // Sync the DOM selection to this.state.selection
     updateSelection(mustRead = false, fromPointer = false) {
-        if (mustRead)
+        if (mustRead || !this.view.observer.selectionRange.focusNode)
             this.view.observer.readSelectionRange();
         if (!(fromPointer || this.mayControlSelection()) ||
             browser.ios && this.view.inputState.rapidCompositionStart)
@@ -2574,7 +2574,8 @@ class DocView extends ContentView {
                     this.dom.focus({ preventScroll: true });
                 }
                 let rawSel = getSelection(this.root);
-                if (main.empty) {
+                if (!rawSel) ;
+                else if (main.empty) {
                     // Work around https://bugzilla.mozilla.org/show_bug.cgi?id=1612076
                     if (browser.gecko) {
                         let nextTo = nextToUneditable(anchor.node, anchor.offset);
@@ -2616,7 +2617,7 @@ class DocView extends ContentView {
             return;
         let cursor = this.view.state.selection.main;
         let sel = getSelection(this.root);
-        if (!cursor.empty || !cursor.assoc || !sel.modify)
+        if (!sel || !cursor.empty || !cursor.assoc || !sel.modify)
             return;
         let line = LineView.find(this, cursor.head);
         if (!line)
@@ -2632,8 +2633,9 @@ class DocView extends ContentView {
         sel.modify("move", cursor.assoc < 0 ? "forward" : "backward", "lineboundary");
     }
     mayControlSelection() {
-        return this.view.state.facet(editable) ? this.root.activeElement == this.dom
-            : hasSelection(this.dom, this.view.observer.selectionRange);
+        let active = this.root.activeElement;
+        return active == this.dom ||
+            hasSelection(this.dom, this.view.observer.selectionRange) && !(active && this.dom.contains(active));
     }
     nearest(dom) {
         for (let cur = dom; cur;) {
@@ -2718,6 +2720,7 @@ class DocView extends ContentView {
         // If no workable line exists, force a layout of a measurable element
         let dummy = document.createElement("div"), lineHeight, charWidth;
         dummy.className = "cm-line";
+        dummy.style.width = "99999px";
         dummy.textContent = "abc def ghi jkl mno pqr stu";
         this.view.observer.ignore(() => {
             this.dom.appendChild(dummy);
@@ -3128,7 +3131,8 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
             let range = doc.caretRangeFromPoint(x, y);
             if (range) {
                 ({ startContainer: node, startOffset: offset } = range);
-                if (browser.safari && isSuspiciousCaretResult(node, offset, x))
+                if (browser.safari && isSuspiciousSafariCaretResult(node, offset, x) ||
+                    browser.chrome && isSuspiciousChromeCaretResult(node, offset, x))
                     node = undefined;
             }
         }
@@ -3155,7 +3159,7 @@ function posAtCoordsImprecise(view, contentRect, block, x, y) {
 // the space between lines as belonging to the last character of the
 // line before. This is used to detect such a result so that it can be
 // ignored (issue #401).
-function isSuspiciousCaretResult(node, offset, x) {
+function isSuspiciousSafariCaretResult(node, offset, x) {
     let len;
     if (node.nodeType != 3 || offset != (len = node.nodeValue.length))
         return false;
@@ -3164,6 +3168,22 @@ function isSuspiciousCaretResult(node, offset, x) {
             return false;
     return textRange(node, len - 1, len).getBoundingClientRect().left > x;
 }
+// Chrome will move positions between lines to the start of the next line
+function isSuspiciousChromeCaretResult(node, offset, x) {
+    if (offset != 0)
+        return false;
+    for (let cur = node;;) {
+        let parent = cur.parentNode;
+        if (!parent || parent.nodeType != 1 || parent.firstChild != cur)
+            return false;
+        if (parent.classList.contains("cm-line"))
+            break;
+        cur = parent;
+    }
+    let rect = node.nodeType == 1 ? node.getBoundingClientRect()
+        : textRange(node, 0, Math.max(node.nodeValue.length, 1)).getBoundingClientRect();
+    return x - rect.left > 5;
+}
 function moveToLineBoundary(view, start, forward, includeWrap) {
     let line = view.state.doc.lineAt(start.head);
     let coords = !includeWrap || !view.lineWrapping ? null
@@ -3530,7 +3550,7 @@ function isInPrimarySelection(view, event) {
     // On boundary clicks, check whether the coordinates are inside the
     // selection's client rectangles
     let sel = getSelection(view.root);
-    if (sel.rangeCount == 0)
+    if (!sel || sel.rangeCount == 0)
         return true;
     let rects = sel.getRangeAt(0).getClientRects();
     for (let i = 0; i < rects.length; i++) {
@@ -3722,6 +3742,8 @@ function basicMouseSelection(view, event) {
             }
             if (extend)
                 return startSel.replaceRange(startSel.main.extend(range.from, range.to));
+            else if (multiple && startSel.ranges.length > 1 && startSel.ranges.some(r => r.eq(range)))
+                return removeRange(startSel, range);
             else if (multiple)
                 return startSel.addRange(range);
             else
@@ -3729,6 +3751,12 @@ function basicMouseSelection(view, event) {
         }
     };
 }
+function removeRange(sel, range) {
+    for (let i = 0;; i++) {
+        if (sel.ranges[i].eq(range))
+            return EditorSelection.create(sel.ranges.slice(0, i).concat(sel.ranges.slice(i + 1)), sel.mainIndex == i ? 0 : sel.mainIndex - (sel.mainIndex > i ? 1 : 0));
+    }
+}
 handlers.dragstart = (view, event) => {
     let { selection: { main } } = view.state;
     let { mouseSelection } = view.inputState;
@@ -5157,6 +5185,7 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     ".cm-content": {
         margin: 0,
         flexGrow: 2,
+        flexShrink: 0,
         minHeight: "100%",
         display: "block",
         whiteSpace: "pre",
@@ -5172,7 +5201,8 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
         whiteSpace_fallback: "pre-wrap",
         whiteSpace: "break-spaces",
         wordBreak: "break-word",
-        overflowWrap: "anywhere"
+        overflowWrap: "anywhere",
+        flexShrink: 1
     },
     "&light .cm-content": { caretColor: "black" },
     "&dark .cm-content": { caretColor: "white" },
@@ -5210,8 +5240,8 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     // Two animations defined so that we can switch between them to
     // restart the animation without forcing another style
     // recomputation.
-    "@keyframes cm-blink": { "0%": {}, "50%": { visibility: "hidden" }, "100%": {} },
-    "@keyframes cm-blink2": { "0%": {}, "50%": { visibility: "hidden" }, "100%": {} },
+    "@keyframes cm-blink": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
+    "@keyframes cm-blink2": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
     ".cm-cursor, .cm-dropCursor": {
         position: "absolute",
         borderLeft: "1.2px solid black",
@@ -5488,12 +5518,12 @@ class DOMObserver {
             this.flush(false);
     }
     readSelectionRange() {
-        let { root } = this.view, domSel = getSelection(root);
+        let { root } = this.view;
         // The Selection object is broken in shadow roots in Safari. See
-        // https://github.com/codemirror/codemirror.next/issues/414
+        // https://github.com/codemirror/dev/issues/414
         let range = browser.safari && root.nodeType == 11 && deepActiveElement() == this.view.contentDOM &&
-            safariSelectionRangeHack(this.view) || domSel;
-        if (this.selectionRange.eq(range))
+            safariSelectionRangeHack(this.view) || getSelection(root);
+        if (!range || this.selectionRange.eq(range))
             return false;
         this.selectionRange.setRange(range);
         return this.selectionChanged = true;
@@ -6878,11 +6908,11 @@ function modifiers(name, event, shift) {
         name = "Shift-" + name;
     return name;
 }
-const handleKeyEvents = /*@__PURE__*/EditorView.domEventHandlers({
+const handleKeyEvents = /*@__PURE__*/Prec.default(/*@__PURE__*/EditorView.domEventHandlers({
     keydown(event, view) {
         return runHandlers(getKeymap(view.state), event, view, "editor");
     }
-});
+}));
 /**
 Facet used for registering keymaps.
 
@@ -6959,7 +6989,8 @@ function buildKeymap(bindings, platform = currentPlatform) {
     return bound;
 }
 function runHandlers(map, event, view, scope) {
-    let name = keyName(event), isChar = name.length == 1 && name != " ";
+    let name = keyName(event);
+    let charCode = codePointAt(name, 0), isChar = codePointSize(charCode) == name.length && name != " ";
     let prefix = "", fallthrough = false;
     if (storedPrefix && storedPrefix.view == view && storedPrefix.scope == scope) {
         prefix = storedPrefix.prefix + " ";
@@ -6980,10 +7011,13 @@ function runHandlers(map, event, view, scope) {
     if (scopeObj) {
         if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)]))
             return true;
-        if (isChar && (event.shiftKey || event.altKey || event.metaKey) &&
+        if (isChar && (event.shiftKey || event.altKey || event.metaKey || charCode > 127) &&
             (baseName = base[event.keyCode]) && baseName != name) {
             if (runFor(scopeObj[prefix + modifiers(baseName, event, true)]))
                 return true;
+            else if (event.shiftKey && shift[event.keyCode] != baseName &&
+                runFor(scopeObj[prefix + modifiers(shift[event.keyCode], event, false)]))
+                return true;
         }
         else if (isChar && event.shiftKey) {
             if (runFor(scopeObj[prefix + modifiers(name, event, true)]))

package/package.json

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