@codemirror/view 0.19.27 → 0.19.31

package/dist/index.cjs

@@ -658,6 +658,7 @@ class TextView extends ContentView {
     split(from) {
         let result = new TextView(this.text.slice(from));
         this.text = this.text.slice(0, from);
+        this.markDirty();
         return result;
     }
     localPosFromDOM(node, offset) {
@@ -845,6 +846,9 @@ class CompositionView extends WidgetView {
     coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
     get isEditable() { return true; }
 }
+// Use two characters on Android, to prevent Chrome from closing the
+// virtual keyboard when backspacing after a widget (#602).
+const ZeroWidthSpace = browser.android ? "\u200b\u200b" : "\u200b";
 // 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.
@@ -861,12 +865,13 @@ class WidgetBufferView extends ContentView {
     split() { 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";
+            this.setDOM(document.createTextNode(ZeroWidthSpace));
+        else if (this.dirty && this.dom.nodeValue != ZeroWidthSpace)
+            this.dom.nodeValue = ZeroWidthSpace;
     }
     getSide() { return this.side; }
     domAtPos(pos) { return DOMPos.before(this.dom); }
+    localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
         let rects = clientRectsFor(this.dom);
@@ -1938,798 +1943,874 @@ class ViewUpdate {
     get empty() { return this.flags == 0 && this.transactions.length == 0; }
 }
 
-class DocView extends ContentView {
-    constructor(view) {
-        super();
-        this.view = view;
-        this.compositionDeco = Decoration.none;
-        this.decorations = [];
-        // Track a minimum width for the editor. When measuring sizes in
-        // measureVisibleLineHeights, this is updated to point at the width
-        // of a given element and its extent in the document. When a change
-        // happens in that range, these are reset. That way, once we've seen
-        // a line/element of a given length, we keep the editor wide enough
-        // to fit at least that element, until it is changed, at which point
-        // we forget it again.
-        this.minWidth = 0;
-        this.minWidthFrom = 0;
-        this.minWidthTo = 0;
-        // Track whether the DOM selection was set in a lossy way, so that
-        // we don't mess it up when reading it back it
-        this.impreciseAnchor = null;
-        this.impreciseHead = null;
-        this.forceSelection = false;
-        // Used by the resize observer to ignore resizes that we caused
-        // ourselves
-        this.lastUpdate = Date.now();
-        this.setDOM(view.contentDOM);
-        this.children = [new LineView];
-        this.children[0].setParent(this);
-        this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], this.updateDeco(), 0);
+/**
+Used to indicate [text direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection).
+*/
+exports.Direction = void 0;
+(function (Direction) {
+    // (These are chosen to match the base levels, in bidi algorithm
+    // terms, of spans in that direction.)
+    /**
+    Left-to-right.
+    */
+    Direction[Direction["LTR"] = 0] = "LTR";
+    /**
+    Right-to-left.
+    */
+    Direction[Direction["RTL"] = 1] = "RTL";
+})(exports.Direction || (exports.Direction = {}));
+const LTR = exports.Direction.LTR, RTL = exports.Direction.RTL;
+// Decode a string with each type encoded as log2(type)
+function dec(str) {
+    let result = [];
+    for (let i = 0; i < str.length; i++)
+        result.push(1 << +str[i]);
+    return result;
+}
+// Character types for codepoints 0 to 0xf8
+const LowTypes = dec("88888888888888888888888888888888888666888888787833333333337888888000000000000000000000000008888880000000000000000000000000088888888888888888888888888888888888887866668888088888663380888308888800000000000000000000000800000000000000000000000000000008");
+// Character types for codepoints 0x600 to 0x6f9
+const ArabicTypes = dec("4444448826627288999999999992222222222222222222222222222222222222222222222229999999999999999999994444444444644222822222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222999999949999999229989999223333333333");
+const Brackets = Object.create(null), BracketStack = [];
+// There's a lot more in
+// https://www.unicode.org/Public/UCD/latest/ucd/BidiBrackets.txt,
+// which are left out to keep code size down.
+for (let p of ["()", "[]", "{}"]) {
+    let l = p.charCodeAt(0), r = p.charCodeAt(1);
+    Brackets[l] = r;
+    Brackets[r] = -l;
+}
+function charType(ch) {
+    return ch <= 0xf7 ? LowTypes[ch] :
+        0x590 <= ch && ch <= 0x5f4 ? 2 /* R */ :
+            0x600 <= ch && ch <= 0x6f9 ? ArabicTypes[ch - 0x600] :
+                0x6ee <= ch && ch <= 0x8ac ? 4 /* AL */ :
+                    0x2000 <= ch && ch <= 0x200b ? 256 /* NI */ :
+                        ch == 0x200c ? 256 /* NI */ : 1 /* L */;
+}
+const BidiRE = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
+/**
+Represents a contiguous range of text that has a single direction
+(as in left-to-right or right-to-left).
+*/
+class BidiSpan {
+    /**
+    @internal
+    */
+    constructor(
+    /**
+    The start of the span (relative to the start of the line).
+    */
+    from, 
+    /**
+    The end of the span.
+    */
+    to, 
+    /**
+    The ["bidi
+    level"](https://unicode.org/reports/tr9/#Basic_Display_Algorithm)
+    of the span (in this context, 0 means
+    left-to-right, 1 means right-to-left, 2 means left-to-right
+    number inside right-to-left text).
+    */
+    level) {
+        this.from = from;
+        this.to = to;
+        this.level = level;
     }
-    get root() { return this.view.root; }
-    get editorView() { return this.view; }
-    get length() { return this.view.state.doc.length; }
-    // Update the document view to a given state. scrollIntoView can be
-    // used as a hint to compute a new viewport that includes that
-    // position, if we know the editor is going to scroll that position
-    // into view.
-    update(update) {
-        let changedRanges = update.changedRanges;
-        if (this.minWidth > 0 && changedRanges.length) {
-            if (!changedRanges.every(({ fromA, toA }) => toA < this.minWidthFrom || fromA > this.minWidthTo)) {
-                this.minWidth = 0;
-            }
-            else {
-                this.minWidthFrom = update.changes.mapPos(this.minWidthFrom, 1);
-                this.minWidthTo = update.changes.mapPos(this.minWidthTo, 1);
+    /**
+    The direction of this span.
+    */
+    get dir() { return this.level % 2 ? RTL : LTR; }
+    /**
+    @internal
+    */
+    side(end, dir) { return (this.dir == dir) == end ? this.to : this.from; }
+    /**
+    @internal
+    */
+    static find(order, index, level, assoc) {
+        let maybe = -1;
+        for (let i = 0; i < order.length; i++) {
+            let span = order[i];
+            if (span.from <= index && span.to >= index) {
+                if (span.level == level)
+                    return i;
+                // When multiple spans match, if assoc != 0, take the one that
+                // covers that side, otherwise take the one with the minimum
+                // level.
+                if (maybe < 0 || (assoc != 0 ? (assoc < 0 ? span.from < index : span.to > index) : order[maybe].level > span.level))
+                    maybe = i;
             }
         }
-        if (this.view.inputState.composing < 0)
-            this.compositionDeco = Decoration.none;
-        else if (update.transactions.length)
-            this.compositionDeco = computeCompositionDeco(this.view, update.changes);
-        // When the DOM nodes around the selection are moved to another
-        // parent, Chrome sometimes reports a different selection through
-        // getSelection than the one that it actually shows to the user.
-        // This forces a selection update when lines are joined to work
-        // around that. Issue #54
-        if ((browser.ie || browser.chrome) && !this.compositionDeco.size && update &&
-            update.state.doc.lines != update.startState.doc.lines)
-            this.forceSelection = true;
-        let prevDeco = this.decorations, deco = this.updateDeco();
-        let decoDiff = findChangedDeco(prevDeco, deco, update.changes);
-        changedRanges = ChangedRange.extendWithRanges(changedRanges, decoDiff);
-        if (this.dirty == 0 /* Not */ && changedRanges.length == 0) {
-            return false;
-        }
-        else {
-            this.updateInner(changedRanges, deco, update.startState.doc.length);
-            if (update.transactions.length)
-                this.lastUpdate = Date.now();
-            return true;
-        }
+        if (maybe < 0)
+            throw new RangeError("Index out of range");
+        return maybe;
     }
-    reset(sel) {
-        if (this.dirty) {
-            this.view.observer.ignore(() => this.view.docView.sync());
-            this.dirty = 0 /* Not */;
-            this.updateSelection(true);
+}
+// Reused array of character types
+const types = [];
+function computeOrder(line, direction) {
+    let len = line.length, outerType = direction == LTR ? 1 /* L */ : 2 /* R */, oppositeType = direction == LTR ? 2 /* R */ : 1 /* L */;
+    if (!line || outerType == 1 /* L */ && !BidiRE.test(line))
+        return trivialOrder(len);
+    // W1. Examine each non-spacing mark (NSM) in the level run, and
+    // change the type of the NSM to the type of the previous
+    // character. If the NSM is at the start of the level run, it will
+    // get the type of sor.
+    // W2. Search backwards from each instance of a European number
+    // until the first strong type (R, L, AL, or sor) is found. If an
+    // AL is found, change the type of the European number to Arabic
+    // number.
+    // W3. Change all ALs to R.
+    // (Left after this: L, R, EN, AN, ET, CS, NI)
+    for (let i = 0, prev = outerType, prevStrong = outerType; i < len; i++) {
+        let type = charType(line.charCodeAt(i));
+        if (type == 512 /* NSM */)
+            type = prev;
+        else if (type == 8 /* EN */ && prevStrong == 4 /* AL */)
+            type = 16 /* AN */;
+        types[i] = type == 4 /* AL */ ? 2 /* R */ : type;
+        if (type & 7 /* Strong */)
+            prevStrong = type;
+        prev = type;
+    }
+    // W5. A sequence of European terminators adjacent to European
+    // numbers changes to all European numbers.
+    // W6. Otherwise, separators and terminators change to Other
+    // Neutral.
+    // W7. Search backwards from each instance of a European number
+    // until the first strong type (R, L, or sor) is found. If an L is
+    // found, then change the type of the European number to L.
+    // (Left after this: L, R, EN+AN, NI)
+    for (let i = 0, prev = outerType, prevStrong = outerType; i < len; i++) {
+        let type = types[i];
+        if (type == 128 /* CS */) {
+            if (i < len - 1 && prev == types[i + 1] && (prev & 24 /* Num */))
+                type = types[i] = prev;
+            else
+                types[i] = 256 /* NI */;
         }
-        else {
-            this.updateSelection();
+        else if (type == 64 /* ET */) {
+            let end = i + 1;
+            while (end < len && types[end] == 64 /* ET */)
+                end++;
+            let replace = (i && prev == 8 /* EN */) || (end < len && types[end] == 8 /* EN */) ? (prevStrong == 1 /* L */ ? 1 /* L */ : 8 /* EN */) : 256 /* NI */;
+            for (let j = i; j < end; j++)
+                types[j] = replace;
+            i = end - 1;
         }
+        else if (type == 8 /* EN */ && prevStrong == 1 /* L */) {
+            types[i] = 1 /* L */;
+        }
+        prev = type;
+        if (type & 7 /* Strong */)
+            prevStrong = type;
     }
-    // Used by update and the constructor do perform the actual DOM
-    // update
-    updateInner(changes, deco, oldLength) {
-        this.view.viewState.mustMeasureContent = true;
-        this.updateChildren(changes, deco, oldLength);
-        let { observer } = this.view;
-        observer.ignore(() => {
-            // Lock the height during redrawing, since Chrome sometimes
-            // messes with the scroll position during DOM mutation (though
-            // no relayout is triggered and I cannot imagine how it can
-            // recompute the scroll position without a layout)
-            this.dom.style.height = this.view.viewState.contentHeight + "px";
-            this.dom.style.minWidth = this.minWidth ? this.minWidth + "px" : "";
-            // Chrome will sometimes, when DOM mutations occur directly
-            // around the selection, get confused and report a different
-            // selection from the one it displays (issue #218). This tries
-            // to detect that situation.
-            let track = browser.chrome || browser.ios ? { node: observer.selectionRange.focusNode, written: false } : undefined;
-            this.sync(track);
-            this.dirty = 0 /* Not */;
-            if (track && (track.written || observer.selectionRange.focusNode != track.node))
-                this.forceSelection = true;
-            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);
-        for (let i = changes.length - 1;; i--) {
-            let next = i >= 0 ? changes[i] : null;
-            if (!next)
-                break;
-            let { fromA, toA, fromB, toB } = next;
-            let { content, breakAtStart, openStart, openEnd } = ContentBuilder.build(this.view.state.doc, fromB, toB, deco);
-            let { i: toI, off: toOff } = cursor.findPos(toA, 1);
-            let { i: fromI, off: fromOff } = cursor.findPos(fromA, -1);
-            replaceRange(this, fromI, fromOff, toI, toOff, content, breakAtStart, openStart, openEnd);
-        }
-    }
-    // Sync the DOM selection to this.state.selection
-    updateSelection(mustRead = false, fromPointer = false) {
-        if (mustRead)
-            this.view.observer.readSelectionRange();
-        if (!(fromPointer || this.mayControlSelection()) ||
-            browser.ios && this.view.inputState.rapidCompositionStart)
-            return;
-        let force = this.forceSelection;
-        this.forceSelection = false;
-        let main = this.view.state.selection.main;
-        // FIXME need to handle the case where the selection falls inside a block range
-        let anchor = this.domAtPos(main.anchor);
-        let head = main.empty ? anchor : this.domAtPos(main.head);
-        // Always reset on Firefox when next to an uneditable node to
-        // avoid invisible cursor bugs (#111)
-        if (browser.gecko && main.empty && betweenUneditable(anchor)) {
-            let dummy = document.createTextNode("");
-            this.view.observer.ignore(() => anchor.node.insertBefore(dummy, anchor.node.childNodes[anchor.offset] || null));
-            anchor = head = new DOMPos(dummy, 0);
-            force = true;
-        }
-        let domSel = this.view.observer.selectionRange;
-        // If the selection is already here, or in an equivalent position, don't touch it
-        if (force || !domSel.focusNode ||
-            !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
-                    if (browser.gecko) {
-                        let nextTo = nextToUneditable(anchor.node, anchor.offset);
-                        if (nextTo && nextTo != (1 /* Before */ | 2 /* After */)) {
-                            let text = nearbyTextNode(anchor.node, anchor.offset, nextTo == 1 /* Before */ ? 1 : -1);
-                            if (text)
-                                anchor = new DOMPos(text, nextTo == 1 /* Before */ ? 0 : text.nodeValue.length);
-                        }
+    // N0. Process bracket pairs in an isolating run sequence
+    // sequentially in the logical order of the text positions of the
+    // opening paired brackets using the logic given below. Within this
+    // scope, bidirectional types EN and AN are treated as R.
+    for (let i = 0, sI = 0, context = 0, ch, br, type; i < len; i++) {
+        // Keeps [startIndex, type, strongSeen] triples for each open
+        // bracket on BracketStack.
+        if (br = Brackets[ch = line.charCodeAt(i)]) {
+            if (br < 0) { // Closing bracket
+                for (let sJ = sI - 3; sJ >= 0; sJ -= 3) {
+                    if (BracketStack[sJ + 1] == -br) {
+                        let flags = BracketStack[sJ + 2];
+                        let type = (flags & 2 /* EmbedInside */) ? outerType :
+                            !(flags & 4 /* OppositeInside */) ? 0 :
+                                (flags & 1 /* OppositeBefore */) ? oppositeType : outerType;
+                        if (type)
+                            types[i] = types[BracketStack[sJ]] = type;
+                        sI = sJ;
+                        break;
                     }
-                    rawSel.collapse(anchor.node, anchor.offset);
-                    if (main.bidiLevel != null && domSel.cursorBidiLevel != null)
-                        domSel.cursorBidiLevel = main.bidiLevel;
                 }
-                else if (rawSel.extend) {
-                    // Selection.extend can be used to create an 'inverted' selection
-                    // (one where the focus is before the anchor), but not all
-                    // browsers support it yet.
-                    rawSel.collapse(anchor.node, anchor.offset);
-                    rawSel.extend(head.node, head.offset);
+            }
+            else if (BracketStack.length == 189 /* MaxDepth */) {
+                break;
+            }
+            else {
+                BracketStack[sI++] = i;
+                BracketStack[sI++] = ch;
+                BracketStack[sI++] = context;
+            }
+        }
+        else if ((type = types[i]) == 2 /* R */ || type == 1 /* L */) {
+            let embed = type == outerType;
+            context = embed ? 0 : 1 /* OppositeBefore */;
+            for (let sJ = sI - 3; sJ >= 0; sJ -= 3) {
+                let cur = BracketStack[sJ + 2];
+                if (cur & 2 /* EmbedInside */)
+                    break;
+                if (embed) {
+                    BracketStack[sJ + 2] |= 2 /* EmbedInside */;
                 }
                 else {
-                    // Primitive (IE) way
-                    let range = document.createRange();
-                    if (main.anchor > main.head)
-                        [anchor, head] = [head, anchor];
-                    range.setEnd(head.node, head.offset);
-                    range.setStart(anchor.node, anchor.offset);
-                    rawSel.removeAllRanges();
-                    rawSel.addRange(range);
+                    if (cur & 4 /* OppositeInside */)
+                        break;
+                    BracketStack[sJ + 2] |= 4 /* OppositeInside */;
                 }
-            });
-            this.view.observer.setSelectionRange(anchor, head);
+            }
         }
-        this.impreciseAnchor = anchor.precise ? null : new DOMPos(domSel.anchorNode, domSel.anchorOffset);
-        this.impreciseHead = head.precise ? null : new DOMPos(domSel.focusNode, domSel.focusOffset);
-    }
-    enforceCursorAssoc() {
-        if (this.view.composing)
-            return;
-        let cursor = this.view.state.selection.main;
-        let sel = getSelection(this.root);
-        if (!cursor.empty || !cursor.assoc || !sel.modify)
-            return;
-        let line = LineView.find(this, cursor.head);
-        if (!line)
-            return;
-        let lineStart = line.posAtStart;
-        if (cursor.head == lineStart || cursor.head == lineStart + line.length)
-            return;
-        let before = this.coordsAt(cursor.head, -1), after = this.coordsAt(cursor.head, 1);
-        if (!before || !after || before.bottom > after.top)
-            return;
-        let dom = this.domAtPos(cursor.head + cursor.assoc);
-        sel.collapse(dom.node, dom.offset);
-        sel.modify("move", cursor.assoc < 0 ? "forward" : "backward", "lineboundary");
-    }
-    mayControlSelection() {
-        return this.view.state.facet(editable) ? this.root.activeElement == this.dom
-            : hasSelection(this.dom, this.view.observer.selectionRange);
     }
-    nearest(dom) {
-        for (let cur = dom; cur;) {
-            let domView = ContentView.get(cur);
-            if (domView && domView.rootView == this)
-                return domView;
-            cur = cur.parentNode;
+    // N1. A sequence of neutrals takes the direction of the
+    // surrounding strong text if the text on both sides has the same
+    // direction. European and Arabic numbers act as if they were R in
+    // terms of their influence on neutrals. Start-of-level-run (sor)
+    // and end-of-level-run (eor) are used at level run boundaries.
+    // N2. Any remaining neutrals take the embedding direction.
+    // (Left after this: L, R, EN+AN)
+    for (let i = 0; i < len; i++) {
+        if (types[i] == 256 /* NI */) {
+            let end = i + 1;
+            while (end < len && types[end] == 256 /* NI */)
+                end++;
+            let beforeL = (i ? types[i - 1] : outerType) == 1 /* L */;
+            let afterL = (end < len ? types[end] : outerType) == 1 /* L */;
+            let replace = beforeL == afterL ? (beforeL ? 1 /* L */ : 2 /* R */) : outerType;
+            for (let j = i; j < end; j++)
+                types[j] = replace;
+            i = end - 1;
         }
-        return null;
     }
-    posFromDOM(node, offset) {
-        let view = this.nearest(node);
-        if (!view)
-            throw new RangeError("Trying to find position for a DOM position outside of the document");
-        return view.localPosFromDOM(node, offset) + view.posAtStart;
+    // Here we depart from the documented algorithm, in order to avoid
+    // building up an actual levels array. Since there are only three
+    // levels (0, 1, 2) in an implementation that doesn't take
+    // explicit embedding into account, we can build up the order on
+    // the fly, without following the level-based algorithm.
+    let order = [];
+    if (outerType == 1 /* L */) {
+        for (let i = 0; i < len;) {
+            let start = i, rtl = types[i++] != 1 /* L */;
+            while (i < len && rtl == (types[i] != 1 /* L */))
+                i++;
+            if (rtl) {
+                for (let j = i; j > start;) {
+                    let end = j, l = types[--j] != 2 /* R */;
+                    while (j > start && l == (types[j - 1] != 2 /* R */))
+                        j--;
+                    order.push(new BidiSpan(j, end, l ? 2 : 1));
+                }
+            }
+            else {
+                order.push(new BidiSpan(start, i, 0));
+            }
+        }
     }
-    domAtPos(pos) {
-        let { i, off } = this.childCursor().findPos(pos, -1);
-        for (; i < this.children.length - 1;) {
-            let child = this.children[i];
-            if (off < child.length || child instanceof LineView)
-                break;
-            i++;
-            off = 0;
+    else {
+        for (let i = 0; i < len;) {
+            let start = i, rtl = types[i++] == 2 /* R */;
+            while (i < len && rtl == (types[i] == 2 /* R */))
+                i++;
+            order.push(new BidiSpan(start, i, rtl ? 1 : 2));
         }
-        return this.children[i].domAtPos(off);
     }
-    coordsAt(pos, side) {
-        for (let off = this.length, i = this.children.length - 1;; i--) {
-            let child = this.children[i], start = off - child.breakAfter - child.length;
-            if (pos > start ||
-                (pos == start && child.type != exports.BlockType.WidgetBefore && child.type != exports.BlockType.WidgetAfter &&
-                    (!i || side == 2 || this.children[i - 1].breakAfter ||
-                        (this.children[i - 1].type == exports.BlockType.WidgetBefore && side > -2))))
-                return child.coordsAt(pos - start, side);
-            off = start;
+    return order;
+}
+function trivialOrder(length) {
+    return [new BidiSpan(0, length, 0)];
+}
+let movedOver = "";
+function moveVisually(line, order, dir, start, forward) {
+    var _a;
+    let startIndex = start.head - line.from, spanI = -1;
+    if (startIndex == 0) {
+        if (!forward || !line.length)
+            return null;
+        if (order[0].level != dir) {
+            startIndex = order[0].side(false, dir);
+            spanI = 0;
         }
     }
-    measureVisibleLineHeights() {
-        let result = [], { from, to } = this.view.viewState.viewport;
-        let minWidth = Math.max(this.view.scrollDOM.clientWidth, this.minWidth) + 1;
-        for (let pos = 0, i = 0; i < this.children.length; i++) {
-            let child = this.children[i], end = pos + child.length;
-            if (end > to)
-                break;
-            if (pos >= from) {
-                result.push(child.dom.getBoundingClientRect().height);
-                let width = child.dom.scrollWidth;
-                if (width > minWidth) {
-                    this.minWidth = minWidth = width;
-                    this.minWidthFrom = pos;
-                    this.minWidthTo = end;
-                }
-            }
-            pos = end + child.breakAfter;
+    else if (startIndex == line.length) {
+        if (forward)
+            return null;
+        let last = order[order.length - 1];
+        if (last.level != dir) {
+            startIndex = last.side(true, dir);
+            spanI = order.length - 1;
         }
-        return result;
     }
-    measureTextSize() {
-        for (let child of this.children) {
-            if (child instanceof LineView) {
-                let measure = child.measureTextSize();
-                if (measure)
-                    return measure;
-            }
-        }
-        // If no workable line exists, force a layout of a measurable element
-        let dummy = document.createElement("div"), lineHeight, charWidth;
-        dummy.className = "cm-line";
-        dummy.textContent = "abc def ghi jkl mno pqr stu";
-        this.view.observer.ignore(() => {
-            this.dom.appendChild(dummy);
-            let rect = clientRectsFor(dummy.firstChild)[0];
-            lineHeight = dummy.getBoundingClientRect().height;
-            charWidth = rect ? rect.width / 27 : 7;
-            dummy.remove();
-        });
-        return { lineHeight, charWidth };
+    if (spanI < 0)
+        spanI = BidiSpan.find(order, startIndex, (_a = start.bidiLevel) !== null && _a !== void 0 ? _a : -1, start.assoc);
+    let span = order[spanI];
+    // End of span. (But not end of line--that was checked for above.)
+    if (startIndex == span.side(forward, dir)) {
+        span = order[spanI += forward ? 1 : -1];
+        startIndex = span.side(!forward, dir);
     }
-    childCursor(pos = this.length) {
-        // Move back to start of last element when possible, so that
-        // `ChildCursor.findPos` doesn't have to deal with the edge case
-        // of being after the last element.
-        let i = this.children.length;
-        if (i)
-            pos -= this.children[--i].length;
-        return new ChildCursor(this.children, pos, i);
+    let indexForward = forward == (span.dir == dir);
+    let nextIndex = text.findClusterBreak(line.text, startIndex, indexForward);
+    movedOver = line.text.slice(Math.min(startIndex, nextIndex), Math.max(startIndex, nextIndex));
+    if (nextIndex != span.side(forward, dir))
+        return state.EditorSelection.cursor(nextIndex + line.from, indexForward ? -1 : 1, span.level);
+    let nextSpan = spanI == (forward ? order.length - 1 : 0) ? null : order[spanI + (forward ? 1 : -1)];
+    if (!nextSpan && span.level != dir)
+        return state.EditorSelection.cursor(forward ? line.to : line.from, forward ? -1 : 1, dir);
+    if (nextSpan && nextSpan.level < span.level)
+        return state.EditorSelection.cursor(nextSpan.side(!forward, dir) + line.from, forward ? 1 : -1, nextSpan.level);
+    return state.EditorSelection.cursor(nextIndex + line.from, forward ? -1 : 1, span.level);
+}
+
+class DOMReader {
+    constructor(points, view) {
+        this.points = points;
+        this.view = view;
+        this.text = "";
+        this.lineBreak = view.state.lineBreak;
     }
-    computeBlockGapDeco() {
-        let deco = [], vs = this.view.viewState;
-        for (let pos = 0, i = 0;; i++) {
-            let next = i == vs.viewports.length ? null : vs.viewports[i];
-            let end = next ? next.from - 1 : this.length;
-            if (end > pos) {
-                let height = vs.lineBlockAt(end).bottom - vs.lineBlockAt(pos).top;
-                deco.push(Decoration.replace({ widget: new BlockGapWidget(height), block: true, inclusive: true }).range(pos, end));
-            }
-            if (!next)
+    readRange(start, end) {
+        if (!start)
+            return this;
+        let parent = start.parentNode;
+        for (let cur = start;;) {
+            this.findPointBefore(parent, cur);
+            this.readNode(cur);
+            let next = cur.nextSibling;
+            if (next == end)
                 break;
-            pos = next.to + 1;
+            let view = ContentView.get(cur), nextView = ContentView.get(next);
+            if (view && nextView ? view.breakAfter :
+                (view ? view.breakAfter : isBlockElement(cur)) ||
+                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore)))
+                this.text += this.lineBreak;
+            cur = next;
         }
-        return Decoration.set(deco);
-    }
-    updateDeco() {
-        return this.decorations = [
-            ...this.view.pluginField(PluginField.decorations),
-            ...this.view.state.facet(decorations),
-            this.compositionDeco,
-            this.computeBlockGapDeco(),
-            this.view.viewState.lineGapDeco
-        ];
+        this.findPointBefore(parent, end);
+        return this;
     }
-    scrollIntoView({ range, center }) {
-        let rect = this.coordsAt(range.head, range.empty ? range.assoc : range.head > range.anchor ? -1 : 1), other;
-        if (!rect)
+    readNode(node) {
+        if (node.cmIgnore)
             return;
-        if (!range.empty && (other = this.coordsAt(range.anchor, range.anchor > range.head ? -1 : 1)))
-            rect = { left: Math.min(rect.left, other.left), top: Math.min(rect.top, other.top),
-                right: Math.max(rect.right, other.right), bottom: Math.max(rect.bottom, other.bottom) };
-        let mLeft = 0, mRight = 0, mTop = 0, mBottom = 0;
-        for (let margins of this.view.pluginField(PluginField.scrollMargins))
-            if (margins) {
-                let { left, right, top, bottom } = margins;
-                if (left != null)
-                    mLeft = Math.max(mLeft, left);
-                if (right != null)
-                    mRight = Math.max(mRight, right);
-                if (top != null)
-                    mTop = Math.max(mTop, top);
-                if (bottom != null)
-                    mBottom = Math.max(mBottom, bottom);
-            }
-        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, center);
-    }
-}
-function betweenUneditable(pos) {
-    return pos.node.nodeType == 1 && pos.node.firstChild &&
-        (pos.offset == 0 || pos.node.childNodes[pos.offset - 1].contentEditable == "false") &&
-        (pos.offset == pos.node.childNodes.length || pos.node.childNodes[pos.offset].contentEditable == "false");
-}
-class BlockGapWidget extends WidgetType {
-    constructor(height) {
-        super();
-        this.height = height;
-    }
-    toDOM() {
-        let elt = document.createElement("div");
-        this.updateDOM(elt);
-        return elt;
-    }
-    eq(other) { return other.height == this.height; }
-    updateDOM(elt) {
-        elt.style.height = this.height + "px";
-        return true;
-    }
-    get estimatedHeight() { return this.height; }
-}
-function computeCompositionDeco(view, changes) {
-    let sel = view.observer.selectionRange;
-    let textNode = sel.focusNode && nearbyTextNode(sel.focusNode, sel.focusOffset, 0);
-    if (!textNode)
-        return Decoration.none;
-    let cView = view.docView.nearest(textNode);
-    if (!cView)
-        return Decoration.none;
-    let from, to, topNode = textNode;
-    if (cView instanceof LineView) {
-        while (topNode.parentNode != cView.dom)
-            topNode = topNode.parentNode;
-        let prev = topNode.previousSibling;
-        while (prev && !ContentView.get(prev))
-            prev = prev.previousSibling;
-        from = to = prev ? ContentView.get(prev).posAtEnd : cView.posAtStart;
-    }
-    else {
-        for (;;) {
-            let { parent } = cView;
-            if (!parent)
-                return Decoration.none;
-            if (parent instanceof LineView)
-                break;
-            cView = parent;
+        let view = ContentView.get(node);
+        let fromView = view && view.overrideDOMText;
+        let text;
+        if (fromView != null)
+            text = fromView.sliceString(0, undefined, this.lineBreak);
+        else if (node.nodeType == 3)
+            text = node.nodeValue;
+        else if (node.nodeName == "BR")
+            text = node.nextSibling ? this.lineBreak : "";
+        else if (node.nodeType == 1)
+            this.readRange(node.firstChild, null);
+        if (text != null) {
+            this.findPointIn(node, text.length);
+            this.text += text;
+            // Chrome inserts two newlines when pressing shift-enter at the
+            // end of a line. This drops one of those.
+            if (browser.chrome && this.view.inputState.lastKeyCode == 13 && !node.nextSibling && /\n\n$/.test(this.text))
+                this.text = this.text.slice(0, -1);
         }
-        from = cView.posAtStart;
-        to = from + cView.length;
-        topNode = cView.dom;
-    }
-    let newFrom = changes.mapPos(from, 1), newTo = Math.max(newFrom, changes.mapPos(to, -1));
-    let text = textNode.nodeValue, { state } = view;
-    if (newTo - newFrom < text.length) {
-        if (state.sliceDoc(newFrom, Math.min(state.doc.length, newFrom + text.length)) == text)
-            newTo = newFrom + text.length;
-        else if (state.sliceDoc(Math.max(0, newTo - text.length), newTo) == text)
-            newFrom = newTo - text.length;
-        else
-            return Decoration.none;
-    }
-    else if (state.sliceDoc(newFrom, newTo) != text) {
-        return Decoration.none;
     }
-    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(topNode, textNode) }).range(newFrom, newTo));
-}
-class CompositionWidget extends WidgetType {
-    constructor(top, text) {
-        super();
-        this.top = top;
-        this.text = text;
+    findPointBefore(node, next) {
+        for (let point of this.points)
+            if (point.node == node && node.childNodes[point.offset] == next)
+                point.pos = this.text.length;
     }
-    eq(other) { return this.top == other.top && this.text == other.text; }
-    toDOM() { return this.top; }
-    ignoreEvent() { return false; }
-    get customView() { return CompositionView; }
-}
-function nearbyTextNode(node, offset, side) {
-    for (;;) {
-        if (node.nodeType == 3)
-            return node;
-        if (node.nodeType == 1 && offset > 0 && side <= 0) {
-            node = node.childNodes[offset - 1];
-            offset = maxOffset(node);
-        }
-        else if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
-            node = node.childNodes[offset];
-            offset = 0;
-        }
-        else {
-            return null;
-        }
+    findPointIn(node, maxLen) {
+        for (let point of this.points)
+            if (point.node == node)
+                point.pos = this.text.length + Math.min(point.offset, maxLen);
     }
 }
-function nextToUneditable(node, offset) {
-    if (node.nodeType != 1)
-        return 0;
-    return (offset && node.childNodes[offset - 1].contentEditable == "false" ? 1 /* Before */ : 0) |
-        (offset < node.childNodes.length && node.childNodes[offset].contentEditable == "false" ? 2 /* After */ : 0);
+function isBlockElement(node) {
+    return node.nodeType == 1 && /^(DIV|P|LI|UL|OL|BLOCKQUOTE|DD|DT|H\d|SECTION|PRE)$/.test(node.nodeName);
 }
-class DecorationComparator$1 {
-    constructor() {
-        this.changes = [];
+class DOMPoint {
+    constructor(node, offset) {
+        this.node = node;
+        this.offset = offset;
+        this.pos = -1;
     }
-    compareRange(from, to) { addRange(from, to, this.changes); }
-    comparePoint(from, to) { addRange(from, to, this.changes); }
 }
-function findChangedDeco(a, b, diff) {
-    let comp = new DecorationComparator$1;
-    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') {
+
+class DocView extends ContentView {
+    constructor(view) {
+        super();
+        this.view = view;
+        this.compositionDeco = Decoration.none;
+        this.decorations = [];
+        // Track a minimum width for the editor. When measuring sizes in
+        // measureVisibleLineHeights, this is updated to point at the width
+        // of a given element and its extent in the document. When a change
+        // happens in that range, these are reset. That way, once we've seen
+        // a line/element of a given length, we keep the editor wide enough
+        // to fit at least that element, until it is changed, at which point
+        // we forget it again.
+        this.minWidth = 0;
+        this.minWidthFrom = 0;
+        this.minWidthTo = 0;
+        // Track whether the DOM selection was set in a lossy way, so that
+        // we don't mess it up when reading it back it
+        this.impreciseAnchor = null;
+        this.impreciseHead = null;
+        this.forceSelection = false;
+        // Used by the resize observer to ignore resizes that we caused
+        // ourselves
+        this.lastUpdate = Date.now();
+        this.setDOM(view.contentDOM);
+        this.children = [new LineView];
+        this.children[0].setParent(this);
+        this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], this.updateDeco(), 0);
+    }
+    get root() { return this.view.root; }
+    get editorView() { return this.view; }
+    get length() { return this.view.state.doc.length; }
+    // Update the document view to a given state. scrollIntoView can be
+    // used as a hint to compute a new viewport that includes that
+    // position, if we know the editor is going to scroll that position
+    // into view.
+    update(update) {
+        let changedRanges = update.changedRanges;
+        if (this.minWidth > 0 && changedRanges.length) {
+            if (!changedRanges.every(({ fromA, toA }) => toA < this.minWidthFrom || fromA > this.minWidthTo)) {
+                this.minWidth = this.minWidthFrom = this.minWidthTo = 0;
+            }
+            else {
+                this.minWidthFrom = update.changes.mapPos(this.minWidthFrom, 1);
+                this.minWidthTo = update.changes.mapPos(this.minWidthTo, 1);
+            }
+        }
+        if (this.view.inputState.composing < 0)
+            this.compositionDeco = Decoration.none;
+        else if (update.transactions.length || this.dirty)
+            this.compositionDeco = computeCompositionDeco(this.view, update.changes);
+        // When the DOM nodes around the selection are moved to another
+        // parent, Chrome sometimes reports a different selection through
+        // getSelection than the one that it actually shows to the user.
+        // This forces a selection update when lines are joined to work
+        // around that. Issue #54
+        if ((browser.ie || browser.chrome) && !this.compositionDeco.size && update &&
+            update.state.doc.lines != update.startState.doc.lines)
+            this.forceSelection = true;
+        let prevDeco = this.decorations, deco = this.updateDeco();
+        let decoDiff = findChangedDeco(prevDeco, deco, update.changes);
+        changedRanges = ChangedRange.extendWithRanges(changedRanges, decoDiff);
+        if (this.dirty == 0 /* Not */ && changedRanges.length == 0) {
+            return false;
+        }
+        else {
+            this.updateInner(changedRanges, deco, update.startState.doc.length);
+            if (update.transactions.length)
+                this.lastUpdate = Date.now();
             return true;
         }
     }
-    return false;
-}
-
-/**
-Used to indicate [text direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection).
-*/
-exports.Direction = void 0;
-(function (Direction) {
-    // (These are chosen to match the base levels, in bidi algorithm
-    // terms, of spans in that direction.)
-    /**
-    Left-to-right.
-    */
-    Direction[Direction["LTR"] = 0] = "LTR";
-    /**
-    Right-to-left.
-    */
-    Direction[Direction["RTL"] = 1] = "RTL";
-})(exports.Direction || (exports.Direction = {}));
-const LTR = exports.Direction.LTR, RTL = exports.Direction.RTL;
-// Decode a string with each type encoded as log2(type)
-function dec(str) {
-    let result = [];
-    for (let i = 0; i < str.length; i++)
-        result.push(1 << +str[i]);
-    return result;
-}
-// Character types for codepoints 0 to 0xf8
-const LowTypes = dec("88888888888888888888888888888888888666888888787833333333337888888000000000000000000000000008888880000000000000000000000000088888888888888888888888888888888888887866668888088888663380888308888800000000000000000000000800000000000000000000000000000008");
-// Character types for codepoints 0x600 to 0x6f9
-const ArabicTypes = dec("4444448826627288999999999992222222222222222222222222222222222222222222222229999999999999999999994444444444644222822222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222999999949999999229989999223333333333");
-const Brackets = Object.create(null), BracketStack = [];
-// There's a lot more in
-// https://www.unicode.org/Public/UCD/latest/ucd/BidiBrackets.txt,
-// which are left out to keep code size down.
-for (let p of ["()", "[]", "{}"]) {
-    let l = p.charCodeAt(0), r = p.charCodeAt(1);
-    Brackets[l] = r;
-    Brackets[r] = -l;
-}
-function charType(ch) {
-    return ch <= 0xf7 ? LowTypes[ch] :
-        0x590 <= ch && ch <= 0x5f4 ? 2 /* R */ :
-            0x600 <= ch && ch <= 0x6f9 ? ArabicTypes[ch - 0x600] :
-                0x6ee <= ch && ch <= 0x8ac ? 4 /* AL */ :
-                    0x2000 <= ch && ch <= 0x200b ? 256 /* NI */ :
-                        ch == 0x200c ? 256 /* NI */ : 1 /* L */;
-}
-const BidiRE = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
-/**
-Represents a contiguous range of text that has a single direction
-(as in left-to-right or right-to-left).
-*/
-class BidiSpan {
-    /**
-    @internal
-    */
-    constructor(
-    /**
-    The start of the span (relative to the start of the line).
-    */
-    from, 
-    /**
-    The end of the span.
-    */
-    to, 
-    /**
-    The ["bidi
-    level"](https://unicode.org/reports/tr9/#Basic_Display_Algorithm)
-    of the span (in this context, 0 means
-    left-to-right, 1 means right-to-left, 2 means left-to-right
-    number inside right-to-left text).
-    */
-    level) {
-        this.from = from;
-        this.to = to;
-        this.level = level;
+    // Used by update and the constructor do perform the actual DOM
+    // update
+    updateInner(changes, deco, oldLength) {
+        this.view.viewState.mustMeasureContent = true;
+        this.updateChildren(changes, deco, oldLength);
+        let { observer } = this.view;
+        observer.ignore(() => {
+            // Lock the height during redrawing, since Chrome sometimes
+            // messes with the scroll position during DOM mutation (though
+            // no relayout is triggered and I cannot imagine how it can
+            // recompute the scroll position without a layout)
+            this.dom.style.height = this.view.viewState.contentHeight + "px";
+            this.dom.style.minWidth = this.minWidth ? this.minWidth + "px" : "";
+            // Chrome will sometimes, when DOM mutations occur directly
+            // around the selection, get confused and report a different
+            // selection from the one it displays (issue #218). This tries
+            // to detect that situation.
+            let track = browser.chrome || browser.ios ? { node: observer.selectionRange.focusNode, written: false } : undefined;
+            this.sync(track);
+            this.dirty = 0 /* Not */;
+            if (track && (track.written || observer.selectionRange.focusNode != track.node))
+                this.forceSelection = true;
+            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);
     }
-    /**
-    The direction of this span.
-    */
-    get dir() { return this.level % 2 ? RTL : LTR; }
-    /**
-    @internal
-    */
-    side(end, dir) { return (this.dir == dir) == end ? this.to : this.from; }
-    /**
-    @internal
-    */
-    static find(order, index, level, assoc) {
-        let maybe = -1;
-        for (let i = 0; i < order.length; i++) {
-            let span = order[i];
-            if (span.from <= index && span.to >= index) {
-                if (span.level == level)
-                    return i;
-                // When multiple spans match, if assoc != 0, take the one that
-                // covers that side, otherwise take the one with the minimum
-                // level.
-                if (maybe < 0 || (assoc != 0 ? (assoc < 0 ? span.from < index : span.to > index) : order[maybe].level > span.level))
-                    maybe = i;
-            }
+    updateChildren(changes, deco, oldLength) {
+        let cursor = this.childCursor(oldLength);
+        for (let i = changes.length - 1;; i--) {
+            let next = i >= 0 ? changes[i] : null;
+            if (!next)
+                break;
+            let { fromA, toA, fromB, toB } = next;
+            let { content, breakAtStart, openStart, openEnd } = ContentBuilder.build(this.view.state.doc, fromB, toB, deco);
+            let { i: toI, off: toOff } = cursor.findPos(toA, 1);
+            let { i: fromI, off: fromOff } = cursor.findPos(fromA, -1);
+            replaceRange(this, fromI, fromOff, toI, toOff, content, breakAtStart, openStart, openEnd);
         }
-        if (maybe < 0)
-            throw new RangeError("Index out of range");
-        return maybe;
     }
-}
-// Reused array of character types
-const types = [];
-function computeOrder(line, direction) {
-    let len = line.length, outerType = direction == LTR ? 1 /* L */ : 2 /* R */, oppositeType = direction == LTR ? 2 /* R */ : 1 /* L */;
-    if (!line || outerType == 1 /* L */ && !BidiRE.test(line))
-        return trivialOrder(len);
-    // W1. Examine each non-spacing mark (NSM) in the level run, and
-    // change the type of the NSM to the type of the previous
-    // character. If the NSM is at the start of the level run, it will
-    // get the type of sor.
-    // W2. Search backwards from each instance of a European number
-    // until the first strong type (R, L, AL, or sor) is found. If an
-    // AL is found, change the type of the European number to Arabic
-    // number.
-    // W3. Change all ALs to R.
-    // (Left after this: L, R, EN, AN, ET, CS, NI)
-    for (let i = 0, prev = outerType, prevStrong = outerType; i < len; i++) {
-        let type = charType(line.charCodeAt(i));
-        if (type == 512 /* NSM */)
-            type = prev;
-        else if (type == 8 /* EN */ && prevStrong == 4 /* AL */)
-            type = 16 /* AN */;
-        types[i] = type == 4 /* AL */ ? 2 /* R */ : type;
-        if (type & 7 /* Strong */)
-            prevStrong = type;
-        prev = type;
+    // Sync the DOM selection to this.state.selection
+    updateSelection(mustRead = false, fromPointer = false) {
+        if (mustRead)
+            this.view.observer.readSelectionRange();
+        if (!(fromPointer || this.mayControlSelection()) ||
+            browser.ios && this.view.inputState.rapidCompositionStart)
+            return;
+        let force = this.forceSelection;
+        this.forceSelection = false;
+        let main = this.view.state.selection.main;
+        // FIXME need to handle the case where the selection falls inside a block range
+        let anchor = this.domAtPos(main.anchor);
+        let head = main.empty ? anchor : this.domAtPos(main.head);
+        // Always reset on Firefox when next to an uneditable node to
+        // avoid invisible cursor bugs (#111)
+        if (browser.gecko && main.empty && betweenUneditable(anchor)) {
+            let dummy = document.createTextNode("");
+            this.view.observer.ignore(() => anchor.node.insertBefore(dummy, anchor.node.childNodes[anchor.offset] || null));
+            anchor = head = new DOMPos(dummy, 0);
+            force = true;
+        }
+        let domSel = this.view.observer.selectionRange;
+        // If the selection is already here, or in an equivalent position, don't touch it
+        if (force || !domSel.focusNode ||
+            !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
+                    if (browser.gecko) {
+                        let nextTo = nextToUneditable(anchor.node, anchor.offset);
+                        if (nextTo && nextTo != (1 /* Before */ | 2 /* After */)) {
+                            let text = nearbyTextNode(anchor.node, anchor.offset, nextTo == 1 /* Before */ ? 1 : -1);
+                            if (text)
+                                anchor = new DOMPos(text, nextTo == 1 /* Before */ ? 0 : text.nodeValue.length);
+                        }
+                    }
+                    rawSel.collapse(anchor.node, anchor.offset);
+                    if (main.bidiLevel != null && domSel.cursorBidiLevel != null)
+                        domSel.cursorBidiLevel = main.bidiLevel;
+                }
+                else if (rawSel.extend) {
+                    // Selection.extend can be used to create an 'inverted' selection
+                    // (one where the focus is before the anchor), but not all
+                    // browsers support it yet.
+                    rawSel.collapse(anchor.node, anchor.offset);
+                    rawSel.extend(head.node, head.offset);
+                }
+                else {
+                    // Primitive (IE) way
+                    let range = document.createRange();
+                    if (main.anchor > main.head)
+                        [anchor, head] = [head, anchor];
+                    range.setEnd(head.node, head.offset);
+                    range.setStart(anchor.node, anchor.offset);
+                    rawSel.removeAllRanges();
+                    rawSel.addRange(range);
+                }
+            });
+            this.view.observer.setSelectionRange(anchor, head);
+        }
+        this.impreciseAnchor = anchor.precise ? null : new DOMPos(domSel.anchorNode, domSel.anchorOffset);
+        this.impreciseHead = head.precise ? null : new DOMPos(domSel.focusNode, domSel.focusOffset);
     }
-    // W5. A sequence of European terminators adjacent to European
-    // numbers changes to all European numbers.
-    // W6. Otherwise, separators and terminators change to Other
-    // Neutral.
-    // W7. Search backwards from each instance of a European number
-    // until the first strong type (R, L, or sor) is found. If an L is
-    // found, then change the type of the European number to L.
-    // (Left after this: L, R, EN+AN, NI)
-    for (let i = 0, prev = outerType, prevStrong = outerType; i < len; i++) {
-        let type = types[i];
-        if (type == 128 /* CS */) {
-            if (i < len - 1 && prev == types[i + 1] && (prev & 24 /* Num */))
-                type = types[i] = prev;
-            else
-                types[i] = 256 /* NI */;
+    enforceCursorAssoc() {
+        if (this.compositionDeco.size)
+            return;
+        let cursor = this.view.state.selection.main;
+        let sel = getSelection(this.root);
+        if (!cursor.empty || !cursor.assoc || !sel.modify)
+            return;
+        let line = LineView.find(this, cursor.head);
+        if (!line)
+            return;
+        let lineStart = line.posAtStart;
+        if (cursor.head == lineStart || cursor.head == lineStart + line.length)
+            return;
+        let before = this.coordsAt(cursor.head, -1), after = this.coordsAt(cursor.head, 1);
+        if (!before || !after || before.bottom > after.top)
+            return;
+        let dom = this.domAtPos(cursor.head + cursor.assoc);
+        sel.collapse(dom.node, dom.offset);
+        sel.modify("move", cursor.assoc < 0 ? "forward" : "backward", "lineboundary");
+    }
+    mayControlSelection() {
+        return this.view.state.facet(editable) ? this.root.activeElement == this.dom
+            : hasSelection(this.dom, this.view.observer.selectionRange);
+    }
+    nearest(dom) {
+        for (let cur = dom; cur;) {
+            let domView = ContentView.get(cur);
+            if (domView && domView.rootView == this)
+                return domView;
+            cur = cur.parentNode;
         }
-        else if (type == 64 /* ET */) {
-            let end = i + 1;
-            while (end < len && types[end] == 64 /* ET */)
-                end++;
-            let replace = (i && prev == 8 /* EN */) || (end < len && types[end] == 8 /* EN */) ? (prevStrong == 1 /* L */ ? 1 /* L */ : 8 /* EN */) : 256 /* NI */;
-            for (let j = i; j < end; j++)
-                types[j] = replace;
-            i = end - 1;
+        return null;
+    }
+    posFromDOM(node, offset) {
+        let view = this.nearest(node);
+        if (!view)
+            throw new RangeError("Trying to find position for a DOM position outside of the document");
+        return view.localPosFromDOM(node, offset) + view.posAtStart;
+    }
+    domAtPos(pos) {
+        let { i, off } = this.childCursor().findPos(pos, -1);
+        for (; i < this.children.length - 1;) {
+            let child = this.children[i];
+            if (off < child.length || child instanceof LineView)
+                break;
+            i++;
+            off = 0;
         }
-        else if (type == 8 /* EN */ && prevStrong == 1 /* L */) {
-            types[i] = 1 /* L */;
+        return this.children[i].domAtPos(off);
+    }
+    coordsAt(pos, side) {
+        for (let off = this.length, i = this.children.length - 1;; i--) {
+            let child = this.children[i], start = off - child.breakAfter - child.length;
+            if (pos > start ||
+                (pos == start && child.type != exports.BlockType.WidgetBefore && child.type != exports.BlockType.WidgetAfter &&
+                    (!i || side == 2 || this.children[i - 1].breakAfter ||
+                        (this.children[i - 1].type == exports.BlockType.WidgetBefore && side > -2))))
+                return child.coordsAt(pos - start, side);
+            off = start;
         }
-        prev = type;
-        if (type & 7 /* Strong */)
-            prevStrong = type;
     }
-    // N0. Process bracket pairs in an isolating run sequence
-    // sequentially in the logical order of the text positions of the
-    // opening paired brackets using the logic given below. Within this
-    // scope, bidirectional types EN and AN are treated as R.
-    for (let i = 0, sI = 0, context = 0, ch, br, type; i < len; i++) {
-        // Keeps [startIndex, type, strongSeen] triples for each open
-        // bracket on BracketStack.
-        if (br = Brackets[ch = line.charCodeAt(i)]) {
-            if (br < 0) { // Closing bracket
-                for (let sJ = sI - 3; sJ >= 0; sJ -= 3) {
-                    if (BracketStack[sJ + 1] == -br) {
-                        let flags = BracketStack[sJ + 2];
-                        let type = (flags & 2 /* EmbedInside */) ? outerType :
-                            !(flags & 4 /* OppositeInside */) ? 0 :
-                                (flags & 1 /* OppositeBefore */) ? oppositeType : outerType;
-                        if (type)
-                            types[i] = types[BracketStack[sJ]] = type;
-                        sI = sJ;
-                        break;
+    measureVisibleLineHeights() {
+        let result = [], { from, to } = this.view.viewState.viewport;
+        let contentWidth = this.view.contentDOM.clientWidth;
+        let isWider = contentWidth > Math.max(this.view.scrollDOM.clientWidth, this.minWidth) + 1;
+        let widest = -1;
+        for (let pos = 0, i = 0; i < this.children.length; i++) {
+            let child = this.children[i], end = pos + child.length;
+            if (end > to)
+                break;
+            if (pos >= from) {
+                let childRect = child.dom.getBoundingClientRect();
+                result.push(childRect.height);
+                if (isWider) {
+                    let last = child.dom.lastChild;
+                    let rects = last ? clientRectsFor(last) : [];
+                    if (rects.length) {
+                        let rect = rects[rects.length - 1];
+                        let width = this.view.textDirection == exports.Direction.LTR ? rect.right - childRect.left
+                            : childRect.right - rect.left;
+                        if (width > widest) {
+                            widest = width;
+                            this.minWidth = contentWidth;
+                            this.minWidthFrom = pos;
+                            this.minWidthTo = end;
+                        }
                     }
                 }
             }
-            else if (BracketStack.length == 189 /* MaxDepth */) {
-                break;
-            }
-            else {
-                BracketStack[sI++] = i;
-                BracketStack[sI++] = ch;
-                BracketStack[sI++] = context;
-            }
+            pos = end + child.breakAfter;
         }
-        else if ((type = types[i]) == 2 /* R */ || type == 1 /* L */) {
-            let embed = type == outerType;
-            context = embed ? 0 : 1 /* OppositeBefore */;
-            for (let sJ = sI - 3; sJ >= 0; sJ -= 3) {
-                let cur = BracketStack[sJ + 2];
-                if (cur & 2 /* EmbedInside */)
-                    break;
-                if (embed) {
-                    BracketStack[sJ + 2] |= 2 /* EmbedInside */;
-                }
-                else {
-                    if (cur & 4 /* OppositeInside */)
-                        break;
-                    BracketStack[sJ + 2] |= 4 /* OppositeInside */;
-                }
+        return result;
+    }
+    measureTextSize() {
+        for (let child of this.children) {
+            if (child instanceof LineView) {
+                let measure = child.measureTextSize();
+                if (measure)
+                    return measure;
             }
         }
+        // If no workable line exists, force a layout of a measurable element
+        let dummy = document.createElement("div"), lineHeight, charWidth;
+        dummy.className = "cm-line";
+        dummy.textContent = "abc def ghi jkl mno pqr stu";
+        this.view.observer.ignore(() => {
+            this.dom.appendChild(dummy);
+            let rect = clientRectsFor(dummy.firstChild)[0];
+            lineHeight = dummy.getBoundingClientRect().height;
+            charWidth = rect ? rect.width / 27 : 7;
+            dummy.remove();
+        });
+        return { lineHeight, charWidth };
     }
-    // N1. A sequence of neutrals takes the direction of the
-    // surrounding strong text if the text on both sides has the same
-    // direction. European and Arabic numbers act as if they were R in
-    // terms of their influence on neutrals. Start-of-level-run (sor)
-    // and end-of-level-run (eor) are used at level run boundaries.
-    // N2. Any remaining neutrals take the embedding direction.
-    // (Left after this: L, R, EN+AN)
-    for (let i = 0; i < len; i++) {
-        if (types[i] == 256 /* NI */) {
-            let end = i + 1;
-            while (end < len && types[end] == 256 /* NI */)
-                end++;
-            let beforeL = (i ? types[i - 1] : outerType) == 1 /* L */;
-            let afterL = (end < len ? types[end] : outerType) == 1 /* L */;
-            let replace = beforeL == afterL ? (beforeL ? 1 /* L */ : 2 /* R */) : outerType;
-            for (let j = i; j < end; j++)
-                types[j] = replace;
-            i = end - 1;
-        }
+    childCursor(pos = this.length) {
+        // Move back to start of last element when possible, so that
+        // `ChildCursor.findPos` doesn't have to deal with the edge case
+        // of being after the last element.
+        let i = this.children.length;
+        if (i)
+            pos -= this.children[--i].length;
+        return new ChildCursor(this.children, pos, i);
     }
-    // Here we depart from the documented algorithm, in order to avoid
-    // building up an actual levels array. Since there are only three
-    // levels (0, 1, 2) in an implementation that doesn't take
-    // explicit embedding into account, we can build up the order on
-    // the fly, without following the level-based algorithm.
-    let order = [];
-    if (outerType == 1 /* L */) {
-        for (let i = 0; i < len;) {
-            let start = i, rtl = types[i++] != 1 /* L */;
-            while (i < len && rtl == (types[i] != 1 /* L */))
-                i++;
-            if (rtl) {
-                for (let j = i; j > start;) {
-                    let end = j, l = types[--j] != 2 /* R */;
-                    while (j > start && l == (types[j - 1] != 2 /* R */))
-                        j--;
-                    order.push(new BidiSpan(j, end, l ? 2 : 1));
-                }
-            }
-            else {
-                order.push(new BidiSpan(start, i, 0));
+    computeBlockGapDeco() {
+        let deco = [], vs = this.view.viewState;
+        for (let pos = 0, i = 0;; i++) {
+            let next = i == vs.viewports.length ? null : vs.viewports[i];
+            let end = next ? next.from - 1 : this.length;
+            if (end > pos) {
+                let height = vs.lineBlockAt(end).bottom - vs.lineBlockAt(pos).top;
+                deco.push(Decoration.replace({ widget: new BlockGapWidget(height), block: true, inclusive: true }).range(pos, end));
             }
+            if (!next)
+                break;
+            pos = next.to + 1;
         }
+        return Decoration.set(deco);
+    }
+    updateDeco() {
+        return this.decorations = [
+            ...this.view.pluginField(PluginField.decorations),
+            ...this.view.state.facet(decorations),
+            this.compositionDeco,
+            this.computeBlockGapDeco(),
+            this.view.viewState.lineGapDeco
+        ];
+    }
+    scrollIntoView({ range, center }) {
+        let rect = this.coordsAt(range.head, range.empty ? range.assoc : range.head > range.anchor ? -1 : 1), other;
+        if (!rect)
+            return;
+        if (!range.empty && (other = this.coordsAt(range.anchor, range.anchor > range.head ? -1 : 1)))
+            rect = { left: Math.min(rect.left, other.left), top: Math.min(rect.top, other.top),
+                right: Math.max(rect.right, other.right), bottom: Math.max(rect.bottom, other.bottom) };
+        let mLeft = 0, mRight = 0, mTop = 0, mBottom = 0;
+        for (let margins of this.view.pluginField(PluginField.scrollMargins))
+            if (margins) {
+                let { left, right, top, bottom } = margins;
+                if (left != null)
+                    mLeft = Math.max(mLeft, left);
+                if (right != null)
+                    mRight = Math.max(mRight, right);
+                if (top != null)
+                    mTop = Math.max(mTop, top);
+                if (bottom != null)
+                    mBottom = Math.max(mBottom, bottom);
+            }
+        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, center);
+    }
+}
+function betweenUneditable(pos) {
+    return pos.node.nodeType == 1 && pos.node.firstChild &&
+        (pos.offset == 0 || pos.node.childNodes[pos.offset - 1].contentEditable == "false") &&
+        (pos.offset == pos.node.childNodes.length || pos.node.childNodes[pos.offset].contentEditable == "false");
+}
+class BlockGapWidget extends WidgetType {
+    constructor(height) {
+        super();
+        this.height = height;
+    }
+    toDOM() {
+        let elt = document.createElement("div");
+        this.updateDOM(elt);
+        return elt;
+    }
+    eq(other) { return other.height == this.height; }
+    updateDOM(elt) {
+        elt.style.height = this.height + "px";
+        return true;
+    }
+    get estimatedHeight() { return this.height; }
+}
+function computeCompositionDeco(view, changes) {
+    let sel = view.observer.selectionRange;
+    let textNode = sel.focusNode && nearbyTextNode(sel.focusNode, sel.focusOffset, 0);
+    if (!textNode)
+        return Decoration.none;
+    let cView = view.docView.nearest(textNode);
+    if (!cView)
+        return Decoration.none;
+    let from, to, topNode = textNode;
+    if (cView instanceof LineView) {
+        while (topNode.parentNode != cView.dom)
+            topNode = topNode.parentNode;
+        let prev = topNode.previousSibling;
+        while (prev && !ContentView.get(prev))
+            prev = prev.previousSibling;
+        from = to = prev ? ContentView.get(prev).posAtEnd : cView.posAtStart;
     }
     else {
-        for (let i = 0; i < len;) {
-            let start = i, rtl = types[i++] == 2 /* R */;
-            while (i < len && rtl == (types[i] == 2 /* R */))
-                i++;
-            order.push(new BidiSpan(start, i, rtl ? 1 : 2));
+        for (;;) {
+            let { parent } = cView;
+            if (!parent)
+                return Decoration.none;
+            if (parent instanceof LineView)
+                break;
+            cView = parent;
         }
+        from = cView.posAtStart;
+        to = from + cView.length;
+        topNode = cView.dom;
     }
-    return order;
+    let newFrom = changes.mapPos(from, 1), newTo = Math.max(newFrom, changes.mapPos(to, -1));
+    let { state } = view, text = topNode.nodeType == 3 ? topNode.nodeValue :
+        new DOMReader([], view).readRange(topNode.firstChild, null).text;
+    if (newTo - newFrom < text.length) {
+        if (state.sliceDoc(newFrom, Math.min(state.doc.length, newFrom + text.length)) == text)
+            newTo = newFrom + text.length;
+        else if (state.sliceDoc(Math.max(0, newTo - text.length), newTo) == text)
+            newFrom = newTo - text.length;
+        else
+            return Decoration.none;
+    }
+    else if (state.sliceDoc(newFrom, newTo) != text) {
+        return Decoration.none;
+    }
+    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(topNode, textNode) }).range(newFrom, newTo));
 }
-function trivialOrder(length) {
-    return [new BidiSpan(0, length, 0)];
+class CompositionWidget extends WidgetType {
+    constructor(top, text) {
+        super();
+        this.top = top;
+        this.text = text;
+    }
+    eq(other) { return this.top == other.top && this.text == other.text; }
+    toDOM() { return this.top; }
+    ignoreEvent() { return false; }
+    get customView() { return CompositionView; }
 }
-let movedOver = "";
-function moveVisually(line, order, dir, start, forward) {
-    var _a;
-    let startIndex = start.head - line.from, spanI = -1;
-    if (startIndex == 0) {
-        if (!forward || !line.length)
-            return null;
-        if (order[0].level != dir) {
-            startIndex = order[0].side(false, dir);
-            spanI = 0;
+function nearbyTextNode(node, offset, side) {
+    for (;;) {
+        if (node.nodeType == 3)
+            return node;
+        if (node.nodeType == 1 && offset > 0 && side <= 0) {
+            node = node.childNodes[offset - 1];
+            offset = maxOffset(node);
         }
-    }
-    else if (startIndex == line.length) {
-        if (forward)
+        else if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
+            node = node.childNodes[offset];
+            offset = 0;
+        }
+        else {
             return null;
-        let last = order[order.length - 1];
-        if (last.level != dir) {
-            startIndex = last.side(true, dir);
-            spanI = order.length - 1;
         }
     }
-    if (spanI < 0)
-        spanI = BidiSpan.find(order, startIndex, (_a = start.bidiLevel) !== null && _a !== void 0 ? _a : -1, start.assoc);
-    let span = order[spanI];
-    // End of span. (But not end of line--that was checked for above.)
-    if (startIndex == span.side(forward, dir)) {
-        span = order[spanI += forward ? 1 : -1];
-        startIndex = span.side(!forward, dir);
+}
+function nextToUneditable(node, offset) {
+    if (node.nodeType != 1)
+        return 0;
+    return (offset && node.childNodes[offset - 1].contentEditable == "false" ? 1 /* Before */ : 0) |
+        (offset < node.childNodes.length && node.childNodes[offset].contentEditable == "false" ? 2 /* After */ : 0);
+}
+class DecorationComparator$1 {
+    constructor() {
+        this.changes = [];
     }
-    let indexForward = forward == (span.dir == dir);
-    let nextIndex = text.findClusterBreak(line.text, startIndex, indexForward);
-    movedOver = line.text.slice(Math.min(startIndex, nextIndex), Math.max(startIndex, nextIndex));
-    if (nextIndex != span.side(forward, dir))
-        return state.EditorSelection.cursor(nextIndex + line.from, indexForward ? -1 : 1, span.level);
-    let nextSpan = spanI == (forward ? order.length - 1 : 0) ? null : order[spanI + (forward ? 1 : -1)];
-    if (!nextSpan && span.level != dir)
-        return state.EditorSelection.cursor(forward ? line.to : line.from, forward ? -1 : 1, dir);
-    if (nextSpan && nextSpan.level < span.level)
-        return state.EditorSelection.cursor(nextSpan.side(!forward, dir) + line.from, forward ? 1 : -1, nextSpan.level);
-    return state.EditorSelection.cursor(nextIndex + line.from, forward ? -1 : 1, span.level);
+    compareRange(from, to) { addRange(from, to, this.changes); }
+    comparePoint(from, to) { addRange(from, to, this.changes); }
+}
+function findChangedDeco(a, b, diff) {
+    let comp = new DecorationComparator$1;
+    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;
 }
 
 function groupAt(state$1, pos, bias = 1) {
@@ -2867,21 +2948,29 @@ function domPosInText(node, x, y) {
 function posAtCoords(view, { x, y }, precise, bias = -1) {
     var _a;
     let content = view.contentDOM.getBoundingClientRect(), docTop = content.top + view.viewState.paddingTop;
-    let halfLine = view.defaultLineHeight / 2;
-    let block, yOffset = y - docTop;
-    for (let bounced = false;;) {
+    let block, yOffset = y - docTop, { docHeight } = view.viewState;
+    if (yOffset < 0 || yOffset > docHeight) {
+        if (precise)
+            return null;
+        yOffset = yOffset < 0 ? 0 : docHeight;
+    }
+    // Scan for a text block near the queried y position
+    for (let halfLine = view.defaultLineHeight / 2, bounced = false;;) {
         block = view.elementAtHeight(yOffset);
-        if (block.top > yOffset || block.bottom < yOffset) {
-            bias = block.top > yOffset ? -1 : 1;
-            yOffset = Math.min(block.bottom - halfLine, Math.max(block.top + halfLine, yOffset));
+        if (block.type == exports.BlockType.Text)
+            break;
+        for (;;) {
+            // Move the y position out of this block
+            yOffset = bias > 0 ? block.bottom + halfLine : block.top - halfLine;
+            if (yOffset >= 0 && yOffset <= docHeight)
+                break;
+            // If the document consists entirely of replaced widgets, we
+            // won't find a text block, so return 0
             if (bounced)
                 return precise ? null : 0;
-            else
-                bounced = true;
+            bounced = true;
+            bias = -bias;
         }
-        if (block.type == exports.BlockType.Text)
-            break;
-        yOffset = bias > 0 ? block.bottom + halfLine : block.top - halfLine;
     }
     y = docTop + yOffset;
     let lineStart = block.from;
@@ -3039,14 +3128,6 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
-        // 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.
-        this.pendingAndroidKey = undefined;
         // 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.
@@ -3115,22 +3196,15 @@ class InputState {
     }
     runCustomHandlers(type, view, event) {
         for (let set of this.customHandlers) {
-            let handler = set.handlers[type], handled = false;
+            let handler = set.handlers[type];
             if (handler) {
                 try {
-                    handled = handler.call(set.plugin, event, view);
+                    if (handler.call(set.plugin, event, view))
+                        return true;
                 }
                 catch (e) {
                     logException(view.state, e);
                 }
-                if (handled || event.defaultPrevented) {
-                    // Chrome for Android often applies a bunch of nonsensical
-                    // DOM changes after an enter press, even when
-                    // preventDefault-ed. This tries to ignore those.
-                    if (browser.android && type == "keydown" && event.keyCode == 13)
-                        view.observer.flushSoon();
-                    return true;
-                }
             }
         }
         return false;
@@ -3154,6 +3228,16 @@ class InputState {
         this.lastKeyTime = Date.now();
         if (this.screenKeyEvent(view, event))
             return true;
+        // Chrome for Android usually doesn't fire proper key events, but
+        // occasionally does, usually surrounded by a bunch of complicated
+        // composition changes. When an enter or backspace key event is
+        // seen, hold off on handling DOM events for a bit, and then
+        // dispatch it.
+        if (browser.android && browser.chrome && !event.synthetic &&
+            (event.keyCode == 13 || event.keyCode == 8)) {
+            view.observer.delayAndroidKey(event.key, event.keyCode);
+            return true;
+        }
         // Prevent the default behavior of Enter on iOS makes the
         // virtual keyboard get stuck in the wrong (lowercase)
         // state. So we let it go through, and then, in
@@ -3175,24 +3259,6 @@ class InputState {
         this.pendingIOSKey = undefined;
         return dispatchKey(view.contentDOM, key.key, key.keyCode);
     }
-    // This causes the DOM observer to pause for a bit, and sets an
-    // animation frame (which seems the most reliable way to detect
-    // 'Chrome is done flailing about messing with the DOM') to fire a
-    // fake key event and re-sync the view again.
-    setPendingAndroidKey(view, pending) {
-        this.pendingAndroidKey = pending;
-        requestAnimationFrame(() => {
-            let key = this.pendingAndroidKey;
-            if (!key)
-                return;
-            this.pendingAndroidKey = 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))
             return false;
@@ -3222,10 +3288,10 @@ class InputState {
         return (event.type == "keydown" && event.keyCode != 229) ||
             event.type == "compositionend" && !browser.ios;
     }
-    startMouseSelection(view, event, style) {
+    startMouseSelection(mouseSelection) {
         if (this.mouseSelection)
             this.mouseSelection.destroy();
-        this.mouseSelection = new MouseSelection(this, view, event, style);
+        this.mouseSelection = mouseSelection;
     }
     update(update) {
         if (this.mouseSelection)
@@ -3246,10 +3312,10 @@ const PendingKeys = [
 // Key codes for modifier keys
 const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
 class MouseSelection {
-    constructor(inputState, view, startEvent, style) {
-        this.inputState = inputState;
+    constructor(view, startEvent, style, mustSelect) {
         this.view = view;
         this.style = style;
+        this.mustSelect = mustSelect;
         this.lastEvent = startEvent;
         let doc = view.contentDOM.ownerDocument;
         doc.addEventListener("mousemove", this.move = this.move.bind(this));
@@ -3283,16 +3349,18 @@ class MouseSelection {
         let doc = this.view.contentDOM.ownerDocument;
         doc.removeEventListener("mousemove", this.move);
         doc.removeEventListener("mouseup", this.up);
-        this.inputState.mouseSelection = null;
+        this.view.inputState.mouseSelection = null;
     }
     select(event) {
         let selection = this.style.get(event, this.extend, this.multiple);
-        if (!selection.eq(this.view.state.selection) || selection.main.assoc != this.view.state.selection.main.assoc)
+        if (this.mustSelect || !selection.eq(this.view.state.selection) ||
+            selection.main.assoc != this.view.state.selection.main.assoc)
             this.view.dispatch({
                 selection,
                 userEvent: "select.pointer",
                 scrollIntoView: true
             });
+        this.mustSelect = false;
     }
     update(update) {
         if (update.docChanged && this.dragging)
@@ -3411,9 +3479,10 @@ handlers.mousedown = (view, event) => {
     if (!style && event.button == 0)
         style = basicMouseSelection(view, event);
     if (style) {
-        if (view.root.activeElement != view.contentDOM)
+        let mustFocus = view.root.activeElement != view.contentDOM;
+        if (mustFocus)
             view.observer.ignore(() => focusPreventScroll(view.contentDOM));
-        view.inputState.startMouseSelection(view, event, style);
+        view.inputState.startMouseSelection(new MouseSelection(view, event, style, mustFocus));
     }
 };
 function rangeForClick(view, pos, bias, type) {
@@ -3668,12 +3737,12 @@ handlers.compositionstart = handlers.compositionupdate = view => {
     if (view.inputState.compositionFirstChange == null)
         view.inputState.compositionFirstChange = true;
     if (view.inputState.composing < 0) {
+        // FIXME possibly set a timeout to clear it again on Android
+        view.inputState.composing = 0;
         if (view.docView.compositionDeco.size) {
             view.observer.flush();
             forceClearComposition(view, true);
         }
-        // FIXME possibly set a timeout to clear it again on Android
-        view.inputState.composing = 0;
     }
 };
 handlers.compositionend = view => {
@@ -3699,7 +3768,7 @@ handlers.beforeinput = (view, event) => {
     // 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.setPendingAndroidKey(view, pending);
+        view.observer.delayAndroidKey(pending.key, pending.keyCode);
         if (pending.key == "Backspace" || pending.key == "Delete") {
             let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
             setTimeout(() => {
@@ -4405,8 +4474,8 @@ function visiblePixelRange(dom, paddingTop) {
             break;
         }
     }
-    return { left: left - rect.left, right: right - rect.left,
-        top: top - (rect.top + paddingTop), bottom: bottom - (rect.top + paddingTop) };
+    return { left: left - rect.left, right: Math.max(left, right) - rect.left,
+        top: top - (rect.top + paddingTop), bottom: Math.max(top, bottom) - (rect.top + paddingTop) };
 }
 // Line gaps are placeholder widgets used to hide pieces of overlong
 // lines within the viewport, as a kludge to keep the editor
@@ -4633,7 +4702,7 @@ class ViewState {
         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 scrollTarget is given, make sure the viewport includes that position
         if (scrollTarget) {
-            let { head } = scrollTarget.range, viewHeight = visibleBottom - visibleTop;
+            let { head } = scrollTarget.range, viewHeight = this.editorHeight;
             if (head < viewport.from || head > viewport.to) {
                 let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
                 if (scrollTarget.center)
@@ -4654,6 +4723,8 @@ class ViewState {
     // Checks if a given viewport covers the visible part of the
     // document and not too much beyond that.
     viewportIsAppropriate({ from, to }, bias = 0) {
+        if (!this.inView)
+            return true;
         let { top } = this.heightMap.lineAt(from, QueryType.ByPos, this.state.doc, 0, 0);
         let { bottom } = this.heightMap.lineAt(to, QueryType.ByPos, this.state.doc, 0, 0);
         let { visibleTop, visibleBottom } = this;
@@ -4760,8 +4831,11 @@ class ViewState {
     elementAtHeight(height) {
         return scaleBlock(this.heightMap.blockAt(this.scaler.fromDOM(height), this.state.doc, 0, 0), this.scaler);
     }
+    get docHeight() {
+        return this.scaler.toDOM(this.heightMap.height);
+    }
     get contentHeight() {
-        return this.scaler.toDOM(this.heightMap.height) + this.paddingTop + this.paddingBottom;
+        return this.docHeight + this.paddingTop + this.paddingBottom;
     }
 }
 class Viewport {
@@ -4991,11 +5065,13 @@ const baseTheme = buildTheme("." + baseThemeID, {
     // recomputation.
     "@keyframes cm-blink": { "0%": {}, "50%": { visibility: "hidden" }, "100%": {} },
     "@keyframes cm-blink2": { "0%": {}, "50%": { visibility: "hidden" }, "100%": {} },
-    ".cm-cursor": {
+    ".cm-cursor, .cm-dropCursor": {
         position: "absolute",
         borderLeft: "1.2px solid black",
         marginLeft: "-0.6px",
         pointerEvents: "none",
+    },
+    ".cm-cursor": {
         display: "none"
     },
     "&dark .cm-cursor": {
@@ -5015,7 +5091,8 @@ const baseTheme = buildTheme("." + baseThemeID, {
     },
     ".cm-placeholder": {
         color: "#888",
-        display: "inline-block"
+        display: "inline-block",
+        verticalAlign: "top",
     },
     ".cm-button": {
         verticalAlign: "middle",
@@ -5082,6 +5159,7 @@ class DOMObserver {
         this.delayedFlush = -1;
         this.resizeTimeout = -1;
         this.queue = [];
+        this.delayedAndroidKey = null;
         this.scrollTargets = [];
         this.intersection = null;
         this.resize = null;
@@ -5165,7 +5243,7 @@ class DOMObserver {
         }
     }
     onSelectionChange(event) {
-        if (!this.readSelectionRange())
+        if (!this.readSelectionRange() || this.delayedAndroidKey)
             return;
         let { view } = this, sel = this.selectionRange;
         if (view.state.facet(editable) ? view.root.activeElement != this.dom : !hasSelection(view.dom, sel))
@@ -5261,6 +5339,32 @@ class DOMObserver {
         this.queue.length = 0;
         this.selectionChanged = false;
     }
+    // Chrome Android, especially in combination with GBoard, not only
+    // doesn't reliably fire regular key events, but also often
+    // surrounds the effect of enter or backspace with a bunch of
+    // composition events that, when interrupted, cause text duplication
+    // or other kinds of corruption. This hack makes the editor back off
+    // from handling DOM changes for a moment when such a key is
+    // detected (via beforeinput or keydown), and then dispatches the
+    // key event, throwing away the DOM changes if it gets handled.
+    delayAndroidKey(key, keyCode) {
+        if (!this.delayedAndroidKey)
+            requestAnimationFrame(() => {
+                let key = this.delayedAndroidKey;
+                this.delayedAndroidKey = null;
+                let startState = this.view.state;
+                if (dispatchKey(this.view.contentDOM, key.key, key.keyCode))
+                    this.processRecords();
+                else
+                    this.flush();
+                if (this.view.state == startState)
+                    this.view.update([]);
+            });
+        // Since backspace beforeinput is sometimes signalled spuriously,
+        // Enter always takes precedence.
+        if (!this.delayedAndroidKey || key == "Enter")
+            this.delayedAndroidKey = { key, keyCode };
+    }
     flushSoon() {
         if (this.delayedFlush < 0)
             this.delayedFlush = window.setTimeout(() => { this.delayedFlush = -1; this.flush(); }, 20);
@@ -5297,13 +5401,13 @@ class DOMObserver {
     }
     // Apply pending changes, if any
     flush(readSelection = true) {
-        if (readSelection)
-            this.readSelectionRange();
         // 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.pendingAndroidKey)
+        if (this.delayedFlush >= 0 || this.delayedAndroidKey)
             return;
+        if (readSelection)
+            this.readSelectionRange();
         let { from, to, typeOver } = this.processRecords();
         let newSel = this.selectionChanged && hasSelection(this.dom, this.selectionRange);
         if (from < 0 && !newSel)
@@ -5313,7 +5417,7 @@ class DOMObserver {
         this.onChange(from, to, typeOver);
         // The view wasn't updated
         if (this.view.state == startState)
-            this.view.docView.reset(newSel);
+            this.view.update([]);
     }
     readMutation(rec) {
         let cView = this.view.docView.nearest(rec.target);
@@ -5444,11 +5548,22 @@ function applyDOMChange(view, start, end, typeOver) {
         };
     if (change) {
         let startState = view.state;
+        if (browser.ios && view.inputState.flushIOSKey(view))
+            return;
         // Android browsers don't fire reasonable key events for enter,
         // backspace, or delete. So this detects changes that look like
         // they're caused by those keys, and reinterprets them as key
-        // events.
-        if (browser.ios && view.inputState.flushIOSKey(view))
+        // events. (Some of these keys are also handled by beforeinput
+        // events and the pendingAndroidKey mechanism, but that's not
+        // reliable in all situations.)
+        if (browser.android &&
+            ((change.from == sel.from && change.to == sel.to &&
+                change.insert.length == 1 && change.insert.lines == 2 &&
+                dispatchKey(view.contentDOM, "Enter", 13)) ||
+                (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))))
             return;
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
@@ -5521,76 +5636,6 @@ function findDiff(a, b, preferredPos, preferredSide) {
     }
     return { from, toA, toB };
 }
-class DOMReader {
-    constructor(points, view) {
-        this.points = points;
-        this.view = view;
-        this.text = "";
-        this.lineBreak = view.state.lineBreak;
-    }
-    readRange(start, end) {
-        if (!start)
-            return;
-        let parent = start.parentNode;
-        for (let cur = start;;) {
-            this.findPointBefore(parent, cur);
-            this.readNode(cur);
-            let next = cur.nextSibling;
-            if (next == end)
-                break;
-            let view = ContentView.get(cur), nextView = ContentView.get(next);
-            if (view && nextView ? view.breakAfter :
-                (view ? view.breakAfter : isBlockElement(cur)) ||
-                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore)))
-                this.text += this.lineBreak;
-            cur = next;
-        }
-        this.findPointBefore(parent, end);
-    }
-    readNode(node) {
-        if (node.cmIgnore)
-            return;
-        let view = ContentView.get(node);
-        let fromView = view && view.overrideDOMText;
-        let text;
-        if (fromView != null)
-            text = fromView.sliceString(0, undefined, this.lineBreak);
-        else if (node.nodeType == 3)
-            text = node.nodeValue;
-        else if (node.nodeName == "BR")
-            text = node.nextSibling ? this.lineBreak : "";
-        else if (node.nodeType == 1)
-            this.readRange(node.firstChild, null);
-        if (text != null) {
-            this.findPointIn(node, text.length);
-            this.text += text;
-            // Chrome inserts two newlines when pressing shift-enter at the
-            // end of a line. This drops one of those.
-            if (browser.chrome && this.view.inputState.lastKeyCode == 13 && !node.nextSibling && /\n\n$/.test(this.text))
-                this.text = this.text.slice(0, -1);
-        }
-    }
-    findPointBefore(node, next) {
-        for (let point of this.points)
-            if (point.node == node && node.childNodes[point.offset] == next)
-                point.pos = this.text.length;
-    }
-    findPointIn(node, maxLen) {
-        for (let point of this.points)
-            if (point.node == node)
-                point.pos = this.text.length + Math.min(point.offset, maxLen);
-    }
-}
-function isBlockElement(node) {
-    return node.nodeType == 1 && /^(DIV|P|LI|UL|OL|BLOCKQUOTE|DD|DT|H\d|SECTION|PRE)$/.test(node.nodeName);
-}
-class DOMPoint {
-    constructor(node, offset) {
-        this.node = node;
-        this.offset = offset;
-        this.pos = -1;
-    }
-}
 function selectionPoints(view) {
     let result = [];
     if (view.root.activeElement != view.contentDOM)
@@ -5876,7 +5921,9 @@ class EditorView {
                 if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
                 if (i > 5) {
-                    console.warn(this.measureRequests.length ? "Measure loop restarted more than 5 times" : "Viewport failed to stabilize");
+                    console.warn(this.measureRequests.length
+                        ? "Measure loop restarted more than 5 times"
+                        : "Viewport failed to stabilize");
                     break;
                 }
                 let measuring = [];
@@ -5922,7 +5969,8 @@ class EditorView {
                 }
                 if (redrawn)
                     this.docView.updateSelection(true);
-                if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to && this.measureRequests.length == 0)
+                if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to &&
+                    this.measureRequests.length == 0)
                     break;
             }
         }
@@ -6214,6 +6262,11 @@ class EditorView {
     Find the DOM parent node and offset (child offset if `node` is
     an element, character offset when it is a text node) at the
     given document position.
+    
+    Note that for positions that aren't currently in
+    `visibleRanges`, the resulting DOM position isn't necessarily
+    meaningful (it may just point before or after a placeholder
+    element).
     */
     domAtPos(pos) {
         return this.docView.domAtPos(pos);
@@ -6874,7 +6927,7 @@ function measureRange(view, range) {
         let between = [];
         if ((visualStart || startBlock).to < (visualEnd || endBlock).from - 1)
             between.push(piece(leftSide, top.bottom, rightSide, bottom.top));
-        else if (top.bottom < bottom.top && blockAt(view, (top.bottom + bottom.top) / 2).type == exports.BlockType.Text)
+        else if (top.bottom < bottom.top && view.elementAtHeight((top.bottom + bottom.top) / 2).type == exports.BlockType.Text)
             top.bottom = bottom.top = (top.bottom + bottom.top) / 2;
         return pieces(top).concat(between).concat(pieces(bottom));
     }
@@ -6939,6 +6992,94 @@ function measureCursor(view, cursor, primary) {
     return new Piece(pos.left - base.left, pos.top - base.top, -1, pos.bottom - pos.top, primary ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary");
 }
 
+const setDropCursorPos = state.StateEffect.define({
+    map(pos, mapping) { return pos == null ? null : mapping.mapPos(pos); }
+});
+const dropCursorPos = state.StateField.define({
+    create() { return null; },
+    update(pos, tr) {
+        if (pos != null)
+            pos = tr.changes.mapPos(pos);
+        return tr.effects.reduce((pos, e) => e.is(setDropCursorPos) ? e.value : pos, pos);
+    }
+});
+const drawDropCursor = ViewPlugin.fromClass(class {
+    constructor(view) {
+        this.view = view;
+        this.cursor = null;
+        this.measureReq = { read: this.readPos.bind(this), write: this.drawCursor.bind(this) };
+    }
+    update(update) {
+        var _a;
+        let cursorPos = update.state.field(dropCursorPos);
+        if (cursorPos == null) {
+            if (this.cursor != null) {
+                (_a = this.cursor) === null || _a === void 0 ? void 0 : _a.remove();
+                this.cursor = null;
+            }
+        }
+        else {
+            if (!this.cursor) {
+                this.cursor = this.view.scrollDOM.appendChild(document.createElement("div"));
+                this.cursor.className = "cm-dropCursor";
+            }
+            if (update.startState.field(dropCursorPos) != cursorPos || update.docChanged || update.geometryChanged)
+                this.view.requestMeasure(this.measureReq);
+        }
+    }
+    readPos() {
+        let pos = this.view.state.field(dropCursorPos);
+        let rect = pos != null && this.view.coordsAtPos(pos);
+        if (!rect)
+            return null;
+        let outer = this.view.scrollDOM.getBoundingClientRect();
+        return { left: rect.left - outer.left, top: rect.top - outer.top, height: rect.bottom - rect.top };
+    }
+    drawCursor(pos) {
+        if (this.cursor) {
+            if (pos) {
+                this.cursor.style.left = pos.left + "px";
+                this.cursor.style.top = pos.top + "px";
+                this.cursor.style.height = pos.height + "px";
+            }
+            else {
+                this.cursor.style.left = "-100000px";
+            }
+        }
+    }
+    destroy() {
+        if (this.cursor)
+            this.cursor.remove();
+    }
+    setDropPos(pos) {
+        if (this.view.state.field(dropCursorPos) != pos)
+            this.view.dispatch({ effects: setDropCursorPos.of(pos) });
+    }
+}, {
+    eventHandlers: {
+        dragover(event) {
+            this.setDropPos(this.view.posAtCoords({ x: event.clientX, y: event.clientY }));
+        },
+        dragleave(event) {
+            if (event.target == this.view.contentDOM || !this.view.contentDOM.contains(event.relatedTarget))
+                this.setDropPos(null);
+        },
+        dragend() {
+            this.setDropPos(null);
+        },
+        drop() {
+            this.setDropPos(null);
+        }
+    }
+});
+/**
+Draws a cursor at the current drop position when something is
+dragged over the editor.
+*/
+function dropCursor() {
+    return [dropCursorPos, drawDropCursor];
+}
+
 function iterMatches(doc, re, from, to, f) {
     re.lastIndex = 0;
     for (let cursor = doc.iterRange(from, to), pos = from, m; !cursor.next().done; pos += cursor.value.length) {
@@ -6947,6 +7088,22 @@ function iterMatches(doc, re, from, to, f) {
                 f(pos + m.index, pos + m.index + m[0].length, m);
     }
 }
+function matchRanges(view, maxLength) {
+    let visible = view.visibleRanges;
+    if (visible.length == 1 && visible[0].from == view.viewport.from &&
+        visible[0].to == view.viewport.to)
+        return visible;
+    let result = [];
+    for (let { from, to } of visible) {
+        from = Math.max(view.state.doc.lineAt(from).from, from - maxLength);
+        to = Math.min(view.state.doc.lineAt(to).to, to + maxLength);
+        if (result.length && result[result.length - 1].to >= from)
+            result[result.length - 1].to = to;
+        else
+            result.push({ from, to });
+    }
+    return result;
+}
 /**
 Helper class used to make it easier to maintain decorations on
 visible code that matches a given regular expression. To be used
@@ -6958,12 +7115,13 @@ class MatchDecorator {
     Create a decorator.
     */
     constructor(config) {
-        let { regexp, decoration, boundary } = config;
+        let { regexp, decoration, boundary, maxLength = 1000 } = config;
         if (!regexp.global)
             throw new RangeError("The regular expression given to MatchDecorator should have its 'g' flag set");
         this.regexp = regexp;
         this.getDeco = typeof decoration == "function" ? decoration : () => decoration;
         this.boundary = boundary;
+        this.maxLength = maxLength;
     }
     /**
     Compute the full set of decorations for matches in the given
@@ -6972,7 +7130,7 @@ class MatchDecorator {
     */
     createDeco(view) {
         let build = new rangeset.RangeSetBuilder();
-        for (let { from, to } of view.visibleRanges)
+        for (let { from, to } of matchRanges(view, this.maxLength))
             iterMatches(view.state.doc, this.regexp, from, to, (a, b, m) => build.add(a, b, this.getDeco(m, view, a)));
         return build.finish();
     }
@@ -7289,6 +7447,7 @@ exports.ViewUpdate = ViewUpdate;
 exports.WidgetType = WidgetType;
 exports.__test = __test;
 exports.drawSelection = drawSelection;
+exports.dropCursor = dropCursor;
 exports.highlightActiveLine = highlightActiveLine;
 exports.highlightSpecialChars = highlightSpecialChars;
 exports.keymap = keymap;