@codemirror/view 0.19.9 → 0.19.13

package/dist/index.cjs

@@ -102,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) {
@@ -121,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;
@@ -163,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;
@@ -251,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) {
@@ -299,25 +321,30 @@ class ContentView {
     sync(track) {
         var _a;
         if (this.dirty & 2 /* Node */) {
-            let parent = this.dom, pos = null;
+            let parent = this.dom;
+            let pos = parent.firstChild;
             for (let child of this.children) {
                 if (child.dirty) {
-                    let next = pos ? pos.nextSibling : parent.firstChild;
-                    if (!child.dom && next && !((_a = ContentView.get(next)) === null || _a === void 0 ? void 0 : _a.parent))
-                        child.reuseDOM(next);
+                    if (!child.dom && pos && !((_a = ContentView.get(pos)) === null || _a === void 0 ? void 0 : _a.parent))
+                        child.reuseDOM(pos);
                     child.sync(track);
                     child.dirty = 0 /* Not */;
                 }
-                if (track && track.node == parent && pos != child.dom)
+                if (track && !track.written && track.node == parent && pos != child.dom)
                     track.written = true;
-                syncNodeInto(parent, pos, child.dom);
-                pos = child.dom;
+                if (child.dom.parentNode == parent) {
+                    while (pos && pos != child.dom)
+                        pos = rm(pos);
+                    pos = child.dom.nextSibling;
+                }
+                else {
+                    parent.insertBefore(child.dom, pos);
+                }
             }
-            let next = pos ? pos.nextSibling : parent.firstChild;
-            if (next && track && track.node == parent)
+            if (pos && track && track.node == parent)
                 track.written = true;
-            while (next)
-                next = rm(next);
+            while (pos)
+                pos = rm(pos);
         }
         else if (this.dirty & 1 /* Child */) {
             for (let child of this.children)
@@ -448,6 +475,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.
@@ -456,14 +484,6 @@ function rm(dom) {
     dom.parentNode.removeChild(dom);
     return next;
 }
-function syncNodeInto(parent, after, dom) {
-    let next = after ? after.nextSibling : parent.firstChild;
-    if (dom.parentNode == parent)
-        while (next != dom)
-            next = rm(next);
-    else
-        parent.insertBefore(dom, next);
-}
 class ChildCursor {
     constructor(children, pos, i) {
         this.children = children;
@@ -495,15 +515,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,
@@ -725,6 +748,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); }
@@ -736,6 +760,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();
@@ -1231,14 +1287,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";
@@ -1254,7 +1313,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;
@@ -1353,6 +1412,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 = "";
@@ -1367,23 +1429,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) {
@@ -1398,6 +1468,7 @@ class ContentBuilder {
                         this.content[this.content.length - 1].breakAfter = 1;
                     else
                         this.breakAtStart = 1;
+                    this.flushBuffer([]);
                     this.curLine = null;
                     length--;
                     continue;
@@ -1408,7 +1479,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;
@@ -1427,11 +1500,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
@@ -1457,10 +1542,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();
@@ -1481,6 +1571,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
@@ -1907,6 +2000,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) {
@@ -2036,6 +2137,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
@@ -2209,7 +2318,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;
@@ -2229,10 +2338,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) {
@@ -2343,6 +2452,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).
@@ -2789,6 +2906,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;;) {
@@ -2819,7 +2937,7 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
     // 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 (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)
@@ -2960,7 +3078,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;
@@ -3069,20 +3203,31 @@ 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;
+        let flush = () => {
+            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);
+        };
+        if (browser.ios)
+            setTimeout(() => requestAnimationFrame(flush), 50);
+        else
+            requestAnimationFrame(flush);
     }
     ignoreDuringComposition(event) {
         if (!/^key/.test(event.type))
@@ -3129,6 +3274,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 {
@@ -3574,6 +3724,33 @@ 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);
+        if (pending.key == "Backspace" || pending.key == "Delete") {
+            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();
+                }
+            }, 100);
+        }
+    }
+};
 
 const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line"];
 class HeightOracle {
@@ -4289,6 +4466,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;
@@ -4301,7 +4487,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 = [];
@@ -4334,7 +4520,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);
@@ -4345,15 +4531,16 @@ 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 (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 */)
+        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 4000 /* DoubleMargin */)
             this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
         update.flags |= this.computeVisibleRanges();
