@codemirror/view 0.19.6 → 0.19.10

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;
@@ -241,6 +251,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 +456,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 +504,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 +737,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 +749,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 +1276,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 +1302,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 +1401,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 +1418,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 +1457,7 @@ class ContentBuilder {
                         this.content[this.content.length - 1].breakAfter = 1;
                     else
                         this.breakAtStart = 1;
+                    this.flushBuffer([]);
                     this.curLine = null;
                     length--;
                     continue;
@@ -1398,7 +1468,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 +1489,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 +1531,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();
@@ -1783,7 +1872,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 +1890,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 +1975,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 +1986,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 +2018,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 +2123,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
@@ -2325,6 +2438,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 +2892,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 +2910,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 +3064,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 +3189,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 +3256,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 +3377,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 => {
@@ -3404,8 +3556,10 @@ function dropText(view, event, text, direct) {
     });
 }
 handlers.drop = (view, event) => {
-    if (!event.dataTransfer || !view.state.facet(editable))
+    if (!event.dataTransfer)
         return;
+    if (view.state.readOnly)
+        return event.preventDefault();
     let files = event.dataTransfer.files;
     if (files && files.length) { // For a file drop, read the file's text.
         event.preventDefault();
@@ -3430,13 +3584,12 @@ handlers.drop = (view, event) => {
     }
 };
 handlers.paste = (view, event) => {
-    if (!view.state.facet(editable))
-        return;
+    if (view.state.readOnly)
+        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 {
@@ -3485,7 +3638,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;
@@ -3497,7 +3650,7 @@ handlers.copy = handlers.cut = (view, event) => {
     else {
         captureCopy(view, text);
     }
-    if (event.type == "cut" && view.state.facet(editable))
+    if (event.type == "cut" && !view.state.readOnly)
         view.dispatch({
             changes: ranges,
             scrollIntoView: true,
@@ -3553,6 +3706,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 {
@@ -4326,14 +4504,11 @@ class ViewState {
         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 */;
-        }
+        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();
+            this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
+        update.flags |= this.computeVisibleRanges();
         if (scrollTo)
             this.scrollTo = scrollTo;
         if (!this.mustEnforceCursorAssoc && update.selectionSet && update.view.lineWrapping &&
@@ -4342,12 +4517,17 @@ class ViewState {
     }
     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);
@@ -4357,7 +4537,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) ||
@@ -4366,12 +4546,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);
@@ -4383,17 +4563,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.scrollTo && (this.scrollTo.head < this.viewport.from || this.scrollTo.head > this.viewport.to))
+            this.viewport = this.getViewport(bias, this.scrollTo);
         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
@@ -4515,9 +4690,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);
@@ -4528,7 +4701,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;
@@ -4553,16 +4729,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;
@@ -4688,7 +4859,7 @@ function buildTheme(main, spec, scopes) {
     });
 }
 const baseTheme = buildTheme("." + baseThemeID, {
-    "&": {
+    "&.cm-editor": {
         position: "relative !important",
         boxSizing: "border-box",
         "&.cm-focused": {
@@ -4855,6 +5026,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
@@ -4895,13 +5068,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();
     }
@@ -4910,6 +5087,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;
@@ -5025,20 +5210,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);
@@ -5054,17 +5231,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) {
@@ -5091,6 +5277,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);
@@ -5138,7 +5326,7 @@ function safariSelectionRangeHack(view) {
 function applyDOMChange(view, start, end, typeOver) {
     let change, newSel;
     let sel = view.state.selection.main, bounds;
-    if (start > -1 && (bounds = view.docView.domBoundsAround(start, end, 0))) {
+    if (start > -1 && !view.state.readOnly && (bounds = view.docView.domBoundsAround(start, end, 0))) {
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
         let reader = new DOMReader(selPoints, view);
@@ -5199,9 +5387,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;
@@ -5291,8 +5479,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;
         }
@@ -5395,6 +5584,7 @@ class EditorView {
         this.editorAttrs = {};
         this.contentAttrs = {};
         this.bidiCache = [];
+        this.destroyed = false;
         /**
         @internal
         */
@@ -5420,7 +5610,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) => {
@@ -5493,6 +5683,10 @@ 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);
@@ -5542,6 +5736,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)
@@ -5591,6 +5789,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
@@ -5600,15 +5800,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.scrollTo == 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);
@@ -5645,7 +5848,7 @@ class EditorView {
                     this.docView.scrollRangeIntoView(this.viewState.scrollTo);
                     this.viewState.scrollTo = 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;
             }
         }
@@ -5671,16 +5874,20 @@ class EditorView {
         });
         updateAttrs(this.dom, this.editorAttrs, editorAttrs);
         this.editorAttrs = editorAttrs;
-        let contentAttrs = combineAttrs(this.state.facet(contentAttributes), {
+        let contentAttrs = {
             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}`,
             role: "textbox",
             "aria-multiline": "true"
-        });
+        };
+        if (this.state.readOnly)
+            contentAttrs["aria-readonly"] = "true";
+        combineAttrs(this.state.facet(contentAttributes), contentAttrs);
         updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
         this.contentAttrs = contentAttrs;
     }
@@ -5978,11 +6185,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
@@ -6070,12 +6279,12 @@ every time the view updates.
 */
 EditorView.updateListener = updateListener;
 /**
-Facet that controls whether the editor content is editable. When
-its highest-precedence value is `false`, editing is disabled,
-and the content element will no longer have its
-`contenteditable` attribute set to `true`. (Note that this
-doesn't affect API calls that change the editor content, even
-when those are bound to keys or buttons.)
+Facet that controls whether the editor content DOM is editable.
+When its highest-precedence value is `false`, the element will
+not longer have its `contenteditable` attribute set. (Note that
+this doesn't affect API calls that change the editor content,
+even when those are bound to keys or buttons. See the
+[`readOnly`](https://codemirror.net/6/docs/ref/#state.EditorState.readOnly) facet for that.)
 */
 EditorView.editable = editable;
 /**
@@ -6170,11 +6379,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];
@@ -6680,7 +6885,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",
@@ -6695,6 +6900,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"
@@ -6861,7 +7068,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);