@codemirror/view 0.19.27 → 0.19.28

package/dist/index.cjs

@@ -845,6 +845,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 +864,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,488 +1942,6 @@ 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);
-    }
-    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);
-            }
-        }
-        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;
-        }
-    }
-    reset(sel) {
-        if (this.dirty) {
-            this.view.observer.ignore(() => this.view.docView.sync());
-            this.dirty = 0 /* Not */;
-            this.updateSelection(true);
-        }
-        else {
-            this.updateSelection();
-        }
-    }
-    // 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);
-                        }
-                    }
-                    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);
-    }
-    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;
-        }
-        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;
-        }
-        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;
-        }
-    }
-    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;
-        }
-        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 };
-    }
-    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);
-    }
-    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 { parent } = cView;
-            if (!parent)
-                return Decoration.none;
-            if (parent instanceof LineView)
-                break;
-            cView = parent;
-        }
-        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;
-    }
-    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;
-        }
-    }
-}
-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 = [];
-    }
-    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;
-}
-
 /**
 Used to indicate [text direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection).
 */
@@ -2568,168 +2090,662 @@ function computeOrder(line, direction) {
             else
                 types[i] = 256 /* NI */;
         }
-        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 == 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;
+    }
+    // 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;
+                    }
+                }
+            }
+            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 {
+                    if (cur & 4 /* OppositeInside */)
+                        break;
+                    BracketStack[sJ + 2] |= 4 /* OppositeInside */;
+                }
+            }
+        }
+    }
+    // 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;
+        }
+    }
+    // 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));
+            }
+        }
+    }
+    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 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;
+        }
+    }
+    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;
+        }
+    }
+    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);
+    }
+    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 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.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;
+        }
+    }
+    reset(sel) {
+        if (this.dirty) {
+            this.view.observer.ignore(() => this.view.docView.sync());
+            this.dirty = 0 /* Not */;
+            this.updateSelection(true);
+        }
+        else {
+            this.updateSelection();
         }
-        else if (type == 8 /* EN */ && prevStrong == 1 /* L */) {
-            types[i] = 1 /* L */;
+    }
+    // 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);
         }
-        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;
+    // 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 (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 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 (cur & 4 /* OppositeInside */)
-                        break;
-                    BracketStack[sJ + 2] |= 4 /* OppositeInside */;
+                    // 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);
     }
-    // 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;
+    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;
+        }
+        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;
+        }
+        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;
+        }
+    }
+    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;
+                        }
+                    }
+                }
+            }
+            pos = end + child.breakAfter;
         }
+        return result;
     }
-    // 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));
-                }
+    measureTextSize() {
+        for (let child of this.children) {
+            if (child instanceof LineView) {
+                let measure = child.measureTextSize();
+                if (measure)
+                    return measure;
             }
-            else {
-                order.push(new BidiSpan(start, i, 0));
+        }
+        // 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 };
+    }
+    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);
+    }
+    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 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));
 }
-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) {
@@ -5015,7 +5031,8 @@ const baseTheme = buildTheme("." + baseThemeID, {
     },
     ".cm-placeholder": {
         color: "#888",
-        display: "inline-block"
+        display: "inline-block",
+        verticalAlign: "top",
     },
     ".cm-button": {
         verticalAlign: "middle",
@@ -5444,11 +5461,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)))