@codemirror/view 0.19.22 → 0.19.26

package/dist/index.cjs

@@ -273,7 +273,7 @@ class DOMPos {
     static before(dom, precise) { return new DOMPos(dom.parentNode, domIndex(dom), precise); }
     static after(dom, precise) { return new DOMPos(dom.parentNode, domIndex(dom) + 1, precise); }
 }
-const none$3 = [];
+const noChildren = [];
 class ContentView {
     constructor() {
         this.parent = null;
@@ -439,12 +439,12 @@ class ContentView {
             v = parent;
         }
     }
-    replaceChildren(from, to, children = none$3) {
+    replaceChildren(from, to, children = noChildren) {
         this.markDirty();
         for (let i = from; i < to; i++) {
             let child = this.children[i];
             if (child.parent == this)
-                child.parent = null;
+                child.destroy();
         }
         this.children.splice(from, to - from, ...children);
         for (let i = 0; i < children.length; i++)
@@ -466,6 +466,17 @@ class ContentView {
     }
     static get(node) { return node.cmView; }
     get isEditable() { return true; }
+    merge(from, to, source, hasStart, openStart, openEnd) {
+        return false;
+    }
+    become(other) { return false; }
+    // When this is a zero-length view with a side, this should return a
+    // number <= 0 to indicate it is before its position, or a
+    // number > 0 when after its position.
+    getSide() { return 0; }
+    destroy() {
+        this.parent = null;
+    }
 }
 ContentView.prototype.breakAfter = 0;
 // Remove a DOM node and return its next sibling.
@@ -493,6 +504,94 @@ class ChildCursor {
         }
     }
 }
+function replaceRange(parent, fromI, fromOff, toI, toOff, insert, breakAtStart, openStart, openEnd) {
+    let { children } = parent;
+    let before = children.length ? children[fromI] : null;
+    let last = insert.length ? insert[insert.length - 1] : null;
+    let breakAtEnd = last ? last.breakAfter : breakAtStart;
+    // Change within a single child
+    if (fromI == toI && before && !breakAtStart && !breakAtEnd && insert.length < 2 &&
+        before.merge(fromOff, toOff, insert.length ? last : null, fromOff == 0, openStart, openEnd))
+        return;
+    if (toI < children.length) {
+        let after = children[toI];
+        // Make sure the end of the child after the update is preserved in `after`
+        if (after && toOff < after.length) {
+            // If we're splitting a child, separate part of it to avoid that
+            // being mangled when updating the child before the update.
+            if (fromI == toI) {
+                after = after.split(toOff);
+                toOff = 0;
+            }
+            // If the element after the replacement should be merged with
+            // the last replacing element, update `content`
+            if (!breakAtEnd && last && after.merge(0, toOff, last, true, 0, openEnd)) {
+                insert[insert.length - 1] = after;
+            }
+            else {
+                // Remove the start of the after element, if necessary, and
+                // add it to `content`.
+                if (toOff)
+                    after.merge(0, toOff, null, false, 0, openEnd);
+                insert.push(after);
+            }
+        }
+        else if (after === null || after === void 0 ? void 0 : after.breakAfter) {
+            // The element at `toI` is entirely covered by this range.
+            // Preserve its line break, if any.
+            if (last)
+                last.breakAfter = 1;
+            else
+                breakAtStart = 1;
+        }
+        // Since we've handled the next element from the current elements
+        // now, make sure `toI` points after that.
+        toI++;
+    }
+    if (before) {
+        before.breakAfter = breakAtStart;
+        if (fromOff > 0) {
+            if (!breakAtStart && insert.length && before.merge(fromOff, before.length, insert[0], false, openStart, 0)) {
+                before.breakAfter = insert.shift().breakAfter;
+            }
+            else if (fromOff < before.length || before.children.length && before.children[before.children.length - 1].length == 0) {
+                before.merge(fromOff, before.length, null, false, openStart, 0);
+            }
+            fromI++;
+        }
+    }
+    // Try to merge widgets on the boundaries of the replacement
+    while (fromI < toI && insert.length) {
+        if (children[toI - 1].become(insert[insert.length - 1])) {
+            toI--;
+            insert.pop();
+            openEnd = insert.length ? 0 : openStart;
+        }
+        else if (children[fromI].become(insert[0])) {
+            fromI++;
+            insert.shift();
+            openStart = insert.length ? 0 : openEnd;
+        }
+        else {
+            break;
+        }
+    }
+    if (!insert.length && fromI && toI < children.length && !children[fromI - 1].breakAfter &&
+        children[toI].merge(0, 0, children[fromI - 1], false, openStart, openEnd))
+        fromI--;
+    if (fromI < toI || insert.length)
+        parent.replaceChildren(fromI, toI, insert);
+}
+function mergeChildrenInto(parent, from, to, insert, openStart, openEnd) {
+    let cur = parent.childCursor();
+    let { i: toI, off: toOff } = cur.findPos(to, 1);
+    let { i: fromI, off: fromOff } = cur.findPos(from, -1);
+    let dLen = from - to;
+    for (let view of insert)
+        dLen += view.length;
+    parent.length += dLen;
+    replaceRange(parent, fromI, fromOff, toI, toOff, insert, 0, openStart, openEnd);
+}
 
 let [nav, doc] = typeof navigator != "undefined"
     ? [navigator, document]