-        if (scrollTo)
-            this.scrollTo = scrollTo;
+        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;
@@ -4406,10 +4593,10 @@ 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))
-            this.viewport = this.getViewport(bias, this.scrollTo);
+            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 */)
+        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 4000 /* DoubleMargin */)
             this.updateLineGaps(this.ensureLineGaps(refresh ? [] : this.lineGaps));
         result |= this.computeVisibleRanges();
         if (this.mustEnforceCursorAssoc) {
@@ -4424,22 +4611,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;
@@ -4481,52 +4671,50 @@ class ViewState {
         if (this.heightOracle.direction != exports.Direction.LTR)
             return gaps;
         this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.state.doc, 0, 0, line => {
-            if (line.length < 10000 /* Margin */)
+            if (line.length < 4000 /* DoubleMargin */)
                 return;
             let structure = lineStructure(line.from, line.to, this.state);
-            if (structure.total < 10000 /* Margin */)
+            if (structure.total < 4000 /* DoubleMargin */)
                 return;
             let viewFrom, viewTo;
             if (this.heightOracle.lineWrapping) {
-                if (line.from != this.viewport.from)
-                    viewFrom = line.from;
-                else
-                    viewFrom = findPosition(structure, (this.visibleTop - line.top) / line.height);
-                if (line.to != this.viewport.to)
-                    viewTo = line.to;
-                else
-                    viewTo = findPosition(structure, (this.visibleBottom - line.top) / line.height);
+                let marginHeight = (2000 /* Margin */ / this.heightOracle.lineLength) * this.heightOracle.lineHeight;
+                viewFrom = findPosition(structure, (this.visibleTop - line.top - marginHeight) / line.height);
+                viewTo = findPosition(structure, (this.visibleBottom - line.top + marginHeight) / line.height);
             }
             else {
                 let totalWidth = structure.total * this.heightOracle.charWidth;
-                viewFrom = findPosition(structure, this.pixelViewport.left / totalWidth);
-                viewTo = findPosition(structure, this.pixelViewport.right / totalWidth);
+                let marginWidth = 2000 /* Margin */ * this.heightOracle.charWidth;
+                viewFrom = findPosition(structure, (this.pixelViewport.left - marginWidth) / totalWidth);
+                viewTo = findPosition(structure, (this.pixelViewport.right + marginWidth) / totalWidth);
             }
+            let outside = [];
+            if (viewFrom > line.from)
+                outside.push({ from: line.from, to: viewFrom });
+            if (viewTo < line.to)
+                outside.push({ from: viewTo, to: line.to });
             let sel = this.state.selection.main;
-            // Make sure the gap doesn't cover a selection end
-            if (sel.from <= viewFrom && sel.to >= line.from)
-                viewFrom = sel.from;
-            if (sel.from <= line.to && sel.to >= viewTo)
-                viewTo = sel.to;
-            let gapTo = viewFrom - 10000 /* Margin */, gapFrom = viewTo + 10000 /* Margin */;
-            if (gapTo > line.from + 5000 /* HalfMargin */)
-                gaps.push(find(current, gap => gap.from == line.from && gap.to > gapTo - 5000 /* HalfMargin */ && gap.to < gapTo + 5000 /* HalfMargin */) ||
-                    new LineGap(line.from, gapTo, this.gapSize(line, gapTo, true, structure)));
-            if (gapFrom < line.to - 5000 /* HalfMargin */)
-                gaps.push(find(current, gap => gap.to == line.to && gap.from > gapFrom - 5000 /* HalfMargin */ &&
-                    gap.from < gapFrom + 5000 /* HalfMargin */) ||
-                    new LineGap(gapFrom, line.to, this.gapSize(line, gapFrom, false, structure)));
+            // Make sure the gaps don't cover a selection end
+            if (sel.from >= line.from && sel.from <= line.to)
+                cutRange(outside, sel.from - 10 /* SelectionMargin */, sel.from + 10 /* SelectionMargin */);
+            if (!sel.empty && sel.to >= line.from && sel.to <= line.to)
+                cutRange(outside, sel.to - 10 /* SelectionMargin */, sel.to + 10 /* SelectionMargin */);
+            for (let { from, to } of outside)
+                if (to - from > 1000 /* HalfMargin */) {
+                    gaps.push(find(current, gap => gap.from >= line.from && gap.to <= line.to &&
+                        Math.abs(gap.from - from) < 1000 /* HalfMargin */ && Math.abs(gap.to - to) < 1000 /* HalfMargin */) ||
+                        new LineGap(from, to, this.gapSize(line, from, to, structure)));
+                }
         });
         return gaps;
     }
