@codemirror/view 0.20.6 → 6.0.1

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,31 @@
+## 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
+
+The new static `EditorView.findFromDOM` method can be used to retrieve an editor instance from its DOM structure.
+
+Instead of passing a constructed state to the `EditorView` constructor, it is now also possible to inline the configuration options to the state in the view config object.
+
+## 0.20.7 (2022-05-30)
+
+### Bug fixes
+
+Fix an issue on Chrome Android where the DOM could fail to display the actual document after backspace.
+
+Avoid an issue on Chrome Android where DOM changes were sometimes inappropriately replace by a backspace key effect due to spurious beforeinput events.
+
+Fix a problem where the content element's width didn't cover the width of the actual content.
+
+Work around a bug in Chrome 102 which caused wheel scrolling of the editor to be interrupted every few lines.
+
 ## 0.20.6 (2022-05-20)
 
 ### Bug fixes

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

@@ -754,7 +754,7 @@ function textCoords(text, pos, side) {
                 from--;
                 flatten = 1;
             } // FIXME this is wrong in RTL text
-            else {
+            else if (to < length) {
                 to++;
                 flatten = -1;
             }
@@ -763,7 +763,7 @@ function textCoords(text, pos, side) {
     else {
         if (side < 0)
             from--;
-        else
+        else if (to < length)
             to++;
     }
     let rects = textRange(text, from, to).getClientRects();
@@ -1379,6 +1379,7 @@ class LineView extends ContentView {
     transferDOM(other) {
         if (!this.dom)
             return;
+        this.markDirty();
         other.setDOM(this.dom);
         other.prevAttrs = this.prevAttrs === undefined ? this.attrs : this.prevAttrs;
         this.prevAttrs = undefined;
@@ -2510,7 +2511,7 @@ class DocView extends ContentView {
             // no relayout is triggered and I cannot imagine how it can
             // recompute the scroll position without a layout)
             this.dom.style.height = this.view.viewState.contentHeight + "px";
-            this.dom.style.minWidth = this.minWidth ? this.minWidth + "px" : "";
+            this.dom.style.flexBasis = this.minWidth ? this.minWidth + "px" : "";
             // Chrome will sometimes, when DOM mutations occur directly
             // around the selection, get confused and report a different
             // selection from the one it displays (issue #218). This tries
@@ -2544,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)
@@ -2579,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);
@@ -2621,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)
@@ -2637,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;) {
@@ -3268,6 +3271,7 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
+        this.chromeScrollHack = -1;
         // On iOS, some keys need to have their default behavior happen
         // (after which we retroactively handle them and reset the DOM) to
         // avoid messing up the virtual keyboard state.
@@ -3308,6 +3312,21 @@ class InputState {
             });
             this.registeredEvents.push(type);
         }
+        if (browser.chrome && browser.chrome_version >= 102) {
+            // On Chrome 102, viewport updates somehow stop wheel-based
+            // scrolling. Turning off pointer events during the scroll seems
+            // to avoid the issue.
+            view.scrollDOM.addEventListener("wheel", () => {
+                if (this.chromeScrollHack < 0)
+                    view.contentDOM.style.pointerEvents = "none";
+                else
+                    window.clearTimeout(this.chromeScrollHack);
+                this.chromeScrollHack = setTimeout(() => {
+                    this.chromeScrollHack = -1;
+                    view.contentDOM.style.pointerEvents = "";
+                }, 100);
+            }, { passive: true });
+        }
         this.notifiedFocused = view.hasFocus;
         // On Safari adding an input event handler somehow prevents an
         // issue where the composition vanishes when you press enter.
