@codemirror/view 0.20.5 → 6.0.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## 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
+
+Make sure the editor re-measures itself when its attributes are updated.
+
 ## 0.20.5 (2022-05-18)
 
 ### Bug fixes

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();
@@ -1063,14 +1063,16 @@ function attrsEq(a, b) {
     return true;
 }
 function updateAttrs(dom, prev, attrs) {
+    let changed = null;
     if (prev)
         for (let name in prev)
             if (!(attrs && name in attrs))
-                dom.removeAttribute(name);
+                dom.removeAttribute(changed = name);
     if (attrs)
         for (let name in attrs)
             if (!(prev && prev[name] == attrs[name]))
-                dom.setAttribute(name, attrs[name]);
+                dom.setAttribute(changed = name, attrs[name]);
+    return !!changed;
 }
 
 /**
@@ -1377,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;
@@ -2508,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
@@ -3266,6 +3269,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.
@@ -3306,6 +3310,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.
@@ -4747,24 +4766,22 @@ class ViewState {
         this.defaultTextDirection = style.direction == "rtl" ? exports.Direction.RTL : exports.Direction.LTR;
         let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace);
         let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
+        this.contentDOMHeight = dom.clientHeight;
+        this.mustMeasureContent = false;
         let result = 0, bias = 0;
+        // Vertical padding
+        let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
+        if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
+            this.paddingTop = paddingTop;
+            this.paddingBottom = paddingBottom;
+            result |= 8 /* Geometry */ | 2 /* Height */;
+        }
         if (this.editorWidth != view.scrollDOM.clientWidth) {
             if (oracle.lineWrapping)
                 measureContent = true;
             this.editorWidth = view.scrollDOM.clientWidth;
             result |= 8 /* Geometry */;
         }
-        if (measureContent) {
-            this.mustMeasureContent = false;
-            this.contentDOMHeight = dom.clientHeight;
-            // Vertical padding
-            let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
-            if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
-                result |= 8 /* Geometry */;
-                this.paddingTop = paddingTop;
-                this.paddingBottom = paddingBottom;
-            }
-        }
         // Pixel viewport
         let pixelViewport = (this.printing ? fullPixelRange : visiblePixelRange)(dom, this.paddingTop);
         let dTop = pixelViewport.top - this.pixelViewport.top, dBottom = pixelViewport.bottom - this.pixelViewport.bottom;