@@ -524,21 +623,8 @@ var browser = {
     tabSize: doc.documentElement.style.tabSize != null ? "tab-size" : "-moz-tab-size"
 };
 
-const none$2 = [];
-class InlineView extends ContentView {
-    /**
-    Return true when this view is equivalent to `other` and can take
-    on its role.
-    */
-    become(_other) { return false; }
-    // When this is a zero-length view with a side, this should return a
-    // negative number to indicate it is before its position, or a
-    // positive number when after its position.
-    getSide() { return 0; }
-}
-InlineView.prototype.children = none$2;
 const MaxJoinLen = 256;
-class TextView extends InlineView {
+class TextView extends ContentView {
     constructor(text) {
         super();
         this.text = text;
@@ -569,7 +655,7 @@ class TextView extends InlineView {
         this.markDirty();
         return true;
     }
-    slice(from) {
+    split(from) {
         let result = new TextView(this.text.slice(from));
         this.text = this.text.slice(0, from);
         return result;
@@ -585,7 +671,7 @@ class TextView extends InlineView {
         return textCoords(this.dom, pos, side);
     }
 }
-class MarkView extends InlineView {
+class MarkView extends ContentView {
     constructor(mark, children = [], length = 0) {
         super();
         this.mark = mark;
@@ -608,20 +694,20 @@ class MarkView extends InlineView {
             this.createDOM();
         super.sync(track);
     }
-    merge(from, to, source, openStart, openEnd) {
+    merge(from, to, source, _hasStart, openStart, openEnd) {
         if (source && (!(source instanceof MarkView && source.mark.eq(this.mark)) ||
             (from && openStart <= 0) || (to < this.length && openEnd <= 0)))
             return false;
-        mergeInlineChildren(this, from, to, source ? source.children : none$2, openStart - 1, openEnd - 1);
+        mergeChildrenInto(this, from, to, source ? source.children : [], openStart - 1, openEnd - 1);
         this.markDirty();
         return true;
     }
-    slice(from) {
+    split(from) {
         let result = [], off = 0, detachFrom = -1, i = 0;
         for (let elt of this.children) {
             let end = off + elt.length;
             if (end > from)
-                result.push(off < from ? elt.slice(from - off) : elt);
+                result.push(off < from ? elt.split(from - off) : elt);
             if (detachFrom < 0 && off >= from)
                 detachFrom = i;
             off = end;
@@ -629,8 +715,10 @@ class MarkView extends InlineView {
         }
         let length = this.length - from;
         this.length = from;
-        if (detachFrom > -1)
-            this.replaceChildren(detachFrom, this.children.length);
+        if (detachFrom > -1) {
+            this.children.length = detachFrom;
+            this.markDirty();
+        }
         return new MarkView(this.mark, result, length);
     }
     domAtPos(pos) {
@@ -672,7 +760,7 @@ function textCoords(text, pos, side) {
     return flatten ? flattenRect(rect, flatten < 0) : rect || null;
 }
 // Also used for collapsed ranges that don't have a placeholder widget!
-class WidgetView extends InlineView {
+class WidgetView extends ContentView {
     constructor(widget, length, side) {
         super();
         this.widget = widget;
@@ -682,7 +770,7 @@ class WidgetView extends InlineView {
     static create(widget, length, side) {
         return new (widget.customView || WidgetView)(widget, length, side);
     }
-    slice(from) {
+    split(from) {
         let result = WidgetView.create(this.widget, this.length - from, this.side);
         this.length -= from;
         return result;
@@ -694,7 +782,7 @@ class WidgetView extends InlineView {
         }
     }
     getSide() { return this.side; }
-    merge(from, to, source, openStart, openEnd) {
+    merge(from, to, source, hasStart, openStart, openEnd) {
         if (source && (!(source instanceof WidgetView) || !this.widget.compare(source.widget) ||
             from > 0 && openStart <= 0 || to < this.length && openEnd <= 0))
             return false;
@@ -739,6 +827,11 @@ class WidgetView extends InlineView {
         return (pos == 0 && side > 0 || pos == this.length && side <= 0) ? rect : flattenRect(rect, pos == 0);
     }
     get isEditable() { return false; }
+    destroy() {
+        super.destroy();
+        if (this.dom)
+            this.widget.destroy(this.dom);
+    }
 }
 class CompositionView extends WidgetView {
     domAtPos(pos) { return new DOMPos(this.widget.text, pos); }
@@ -755,7 +848,7 @@ class CompositionView extends WidgetView {
 // These are drawn around uneditable widgets to avoid a number of
 // browser bugs that show up when the cursor is directly next to
 // uneditable inline content.
-class WidgetBufferView extends InlineView {
+class WidgetBufferView extends ContentView {
     constructor(side) {
         super();
         this.side = side;
@@ -765,7 +858,7 @@ class WidgetBufferView extends InlineView {
     become(other) {
         return other instanceof WidgetBufferView && other.side == this.side;
     }
-    slice() { return new WidgetBufferView(this.side); }
+    split() { return new WidgetBufferView(this.side); }
     sync() {
         if (!this.dom)
             this.setDOM(document.createTextNode("\u200b"));
@@ -783,90 +876,7 @@ class WidgetBufferView extends InlineView {
         return text.Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
     }
 }
-function mergeInlineChildren(parent, from, to, elts, openStart, openEnd) {
-    let cur = parent.childCursor();
-    let { i: toI, off: toOff } = cur.findPos(to, 1);
-    let { i: fromI, off: fromOff } = cur.findPos(from, -1);
-    let dLen = from - to;
-    for (let view of elts)
-        dLen += view.length;
-    parent.length += dLen;
-    let { children } = parent;
-    // Both from and to point into the same child view
-    if (fromI == toI && fromOff) {
-        let start = children[fromI];
-        // Maybe just update that view and be done
-        if (elts.length == 1 && start.merge(fromOff, toOff, elts[0], openStart, openEnd))
-            return;
-        if (elts.length == 0) {
-            start.merge(fromOff, toOff, null, openStart, openEnd);
-            return;
-        }
-        // Otherwise split it, so that we don't have to worry about aliasing front/end afterwards
-        let after = start.slice(toOff);
-        if (after.merge(0, 0, elts[elts.length - 1], 0, openEnd))
-            elts[elts.length - 1] = after;
-        else
-            elts.push(after);
-        toI++;
-        openEnd = toOff = 0;
-    }
-    // Make sure start and end positions fall on node boundaries
-    // (fromOff/toOff are no longer used after this), and that if the
-    // start or end of the elts can be merged with adjacent nodes,
-    // this is done
-    if (toOff) {
-        let end = children[toI];
-        if (elts.length && end.merge(0, toOff, elts[elts.length - 1], 0, openEnd)) {
-            elts.pop();
-            openEnd = elts.length ? 0 : openStart;
-        }
-        else {
-            end.merge(0, toOff, null, 0, 0);
-        }
-    }
-    else if (toI < children.length && elts.length &&
-        children[toI].merge(0, 0, elts[elts.length - 1], 0, openEnd)) {
-        elts.pop();
-        openEnd = elts.length ? 0 : openStart;
-    }
-    if (fromOff) {
-        let start = children[fromI];
-        if (elts.length && start.merge(fromOff, start.length, elts[0], openStart, 0)) {
-            elts.shift();
-            openStart = elts.length ? 0 : openEnd;
-        }
-        else {
-            start.merge(fromOff, start.length, null, 0, 0);
-        }
-        fromI++;
-    }
-    else if (fromI && elts.length) {
-        let end = children[fromI - 1];
-        if (end.merge(end.length, end.length, elts[0], openStart, 0)) {
-            elts.shift();
-            openStart = elts.length ? 0 : openEnd;
-        }
-    }
-    // Then try to merge any mergeable nodes at the start and end of
-    // the changed range
-    while (fromI < toI && elts.length && children[toI - 1].become(elts[elts.length - 1])) {
-        elts.pop();
-        toI--;
-        openEnd = elts.length ? 0 : openStart;
-    }
-    while (fromI < toI && elts.length && children[fromI].become(elts[0])) {
-        elts.shift();
-        fromI++;
-        openStart = elts.length ? 0 : openEnd;
-    }
-    if (!elts.length && fromI && toI < children.length &&
-        children[toI].merge(0, 0, children[fromI - 1], openStart, openEnd))
-        fromI--;
-    // And if anything remains, splice the child array to insert the new elts
-    if (elts.length || fromI != toI)
-        parent.replaceChildren(fromI, toI, elts);
-}
+TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
 function inlineDOMAtPos(dom, children, pos) {
     let i = 0;
     for (let off = 0; i < children.length; i++) {
@@ -1007,6 +1017,11 @@ class WidgetType {
     @internal
     */
     get customView() { return null; }
+    /**
+    This is called when the an instance of the widget is removed
+    from the editor view.
+    */
+    destroy(_dom) { }
 }
 /**
 The different types of blocks that can occur in an editor view.
@@ -1086,8 +1101,9 @@ class Decoration extends rangeset.RangeValue {
     position.
     */
     static widget(spec) {
-        let side = spec.side || 0;
-        return new PointDecoration(spec, side, side, !!spec.block, spec.widget || null, false);
+        let side = spec.side || 0, block = !!spec.block;
+        side += block ? (side > 0 ? 300000000 /* BlockAfter */ : -400000000 /* BlockBefore */) : (side > 0 ? 100000000 /* InlineAfter */ : -100000000 /* InlineBefore */);
+        return new PointDecoration(spec, side, side, block, spec.widget || null, false);
     }
     /**
     Create a replace decoration which replaces the given range with
@@ -1096,8 +1112,8 @@ class Decoration extends rangeset.RangeValue {
     static replace(spec) {
         let block = !!spec.block;
         let { start, end } = getInclusive(spec, block);
-        let startSide = 100000000 /* Big */ * (start ? -1 : 1) * (block ? 2 : 1);
-        let endSide = 100000000 /* Big */ * (end ? 1 : -1) * (block ? 2 : 1);
+        let startSide = block ? (start ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 400000000 /* NonIncStart */;
+        let endSide = block ? (end ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -500000000 /* NonIncEnd */;
         return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
     }
     /**
@@ -1127,7 +1143,7 @@ Decoration.none = rangeset.RangeSet.empty;
 class MarkDecoration extends Decoration {
     constructor(spec) {
         let { start, end } = getInclusive(spec);
-        super(100000000 /* Big */ * (start ? -1 : 1), 100000000 /* Big */ * (end ? 1 : -1), null, spec);
+        super(start ? -1 /* InlineIncStart */ : 400000000 /* NonIncStart */, end ? 1 /* InlineIncEnd */ : -500000000 /* NonIncEnd */, null, spec);
         this.tagName = spec.tagName || "span";
         this.class = spec.class || "";
         this.attrs = spec.attributes || null;
@@ -1148,7 +1164,7 @@ class MarkDecoration extends Decoration {
 MarkDecoration.prototype.point = false;
 class LineDecoration extends Decoration {
     constructor(spec) {
-        super(-100000000 /* Big */, -100000000 /* Big */, null, spec);
+        super(-200000000 /* Line */, -200000000 /* Line */, null, spec);
     }
     eq(other) {
         return other instanceof LineDecoration && attrsEq(this.spec.attributes, other.spec.attributes);
@@ -1166,12 +1182,12 @@ class PointDecoration extends Decoration {
         super(startSide, endSide, widget, spec);
         this.block = block;
         this.isReplace = isReplace;
-        this.mapMode = !block ? state.MapMode.TrackDel : startSide < 0 ? state.MapMode.TrackBefore : state.MapMode.TrackAfter;
+        this.mapMode = !block ? state.MapMode.TrackDel : startSide <= 0 ? state.MapMode.TrackBefore : state.MapMode.TrackAfter;
     }
     // Only relevant when this.block == true
     get type() {
         return this.startSide < this.endSide ? exports.BlockType.WidgetRange
-            : this.startSide < 0 ? exports.BlockType.WidgetBefore : exports.BlockType.WidgetAfter;
+            : this.startSide <= 0 ? exports.BlockType.WidgetBefore : exports.BlockType.WidgetAfter;
     }
     get heightRelevant() { return this.block || !!this.widget && this.widget.estimatedHeight >= 5; }
     eq(other) {
@@ -1181,7 +1197,7 @@ class PointDecoration extends Decoration {
             this.startSide == other.startSide && this.endSide == other.endSide;
     }
     range(from, to = from) {
-        if (this.isReplace && (from > to || (from == to && this.startSide > 0 && this.endSide < 0)))
+        if (this.isReplace && (from > to || (from == to && this.startSide > 0 && this.endSide <= 0)))
             throw new RangeError("Invalid range for replacement decoration");
         if (!this.isReplace && to != from)
             throw new RangeError("Widget decorations can only have zero-length ranges");
@@ -1218,16 +1234,16 @@ class LineView extends ContentView {
         this.breakAfter = 0;
     }
     // Consumes source
-    merge(from, to, source, takeDeco, openStart, openEnd) {
+    merge(from, to, source, hasStart, openStart, openEnd) {
         if (source) {
             if (!(source instanceof LineView))
                 return false;
             if (!this.dom)
                 source.transferDOM(this); // Reuse source.dom when appropriate
         }
-        if (takeDeco)
+        if (hasStart)
             this.setDeco(source ? source.attrs : null);
-        mergeInlineChildren(this, from, to, source ? source.children : none$1, openStart, openEnd);
+        mergeChildrenInto(this, from, to, source ? source.children : [], openStart, openEnd);
         return true;
     }
     split(at) {
@@ -1237,16 +1253,14 @@ class LineView extends ContentView {
             return end;
         let { i, off } = this.childPos(at);
         if (off) {
-            end.append(this.children[i].slice(off), 0);
-            this.children[i].merge(off, this.children[i].length, null, 0, 0);
+            end.append(this.children[i].split(off), 0);
+            this.children[i].merge(off, this.children[i].length, null, false, 0, 0);
             i++;
         }
         for (let j = i; j < this.children.length; j++)
             end.append(this.children[j], 0);
-        while (i > 0 && this.children[i - 1].length == 0) {
-            this.children[i - 1].parent = null;
-            i--;
-        }
+        while (i > 0 && this.children[i - 1].length == 0)
+            this.children[--i].destroy();
         this.children.length = i;
         this.markDirty();
         this.length = at;
@@ -1269,7 +1283,6 @@ class LineView extends ContentView {
             this.attrs = attrs;
         }
     }
-    // Only called when building a line view in ContentBuilder
     append(child, openStart) {
         joinInlineInto(this, child, openStart);
     }
@@ -1326,7 +1339,7 @@ class LineView extends ContentView {
     coordsAt(pos, side) {
         return coordsInChildren(this, pos, side);
     }
-    match(_other) { return false; }
+    become(_other) { return false; }
     get type() { return exports.BlockType.Text; }
     static find(docView, pos) {
         for (let i = 0, off = 0;; i++) {
@@ -1341,7 +1354,6 @@ class LineView extends ContentView {
         }
     }
 }
-const none$1 = [];
 class BlockWidgetView extends ContentView {
     constructor(widget, length, type) {
         super();
@@ -1367,7 +1379,7 @@ class BlockWidgetView extends ContentView {
         end.breakAfter = this.breakAfter;
         return end;
     }
-    get children() { return none$1; }
+    get children() { return noChildren; }
     sync() {
         if (!this.dom || !this.widget.updateDOM(this.dom)) {
             this.setDOM(this.widget.toDOM(this.editorView));
@@ -1378,7 +1390,7 @@ class BlockWidgetView extends ContentView {
         return this.parent ? this.parent.view.state.doc.slice(this.posAtStart, this.posAtEnd) : state.Text.empty;
     }
     domBoundsAround() { return null; }
-    match(other) {
+    become(other) {
         if (other instanceof BlockWidgetView && other.type == this.type &&
             other.widget.constructor == this.widget.constructor) {
             if (!other.widget.eq(this.widget))
@@ -1392,6 +1404,11 @@ class BlockWidgetView extends ContentView {
     }
     ignoreMutation() { return true; }
     ignoreEvent(event) { return this.widget.ignoreEvent(event); }
+    destroy() {
+        super.destroy();
+        if (this.dom)
+            this.widget.destroy(this.dom);
+    }
 }
 
 class ContentBuilder {
@@ -1727,36 +1744,39 @@ class PluginInstance {
         this.value = null;
     }
     takeField(type, target) {
-        for (let { field, get } of this.spec.fields)
-            if (field == type)
-                target.push(get(this.value));
+        if (this.spec)
+            for (let { field, get } of this.spec.fields)
+                if (field == type)
+                    target.push(get(this.value));
     }
     update(view) {
         if (!this.value) {
-            try {
-                this.value = this.spec.create(view);
-            }
-            catch (e) {
-                logException(view.state, e, "CodeMirror plugin crashed");
-                return PluginInstance.dummy;
+            if (this.spec) {
+                try {
+                    this.value = this.spec.create(view);
+                }
+                catch (e) {
+                    logException(view.state, e, "CodeMirror plugin crashed");
+                    this.deactivate();
+                }
             }
         }
         else if (this.mustUpdate) {
             let update = this.mustUpdate;
             this.mustUpdate = null;
-            if (!this.value.update)
-                return this;
-            try {
-                this.value.update(update);
-            }
-            catch (e) {
-                logException(update.state, e, "CodeMirror plugin crashed");
-                if (this.value.destroy)
-                    try {
-                        this.value.destroy();
-                    }
-                    catch (_) { }
-                return PluginInstance.dummy;
+            if (this.value.update) {
+                try {
+                    this.value.update(update);
+                }
+                catch (e) {
+                    logException(update.state, e, "CodeMirror plugin crashed");
+                    if (this.value.destroy)
+                        try {
+                            this.value.destroy();
+                        }
+                        catch (_) { }
+                    this.deactivate();
+                }
             }
         }
         return this;
@@ -1772,20 +1792,12 @@ class PluginInstance {
             }
         }
     }
+    deactivate() {
+        this.spec = this.value = null;
+    }
 }
-PluginInstance.dummy = new PluginInstance(ViewPlugin.define(() => ({})));
-function combineFacetAttrs(values) {
-    let result = {};
-    for (let i = values.length - 1; i >= 0; i--)
-        combineAttrs(values[i], result);
-    return result;
-}
-const editorAttributes = state.Facet.define({
-    combine: combineFacetAttrs
-});
-const contentAttributes = state.Facet.define({
-    combine: combineFacetAttrs
-});
+const editorAttributes = state.Facet.define();
+const contentAttributes = state.Facet.define();
 // Provide decorations
 const decorations = state.Facet.define();
 const styleModule = state.Facet.define();
@@ -1912,7 +1924,7 @@ class ViewUpdate {
     Whether the document changed in this update.
     */
     get docChanged() {
-        return this.transactions.some(tr => tr.docChanged);
+        return !this.changes.empty;
     }
     /**
     Whether the selection was explicitly set in this update.
@@ -1933,12 +1945,12 @@ class DocView extends ContentView {
         this.compositionDeco = Decoration.none;
         this.decorations = [];
         // Track a minimum width for the editor. When measuring sizes in
-        // checkLayout, 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.
+        // 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;
@@ -2008,7 +2020,7 @@ class DocView extends ContentView {
             this.updateSelection();
         }
     }
-    // Used both by update and checkLayout do perform the actual DOM
+    // Used by update and the constructor do perform the actual DOM
     // update
     updateInner(changes, deco, oldLength) {
         this.view.viewState.mustMeasureContent = true;
@@ -2049,71 +2061,9 @@ class DocView extends ContentView {
             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);
-            this.replaceRange(fromI, fromOff, toI, toOff, content, breakAtStart, openStart, openEnd);
+            replaceRange(this, fromI, fromOff, toI, toOff, content, breakAtStart, openStart, openEnd);
         }
     }
-    replaceRange(fromI, fromOff, toI, toOff, content, breakAtStart, openStart, openEnd) {
-        let before = this.children[fromI], last = content.length ? content[content.length - 1] : null;
-        let breakAtEnd = last ? last.breakAfter : breakAtStart;
-        // Change within a single line
-        if (fromI == toI && !breakAtStart && !breakAtEnd && content.length < 2 &&
-            before.merge(fromOff, toOff, content.length ? last : null, fromOff == 0, openStart, openEnd))
-            return;
-        let after = this.children[toI];
-        // Make sure the end of the line after the update is preserved in `after`
-        if (toOff < after.length) {
-            // If we're splitting a line, separate part of the start line to
-            // avoid that being mangled when updating the start line.
-            if (fromI == toI) {
-                after = after.split(toOff);
-                toOff = 0;
-            }
-            // If the element after the replacement should be merged with
-            // the last replacing element, update `content`
-            if (!breakAtEnd && last && after.merge(0, toOff, last, true, 0, openEnd)) {
-                content[content.length - 1] = after;
-            }
-            else {
-                // Remove the start of the after element, if necessary, and
-                // add it to `content`.
-                if (toOff)
-                    after.merge(0, toOff, null, false, 0, openEnd);
-                content.push(after);
-            }
-        }
-        else if (after.breakAfter) {
-            // The element at `toI` is entirely covered by this range.
-            // Preserve its line break, if any.
-            if (last)
-                last.breakAfter = 1;
-            else
-                breakAtStart = 1;
-        }
-        // Since we've handled the next element from the current elements
-        // now, make sure `toI` points after that.
-        toI++;
-        before.breakAfter = breakAtStart;
-        if (fromOff > 0) {
-            if (!breakAtStart && content.length && before.merge(fromOff, before.length, content[0], false, openStart, 0)) {
-                before.breakAfter = content.shift().breakAfter;
-            }
-            else if (fromOff < before.length || before.children.length && before.children[before.children.length - 1].length == 0) {
-                before.merge(fromOff, before.length, null, false, openStart, 0);
-            }
-            fromI++;
-        }
-        // Try to merge widgets on the boundaries of the replacement
-        while (fromI < toI && content.length) {
-            if (this.children[toI - 1].match(content[content.length - 1]))
-                toI--, content.pop();
-            else if (this.children[fromI].match(content[0]))
-                fromI++, content.shift();
-            else
-                break;
-        }
-        if (fromI < toI || content.length)
-            this.replaceChildren(fromI, toI, content);
-    }
     // Sync the DOM selection to this.state.selection
     updateSelection(mustRead = false, fromPointer = false) {
         if (mustRead)
@@ -2376,15 +2326,10 @@ function computeCompositionDeco(view, changes) {
     if (!textNode)
         return Decoration.none;
     let cView = view.docView.nearest(textNode);
+    if (!cView)
+        return Decoration.none;
     let from, to, topNode = textNode;
-    if (cView instanceof InlineView) {
-        while (cView.parent instanceof InlineView)
-            cView = cView.parent;
-        from = cView.posAtStart;
-        to = from + cView.length;
-        topNode = cView.dom;
-    }
-    else if (cView instanceof LineView) {
+    if (cView instanceof LineView) {
         while (topNode.parentNode != cView.dom)
             topNode = topNode.parentNode;
         let prev = topNode.previousSibling;
@@ -2393,7 +2338,17 @@ function computeCompositionDeco(view, changes) {
         from = to = prev ? ContentView.get(prev).posAtEnd : cView.posAtStart;
     }
     else {
-        return Decoration.none;
+        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;
@@ -2931,7 +2886,7 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
     y = docTop + yOffset;
     let lineStart = block.from;
     // Clip x to the viewport sides
-    x = Math.max(content.left + 1, Math.min(content.right - 1, x));
+    x = Math.max(content.left + 1, Math.min(Math.max(content.right, content.left + view.docView.minWidth) - 1, x));
     // If this is outside of the rendered viewport, we can't determine a position
     if (lineStart < view.viewport.from)
         return view.viewport.from == 0 ? 0 : posAtCoordsImprecise(view, content, block, x, y);
@@ -4575,10 +4530,11 @@ class ViewState {
         if (scrollTarget && (scrollTarget.range.head < viewport.from || scrollTarget.range.head > viewport.to) ||
             !this.viewportIsAppropriate(viewport))
             viewport = this.getViewport(0, scrollTarget);
-        if (!update.changes.empty || (update.flags & 2 /* Height */) ||
-            viewport.from != this.viewport.from || viewport.to != this.viewport.to)
-            this.updateViewportLines();
+        let updateLines = !update.changes.empty || (update.flags & 2 /* Height */) ||
+            viewport.from != this.viewport.from || viewport.to != this.viewport.to;
         this.viewport = viewport;
+        if (updateLines)
+            this.updateViewportLines();
         this.updateForViewport();
         if (this.lineGaps.length || this.viewport.to - this.viewport.from > 4000 /* DoubleMargin */)
             this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
@@ -4793,7 +4749,7 @@ class ViewState {
         return changed ? 4 /* Viewport */ : 0;
     }
     lineBlockAt(pos) {
-        return (pos >= this.viewport.from && pos <= this.viewport.to && this.viewportLines.find(b => b.from <= pos && b.to <= pos)) ||
+        return (pos >= this.viewport.from && pos <= this.viewport.to && this.viewportLines.find(b => b.from <= pos && b.to >= pos)) ||
             scaleBlock(this.heightMap.lineAt(pos, QueryType.ByPos, this.state.doc, 0, 0), this.scaler);
     }
     lineBlockAtHeight(height) {
@@ -5064,7 +5020,7 @@ const baseTheme = buildTheme("." + baseThemeID, {
         color: "inherit",
         fontSize: "70%",
         padding: ".2em 1em",
-        borderRadius: "3px"
+        borderRadius: "1px"
     },
     "&light .cm-button": {
         backgroundImage: "linear-gradient(#eff1f5, #d9d9df)",
@@ -5386,6 +5342,7 @@ class DOMObserver {
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
+        this.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
         clearTimeout(this.parentCheck);
         clearTimeout(this.resizeTimeout);
     }
@@ -5682,6 +5639,7 @@ class EditorView {
     */
     config = {}) {
         this.plugins = [];
+        this.pluginMap = new Map;
         this.editorAttrs = {};
         this.contentAttrs = {};
         this.bidiCache = [];
@@ -5851,6 +5809,7 @@ class EditorView {
                 plugin.destroy(this);
             this.viewState = new ViewState(newState);
             this.plugins = newState.facet(viewPlugin).map(spec => new PluginInstance(spec).update(this));
+            this.pluginMap.clear();
             this.docView = new DocView(this);
             this.inputState.ensureHandlers(this);
             this.mountStyles();
@@ -5881,6 +5840,7 @@ class EditorView {
                 if (plugin.mustUpdate != update)
                     plugin.destroy(this);
             this.plugins = newPlugins;
+            this.pluginMap.clear();
             this.inputState.ensureHandlers(this);
         }
         else {
@@ -5888,7 +5848,7 @@ class EditorView {
                 p.mustUpdate = update;
         }
         for (let i = 0; i < this.plugins.length; i++)
-            this.plugins[i] = this.plugins[i].update(this);
+            this.plugins[i].update(this);
     }
     /**
     @internal
@@ -5977,7 +5937,7 @@ class EditorView {
             this.state.facet(theme);
     }
     updateAttrs() {
-        let editorAttrs = combineAttrs(this.state.facet(editorAttributes), {
+        let editorAttrs = attrsFromFacet(this, editorAttributes, {
             class: "cm-editor" + (this.hasFocus ? " cm-focused " : " ") + this.themeClasses
         });
         let contentAttrs = {
@@ -5993,7 +5953,7 @@ class EditorView {
         };
         if (this.state.readOnly)
             contentAttrs["aria-readonly"] = "true";
-        combineAttrs(this.state.facet(contentAttributes), contentAttrs);
+        attrsFromFacet(this, contentAttributes, contentAttrs);
         this.observer.ignore(() => {
             updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
             updateAttrs(this.dom, this.editorAttrs, editorAttrs);
@@ -6062,19 +6022,26 @@ class EditorView {
     the return value of this method.
     */
     plugin(plugin) {
-        for (let inst of this.plugins)
-            if (inst.spec == plugin)
-                return inst.update(this).value;
-        return null;
+        let known = this.pluginMap.get(plugin);
+        if (known === undefined || known && known.spec != plugin)
+            this.pluginMap.set(plugin, known = this.plugins.find(p => p.spec == plugin) || null);
+        return known && known.update(this).value;
     }
     /**
     The top position of the document, in screen coordinates. This
-    may be negative when the editor is scrolled down.
+    may be negative when the editor is scrolled down. Points
+    directly to the top of the first line, not above the padding.
     */
     get documentTop() {
         return this.contentDOM.getBoundingClientRect().top + this.viewState.paddingTop;
     }
     /**
+    Reports the padding above and below the document.
+    */
+    get documentPadding() {
+        return { top: this.viewState.paddingTop, bottom: this.viewState.paddingBottom };
+    }
+    /**
     Find the line or block widget at the given vertical position.
     
     By default, this position is interpreted as a screen position,
@@ -6545,6 +6512,14 @@ class CachedOrder {
         return result;
     }
 }
+function attrsFromFacet(view, facet, base) {
+    for (let sources = view.state.facet(facet), i = sources.length - 1; i >= 0; i--) {
+        let source = sources[i], value = typeof source == "function" ? source(view) : source;
+        if (value)
+            combineAttrs(value, base);
+    }
+    return base;
+}
 
 const currentPlatform = browser.mac ? "mac" : browser.windows ? "win" : browser.linux ? "linux" : "key";
 function normalizeKeyName(name, platform) {
@@ -7197,35 +7172,29 @@ class TabWidget extends WidgetType {
 }
 
 const plugin = ViewPlugin.fromClass(class {
-    constructor(view) {
-        this.height = -1;
-        this.measure = {
-            read: view => Math.max(0, view.scrollDOM.clientHeight - view.defaultLineHeight),
-            write: (value, view) => {
-                if (Math.abs(value - this.height) > 1) {
-                    this.height = value;
-                    view.contentDOM.style.paddingBottom = value + "px";
-                }
-            }
-        };
-        view.requestMeasure(this.measure);
+    constructor() {
+        this.height = 1000;
+        this.attrs = { style: "padding-bottom: 1000px" };
     }
     update(update) {
-        if (update.geometryChanged)
-            update.view.requestMeasure(this.measure);
+        let height = update.view.viewState.editorHeight - update.view.defaultLineHeight;
+        if (height != this.height) {
+            this.height = height;
+            this.attrs = { style: `padding-bottom: ${height}px` };
+        }
     }
 });
 /**
-Returns a plugin that makes sure the content has a bottom margin
-equivalent to the height of the editor, minus one line height, so
-that every line in the document can be scrolled to the top of the
-editor.
+Returns an extension that makes sure the content has a bottom
+margin equivalent to the height of the editor, minus one line
+height, so that every line in the document can be scrolled to the
+top of the editor.
 
 This is only meaningful when the editor is scrollable, and should
 not be enabled in editors that take the size of their content.
 */
 function scrollPastEnd() {
-    return plugin;
+    return [plugin, contentAttributes.of(view => { var _a; return ((_a = view.plugin(plugin)) === null || _a === void 0 ? void 0 : _a.attrs) || null; })];
 }
 
 /**