@@ -3519,7 +3538,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++) {
@@ -5478,12 +5497,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;
@@ -5564,21 +5583,16 @@ class DOMObserver {
     // composition events that, when interrupted, cause text duplication
     // or other kinds of corruption. This hack makes the editor back off
     // from handling DOM changes for a moment when such a key is
-    // detected (via beforeinput or keydown), and then dispatches the
-    // key event, throwing away the DOM changes if it gets handled.
+    // detected (via beforeinput or keydown), and then tries to flush
+    // them or, if that has no effect, dispatches the given key.
     delayAndroidKey(key, keyCode) {
         if (!this.delayedAndroidKey)
             requestAnimationFrame(() => {
                 let key = this.delayedAndroidKey;
                 this.delayedAndroidKey = null;
-                let startState = this.view.state;
-                this.readSelectionRange();
-                if (dispatchKey(this.view.contentDOM, key.key, key.keyCode))
-                    this.processRecords();
-                else
-                    this.flush();
-                if (this.view.state == startState)
-                    this.view.update([]);
+                this.delayedFlush = -1;
+                if (!this.flush())
+                    dispatchKey(this.view.contentDOM, key.key, key.keyCode);
             });
         // Since backspace beforeinput is sometimes signalled spuriously,
         // Enter always takes precedence.
@@ -5634,10 +5648,11 @@ class DOMObserver {
             return;
         this.selectionChanged = false;
         let startState = this.view.state;
-        this.onChange(from, to, typeOver);
+        let handled = this.onChange(from, to, typeOver);
         // The view wasn't updated
         if (this.view.state == startState)
             this.view.update([]);
+        return handled;
     }
     readMutation(rec) {
         let cView = this.view.docView.nearest(rec.target);
@@ -5720,7 +5735,7 @@ function applyDOMChange(view, start, end, typeOver) {
     if (start > -1) {
         let bounds = view.docView.domBoundsAround(start, end, 0);
         if (!bounds || view.state.readOnly)
-            return;
+            return false;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
         let reader = new DOMReader(selPoints, view.state);
@@ -5760,7 +5775,7 @@ function applyDOMChange(view, start, end, typeOver) {
             newSel = state.EditorSelection.single(anchor, head);
     }
     if (!change && !newSel)
-        return;
+        return false;
     // Heuristic to notice typing over a selected character
     if (!change && typeOver && !sel.empty && newSel && newSel.main.empty)
         change = { from: sel.from, to: sel.to, insert: view.state.doc.slice(sel.from, sel.to) };
@@ -5776,13 +5791,13 @@ function applyDOMChange(view, start, end, typeOver) {
         };
     // Detect insert-period-on-double-space Mac behavior, and transform
     // it into a regular space insert.
-    else if (browser.mac && change && change.from == change.to && change.from == sel.head - 1 &&
+    else if ((browser.mac || browser.android) && change && change.from == change.to && change.from == sel.head - 1 &&
         change.insert.toString() == ".")
         change = { from: sel.from, to: sel.to, insert: state.Text.of([" "]) };
     if (change) {
         let startState = view.state;
         if (browser.ios && view.inputState.flushIOSKey(view))
-            return;
+            return true;
         // Android browsers don't fire reasonable key events for enter,
         // backspace, or delete. So this detects changes that look like
         // they're caused by those keys, and reinterprets them as key
@@ -5797,10 +5812,10 @@ function applyDOMChange(view, start, end, typeOver) {
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Delete", 46))))
-            return;
+            return true;
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
-            return;
+            return true;
         if (view.inputState.composing >= 0)
             view.inputState.composing++;
         let tr;
@@ -5856,6 +5871,7 @@ function applyDOMChange(view, start, end, typeOver) {
             }
         }
         view.dispatch(tr, { scrollIntoView: true, userEvent });
+        return true;
     }
     else if (newSel && !newSel.main.eq(sel)) {
         let scrollIntoView = false, userEvent = "select";
@@ -5865,6 +5881,10 @@ function applyDOMChange(view, start, end, typeOver) {
             userEvent = view.inputState.lastSelectionOrigin;
         }
         view.dispatch({ selection: newSel, scrollIntoView, userEvent });
+        return true;
+    }
+    else {
+        return false;
     }
 }
 function findDiff(a, b, preferredPos, preferredSide) {
@@ -5941,11 +5961,7 @@ class EditorView {
     option, or put `view.dom` into your document after creating a
     view, so that the user can see the editor.
     */
-    constructor(
-    /**
-    Initialization options.
-    */
-    config = {}) {
+    constructor(config = {}) {
         this.plugins = [];
         this.pluginMap = new Map;
         this.editorAttrs = {};
@@ -5978,12 +5994,12 @@ class EditorView {
         this._dispatch = config.dispatch || ((tr) => this.update([tr]));
         this.dispatch = this.dispatch.bind(this);
         this.root = (config.root || getRoot(config.parent) || document);
-        this.viewState = new ViewState(config.state || state.EditorState.create());
+        this.viewState = new ViewState(config.state || state.EditorState.create(config));
         this.plugins = this.state.facet(viewPlugin).map(spec => new PluginInstance(spec));
         for (let plugin of this.plugins)
             plugin.update(this);
         this.observer = new DOMObserver(this, (from, to, typeOver) => {
-            applyDOMChange(this, from, to, typeOver);
+            return applyDOMChange(this, from, to, typeOver);
         }, event => {
             this.inputState.runScrollHandlers(this, event);
             if (this.observer.intersecting)
@@ -6064,6 +6080,7 @@ class EditorView {
             this.viewState.state = state$1;
             return;
         }
+        this.observer.clear();
         // When the phrases change, redraw the editor
         if (state$1.facet(state.EditorState.phrases) != this.state.facet(state.EditorState.phrases))
             return this.setState(state$1);
@@ -6652,6 +6669,16 @@ class EditorView {
     static baseTheme(spec) {
         return state.Prec.lowest(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
     }
+    /**
+    Retrieve an editor view instance from the view's DOM
+    representation.
+    */
+    static findFromDOM(dom) {
+        var _a;
+        let content = dom.querySelector(".cm-content");
+        let cView = content && ContentView.get(content) || ContentView.get(dom);
+        return ((_a = cView === null || cView === void 0 ? void 0 : cView.rootView) === null || _a === void 0 ? void 0 : _a.view) || null;
+    }
 }
 /**
 Facet to add a [style
@@ -6941,7 +6968,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 + " ";
@@ -6962,10 +6990,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.d.ts

@@ -1,5 +1,5 @@
 import * as _codemirror_state from '@codemirror/state';
-import { RangeSet, RangeValue, Range, EditorState, Extension, Transaction, ChangeSet, EditorSelection, TransactionSpec, SelectionRange, Line, StateEffect, Facet } from '@codemirror/state';
+import { RangeSet, RangeValue, Range, EditorState, Extension, Transaction, ChangeSet, EditorSelection, EditorStateConfig, TransactionSpec, SelectionRange, Line, StateEffect, Facet } from '@codemirror/state';
 import { StyleModule, StyleSpec } from 'style-mod';
 
 declare type Attrs = {
@@ -559,10 +559,16 @@ declare class BidiSpan {
     get dir(): Direction;
 }
 
-interface EditorConfig {
+/**
+The type of object given to the [`EditorView`](https://codemirror.net/6/docs/ref/#view.EditorView)
+constructor.
+*/
+interface EditorViewConfig extends EditorStateConfig {
     /**
-    The view's initial state. Defaults to an extension-less state
-    with an empty document.
+    The view's initial state. If not given, a new state is created
+    by passing this configuration object to
+    [`EditorState.create`](https://codemirror.net/6/docs/ref/#state.EditorState^create), using its
+    `doc`, `selection`, and `extensions` field (if provided).
     */
     state?: EditorState;
     /**
@@ -676,11 +682,7 @@ declare class EditorView {
     option, or put `view.dom` into your document after creating a
     view, so that the user can see the editor.
     */
-    constructor(
-    /**
-    Initialization options.
-    */
-    config?: EditorConfig);
+    constructor(config?: EditorViewConfig);
     /**
     All regular editor state updates should go through this. It
     takes a transaction or transaction spec and updates the view to
@@ -1131,6 +1133,11 @@ declare class EditorView {
     search match).
     */
     static announce: _codemirror_state.StateEffectType<string>;
+    /**
+    Retrieve an editor view instance from the view's DOM
+    representation.
+    */
+    static findFromDOM(dom: HTMLElement): EditorView | null;
 }
 /**
 Helper type that maps event names to event object types, or the
@@ -1783,4 +1790,4 @@ line](https://codemirror.net/6/docs/ref/#view.highlightActiveLine).
 */
 declare function highlightActiveLineGutter(): Extension;
 
-export { BidiSpan, BlockInfo, BlockType, Command, DOMEventHandlers, DOMEventMap, Decoration, DecorationSet, Direction, EditorView, GutterMarker, KeyBinding, MatchDecorator, MouseSelectionStyle, Panel, PanelConstructor, PluginSpec, PluginValue, Rect, Tooltip, TooltipView, ViewPlugin, ViewUpdate, WidgetType, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, hoverTooltip, keymap, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };
+export { BidiSpan, BlockInfo, BlockType, Command, DOMEventHandlers, DOMEventMap, Decoration, DecorationSet, Direction, EditorView, EditorViewConfig, GutterMarker, KeyBinding, MatchDecorator, MouseSelectionStyle, Panel, PanelConstructor, PluginSpec, PluginValue, Rect, Tooltip, TooltipView, ViewPlugin, ViewUpdate, WidgetType, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, hoverTooltip, keymap, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };

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;
@@ -750,7 +750,7 @@ function textCoords(text, pos, side) {
                 from--;
                 flatten = 1;
             } // FIXME this is wrong in RTL text
-            else {
+            else if (to < length) {
                 to++;
                 flatten = -1;
             }
@@ -759,7 +759,7 @@ function textCoords(text, pos, side) {
     else {
         if (side < 0)
             from--;
-        else
+        else if (to < length)
             to++;
     }
     let rects = textRange(text, from, to).getClientRects();
@@ -1374,6 +1374,7 @@ class LineView extends ContentView {
     transferDOM(other) {
         if (!this.dom)
             return;
+        this.markDirty();
         other.setDOM(this.dom);
         other.prevAttrs = this.prevAttrs === undefined ? this.attrs : this.prevAttrs;
         this.prevAttrs = undefined;
@@ -2504,7 +2505,7 @@ class DocView extends ContentView {
             // no relayout is triggered and I cannot imagine how it can
             // recompute the scroll position without a layout)
             this.dom.style.height = this.view.viewState.contentHeight + "px";
-            this.dom.style.minWidth = this.minWidth ? this.minWidth + "px" : "";
+            this.dom.style.flexBasis = this.minWidth ? this.minWidth + "px" : "";
             // Chrome will sometimes, when DOM mutations occur directly
             // around the selection, get confused and report a different
             // selection from the one it displays (issue #218). This tries
@@ -2538,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)
@@ -2573,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);
@@ -2615,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)
@@ -2631,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;) {
@@ -3262,6 +3265,7 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
+        this.chromeScrollHack = -1;
         // On iOS, some keys need to have their default behavior happen
         // (after which we retroactively handle them and reset the DOM) to
         // avoid messing up the virtual keyboard state.
@@ -3302,6 +3306,21 @@ class InputState {
             });
             this.registeredEvents.push(type);
         }
+        if (browser.chrome && browser.chrome_version >= 102) {
+            // On Chrome 102, viewport updates somehow stop wheel-based
+            // scrolling. Turning off pointer events during the scroll seems
+            // to avoid the issue.
+            view.scrollDOM.addEventListener("wheel", () => {
+                if (this.chromeScrollHack < 0)
+                    view.contentDOM.style.pointerEvents = "none";
+                else
+                    window.clearTimeout(this.chromeScrollHack);
+                this.chromeScrollHack = setTimeout(() => {
+                    this.chromeScrollHack = -1;
+                    view.contentDOM.style.pointerEvents = "";
+                }, 100);
+            }, { passive: true });
+        }
         this.notifiedFocused = view.hasFocus;
         // On Safari adding an input event handler somehow prevents an
         // issue where the composition vanishes when you press enter.
@@ -3513,7 +3532,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++) {
@@ -5471,12 +5490,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;
@@ -5557,21 +5576,16 @@ class DOMObserver {
     // composition events that, when interrupted, cause text duplication
     // or other kinds of corruption. This hack makes the editor back off
     // from handling DOM changes for a moment when such a key is
-    // detected (via beforeinput or keydown), and then dispatches the
-    // key event, throwing away the DOM changes if it gets handled.
+    // detected (via beforeinput or keydown), and then tries to flush
+    // them or, if that has no effect, dispatches the given key.
     delayAndroidKey(key, keyCode) {
         if (!this.delayedAndroidKey)
             requestAnimationFrame(() => {
                 let key = this.delayedAndroidKey;
                 this.delayedAndroidKey = null;
-                let startState = this.view.state;
-                this.readSelectionRange();
-                if (dispatchKey(this.view.contentDOM, key.key, key.keyCode))
-                    this.processRecords();
-                else
-                    this.flush();
-                if (this.view.state == startState)
-                    this.view.update([]);
+                this.delayedFlush = -1;
+                if (!this.flush())
+                    dispatchKey(this.view.contentDOM, key.key, key.keyCode);
             });
         // Since backspace beforeinput is sometimes signalled spuriously,
         // Enter always takes precedence.
@@ -5627,10 +5641,11 @@ class DOMObserver {
             return;
         this.selectionChanged = false;
         let startState = this.view.state;
-        this.onChange(from, to, typeOver);
+        let handled = this.onChange(from, to, typeOver);
         // The view wasn't updated
         if (this.view.state == startState)
             this.view.update([]);
+        return handled;
     }
     readMutation(rec) {
         let cView = this.view.docView.nearest(rec.target);
@@ -5713,7 +5728,7 @@ function applyDOMChange(view, start, end, typeOver) {
     if (start > -1) {
         let bounds = view.docView.domBoundsAround(start, end, 0);
         if (!bounds || view.state.readOnly)
-            return;
+            return false;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
         let reader = new DOMReader(selPoints, view.state);
@@ -5753,7 +5768,7 @@ function applyDOMChange(view, start, end, typeOver) {
             newSel = EditorSelection.single(anchor, head);
     }
     if (!change && !newSel)
-        return;
+        return false;
     // Heuristic to notice typing over a selected character
     if (!change && typeOver && !sel.empty && newSel && newSel.main.empty)
         change = { from: sel.from, to: sel.to, insert: view.state.doc.slice(sel.from, sel.to) };
@@ -5769,13 +5784,13 @@ function applyDOMChange(view, start, end, typeOver) {
         };
     // Detect insert-period-on-double-space Mac behavior, and transform
     // it into a regular space insert.
-    else if (browser.mac && change && change.from == change.to && change.from == sel.head - 1 &&
+    else if ((browser.mac || browser.android) && change && change.from == change.to && change.from == sel.head - 1 &&
         change.insert.toString() == ".")
         change = { from: sel.from, to: sel.to, insert: Text.of([" "]) };
     if (change) {
         let startState = view.state;
         if (browser.ios && view.inputState.flushIOSKey(view))
-            return;
+            return true;
         // Android browsers don't fire reasonable key events for enter,
         // backspace, or delete. So this detects changes that look like
         // they're caused by those keys, and reinterprets them as key
@@ -5790,10 +5805,10 @@ function applyDOMChange(view, start, end, typeOver) {
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Delete", 46))))
-            return;
+            return true;
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
-            return;
+            return true;
         if (view.inputState.composing >= 0)
             view.inputState.composing++;
         let tr;
@@ -5849,6 +5864,7 @@ function applyDOMChange(view, start, end, typeOver) {
             }
         }
         view.dispatch(tr, { scrollIntoView: true, userEvent });
+        return true;
     }
     else if (newSel && !newSel.main.eq(sel)) {
         let scrollIntoView = false, userEvent = "select";
@@ -5858,6 +5874,10 @@ function applyDOMChange(view, start, end, typeOver) {
             userEvent = view.inputState.lastSelectionOrigin;
         }
         view.dispatch({ selection: newSel, scrollIntoView, userEvent });
+        return true;
+    }
+    else {
+        return false;
     }
 }
 function findDiff(a, b, preferredPos, preferredSide) {
@@ -5934,11 +5954,7 @@ class EditorView {
     option, or put `view.dom` into your document after creating a
     view, so that the user can see the editor.
     */
-    constructor(
-    /**
-    Initialization options.
-    */
-    config = {}) {
+    constructor(config = {}) {
         this.plugins = [];
         this.pluginMap = new Map;
         this.editorAttrs = {};
@@ -5971,12 +5987,12 @@ class EditorView {
         this._dispatch = config.dispatch || ((tr) => this.update([tr]));
         this.dispatch = this.dispatch.bind(this);
         this.root = (config.root || getRoot(config.parent) || document);
-        this.viewState = new ViewState(config.state || EditorState.create());
+        this.viewState = new ViewState(config.state || EditorState.create(config));
         this.plugins = this.state.facet(viewPlugin).map(spec => new PluginInstance(spec));
         for (let plugin of this.plugins)
             plugin.update(this);
         this.observer = new DOMObserver(this, (from, to, typeOver) => {
-            applyDOMChange(this, from, to, typeOver);
+            return applyDOMChange(this, from, to, typeOver);
         }, event => {
             this.inputState.runScrollHandlers(this, event);
             if (this.observer.intersecting)
@@ -6057,6 +6073,7 @@ class EditorView {
             this.viewState.state = state;
             return;
         }
+        this.observer.clear();
         // When the phrases change, redraw the editor
         if (state.facet(EditorState.phrases) != this.state.facet(EditorState.phrases))
             return this.setState(state);
@@ -6645,6 +6662,16 @@ class EditorView {
     static baseTheme(spec) {
         return Prec.lowest(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
     }
+    /**
+    Retrieve an editor view instance from the view's DOM
+    representation.
+    */
+    static findFromDOM(dom) {
+        var _a;
+        let content = dom.querySelector(".cm-content");
+        let cView = content && ContentView.get(content) || ContentView.get(dom);
+        return ((_a = cView === null || cView === void 0 ? void 0 : cView.rootView) === null || _a === void 0 ? void 0 : _a.view) || null;
+    }
 }
 /**
 Facet to add a [style
@@ -6934,7 +6961,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 + " ";
@@ -6955,10 +6983,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": "0.20.6",
+  "version": "6.0.1",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -26,7 +26,7 @@
   "sideEffects": false,
   "license": "MIT",
   "dependencies": {
-    "@codemirror/state": "^0.20.0",
+    "@codemirror/state": "^6.0.0",
     "style-mod": "^4.0.0",
     "w3c-keyname": "^2.2.4"
   },