@codemirror/view 0.19.7 → 0.19.11

package/dist/index.cjs

@@ -9,7 +9,17 @@ var text = require('@codemirror/text');
 var w3cKeyname = require('w3c-keyname');
 
 function getSelection(root) {
-    return (root.getSelection ? root.getSelection() : document.getSelection());
+    let target;
+    // Browsers differ on whether shadow roots have a getSelection
+    // method. If it exists, use that, otherwise, call it on the
+    // document.
+    if (root.nodeType == 11) { // Shadow root
+        target = root.getSelection ? root : root.ownerDocument;
+    }
+    else {
+        target = root;
+    }
+    return target.getSelection();
 }
 function contains(dom, node) {
     return node ? dom.contains(node.nodeType != 1 ? node.parentNode : node) : false;
@@ -92,9 +102,9 @@ function windowRect(win) {
         top: 0, bottom: win.innerHeight };
 }
 const ScrollSpace = 5;
-function scrollRectIntoView(dom, rect, side) {
+function scrollRectIntoView(dom, rect, side, center) {
     let doc = dom.ownerDocument, win = doc.defaultView;
-    for (let cur = dom.parentNode; cur;) {
+    for (let cur = dom; cur;) {
         if (cur.nodeType == 1) { // Element
             let bounding, top = cur == doc.body;
             if (top) {
@@ -111,7 +121,20 @@ function scrollRectIntoView(dom, rect, side) {
                     top: rect.top, bottom: rect.top + cur.clientHeight };
             }
             let moveX = 0, moveY = 0;
-            if (rect.top < bounding.top) {
+            if (center) {
+                let rectHeight = rect.bottom - rect.top, boundingHeight = bounding.bottom - bounding.top;
+                let targetTop;
+                if (rectHeight <= boundingHeight)
+                    targetTop = rect.top + rectHeight / 2 - boundingHeight / 2;
+                else if (side < 0)
+                    targetTop = rect.top - ScrollSpace;
+                else
+                    targetTop = rect.bottom + ScrollSpace - boundingHeight;
+                moveY = targetTop - bounding.top;
+                if (Math.abs(moveY) <= 1)
+                    moveY = 0;
+            }
+            else if (rect.top < bounding.top) {
                 moveY = -(bounding.top - rect.top + ScrollSpace);
                 if (side > 0 && rect.bottom > bounding.bottom + moveY)
                     moveY = rect.bottom - bounding.bottom + moveY + ScrollSpace;
@@ -153,6 +176,7 @@ function scrollRectIntoView(dom, rect, side) {
             if (top)
                 break;
             cur = cur.assignedSlot || cur.parentNode;
+            center = false;
         }
         else if (cur.nodeType == 11) { // A shadow root
             cur = cur.host;
@@ -241,6 +265,14 @@ function contentEditablePlainTextSupported() {
     }
     return _plainTextSupported;
 }
+function getRoot(node) {
+    while (node) {
+        node = node.assignedSlot || node.parentNode;
+        if (node && (node.nodeType == 9 || node.nodeType == 11 && node.host))
+            return node;
+    }
+    return null;
+}
 
 class DOMPos {
     constructor(node, offset, precise = true) {
@@ -438,6 +470,7 @@ class ContentView {
             (this.breakAfter ? "#" : "");
     }
     static get(node) { return node.cmView; }
+    get isEditable() { return true; }
 }
 ContentView.prototype.breakAfter = 0;
 // Remove a DOM node and return its next sibling.
@@ -485,15 +518,18 @@ const gecko = !ie && /gecko\/(\d+)/i.test(nav.userAgent);
 const chrome = !ie && /Chrome\/(\d+)/.exec(nav.userAgent);
 const webkit = "webkitFontSmoothing" in doc.documentElement.style;
 const safari = !ie && /Apple Computer/.test(nav.vendor);
+const ios = safari && (/Mobile\/\w+/.test(nav.userAgent) || nav.maxTouchPoints > 2);
 var browser = {
-    mac: /Mac/.test(nav.platform),
+    mac: ios || /Mac/.test(nav.platform),
+    windows: /Win/.test(nav.platform),
+    linux: /Linux|X11/.test(nav.platform),
     ie,
     ie_version: ie_upto10 ? doc.documentMode || 6 : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0,
     gecko,
     gecko_version: gecko ? +(/Firefox\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
     chrome: !!chrome,
     chrome_version: chrome ? +chrome[1] : 0,
-    ios: safari && (/Mobile\/\w+/.test(nav.userAgent) || nav.maxTouchPoints > 2),
+    ios,
     android: /Android\b/.test(nav.userAgent),
     webkit,
     safari,
@@ -715,6 +751,7 @@ class WidgetView extends InlineView {
         }
         return (pos == 0 && side > 0 || pos == this.length && side <= 0) ? rect : flattenRect(rect, pos == 0);
     }
+    get isEditable() { return false; }
 }
 class CompositionView extends WidgetView {
     domAtPos(pos) { return new DOMPos(this.widget.text, pos); }
@@ -726,6 +763,38 @@ class CompositionView extends WidgetView {
     ignoreMutation() { return false; }
     get overrideDOMText() { return null; }
     coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
+    get isEditable() { return true; }
+}
+// These are drawn around uneditable widgets to avoid a number of
+// browser bugs that show up when the cursor is directly next to
+// uneditable inline content.
+class WidgetBufferView extends InlineView {
+    constructor(side) {
+        super();
+        this.side = side;
+    }
+    get length() { return 0; }
+    merge() { return false; }
+    become(other) {
+        return other instanceof WidgetBufferView && other.side == this.side;
+    }
+    slice() { return new WidgetBufferView(this.side); }
+    sync() {
+        if (!this.dom)
+            this.setDOM(document.createTextNode("\u200b"));
+        else if (this.dirty && this.dom.nodeValue != "\u200b")
+            this.dom.nodeValue = "\u200b";
+    }
+    getSide() { return this.side; }
+    domAtPos(pos) { return DOMPos.before(this.dom); }
+    domBoundsAround() { return null; }
+    coordsAt(pos) {
+        let rects = clientRectsFor(this.dom);
+        return rects[rects.length - 1];
+    }
+    get overrideDOMText() {
+        return text.Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
+    }
 }
 function mergeInlineChildren(parent, from, to, elts, openStart, openEnd) {
     let cur = parent.childCursor();
@@ -1221,14 +1290,17 @@ class LineView extends ContentView {
     }
     // Only called when building a line view in ContentBuilder
     addLineDeco(deco) {
-        let attrs = deco.spec.attributes;
+        let attrs = deco.spec.attributes, cls = deco.spec.class;
         if (attrs)
             this.attrs = combineAttrs(attrs, this.attrs || {});
+        if (cls)
+            this.attrs = combineAttrs(attrs, { class: cls });
     }
     domAtPos(pos) {
         return inlineDOMAtPos(this.dom, this.children, pos);
     }
     sync(track) {
+        var _a;
         if (!this.dom || (this.dirty & 4 /* Attrs */)) {
             this.setDOM(document.createElement("div"));
             this.dom.className = "cm-line";
@@ -1244,7 +1316,7 @@ class LineView extends ContentView {
         while (last && ContentView.get(last) instanceof MarkView)
             last = last.lastChild;
         if (!last ||
-            last.nodeName != "BR" && ContentView.get(last) instanceof WidgetView &&
+            last.nodeName != "BR" && ((_a = ContentView.get(last)) === null || _a === void 0 ? void 0 : _a.isEditable) == false &&
                 (!browser.ios || !this.children.some(ch => ch instanceof TextView))) {
             let hack = document.createElement("BR");
             hack.cmIgnore = true;
@@ -1343,6 +1415,9 @@ class ContentBuilder {
         this.content = [];
         this.curLine = null;
         this.breakAtStart = 0;
+        this.pendingBuffer = 0 /* No */;
+        // Set to false directly after a widget that covers the position after it
+        this.atCursorPos = true;
         this.openStart = -1;
         this.openEnd = -1;
         this.text = "";
@@ -1357,23 +1432,31 @@ class ContentBuilder {
         return !last.breakAfter && !(last instanceof BlockWidgetView && last.type == exports.BlockType.WidgetBefore);
     }
     getLine() {
-        if (!this.curLine)
+        if (!this.curLine) {
             this.content.push(this.curLine = new LineView);
+            this.atCursorPos = true;
+        }
         return this.curLine;
     }
-    addWidget(view) {
+    flushBuffer(active) {
+        if (this.pendingBuffer) {
+            this.curLine.append(wrapMarks(new WidgetBufferView(-1), active), active.length);
+            this.pendingBuffer = 0 /* No */;
+        }
+    }
+    addBlockWidget(view) {
+        this.flushBuffer([]);
         this.curLine = null;
         this.content.push(view);
     }
-    finish() {
+    finish(openEnd) {
+        if (!openEnd)
+            this.flushBuffer([]);
+        else
+            this.pendingBuffer = 0 /* No */;
         if (!this.posCovered())
             this.getLine();
     }
-    wrapMarks(view, active) {
-        for (let mark of active)
-            view = new MarkView(mark, [view], view.length);
-        return view;
-    }
     buildText(length, active, openStart) {
         while (length > 0) {
             if (this.textOff == this.text.length) {
@@ -1388,6 +1471,7 @@ class ContentBuilder {
                         this.content[this.content.length - 1].breakAfter = 1;
                     else
                         this.breakAtStart = 1;
+                    this.flushBuffer([]);
                     this.curLine = null;
                     length--;
                     continue;
@@ -1398,7 +1482,9 @@ class ContentBuilder {
                 }
             }
             let take = Math.min(this.text.length - this.textOff, length, 512 /* Chunk */);
-            this.getLine().append(this.wrapMarks(new TextView(this.text.slice(this.textOff, this.textOff + take)), active), openStart);
+            this.flushBuffer(active);
+            this.getLine().append(wrapMarks(new TextView(this.text.slice(this.textOff, this.textOff + take)), active), openStart);
+            this.atCursorPos = true;
             this.textOff += take;
             length -= take;
             openStart = 0;
@@ -1417,11 +1503,23 @@ class ContentBuilder {
                 let { type } = deco;
                 if (type == exports.BlockType.WidgetAfter && !this.posCovered())
                     this.getLine();
-                this.addWidget(new BlockWidgetView(deco.widget || new NullWidget("div"), len, type));
+                this.addBlockWidget(new BlockWidgetView(deco.widget || new NullWidget("div"), len, type));
             }
             else {
-                let widget = this.wrapMarks(WidgetView.create(deco.widget || new NullWidget("span"), len, deco.startSide), active);
-                this.getLine().append(widget, openStart);
+                let view = WidgetView.create(deco.widget || new NullWidget("span"), len, deco.startSide);
+                let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length && (from < to || deco.startSide > 0);
+                let cursorAfter = !view.isEditable && (from < to || deco.startSide <= 0);
+                let line = this.getLine();
+                if (this.pendingBuffer == 2 /* IfCursor */ && !cursorBefore)
+                    this.pendingBuffer = 0 /* No */;
+                this.flushBuffer(active);
+                if (cursorBefore) {
+                    line.append(wrapMarks(new WidgetBufferView(1), active), openStart);
+                    openStart = active.length + Math.max(0, openStart - active.length);
+                }
+                line.append(wrapMarks(view, active), openStart);
+                this.atCursorPos = cursorAfter;
+                this.pendingBuffer = !cursorAfter ? 0 /* No */ : from < to ? 1 /* Yes */ : 2 /* IfCursor */;
             }
         }
         else if (this.doc.lineAt(this.pos).from == this.pos) { // Line decoration
@@ -1447,10 +1545,15 @@ class ContentBuilder {
         builder.openEnd = rangeset.RangeSet.spans(decorations, from, to, builder);
         if (builder.openStart < 0)
             builder.openStart = builder.openEnd;
-        builder.finish();
+        builder.finish(builder.openEnd);
         return builder;
     }
 }
+function wrapMarks(view, active) {
+    for (let mark of active)
+        view = new MarkView(mark, [view], view.length);
+    return view;
+}
 class NullWidget extends WidgetType {
     constructor(tag) {
         super();
@@ -1471,6 +1574,9 @@ const inputHandler = state.Facet.define();
 const scrollTo = state.StateEffect.define({
     map: (range, changes) => range.map(changes)
 });
+const centerOn = state.StateEffect.define({
+    map: (range, changes) => range.map(changes)
+});
 /**
 Log or report an unhandled exception in client code. Should
 probably only be used by extension code that allows client code to
@@ -1783,7 +1889,9 @@ class ViewUpdate {
             this.flags |= 2 /* Height */;
     }
     /**
-    Tells you whether the viewport changed in this update.
+    Tells you whether the [viewport](https://codemirror.net/6/docs/ref/#view.EditorView.viewport) or
+    [visible ranges](https://codemirror.net/6/docs/ref/#view.EditorView.visibleRanges) changed in this
+    update.
     */
     get viewportChanged() {
         return (this.flags & 4 /* Viewport */) > 0;
@@ -1799,7 +1907,7 @@ class ViewUpdate {
     or the lines or characters within it has changed.
     */
     get geometryChanged() {
-        return this.docChanged || (this.flags & (16 /* Geometry */ | 2 /* Height */)) > 0;
+        return this.docChanged || (this.flags & (8 /* Geometry */ | 2 /* Height */)) > 0;
     }
     /**
     True when this update indicates a focus change.
@@ -1884,7 +1992,7 @@ class DocView extends ContentView {
         changedRanges = ChangedRange.extendWithRanges(changedRanges, decoDiff);
         let pointerSel = update.transactions.some(tr => tr.isUserEvent("select.pointer"));
         if (this.dirty == 0 /* Not */ && changedRanges.length == 0 &&
-            !(update.flags & (4 /* Viewport */ | 8 /* LineGaps */)) &&
+            !(update.flags & 4 /* Viewport */) &&
             update.state.selection.main.from >= this.view.viewport.from &&
             update.state.selection.main.to <= this.view.viewport.to) {
             this.updateSelection(forceSelection, pointerSel);
@@ -1895,6 +2003,14 @@ class DocView extends ContentView {
             return true;
         }
     }
+    reset(sel) {
+        if (this.dirty) {
+            this.view.observer.ignore(() => this.view.docView.sync());
+            this.dirty = 0 /* Not */;
+        }
+        if (sel)
+            this.updateSelection();
+    }
     // Used both by update and checkLayout do perform the actual DOM
     // update
     updateInner(changes, deco, oldLength, forceSelection = false, pointerSel = false) {
@@ -1919,6 +2035,12 @@ class DocView extends ContentView {
             this.updateSelection(forceSelection, pointerSel);
             this.dom.style.height = "";
         });
+        let gaps = [];
+        if (this.view.viewport.from || this.view.viewport.to < this.view.state.doc.length)
+            for (let child of this.children)
+                if (child instanceof BlockWidgetView && child.widget instanceof BlockGapWidget)
+                    gaps.push(child.dom);
+        observer.updateGaps(gaps);
     }
     updateChildren(changes, deco, oldLength) {
         let cursor = this.childCursor(oldLength);
@@ -2018,6 +2140,14 @@ class DocView extends ContentView {
             !isEquivalentPosition(anchor.node, anchor.offset, domSel.anchorNode, domSel.anchorOffset) ||
             !isEquivalentPosition(head.node, head.offset, domSel.focusNode, domSel.focusOffset)) {
             this.view.observer.ignore(() => {
+                // Chrome Android will hide the virtual keyboard when tapping
+                // inside an uneditable node, and not bring it back when we
+                // move the cursor to its proper position. This tries to
+                // restore the keyboard by cycling focus.
+                if (browser.android && browser.chrome && this.dom.contains(domSel.focusNode) && inUneditable(domSel.focusNode, this.dom)) {
+                    this.dom.blur();
+                    this.dom.focus({ preventScroll: true });
+                }
                 let rawSel = getSelection(this.root);
                 if (main.empty) {
                     // Work around https://bugzilla.mozilla.org/show_bug.cgi?id=1612076
@@ -2191,7 +2321,7 @@ class DocView extends ContentView {
             this.view.viewState.lineGapDeco
         ];
     }
-    scrollRangeIntoView(range) {
+    scrollIntoView({ range, center }) {
         let rect = this.coordsAt(range.head, range.empty ? range.assoc : range.head > range.anchor ? -1 : 1), other;
         if (!rect)
             return;
@@ -2211,10 +2341,10 @@ class DocView extends ContentView {
                 if (bottom != null)
                     mBottom = Math.max(mBottom, bottom);
             }
-        scrollRectIntoView(this.dom, {
+        scrollRectIntoView(this.view.scrollDOM, {
             left: rect.left - mLeft, top: rect.top - mTop,
             right: rect.right + mRight, bottom: rect.bottom + mBottom
-        }, range.head < range.anchor ? -1 : 1);
+        }, range.head < range.anchor ? -1 : 1, center);
     }
 }
 function betweenUneditable(pos) {
@@ -2325,6 +2455,14 @@ function findChangedDeco(a, b, diff) {
     rangeset.RangeSet.compare(a, b, diff, comp);
     return comp.changes;
 }
+function inUneditable(node, inside) {
+    for (let cur = node; cur && cur != inside; cur = cur.assignedSlot || cur.parentNode) {
+        if (cur.nodeType == 1 && cur.contentEditable == 'false') {
+            return true;
+        }
+    }
+    return false;
+}
 
 /**
 Used to indicate [text direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection).
@@ -2771,6 +2909,7 @@ function domPosInText(node, x, y) {
     return { node, offset: closestOffset > -1 ? closestOffset : generalSide > 0 ? node.nodeValue.length : 0 };
 }
 function posAtCoords(view, { x, y }, precise, bias = -1) {
+    var _a;
     let content = view.contentDOM.getBoundingClientRect(), block;
     let halfLine = view.defaultLineHeight / 2;
     for (let bounced = false;;) {
@@ -2788,25 +2927,27 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
         y = bias > 0 ? block.bottom + halfLine : block.top - halfLine;
     }
     let lineStart = block.from;
+    // Clip x to the viewport sides
     x = Math.max(content.left + 1, Math.min(content.right - 1, x));
     // If this is outside of the rendered viewport, we can't determine a position
     if (lineStart < view.viewport.from)
         return view.viewport.from == 0 ? 0 : posAtCoordsImprecise(view, content, block, x, y);
     if (lineStart > view.viewport.to)
         return view.viewport.to == view.state.doc.length ? view.state.doc.length : posAtCoordsImprecise(view, content, block, x, y);
-    // Clip x to the viewport sides
-    let root = view.root, element = root.elementFromPoint(x, y);
+    // Prefer ShadowRootOrDocument.elementFromPoint if present, fall back to document if not
+    let doc = view.dom.ownerDocument;
+    let element = (view.root.elementFromPoint ? view.root : doc).elementFromPoint(x, y);
     // There's visible editor content under the point, so we can try
     // using caret(Position|Range)FromPoint as a shortcut
     let node, offset = -1;
-    if (element && view.contentDOM.contains(element) && !(view.docView.nearest(element) instanceof WidgetView)) {
-        if (root.caretPositionFromPoint) {
-            let pos = root.caretPositionFromPoint(x, y);
+    if (element && view.contentDOM.contains(element) && ((_a = view.docView.nearest(element)) === null || _a === void 0 ? void 0 : _a.isEditable) != false) {
+        if (doc.caretPositionFromPoint) {
+            let pos = doc.caretPositionFromPoint(x, y);
             if (pos)
                 ({ offsetNode: node, offset } = pos);
         }
-        else if (root.caretRangeFromPoint) {
-            let range = root.caretRangeFromPoint(x, y);
+        else if (doc.caretRangeFromPoint) {
+            let range = doc.caretRangeFromPoint(x, y);
             if (range) {
                 ({ startContainer: node, startOffset: offset } = range);
                 if (browser.safari && isSuspiciousCaretResult(node, offset, x))
@@ -2940,7 +3081,23 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
-        this.pendingIOSKey = null;
+        // 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.
+        //
+        // On Chrome Android, backspace near widgets is just completely
+        // broken, and there are no key events, so we need to handle the
+        // beforeinput event. Deleting stuff will often create a flurry of
+        // events, and interrupting it before it is done just makes
+        // subsequent events even more broken, so again, we hold off doing
+        // anything until the browser is finished with whatever it is trying
+        // to do.
+        //
+        // setPendingKey sets this, causing the DOM observer to pause for a
+        // bit, and setting an animation frame (which seems the most
+        // reliable way to detect 'browser is done flailing') to fire a fake
+        // key event and re-sync the view again.
+        this.pendingKey = undefined;
         this.lastSelectionOrigin = null;
         this.lastSelectionTime = 0;
         this.lastEscPress = 0;
@@ -3049,20 +3206,27 @@ class InputState {
         // state. So we let it go through, and then, in
         // applyDOMChange, notify key handlers of it and reset to
         // the state they produce.
-        if (browser.ios && (event.keyCode == 13 || event.keyCode == 8) &&
+        let pending;
+        if (browser.ios && (pending = PendingKeys.find(key => key.keyCode == event.keyCode)) &&
             !(event.ctrlKey || event.altKey || event.metaKey) && !event.synthetic) {
-            this.pendingIOSKey = event.keyCode == 13 ? "enter" : "backspace";
-            setTimeout(() => this.flushIOSKey(view), 250);
+            this.setPendingKey(view, pending);
             return true;
         }
         return false;
     }
-    flushIOSKey(view) {
-        if (!this.pendingIOSKey)
-            return false;
-        let dom = view.contentDOM, key = this.pendingIOSKey;
-        this.pendingIOSKey = null;
-        return key == "enter" ? dispatchKey(dom, "Enter", 13) : dispatchKey(dom, "Backspace", 8);
+    setPendingKey(view, pending) {
+        this.pendingKey = pending;
+        requestAnimationFrame(() => {
+            if (!this.pendingKey)
+                return false;
+            let key = this.pendingKey;
+            this.pendingKey = undefined;
+            view.observer.processRecords();
+            let startState = view.state;
+            dispatchKey(view.contentDOM, key.key, key.keyCode);
+            if (view.state == startState)
+                view.docView.reset(true);
+        });
     }
     ignoreDuringComposition(event) {
         if (!/^key/.test(event.type))
@@ -3109,6 +3273,11 @@ class InputState {
             this.mouseSelection.destroy();
     }
 }
+const PendingKeys = [
+    { key: "Backspace", keyCode: 8, inputType: "deleteContentBackward" },
+    { key: "Enter", keyCode: 13, inputType: "insertParagraph" },
+    { key: "Delete", keyCode: 46, inputType: "deleteContentForward" }
+];
 // Key codes for modifier keys
 const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
 class MouseSelection {
@@ -3225,7 +3394,7 @@ function capturePaste(view) {
 function doPaste(view, input) {
     let { state: state$1 } = view, changes, i = 1, text = state$1.toText(input);
     let byLine = text.lines == state$1.selection.ranges.length;
-    let linewise = lastLinewiseCopy && state$1.selection.ranges.every(r => r.empty) && lastLinewiseCopy == text.toString();
+    let linewise = lastLinewiseCopy != null && state$1.selection.ranges.every(r => r.empty) && lastLinewiseCopy == text.toString();
     if (linewise) {
         let lastLine = -1;
         changes = state$1.changeByRange(range => {
@@ -3436,9 +3605,8 @@ handlers.paste = (view, event) => {
         return event.preventDefault();
     view.observer.flush();
     let data = brokenClipboardAPI ? null : event.clipboardData;
-    let text = data && data.getData("text/plain");
-    if (text) {
-        doPaste(view, text);
+    if (data) {
+        doPaste(view, data.getData("text/plain"));
         event.preventDefault();
     }
     else {
@@ -3487,7 +3655,7 @@ function copiedRange(state) {
 let lastLinewiseCopy = null;
 handlers.copy = handlers.cut = (view, event) => {
     let { text, ranges, linewise } = copiedRange(view.state);
-    if (!text)
+    if (!text && !linewise)
         return;
     lastLinewiseCopy = linewise ? text : null;
     let data = brokenClipboardAPI ? null : event.clipboardData;
@@ -3555,6 +3723,31 @@ handlers.compositionend = view => {
 handlers.contextmenu = view => {
     view.inputState.lastContextMenu = Date.now();
 };
+handlers.beforeinput = (view, event) => {
+    var _a;
+    // Because Chrome Android doesn't fire useful key events, use
+    // beforeinput to detect backspace (and possibly enter and delete,
+    // but those usually don't even seem to fire beforeinput events at
+    // the moment) and fake a key event for it.
+    //
+    // (preventDefault on beforeinput, though supported in the spec,
+    // seems to do nothing at all on Chrome).
+    let pending;
+    if (browser.chrome && browser.android && (pending = PendingKeys.find(key => key.inputType == event.inputType))) {
+        view.inputState.setPendingKey(view, pending);
+        let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
+        setTimeout(() => {
+            var _a;
+            // Backspacing near uneditable nodes on Chrome Android sometimes
+            // closes the virtual keyboard. This tries to crudely detect
+            // that and refocus to get it back.
+            if ((((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0) > startViewHeight + 10 && view.hasFocus) {
+                view.contentDOM.blur();
+                view.focus();
+            }
+        }, 50);
+    }
+};
 
 const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line"];
 class HeightOracle {
@@ -4270,6 +4463,15 @@ class LineGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.vertical ? this.size : -1; }
 }
+class ScrollTarget {
+    constructor(range, center = false) {
+        this.range = range;
+        this.center = center;
+    }
+    map(changes) {
+        return changes.empty ? this : new ScrollTarget(this.range.map(changes), this.center);
+    }
+}
 class ViewState {
     constructor(state) {
         this.state = state;
@@ -4282,7 +4484,7 @@ class ViewState {
         this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
-        this.scrollTo = null;
+        this.scrollTarget = null;
         // Briefly set to true when printing, to disable viewport limiting
         this.printing = false;
         this.visibleRanges = [];
@@ -4315,7 +4517,7 @@ class ViewState {
         this.scaler = this.heightMap.height <= 7000000 /* MaxDOMHeight */ ? IdScaler :
             new BigScaler(this.heightOracle.doc, this.heightMap, this.viewports);
     }
-    update(update, scrollTo = null) {
+    update(update, scrollTarget = null) {
         let prev = this.state;
         this.state = update.state;
         let newDeco = this.state.facet(decorations);
@@ -4326,30 +4528,33 @@ class ViewState {
         if (this.heightMap.height != prevHeight)
             update.flags |= 2 /* Height */;
         let viewport = heightChanges.length ? this.mapViewport(this.viewport, update.changes) : this.viewport;
-        if (scrollTo && (scrollTo.head < viewport.from || scrollTo.head > viewport.to) || !this.viewportIsAppropriate(viewport))
-            viewport = this.getViewport(0, scrollTo);
-        if (!viewport.eq(this.viewport)) {
-            this.viewport = viewport;
-            update.flags |= 4 /* Viewport */;
-        }
+        if (scrollTarget && (scrollTarget.range.head < viewport.from || scrollTarget.range.head > viewport.to) ||
+            !this.viewportIsAppropriate(viewport))
+            viewport = this.getViewport(0, scrollTarget);
+        this.viewport = viewport;
         this.updateForViewport();
         if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
-            update.flags |= this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
-        this.computeVisibleRanges();
-        if (scrollTo)
-            this.scrollTo = scrollTo;
+            this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
+        update.flags |= this.computeVisibleRanges();
+        if (scrollTarget)
+            this.scrollTarget = scrollTarget;
         if (!this.mustEnforceCursorAssoc && update.selectionSet && update.view.lineWrapping &&
             update.state.selection.main.empty && update.state.selection.main.assoc)
             this.mustEnforceCursorAssoc = true;
     }
     measure(docView, repeated) {
         let dom = docView.dom, whiteSpace = "", direction = exports.Direction.LTR;
+        let result = 0;
         if (!repeated) {
             // Vertical padding
             let style = window.getComputedStyle(dom);
             whiteSpace = style.whiteSpace, direction = (style.direction == "rtl" ? exports.Direction.RTL : exports.Direction.LTR);
-            this.paddingTop = parseInt(style.paddingTop) || 0;
-            this.paddingBottom = parseInt(style.paddingBottom) || 0;
+            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 ? { top: -1e8, bottom: 1e8, left: -1e8, right: 1e8 } : visiblePixelRange(dom, this.paddingTop);
@@ -4359,7 +4564,7 @@ class ViewState {
         if (!this.inView)
             return 0;
         let lineHeights = docView.measureVisibleLineHeights();
-        let refresh = false, bias = 0, result = 0, oracle = this.heightOracle;
+        let refresh = false, bias = 0, oracle = this.heightOracle;
         if (!repeated) {
             let contentWidth = docView.dom.clientWidth;
             if (oracle.mustRefresh(lineHeights, whiteSpace, direction) ||
@@ -4368,12 +4573,12 @@ class ViewState {
                 refresh = oracle.refresh(whiteSpace, direction, lineHeight, charWidth, contentWidth / charWidth, lineHeights);
                 if (refresh) {
                     docView.minWidth = 0;
-                    result |= 16 /* Geometry */;
+                    result |= 8 /* Geometry */;
                 }
             }
             if (this.contentWidth != contentWidth) {
                 this.contentWidth = contentWidth;
-                result |= 16 /* Geometry */;
+                result |= 8 /* Geometry */;
             }
             if (dTop > 0 && dBottom > 0)
                 bias = Math.max(dTop, dBottom);
@@ -4385,17 +4590,12 @@ class ViewState {
         if (oracle.heightChanged)
             result |= 2 /* Height */;
         if (!this.viewportIsAppropriate(this.viewport, bias) ||
-            this.scrollTo && (this.scrollTo.head < this.viewport.from || this.scrollTo.head > this.viewport.to)) {
-            let newVP = this.getViewport(bias, this.scrollTo);
-            if (newVP.from != this.viewport.from || newVP.to != this.viewport.to) {
-                this.viewport = newVP;
-                result |= 4 /* Viewport */;
-            }
-        }
+            this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from || this.scrollTarget.range.head > this.viewport.to))
+            this.viewport = this.getViewport(bias, this.scrollTarget);
         this.updateForViewport();
         if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
-            result |= this.updateLineGaps(this.ensureLineGaps(refresh ? [] : this.lineGaps));
-        this.computeVisibleRanges();
+            this.updateLineGaps(this.ensureLineGaps(refresh ? [] : this.lineGaps));
+        result |= this.computeVisibleRanges();
         if (this.mustEnforceCursorAssoc) {
             this.mustEnforceCursorAssoc = false;
             // This is done in the read stage, because moving the selection
@@ -4408,22 +4608,25 @@ class ViewState {
     }
     get visibleTop() { return this.scaler.fromDOM(this.pixelViewport.top, 0); }
     get visibleBottom() { return this.scaler.fromDOM(this.pixelViewport.bottom, 0); }
-    getViewport(bias, scrollTo) {
+    getViewport(bias, scrollTarget) {
         // This will divide VP.Margin between the top and the
         // bottom, depending on the bias (the change in viewport position
         // since the last update). It'll hold a number between 0 and 1
         let marginTop = 0.5 - Math.max(-0.5, Math.min(0.5, bias / 1000 /* Margin */ / 2));
         let map = this.heightMap, doc = this.state.doc, { visibleTop, visibleBottom } = this;
         let viewport = new Viewport(map.lineAt(visibleTop - marginTop * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(visibleBottom + (1 - marginTop) * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).to);
-        // If scrollTo is given, make sure the viewport includes that position
-        if (scrollTo) {
-            if (scrollTo.head < viewport.from) {
-                let { top: newTop } = map.lineAt(scrollTo.head, QueryType.ByPos, doc, 0, 0);
-                viewport = new Viewport(map.lineAt(newTop - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(newTop + (visibleBottom - visibleTop) + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
-            }
-            else if (scrollTo.head > viewport.to) {
-                let { bottom: newBottom } = map.lineAt(scrollTo.head, QueryType.ByPos, doc, 0, 0);
-                viewport = new Viewport(map.lineAt(newBottom - (visibleBottom - visibleTop) - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(newBottom + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
+        // If scrollTarget is given, make sure the viewport includes that position
+        if (scrollTarget) {
+            let { head } = scrollTarget.range, viewHeight = visibleBottom - visibleTop;
+            if (head < viewport.from || head > viewport.to) {
+                let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
+                if (scrollTarget.center)
+                    topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
+                else if (head < viewport.from)
+                    topPos = block.top;
+                else
+                    topPos = block.bottom - viewHeight;
+                viewport = new Viewport(map.lineAt(topPos - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(topPos + viewHeight + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
             }
         }
         return viewport;
@@ -4517,9 +4720,7 @@ class ViewState {
         if (!LineGap.same(gaps, this.lineGaps)) {
             this.lineGaps = gaps;
             this.lineGapDeco = Decoration.set(gaps.map(gap => gap.draw(this.heightOracle.lineWrapping)));
-            return 8 /* LineGaps */;
         }
-        return 0;
     }
     computeVisibleRanges() {
         let deco = this.state.facet(decorations);
@@ -4530,7 +4731,10 @@ class ViewState {
             span(from, to) { ranges.push({ from, to }); },
             point() { }
         }, 20);
+        let changed = ranges.length != this.visibleRanges.length ||
+            this.visibleRanges.some((r, i) => r.from != ranges[i].from || r.to != ranges[i].to);
         this.visibleRanges = ranges;
+        return changed ? 4 /* Viewport */ : 0;
     }
     lineAt(pos, editorTop) {
         editorTop += this.paddingTop;
@@ -4555,16 +4759,11 @@ class ViewState {
         return this.scaler.toDOM(this.heightMap.height, this.paddingTop);
     }
 }
-/**
-Indicates the range of the document that is in the visible
-viewport.
-*/
 class Viewport {
     constructor(from, to) {
         this.from = from;
         this.to = to;
     }
-    eq(b) { return this.from == b.from && this.to == b.to; }
 }
 function lineStructure(from, to, state) {
     let ranges = [], pos = from, total = 0;
@@ -4690,7 +4889,7 @@ function buildTheme(main, spec, scopes) {
     });
 }
 const baseTheme = buildTheme("." + baseThemeID, {
-    "&": {
+    "&.cm-editor": {
         position: "relative !important",
         boxSizing: "border-box",
         "&.cm-focused": {
@@ -4857,6 +5056,8 @@ class DOMObserver {
         this.scrollTargets = [];
         this.intersection = null;
         this.intersecting = false;
+        this.gapIntersection = null;
+        this.gaps = [];
         // Used to work around a Safari Selection/shadow DOM bug (#414)
         this._selectionRange = null;
         // Timeout for scheduling check of the parents that need scroll handlers
@@ -4897,13 +5098,17 @@ class DOMObserver {
             this.intersection = new IntersectionObserver(entries => {
                 if (this.parentCheck < 0)
                     this.parentCheck = setTimeout(this.listenForScroll.bind(this), 1000);
-                if (entries[entries.length - 1].intersectionRatio > 0 != this.intersecting) {
+                if (entries.length > 0 && entries[entries.length - 1].intersectionRatio > 0 != this.intersecting) {
                     this.intersecting = !this.intersecting;
                     if (this.intersecting != this.view.inView)
                         this.onScrollChanged(document.createEvent("Event"));
                 }
             }, {});
             this.intersection.observe(this.dom);
+            this.gapIntersection = new IntersectionObserver(entries => {
+                if (entries.length > 0 && entries[entries.length - 1].intersectionRatio > 0)
+                    this.onScrollChanged(document.createEvent("Event"));
+            }, {});
         }
         this.listenForScroll();
     }
@@ -4912,6 +5117,14 @@ class DOMObserver {
             this.flush();
         this.onScrollChanged(e);
     }
+    updateGaps(gaps) {
+        if (this.gapIntersection && (gaps.length != this.gaps.length || this.gaps.some((g, i) => g != gaps[i]))) {
+            this.gapIntersection.disconnect();
+            for (let gap of gaps)
+                this.gapIntersection.observe(gap);
+            this.gaps = gaps;
+        }
+    }
     onSelectionChange(event) {
         if (this.lastFlush < Date.now() - 50)
             this._selectionRange = null;
@@ -5027,20 +5240,12 @@ class DOMObserver {
             this.flush();
         }
     }
-    // Apply pending changes, if any
-    flush() {
-        if (this.delayedFlush >= 0)
-            return;
-        this.lastFlush = Date.now();
+    processRecords() {
         let records = this.queue;
         for (let mut of this.observer.takeRecords())
             records.push(mut);
         if (records.length)
             this.queue = [];
-        let selection = this.selectionRange;
-        let newSel = !this.ignoreSelection.eq(selection) && hasSelection(this.dom, selection);
-        if (records.length == 0 && !newSel)
-            return;
         let from = -1, to = -1, typeOver = false;
         for (let record of records) {
             let range = this.readMutation(record);
@@ -5056,17 +5261,26 @@ class DOMObserver {
                 to = Math.max(range.to, to);
             }
         }
+        return { from, to, typeOver };
+    }
+    // Apply pending changes, if any
+    flush() {
+        // Completely hold off flushing when pending keys are set—the code
+        // managing those will make sure processRecords is called and the
+        // view is resynchronized after
+        if (this.delayedFlush >= 0 || this.view.inputState.pendingKey)
+            return;
+        this.lastFlush = Date.now();
+        let { from, to, typeOver } = this.processRecords();
+        let selection = this.selectionRange;
+        let newSel = !this.ignoreSelection.eq(selection) && hasSelection(this.dom, selection);
+        if (from < 0 && !newSel)
+            return;
         let startState = this.view.state;
-        if (from > -1 || newSel)
-            this.onChange(from, to, typeOver);
-        if (this.view.state == startState) { // The view wasn't updated
-            if (this.view.docView.dirty) {
-                this.ignore(() => this.view.docView.sync());
-                this.view.docView.dirty = 0 /* Not */;
-            }
-            if (newSel)
-                this.view.docView.updateSelection();
-        }
+        this.onChange(from, to, typeOver);
+        // The view wasn't updated
+        if (this.view.state == startState)
+            this.view.docView.reset(newSel);
         this.clearSelection();
     }
     readMutation(rec) {
@@ -5093,6 +5307,8 @@ class DOMObserver {
         this.stop();
         if (this.intersection)
             this.intersection.disconnect();
+        if (this.gapIntersection)
+            this.gapIntersection.disconnect();
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
@@ -5201,9 +5417,9 @@ function applyDOMChange(view, start, end, typeOver) {
                 (change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
-                    dispatchKey(view.contentDOM, "Delete", 46))) ||
-            browser.ios && view.inputState.flushIOSKey(view))
+                    dispatchKey(view.contentDOM, "Delete", 46)))) {
             return;
+        }
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
             return;
@@ -5293,8 +5509,9 @@ class DOMReader {
             if (next == end)
                 break;
             let view = ContentView.get(cur), nextView = ContentView.get(next);
-            if ((view ? view.breakAfter : isBlockElement(cur)) ||
-                ((nextView ? nextView.breakAfter : isBlockElement(next)) && !(cur.nodeName == "BR" && !cur.cmIgnore)))
+            if (view && nextView ? view.breakAfter :
+                (view ? view.breakAfter : isBlockElement(cur)) ||
+                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore)))
                 this.text += this.lineBreak;
             cur = next;
         }
@@ -5397,6 +5614,7 @@ class EditorView {
         this.editorAttrs = {};
         this.contentAttrs = {};
         this.bidiCache = [];
+        this.destroyed = false;
         /**
         @internal
         */
@@ -5422,7 +5640,7 @@ class EditorView {
         this.dom.appendChild(this.scrollDOM);
         this._dispatch = config.dispatch || ((tr) => this.update([tr]));
         this.dispatch = this.dispatch.bind(this);
-        this.root = (config.root || document);
+        this.root = (config.root || getRoot(config.parent) || document);
         this.viewState = new ViewState(config.state || state.EditorState.create());
         this.plugins = this.state.facet(viewPlugin).map(spec => new PluginInstance(spec).update(this));
         this.observer = new DOMObserver(this, (from, to, typeOver) => {
@@ -5495,25 +5713,32 @@ class EditorView {
                 throw new RangeError("Trying to update state with a transaction that doesn't start from the previous state.");
             state$1 = tr.state;
         }
+        if (this.destroyed) {
+            this.viewState.state = state$1;
+            return;
+        }
         // 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);
         update = new ViewUpdate(this, state$1, transactions);
-        let scrollPos = null;
+        let scrollTarget = null;
         try {
             this.updateState = 2 /* Updating */;
             for (let tr of transactions) {
-                if (scrollPos)
-                    scrollPos = scrollPos.map(tr.changes);
+                if (scrollTarget)
+                    scrollTarget = scrollTarget.map(tr.changes);
                 if (tr.scrollIntoView) {
                     let { main } = tr.state.selection;
-                    scrollPos = main.empty ? main : state.EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1);
+                    scrollTarget = new ScrollTarget(main.empty ? main : state.EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1));
                 }
-                for (let e of tr.effects)
+                for (let e of tr.effects) {
                     if (e.is(scrollTo))
-                        scrollPos = e.value;
+                        scrollTarget = new ScrollTarget(e.value);
+                    else if (e.is(centerOn))
+                        scrollTarget = new ScrollTarget(e.value, true);
+                }
             }
-            this.viewState.update(update, scrollPos);
+            this.viewState.update(update, scrollTarget);
             this.bidiCache = CachedOrder.update(this.bidiCache, update.changes);
             if (!update.empty) {
                 this.updatePlugins(update);
@@ -5528,7 +5753,7 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
-        if (redrawn || scrollPos || this.viewState.mustEnforceCursorAssoc)
+        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
@@ -5544,6 +5769,10 @@ class EditorView {
     setState(newState) {
         if (this.updateState != 0 /* Idle */)
             throw new Error("Calls to EditorView.setState are not allowed while an update is in progress");
+        if (this.destroyed) {
+            this.viewState.state = newState;
+            return;
+        }
         this.updateState = 2 /* Updating */;
         try {
             for (let plugin of this.plugins)
@@ -5593,6 +5822,8 @@ class EditorView {
     @internal
     */
     measure(flush = true) {
+        if (this.destroyed)
+            return;
         if (this.measureScheduled > -1)
             cancelAnimationFrame(this.measureScheduled);
         this.measureScheduled = -1; // Prevent requestMeasure calls from scheduling another animation frame
@@ -5602,15 +5833,18 @@ class EditorView {
         try {
             for (let i = 0;; i++) {
                 this.updateState = 1 /* Measuring */;
+                let oldViewport = this.viewport;
                 let changed = this.viewState.measure(this.docView, i > 0);
-                let measuring = this.measureRequests;
-                if (!changed && !measuring.length && this.viewState.scrollTo == null)
+                if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
-                this.measureRequests = [];
                 if (i > 5) {
                     console.warn("Viewport failed to stabilize");
                     break;
                 }
+                let measuring = [];
+                // Only run measure requests in this cycle when the viewport didn't change
+                if (!(changed & 4 /* Viewport */))
+                    [this.measureRequests, measuring] = [measuring, this.measureRequests];
                 let measured = measuring.map(m => {
                     try {
                         return m.read(this);
@@ -5643,11 +5877,11 @@ class EditorView {
                             logException(this.state, e);
                         }
                     }
-                if (this.viewState.scrollTo) {
-                    this.docView.scrollRangeIntoView(this.viewState.scrollTo);
-                    this.viewState.scrollTo = null;
+                if (this.viewState.scrollTarget) {
+                    this.docView.scrollIntoView(this.viewState.scrollTarget);
+                    this.viewState.scrollTarget = null;
                 }
-                if (!(changed & 4 /* Viewport */) && this.measureRequests.length == 0)
+                if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to && this.measureRequests.length == 0)
                     break;
             }
         }
@@ -5677,6 +5911,7 @@ class EditorView {
             spellcheck: "false",
             autocorrect: "off",
             autocapitalize: "off",
+            translate: "no",
             contenteditable: !this.state.facet(editable) ? "false" : contentEditablePlainTextSupported() ? "plaintext-only" : "true",
             class: "cm-content",
             style: `${browser.tabSize}: ${this.state.tabSize}`,
@@ -5867,12 +6102,9 @@ class EditorView {
     moveVertically(start, forward, distance) {
         return skipAtoms(this, start, moveVertically(this, start, forward, distance));
     }
-    /**
-    Scroll the given document position into view.
-    */
+    // FIXME remove on next major version
     scrollPosIntoView(pos) {
-        this.viewState.scrollTo = state.EditorSelection.cursor(pos);
-        this.requestMeasure();
+        this.dispatch({ effects: scrollTo.of(state.EditorSelection.cursor(pos)) });
     }
     /**
     Find the DOM parent node and offset (child offset if `node` is
@@ -5983,11 +6215,13 @@ class EditorView {
     destroy() {
         for (let plugin of this.plugins)
             plugin.destroy(this);
+        this.plugins = [];
         this.inputState.destroy();
         this.dom.remove();
         this.observer.destroy();
         if (this.measureScheduled > -1)
             cancelAnimationFrame(this.measureScheduled);
+        this.destroyed = true;
     }
     /**
     Facet that can be used to add DOM event handlers. The value
@@ -6046,6 +6280,11 @@ transaction to make it scroll the given range into view.
 */
 EditorView.scrollTo = scrollTo;
 /**
+Effect that makes the editor scroll the given range to the
+center of the visible view.
+*/
+EditorView.centerOn = centerOn;
+/**
 Facet to add a [style
 module](https://github.com/marijnh/style-mod#documentation) to
 an editor view. The view will ensure that the module is
@@ -6175,11 +6414,7 @@ class CachedOrder {
     }
 }
 
-const currentPlatform = typeof navigator == "undefined" ? "key"
-    : /Mac/.test(navigator.platform) ? "mac"
-        : /Win/.test(navigator.platform) ? "win"
-            : /Linux|X11/.test(navigator.platform) ? "linux"
-                : "key";
+const currentPlatform = browser.mac ? "mac" : browser.windows ? "win" : browser.linux ? "linux" : "key";
 function normalizeKeyName(name, platform) {
     const parts = name.split(/-(?!$)/);
     let result = parts[parts.length - 1];
@@ -6685,7 +6920,7 @@ class MatchDecorator {
 }
 
 const UnicodeRegexpSupport = /x/.unicode != null ? "gu" : "g";
-const Specials = new RegExp("[\u0000-\u0008\u000a-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\ufeff\ufff9-\ufffc]", UnicodeRegexpSupport);
+const Specials = new RegExp("[\u0000-\u0008\u000a-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\u202d\u202e\ufeff\ufff9-\ufffc]", UnicodeRegexpSupport);
 const Names = {
     0: "null",
     7: "bell",
@@ -6700,6 +6935,8 @@ const Names = {
     8206: "left-to-right mark",
     8207: "right-to-left mark",
     8232: "line separator",
+    8237: "left-to-right override",
+    8238: "right-to-left override",
     8233: "paragraph separator",
     65279: "zero width no-break space",
     65532: "object replacement"
@@ -6866,7 +7103,7 @@ DOM class.
 function highlightActiveLine() {
     return activeLineHighlighter;
 }
-const lineDeco = Decoration.line({ attributes: { class: "cm-activeLine" } });
+const lineDeco = Decoration.line({ class: "cm-activeLine" });
 const activeLineHighlighter = ViewPlugin.fromClass(class {
     constructor(view) {
         this.decorations = this.getDeco(view);