@@ -5564,21 +5581,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 +5646,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 +5733,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 +5773,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 +5789,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 +5810,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 +5869,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 +5879,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 +5959,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 +5992,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)
@@ -6053,7 +6067,7 @@ class EditorView {
     update(transactions) {
         if (this.updateState != 0 /* Idle */)
             throw new Error("Calls to EditorView.update are not allowed while an update is in progress");
-        let redrawn = false, update;
+        let redrawn = false, attrsChanged = false, update;
         let state$1 = this.state;
         for (let tr of transactions) {
             if (tr.startState != state$1)
@@ -6064,6 +6078,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);
@@ -6091,7 +6106,7 @@ class EditorView {
             redrawn = this.docView.update(update);
             if (this.state.facet(styleModule) != this.styleModules)
                 this.mountStyles();
-            this.updateAttrs();
+            attrsChanged = this.updateAttrs();
             this.showAnnouncements(transactions);
             this.docView.updateSelection(redrawn, transactions.some(tr => tr.isUserEvent("select.pointer")));
         }
@@ -6100,7 +6115,7 @@ class EditorView {
         }
         if (update.startState.facet(theme) != update.state.facet(theme))
             this.viewState.mustMeasureContent = true;
-        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
+        if (redrawn || attrsChanged || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
@@ -6280,12 +6295,14 @@ class EditorView {
         if (this.state.readOnly)
             contentAttrs["aria-readonly"] = "true";
         attrsFromFacet(this, contentAttributes, contentAttrs);
-        this.observer.ignore(() => {
-            updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
-            updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+        let changed = this.observer.ignore(() => {
+            let changedContent = updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
+            let changedEditor = updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+            return changedContent || changedEditor;
         });
         this.editorAttrs = editorAttrs;
         this.contentAttrs = contentAttrs;
+        return changed;
     }
     showAnnouncements(trs) {
         let first = true;
@@ -6650,6 +6667,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

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

@@ -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();
@@ -1059,14 +1059,16 @@ function attrsEq(a, b) {
     return true;
 }
 function updateAttrs(dom, prev, attrs) {
+    let changed = null;
     if (prev)
         for (let name in prev)
             if (!(attrs && name in attrs))
-                dom.removeAttribute(name);
+                dom.removeAttribute(changed = name);
     if (attrs)
         for (let name in attrs)
             if (!(prev && prev[name] == attrs[name]))
-                dom.setAttribute(name, attrs[name]);
+                dom.setAttribute(changed = name, attrs[name]);
+    return !!changed;
 }
 
 /**
@@ -1372,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;
@@ -2502,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
@@ -3260,6 +3263,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.
@@ -3300,6 +3304,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.
@@ -4740,24 +4759,22 @@ class ViewState {
         this.defaultTextDirection = style.direction == "rtl" ? Direction.RTL : Direction.LTR;
         let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace);
         let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
+        this.contentDOMHeight = dom.clientHeight;
+        this.mustMeasureContent = false;
         let result = 0, bias = 0;
+        // Vertical padding
+        let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
+        if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
+            this.paddingTop = paddingTop;
+            this.paddingBottom = paddingBottom;
+            result |= 8 /* Geometry */ | 2 /* Height */;
+        }
         if (this.editorWidth != view.scrollDOM.clientWidth) {
             if (oracle.lineWrapping)
                 measureContent = true;
             this.editorWidth = view.scrollDOM.clientWidth;
             result |= 8 /* Geometry */;
         }
-        if (measureContent) {
-            this.mustMeasureContent = false;
-            this.contentDOMHeight = dom.clientHeight;
-            // Vertical padding
-            let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
-            if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
-                result |= 8 /* Geometry */;
-                this.paddingTop = paddingTop;
-                this.paddingBottom = paddingBottom;
-            }
-        }
         // Pixel viewport
         let pixelViewport = (this.printing ? fullPixelRange : visiblePixelRange)(dom, this.paddingTop);
         let dTop = pixelViewport.top - this.pixelViewport.top, dBottom = pixelViewport.bottom - this.pixelViewport.bottom;
@@ -5557,21 +5574,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 +5639,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 +5726,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 +5766,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 +5782,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 +5803,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 +5862,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 +5872,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 +5952,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 +5985,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)
@@ -6046,7 +6060,7 @@ class EditorView {
     update(transactions) {
         if (this.updateState != 0 /* Idle */)
             throw new Error("Calls to EditorView.update are not allowed while an update is in progress");
-        let redrawn = false, update;
+        let redrawn = false, attrsChanged = false, update;
         let state = this.state;
         for (let tr of transactions) {
             if (tr.startState != state)
@@ -6057,6 +6071,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);
@@ -6084,7 +6099,7 @@ class EditorView {
             redrawn = this.docView.update(update);
             if (this.state.facet(styleModule) != this.styleModules)
                 this.mountStyles();
-            this.updateAttrs();
+            attrsChanged = this.updateAttrs();
             this.showAnnouncements(transactions);
             this.docView.updateSelection(redrawn, transactions.some(tr => tr.isUserEvent("select.pointer")));
         }
@@ -6093,7 +6108,7 @@ class EditorView {
         }
         if (update.startState.facet(theme) != update.state.facet(theme))
             this.viewState.mustMeasureContent = true;
-        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
+        if (redrawn || attrsChanged || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
@@ -6273,12 +6288,14 @@ class EditorView {
         if (this.state.readOnly)
             contentAttrs["aria-readonly"] = "true";
         attrsFromFacet(this, contentAttributes, contentAttrs);
-        this.observer.ignore(() => {
-            updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
-            updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+        let changed = this.observer.ignore(() => {
+            let changedContent = updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
+            let changedEditor = updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+            return changedContent || changedEditor;
         });
         this.editorAttrs = editorAttrs;
         this.contentAttrs = contentAttrs;
+        return changed;
     }
     showAnnouncements(trs) {
         let first = true;
@@ -6643,6 +6660,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "0.20.5",
+  "version": "6.0.0",
   "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"
   },