-    gapSize(line, pos, start, structure) {
+    gapSize(line, from, to, structure) {
+        let fraction = findFraction(structure, to) - findFraction(structure, from);
         if (this.heightOracle.lineWrapping) {
-            let height = line.height * findFraction(structure, pos);
-            return start ? height : line.height - height;
+            return line.height * fraction;
         }
         else {
-            let ratio = findFraction(structure, pos);
-            return structure.total * this.heightOracle.charWidth * (start ? ratio : 1 - ratio);
+            return structure.total * this.heightOracle.charWidth * fraction;
         }
     }
     updateLineGaps(gaps) {
@@ -4620,6 +4808,20 @@ function findFraction(structure, pos) {
     }
     return counted / structure.total;
 }
+function cutRange(ranges, from, to) {
+    for (let i = 0; i < ranges.length; i++) {
+        let r = ranges[i];
+        if (r.from < to && r.to > from) {
+            let pieces = [];
+            if (r.from < from)
+                pieces.push({ from: r.from, to: from });
+            if (r.to > to)
+                pieces.push({ from: to, to: r.to });
+            ranges.splice(i, 1, ...pieces);
+            i += pieces.length - 1;
+        }
+    }
+}
 function find(array, f) {
     for (let val of array)
         if (f(val))
@@ -4702,7 +4904,7 @@ function buildTheme(main, spec, scopes) {
     });
 }
 const baseTheme = buildTheme("." + baseThemeID, {
-    "&": {
+    "&.cm-editor": {
         position: "relative !important",
         boxSizing: "border-box",
         "&.cm-focused": {
@@ -4911,7 +5113,7 @@ 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"));
@@ -4919,7 +5121,7 @@ class DOMObserver {
             }, {});
             this.intersection.observe(this.dom);
             this.gapIntersection = new IntersectionObserver(entries => {
-                if (entries[entries.length - 1].intersectionRatio > 0)
+                if (entries.length > 0 && entries[entries.length - 1].intersectionRatio > 0)
                     this.onScrollChanged(document.createEvent("Event"));
             }, {});
         }
@@ -5053,20 +5255,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);
@@ -5082,17 +5276,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) {
@@ -5229,9 +5432,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;
@@ -5452,7 +5655,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) => {
@@ -5533,21 +5736,24 @@ class EditorView {
         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);
@@ -5562,7 +5768,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))
@@ -5644,7 +5850,7 @@ class EditorView {
                 this.updateState = 1 /* Measuring */;
                 let oldViewport = this.viewport;
                 let changed = this.viewState.measure(this.docView, i > 0);
-                if (!changed && !this.measureRequests.length && this.viewState.scrollTo == null)
+                if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
                 if (i > 5) {
                     console.warn("Viewport failed to stabilize");
@@ -5686,9 +5892,9 @@ 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 (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to && this.measureRequests.length == 0)
                     break;
@@ -5720,6 +5926,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}`,
@@ -5910,12 +6117,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
@@ -6082,7 +6286,7 @@ class EditorView {
     target editors with a dark or light theme.
     */
     static baseTheme(spec) {
-        return state.Prec.fallback(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
+        return state.Prec.lowest(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
     }
 }
 /**
@@ -6091,6 +6295,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
@@ -6220,11 +6429,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];
@@ -6523,7 +6728,7 @@ const themeSpec = {
 };
 if (CanHidePrimary)
     themeSpec[".cm-line"].caretColor = "transparent !important";
-const hideNativeSelection = state.Prec.override(EditorView.theme(themeSpec));
+const hideNativeSelection = state.Prec.highest(EditorView.theme(themeSpec));
 function getBase(view) {
     let rect = view.scrollDOM.getBoundingClientRect();
     let left = view.textDirection == exports.Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth;
@@ -6730,7 +6935,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",
@@ -6745,6 +6950,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"
@@ -6911,7 +7118,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);