@codemirror/view 6.18.0 → 6.19.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { EditorState, Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, findColumn, CharCategory, Annotation, Transaction, Prec, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
+import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, findColumn, CharCategory, Annotation, EditorState, Transaction, Prec, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
 import { StyleModule } from 'style-mod';
 import { keyName, base, shift } from 'w3c-keyname';
 
@@ -482,6 +482,8 @@ class ContentView {
         }
     }
     setDOM(dom) {
+        if (this.dom == dom)
+            return;
         if (this.dom)
             this.dom.cmView = null;
         this.dom = dom;
@@ -654,113 +656,6 @@ function mergeChildrenInto(parent, from, to, insert, openStart, openEnd) {
     replaceRange(parent, fromI, fromOff, toI, toOff, insert, 0, openStart, openEnd);
 }
 
-const LineBreakPlaceholder = "\uffff";
-class DOMReader {
-    constructor(points, state) {
-        this.points = points;
-        this.text = "";
-        this.lineSeparator = state.facet(EditorState.lineSeparator);
-    }
-    append(text) {
-        this.text += text;
-    }
-    lineBreak() {
-        this.text += LineBreakPlaceholder;
-    }
-    readRange(start, end) {
-        if (!start)
-            return this;
-        let parent = start.parentNode;
-        for (let cur = start;;) {
-            this.findPointBefore(parent, cur);
-            let oldLen = this.text.length;
-            this.readNode(cur);
-            let next = cur.nextSibling;
-            if (next == end)
-                break;
-            let view = ContentView.get(cur), nextView = ContentView.get(next);
-            if (view && nextView ? view.breakAfter :
-                (view ? view.breakAfter : isBlockElement(cur)) ||
-                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore) && this.text.length > oldLen))
-                this.lineBreak();
-            cur = next;
-        }
-        this.findPointBefore(parent, end);
-        return this;
-    }
-    readTextNode(node) {
-        let text = node.nodeValue;
-        for (let point of this.points)
-            if (point.node == node)
-                point.pos = this.text.length + Math.min(point.offset, text.length);
-        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
-            let nextBreak = -1, breakSize = 1, m;
-            if (this.lineSeparator) {
-                nextBreak = text.indexOf(this.lineSeparator, off);
-                breakSize = this.lineSeparator.length;
-            }
-            else if (m = re.exec(text)) {
-                nextBreak = m.index;
-                breakSize = m[0].length;
-            }
-            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
-            if (nextBreak < 0)
-                break;
-            this.lineBreak();
-            if (breakSize > 1)
-                for (let point of this.points)
-                    if (point.node == node && point.pos > this.text.length)
-                        point.pos -= breakSize - 1;
-            off = nextBreak + breakSize;
-        }
-    }
-    readNode(node) {
-        if (node.cmIgnore)
-            return;
-        let view = ContentView.get(node);
-        let fromView = view && view.overrideDOMText;
-        if (fromView != null) {
-            this.findPointInside(node, fromView.length);
-            for (let i = fromView.iter(); !i.next().done;) {
-                if (i.lineBreak)
-                    this.lineBreak();
-                else
-                    this.append(i.value);
-            }
-        }
-        else if (node.nodeType == 3) {
-            this.readTextNode(node);
-        }
-        else if (node.nodeName == "BR") {
-            if (node.nextSibling)
-                this.lineBreak();
-        }
-        else if (node.nodeType == 1) {
-            this.readRange(node.firstChild, null);
-        }
-    }
-    findPointBefore(node, next) {
-        for (let point of this.points)
-            if (point.node == node && node.childNodes[point.offset] == next)
-                point.pos = this.text.length;
-    }
-    findPointInside(node, maxLen) {
-        for (let point of this.points)
-            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
-                point.pos = this.text.length + Math.min(maxLen, point.offset);
-    }
-}
-function isBlockElement(node) {
-    return node.nodeType == 1 && /^(DIV|P|LI|UL|OL|BLOCKQUOTE|DD|DT|H\d|SECTION|PRE)$/.test(node.nodeName);
-}
-class DOMPoint {
-    constructor(node, offset) {
-        this.node = node;
-        this.offset = offset;
-        this.pos = -1;
-    }
-}
-
 let nav = typeof navigator != "undefined" ? navigator : { userAgent: "", vendor: "", platform: "" };
 let doc = typeof document != "undefined" ? document : { documentElement: { style: {} } };
 const ie_edge = /*@__PURE__*//Edge\/(\d+)/.exec(nav.userAgent);
@@ -1196,307 +1091,27 @@ function getAttrs(dom) {
     return attrs;
 }
 
-/**
-Widgets added to the content are described by subclasses of this
-class. Using a description object like that makes it possible to
-delay creating of the DOM structure for a widget until it is
-needed, and to avoid redrawing widgets even if the decorations
-that define them are recreated.
-*/
-class WidgetType {
-    /**
-    Compare this instance to another instance of the same type.
-    (TypeScript can't express this, but only instances of the same
-    specific class will be passed to this method.) This is used to
-    avoid redrawing widgets when they are replaced by a new
-    decoration of the same type. The default implementation just
-    returns `false`, which will cause new instances of the widget to
-    always be redrawn.
-    */
-    eq(widget) { return false; }
-    /**
-    Update a DOM element created by a widget of the same type (but
-    different, non-`eq` content) to reflect this widget. May return
-    true to indicate that it could update, false to indicate it
-    couldn't (in which case the widget will be redrawn). The default
-    implementation just returns false.
-    */
-    updateDOM(dom, view) { return false; }
-    /**
-    @internal
-    */
-    compare(other) {
-        return this == other || this.constructor == other.constructor && this.eq(other);
+class LineView extends ContentView {
+    constructor() {
+        super(...arguments);
+        this.children = [];
+        this.length = 0;
+        this.prevAttrs = undefined;
+        this.attrs = null;
+        this.breakAfter = 0;
     }
-    /**
-    The estimated height this widget will have, to be used when
-    estimating the height of content that hasn't been drawn. May
-    return -1 to indicate you don't know. The default implementation
-    returns -1.
-    */
-    get estimatedHeight() { return -1; }
-    /**
-    For inline widgets that are displayed inline (as opposed to
-    `inline-block`) and introduce line breaks (through `<br>` tags
-    or textual newlines), this must indicate the amount of line
-    breaks they introduce. Defaults to 0.
-    */
-    get lineBreaks() { return 0; }
-    /**
-    Can be used to configure which kinds of events inside the widget
-    should be ignored by the editor. The default is to ignore all
-    events.
-    */
-    ignoreEvent(event) { return true; }
-    /**
-    Override the way screen coordinates for positions at/in the
-    widget are found. `pos` will be the offset into the widget, and
-    `side` the side of the position that is being queried—less than
-    zero for before, greater than zero for after, and zero for
-    directly at that position.
-    */
-    coordsAt(dom, pos, side) { return null; }
-    /**
-    @internal
-    */
-    get isHidden() { return false; }
-    /**
-    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.
-*/
-var BlockType = /*@__PURE__*/(function (BlockType) {
-    /**
-    A line of text.
-    */
-    BlockType[BlockType["Text"] = 0] = "Text";
-    /**
-    A block widget associated with the position after it.
-    */
-    BlockType[BlockType["WidgetBefore"] = 1] = "WidgetBefore";
-    /**
-    A block widget associated with the position before it.
-    */
-    BlockType[BlockType["WidgetAfter"] = 2] = "WidgetAfter";
-    /**
-    A block widget [replacing](https://codemirror.net/6/docs/ref/#view.Decoration^replace) a range of content.
-    */
-    BlockType[BlockType["WidgetRange"] = 3] = "WidgetRange";
-return BlockType})(BlockType || (BlockType = {}));
-/**
-A decoration provides information on how to draw or style a piece
-of content. You'll usually use it wrapped in a
-[`Range`](https://codemirror.net/6/docs/ref/#state.Range), which adds a start and end position.
-@nonabstract
-*/
-class Decoration extends RangeValue {
-    constructor(
-    /**
-    @internal
-    */
-    startSide, 
-    /**
-    @internal
-    */
-    endSide, 
-    /**
-    @internal
-    */
-    widget, 
-    /**
-    The config object used to create this decoration. You can
-    include additional properties in there to store metadata about
-    your decoration.
-    */
-    spec) {
-        super();
-        this.startSide = startSide;
-        this.endSide = endSide;
-        this.widget = widget;
-        this.spec = spec;
-    }
-    /**
-    @internal
-    */
-    get heightRelevant() { return false; }
-    /**
-    Create a mark decoration, which influences the styling of the
-    content in its range. Nested mark decorations will cause nested
-    DOM elements to be created. Nesting order is determined by
-    precedence of the [facet](https://codemirror.net/6/docs/ref/#view.EditorView^decorations), with
-    the higher-precedence decorations creating the inner DOM nodes.
-    Such elements are split on line boundaries and on the boundaries
-    of lower-precedence decorations.
-    */
-    static mark(spec) {
-        return new MarkDecoration(spec);
-    }
-    /**
-    Create a widget decoration, which displays a DOM element at the
-    given position.
-    */
-    static widget(spec) {
-        let side = Math.max(-10000, Math.min(10000, spec.side || 0)), block = !!spec.block;
-        side += (block && !spec.inlineOrder)
-            ? (side > 0 ? 300000000 /* Side.BlockAfter */ : -400000000 /* Side.BlockBefore */)
-            : (side > 0 ? 100000000 /* Side.InlineAfter */ : -100000000 /* Side.InlineBefore */);
-        return new PointDecoration(spec, side, side, block, spec.widget || null, false);
-    }
-    /**
-    Create a replace decoration which replaces the given range with
-    a widget, or simply hides it.
-    */
-    static replace(spec) {
-        let block = !!spec.block, startSide, endSide;
-        if (spec.isBlockGap) {
-            startSide = -500000000 /* Side.GapStart */;
-            endSide = 400000000 /* Side.GapEnd */;
-        }
-        else {
-            let { start, end } = getInclusive(spec, block);
-            startSide = (start ? (block ? -300000000 /* Side.BlockIncStart */ : -1 /* Side.InlineIncStart */) : 500000000 /* Side.NonIncStart */) - 1;
-            endSide = (end ? (block ? 200000000 /* Side.BlockIncEnd */ : 1 /* Side.InlineIncEnd */) : -600000000 /* Side.NonIncEnd */) + 1;
-        }
-        return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
-    }
-    /**
-    Create a line decoration, which can add DOM attributes to the
-    line starting at the given position.
-    */
-    static line(spec) {
-        return new LineDecoration(spec);
-    }
-    /**
-    Build a [`DecorationSet`](https://codemirror.net/6/docs/ref/#view.DecorationSet) from the given
-    decorated range or ranges. If the ranges aren't already sorted,
-    pass `true` for `sort` to make the library sort them for you.
-    */
-    static set(of, sort = false) {
-        return RangeSet.of(of, sort);
-    }
-    /**
-    @internal
-    */
-    hasHeight() { return this.widget ? this.widget.estimatedHeight > -1 : false; }
-}
-/**
-The empty set of decorations.
-*/
-Decoration.none = RangeSet.empty;
-class MarkDecoration extends Decoration {
-    constructor(spec) {
-        let { start, end } = getInclusive(spec);
-        super(start ? -1 /* Side.InlineIncStart */ : 500000000 /* Side.NonIncStart */, end ? 1 /* Side.InlineIncEnd */ : -600000000 /* Side.NonIncEnd */, null, spec);
-        this.tagName = spec.tagName || "span";
-        this.class = spec.class || "";
-        this.attrs = spec.attributes || null;
-    }
-    eq(other) {
-        var _a, _b;
-        return this == other ||
-            other instanceof MarkDecoration &&
-                this.tagName == other.tagName &&
-                (this.class || ((_a = this.attrs) === null || _a === void 0 ? void 0 : _a.class)) == (other.class || ((_b = other.attrs) === null || _b === void 0 ? void 0 : _b.class)) &&
-                attrsEq(this.attrs, other.attrs, "class");
-    }
-    range(from, to = from) {
-        if (from >= to)
-            throw new RangeError("Mark decorations may not be empty");
-        return super.range(from, to);
-    }
-}
-MarkDecoration.prototype.point = false;
-class LineDecoration extends Decoration {
-    constructor(spec) {
-        super(-200000000 /* Side.Line */, -200000000 /* Side.Line */, null, spec);
-    }
-    eq(other) {
-        return other instanceof LineDecoration &&
-            this.spec.class == other.spec.class &&
-            attrsEq(this.spec.attributes, other.spec.attributes);
-    }
-    range(from, to = from) {
-        if (to != from)
-            throw new RangeError("Line decoration ranges must be zero-length");
-        return super.range(from, to);
-    }
-}
-LineDecoration.prototype.mapMode = MapMode.TrackBefore;
-LineDecoration.prototype.point = true;
-class PointDecoration extends Decoration {
-    constructor(spec, startSide, endSide, block, widget, isReplace) {
-        super(startSide, endSide, widget, spec);
-        this.block = block;
-        this.isReplace = isReplace;
-        this.mapMode = !block ? MapMode.TrackDel : startSide <= 0 ? MapMode.TrackBefore : MapMode.TrackAfter;
-    }
-    // Only relevant when this.block == true
-    get type() {
-        return this.startSide < this.endSide ? BlockType.WidgetRange
-            : this.startSide <= 0 ? BlockType.WidgetBefore : BlockType.WidgetAfter;
-    }
-    get heightRelevant() {
-        return this.block || !!this.widget && (this.widget.estimatedHeight >= 5 || this.widget.lineBreaks > 0);
-    }
-    eq(other) {
-        return other instanceof PointDecoration &&
-            widgetsEq(this.widget, other.widget) &&
-            this.block == other.block &&
-            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)))
-            throw new RangeError("Invalid range for replacement decoration");
-        if (!this.isReplace && to != from)
-            throw new RangeError("Widget decorations can only have zero-length ranges");
-        return super.range(from, to);
-    }
-}
-PointDecoration.prototype.point = true;
-function getInclusive(spec, block = false) {
-    let { inclusiveStart: start, inclusiveEnd: end } = spec;
-    if (start == null)
-        start = spec.inclusive;
-    if (end == null)
-        end = spec.inclusive;
-    return { start: start !== null && start !== void 0 ? start : block, end: end !== null && end !== void 0 ? end : block };
-}
-function widgetsEq(a, b) {
-    return a == b || !!(a && b && a.compare(b));
-}
-function addRange(from, to, ranges, margin = 0) {
-    let last = ranges.length - 1;
-    if (last >= 0 && ranges[last] + margin >= from)
-        ranges[last] = Math.max(ranges[last], to);
-    else
-        ranges.push(from, to);
-}
-
-class LineView extends ContentView {
-    constructor() {
-        super(...arguments);
-        this.children = [];
-        this.length = 0;
-        this.prevAttrs = undefined;
-        this.attrs = null;
-        this.breakAfter = 0;
-    }
-    // Consumes source
-    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 (hasStart)
-            this.setDeco(source ? source.attrs : null);
-        mergeChildrenInto(this, from, to, source ? source.children : [], openStart, openEnd);
-        return true;
+    // Consumes source
+    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 (hasStart)
+            this.setDeco(source ? source.attrs : null);
+        mergeChildrenInto(this, from, to, source ? source.children : [], openStart, openEnd);
+        return true;
     }
     split(at) {
         let end = new LineView;
@@ -1618,7 +1233,7 @@ class LineView extends ContentView {
         return rect;
     }
     become(_other) { return false; }
-    get type() { return BlockType.Text; }
+    covers() { return true; }
     static find(docView, pos) {
         for (let i = 0, off = 0; i < docView.children.length; i++) {
             let block = docView.children[i], end = off + block.length;
@@ -1634,11 +1249,11 @@ class LineView extends ContentView {
     }
 }
 class BlockWidgetView extends ContentView {
-    constructor(widget, length, type) {
+    constructor(widget, length, deco) {
         super();
         this.widget = widget;
         this.length = length;
-        this.type = type;
+        this.deco = deco;
         this.breakAfter = 0;
         this.prevWidget = null;
     }
@@ -1655,7 +1270,7 @@ class BlockWidgetView extends ContentView {
     split(at) {
         let len = this.length - at;
         this.length = at;
-        let end = new BlockWidgetView(this.widget, len, this.type);
+        let end = new BlockWidgetView(this.widget, len, this.deco);
         end.breakAfter = this.breakAfter;
         return end;
     }
@@ -1682,7 +1297,7 @@ class BlockWidgetView extends ContentView {
                 this.prevWidget = this.widget;
             this.widget = other.widget;
             this.length = other.length;
-            this.type = other.type;
+            this.deco = other.deco;
             this.breakAfter = other.breakAfter;
             return true;
         }
@@ -1695,12 +1310,296 @@ class BlockWidgetView extends ContentView {
     coordsAt(pos, side) {
         return this.widget.coordsAt(this.dom, pos, side);
     }
-    destroy() {
-        super.destroy();
-        if (this.dom)
-            this.widget.destroy(this.dom);
+    destroy() {
+        super.destroy();
+        if (this.dom)
+            this.widget.destroy(this.dom);
+    }
+    covers(side) {
+        let { startSide, endSide } = this.deco;
+        return startSide == endSide ? false : side < 0 ? startSide < 0 : endSide > 0;
+    }
+}
+
+/**
+Widgets added to the content are described by subclasses of this
+class. Using a description object like that makes it possible to
+delay creating of the DOM structure for a widget until it is
+needed, and to avoid redrawing widgets even if the decorations
+that define them are recreated.
+*/
+class WidgetType {
+    /**
+    Compare this instance to another instance of the same type.
+    (TypeScript can't express this, but only instances of the same
+    specific class will be passed to this method.) This is used to
+    avoid redrawing widgets when they are replaced by a new
+    decoration of the same type. The default implementation just
+    returns `false`, which will cause new instances of the widget to
+    always be redrawn.
+    */
+    eq(widget) { return false; }
+    /**
+    Update a DOM element created by a widget of the same type (but
+    different, non-`eq` content) to reflect this widget. May return
+    true to indicate that it could update, false to indicate it
+    couldn't (in which case the widget will be redrawn). The default
+    implementation just returns false.
+    */
+    updateDOM(dom, view) { return false; }
+    /**
+    @internal
+    */
+    compare(other) {
+        return this == other || this.constructor == other.constructor && this.eq(other);
+    }
+    /**
+    The estimated height this widget will have, to be used when
+    estimating the height of content that hasn't been drawn. May
+    return -1 to indicate you don't know. The default implementation
+    returns -1.
+    */
+    get estimatedHeight() { return -1; }
+    /**
+    For inline widgets that are displayed inline (as opposed to
+    `inline-block`) and introduce line breaks (through `<br>` tags
+    or textual newlines), this must indicate the amount of line
+    breaks they introduce. Defaults to 0.
+    */
+    get lineBreaks() { return 0; }
+    /**
+    Can be used to configure which kinds of events inside the widget
+    should be ignored by the editor. The default is to ignore all
+    events.
+    */
+    ignoreEvent(event) { return true; }
+    /**
+    Override the way screen coordinates for positions at/in the
+    widget are found. `pos` will be the offset into the widget, and
+    `side` the side of the position that is being queried—less than
+    zero for before, greater than zero for after, and zero for
+    directly at that position.
+    */
+    coordsAt(dom, pos, side) { return null; }
+    /**
+    @internal
+    */
+    get isHidden() { return false; }
+    /**
+    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.
+*/
+var BlockType = /*@__PURE__*/(function (BlockType) {
+    /**
+    A line of text.
+    */
+    BlockType[BlockType["Text"] = 0] = "Text";
+    /**
+    A block widget associated with the position after it.
+    */
+    BlockType[BlockType["WidgetBefore"] = 1] = "WidgetBefore";
+    /**
+    A block widget associated with the position before it.
+    */
+    BlockType[BlockType["WidgetAfter"] = 2] = "WidgetAfter";
+    /**
+    A block widget [replacing](https://codemirror.net/6/docs/ref/#view.Decoration^replace) a range of content.
+    */
+    BlockType[BlockType["WidgetRange"] = 3] = "WidgetRange";
+return BlockType})(BlockType || (BlockType = {}));
+/**
+A decoration provides information on how to draw or style a piece
+of content. You'll usually use it wrapped in a
+[`Range`](https://codemirror.net/6/docs/ref/#state.Range), which adds a start and end position.
+@nonabstract
+*/
+class Decoration extends RangeValue {
+    constructor(
+    /**
+    @internal
+    */
+    startSide, 
+    /**
+    @internal
+    */
+    endSide, 
+    /**
+    @internal
+    */
+    widget, 
+    /**
+    The config object used to create this decoration. You can
+    include additional properties in there to store metadata about
+    your decoration.
+    */
+    spec) {
+        super();
+        this.startSide = startSide;
+        this.endSide = endSide;
+        this.widget = widget;
+        this.spec = spec;
+    }
+    /**
+    @internal
+    */
+    get heightRelevant() { return false; }
+    /**
+    Create a mark decoration, which influences the styling of the
+    content in its range. Nested mark decorations will cause nested
+    DOM elements to be created. Nesting order is determined by
+    precedence of the [facet](https://codemirror.net/6/docs/ref/#view.EditorView^decorations), with
+    the higher-precedence decorations creating the inner DOM nodes.
+    Such elements are split on line boundaries and on the boundaries
+    of lower-precedence decorations.
+    */
+    static mark(spec) {
+        return new MarkDecoration(spec);
+    }
+    /**
+    Create a widget decoration, which displays a DOM element at the
+    given position.
+    */
+    static widget(spec) {
+        let side = Math.max(-10000, Math.min(10000, spec.side || 0)), block = !!spec.block;
+        side += (block && !spec.inlineOrder)
+            ? (side > 0 ? 300000000 /* Side.BlockAfter */ : -400000000 /* Side.BlockBefore */)
+            : (side > 0 ? 100000000 /* Side.InlineAfter */ : -100000000 /* Side.InlineBefore */);
+        return new PointDecoration(spec, side, side, block, spec.widget || null, false);
+    }
+    /**
+    Create a replace decoration which replaces the given range with
+    a widget, or simply hides it.
+    */
+    static replace(spec) {
+        let block = !!spec.block, startSide, endSide;
+        if (spec.isBlockGap) {
+            startSide = -500000000 /* Side.GapStart */;
+            endSide = 400000000 /* Side.GapEnd */;
+        }
+        else {
+            let { start, end } = getInclusive(spec, block);
+            startSide = (start ? (block ? -300000000 /* Side.BlockIncStart */ : -1 /* Side.InlineIncStart */) : 500000000 /* Side.NonIncStart */) - 1;
+            endSide = (end ? (block ? 200000000 /* Side.BlockIncEnd */ : 1 /* Side.InlineIncEnd */) : -600000000 /* Side.NonIncEnd */) + 1;
+        }
+        return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
+    }
+    /**
+    Create a line decoration, which can add DOM attributes to the
+    line starting at the given position.
+    */
+    static line(spec) {
+        return new LineDecoration(spec);
+    }
+    /**
+    Build a [`DecorationSet`](https://codemirror.net/6/docs/ref/#view.DecorationSet) from the given
+    decorated range or ranges. If the ranges aren't already sorted,
+    pass `true` for `sort` to make the library sort them for you.
+    */
+    static set(of, sort = false) {
+        return RangeSet.of(of, sort);
+    }
+    /**
+    @internal
+    */
+    hasHeight() { return this.widget ? this.widget.estimatedHeight > -1 : false; }
+}
+/**
+The empty set of decorations.
+*/
+Decoration.none = RangeSet.empty;
+class MarkDecoration extends Decoration {
+    constructor(spec) {
+        let { start, end } = getInclusive(spec);
+        super(start ? -1 /* Side.InlineIncStart */ : 500000000 /* Side.NonIncStart */, end ? 1 /* Side.InlineIncEnd */ : -600000000 /* Side.NonIncEnd */, null, spec);
+        this.tagName = spec.tagName || "span";
+        this.class = spec.class || "";
+        this.attrs = spec.attributes || null;
+    }
+    eq(other) {
+        var _a, _b;
+        return this == other ||
+            other instanceof MarkDecoration &&
+                this.tagName == other.tagName &&
+                (this.class || ((_a = this.attrs) === null || _a === void 0 ? void 0 : _a.class)) == (other.class || ((_b = other.attrs) === null || _b === void 0 ? void 0 : _b.class)) &&
+                attrsEq(this.attrs, other.attrs, "class");
+    }
+    range(from, to = from) {
+        if (from >= to)
+            throw new RangeError("Mark decorations may not be empty");
+        return super.range(from, to);
+    }
+}
+MarkDecoration.prototype.point = false;
+class LineDecoration extends Decoration {
+    constructor(spec) {
+        super(-200000000 /* Side.Line */, -200000000 /* Side.Line */, null, spec);
+    }
+    eq(other) {
+        return other instanceof LineDecoration &&
+            this.spec.class == other.spec.class &&
+            attrsEq(this.spec.attributes, other.spec.attributes);
+    }
+    range(from, to = from) {
+        if (to != from)
+            throw new RangeError("Line decoration ranges must be zero-length");
+        return super.range(from, to);
+    }
+}
+LineDecoration.prototype.mapMode = MapMode.TrackBefore;
+LineDecoration.prototype.point = true;
+class PointDecoration extends Decoration {
+    constructor(spec, startSide, endSide, block, widget, isReplace) {
+        super(startSide, endSide, widget, spec);
+        this.block = block;
+        this.isReplace = isReplace;
+        this.mapMode = !block ? MapMode.TrackDel : startSide <= 0 ? MapMode.TrackBefore : MapMode.TrackAfter;
+    }
+    // Only relevant when this.block == true
+    get type() {
+        return this.startSide != this.endSide ? BlockType.WidgetRange
+            : this.startSide <= 0 ? BlockType.WidgetBefore : BlockType.WidgetAfter;
+    }
+    get heightRelevant() {
+        return this.block || !!this.widget && (this.widget.estimatedHeight >= 5 || this.widget.lineBreaks > 0);
+    }
+    eq(other) {
+        return other instanceof PointDecoration &&
+            widgetsEq(this.widget, other.widget) &&
+            this.block == other.block &&
+            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)))
+            throw new RangeError("Invalid range for replacement decoration");
+        if (!this.isReplace && to != from)
+            throw new RangeError("Widget decorations can only have zero-length ranges");
+        return super.range(from, to);
     }
 }
+PointDecoration.prototype.point = true;
+function getInclusive(spec, block = false) {
+    let { inclusiveStart: start, inclusiveEnd: end } = spec;
+    if (start == null)
+        start = spec.inclusive;
+    if (end == null)
+        end = spec.inclusive;
+    return { start: start !== null && start !== void 0 ? start : block, end: end !== null && end !== void 0 ? end : block };
+}
+function widgetsEq(a, b) {
+    return a == b || !!(a && b && a.compare(b));
+}
+function addRange(from, to, ranges, margin = 0) {
+    let last = ranges.length - 1;
+    if (last >= 0 && ranges[last] + margin >= from)
+        ranges[last] = Math.max(ranges[last], to);
+    else
+        ranges.push(from, to);
+}
 
 class ContentBuilder {
     constructor(doc, pos, end, disallowBlockEffectsFor) {
@@ -1726,7 +1625,7 @@ class ContentBuilder {
         if (this.content.length == 0)
             return !this.breakAtStart && this.doc.lineAt(this.pos).from != this.pos;
         let last = this.content[this.content.length - 1];
-        return !last.breakAfter && !(last instanceof BlockWidgetView && last.type == BlockType.WidgetBefore);
+        return !(last.breakAfter || last instanceof BlockWidgetView && last.deco.endSide < 0);
     }
     getLine() {
         if (!this.curLine) {
@@ -1751,7 +1650,7 @@ class ContentBuilder {
             this.flushBuffer();
         else
             this.pendingBuffer = 0 /* Buf.No */;
-        if (!this.posCovered())
+        if (!openEnd && !this.posCovered())
             this.getLine();
     }
     buildText(length, active, openStart) {
@@ -1804,10 +1703,9 @@ class ContentBuilder {
         let len = to - from;
         if (deco instanceof PointDecoration) {
             if (deco.block) {
-                let { type } = deco;
-                if (type == BlockType.WidgetAfter && !this.posCovered())
+                if (deco.startSide > 0 && !this.posCovered())
                     this.getLine();
-                this.addBlockWidget(new BlockWidgetView(deco.widget || new NullWidget("div"), len, type));
+                this.addBlockWidget(new BlockWidgetView(deco.widget || new NullWidget("div"), len, deco));
             }
             else {
                 let view = WidgetView.create(deco.widget || new NullWidget("span"), len, len ? 0 : deco.startSide);
@@ -1942,10 +1840,15 @@ class ViewPlugin {
     /**
     @internal
     */
-    domEventHandlers, buildExtensions) {
+    domEventHandlers, 
+    /**
+    @internal
+    */
+    domEventObservers, buildExtensions) {
         this.id = id;
         this.create = create;
         this.domEventHandlers = domEventHandlers;
+        this.domEventObservers = domEventObservers;
         this.extension = buildExtensions(this);
     }
     /**
@@ -1953,8 +1856,8 @@ class ViewPlugin {
     plugin's value, given an editor view.
     */
     static define(create, spec) {
-        const { eventHandlers, provide, decorations: deco } = spec || {};
-        return new ViewPlugin(nextPluginID++, create, eventHandlers, plugin => {
+        const { eventHandlers, eventObservers, provide, decorations: deco } = spec || {};
+        return new ViewPlugin(nextPluginID++, create, eventHandlers, eventObservers, plugin => {
             let ext = [viewPlugin.of(plugin)];
             if (deco)
                 ext.push(decorations.of(view => {
@@ -2702,6 +2605,7 @@ class DocView extends ContentView {
         this.view = view;
         this.decorations = [];
         this.dynamicDecorationMap = [];
+        this.domChanged = null;
         this.hasComposition = null;
         this.markedForComposition = new Set;
         // Track a minimum width for the editor. When measuring sizes in
@@ -2730,6 +2634,7 @@ class DocView extends ContentView {
     }
     // Update the document view to a given state.
     update(update) {
+        var _a;
         let changedRanges = update.changedRanges;
         if (this.minWidth > 0 && changedRanges.length) {
             if (!changedRanges.every(({ fromA, toA }) => toA < this.minWidthFrom || fromA > this.minWidthTo)) {
@@ -2740,7 +2645,15 @@ class DocView extends ContentView {
                 this.minWidthTo = update.changes.mapPos(this.minWidthTo, 1);
             }
         }
-        let composition = this.view.inputState.composing < 0 ? null : findCompositionRange(this.view, update.changes);
+        let readCompositionAt = -1;
+        if (this.view.inputState.composing >= 0) {
+            if ((_a = this.domChanged) === null || _a === void 0 ? void 0 : _a.newSel)
+                readCompositionAt = this.domChanged.newSel.head;
+            else if (!touchesComposition(update.changes, this.hasComposition) && !update.selectionSet)
+                readCompositionAt = update.state.selection.main.head;
+        }
+        let composition = readCompositionAt > -1 ? findCompositionRange(this.view, update.changes, readCompositionAt) : null;
+        this.domChanged = null;
         if (this.hasComposition) {
             this.markedForComposition.clear();
             let { from, to } = this.hasComposition;
@@ -2855,11 +2768,9 @@ class DocView extends ContentView {
             cView.flags |= 8 /* ViewFlag.Composition */ | (cView.children.some(c => c.flags & 7 /* ViewFlag.Dirty */) ? 1 /* ViewFlag.ChildDirty */ : 0);
             this.markedForComposition.add(cView);
             let prev = ContentView.get(dom);
-            if (prev != cView) {
-                if (prev)
-                    prev.dom = null;
-                cView.setDOM(dom);
-            }
+            if (prev && prev != cView)
+                prev.dom = null;
+            cView.setDOM(dom);
         };
         let pos = this.childPos(composition.range.fromB, 1);
         let cView = this.children[pos.i];
@@ -2882,9 +2793,8 @@ class DocView extends ContentView {
         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);
+        let anchor = this.moveToLine(this.domAtPos(main.anchor));
+        let head = main.empty ? anchor : this.moveToLine(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 && !this.hasComposition && betweenUneditable(anchor)) {
@@ -2917,12 +2827,12 @@ class DocView extends ContentView {
                         if (nextTo && nextTo != (1 /* NextTo.Before */ | 2 /* NextTo.After */)) {
                             let text = nearbyTextNode(anchor.node, anchor.offset, nextTo == 1 /* NextTo.Before */ ? 1 : -1);
                             if (text)
-                                anchor = new DOMPos(text, nextTo == 1 /* NextTo.Before */ ? 0 : text.nodeValue.length);
+                                anchor = new DOMPos(text.node, text.offset);
                         }
                     }
                     rawSel.collapse(anchor.node, anchor.offset);
-                    if (main.bidiLevel != null && domSel.caretBidiLevel != null)
-                        domSel.caretBidiLevel = main.bidiLevel;
+                    if (main.bidiLevel != null && rawSel.caretBidiLevel !== undefined)
+                        rawSel.caretBidiLevel = main.bidiLevel;
                 }
                 else if (rawSel.extend) {
                     // Selection.extend can be used to create an 'inverted' selection
@@ -2985,6 +2895,26 @@ class DocView extends ContentView {
         if (view.docView.posFromDOM(newRange.anchorNode, newRange.anchorOffset) != cursor.from)
             sel.collapse(anchorNode, anchorOffset);
     }
+    // If a position is in/near a block widget, move it to a nearby text
+    // line, since we don't want the cursor inside a block widget.
+    moveToLine(pos) {
+        // Block widgets will return positions before/after them, which
+        // are thus directly in the document DOM element.
+        let dom = this.dom, newPos;
+        if (pos.node != dom)
+            return pos;
+        for (let i = pos.offset; !newPos && i < dom.childNodes.length; i++) {
+            let view = ContentView.get(dom.childNodes[i]);
+            if (view instanceof LineView)
+                newPos = view.domAtPos(0);
+        }
+        for (let i = pos.offset - 1; !newPos && i >= 0; i--) {
+            let view = ContentView.get(dom.childNodes[i]);
+            if (view instanceof LineView)
+                newPos = view.domAtPos(view.length);
+        }
+        return newPos ? new DOMPos(newPos.node, newPos.offset, true) : pos;
+    }
     nearest(dom) {
         for (let cur = dom; cur;) {
             let domView = ContentView.get(cur);
@@ -3012,15 +2942,19 @@ class DocView extends ContentView {
         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 != BlockType.WidgetBefore && child.type != BlockType.WidgetAfter &&
-                    (!i || side == 2 || this.children[i - 1].breakAfter ||
-                        (this.children[i - 1].type == BlockType.WidgetBefore && side > -2))))
-                return child.coordsAt(pos - start, side);
+        let best = null, bestPos = 0;
+        for (let off = this.length, i = this.children.length - 1; i >= 0; i--) {
+            let child = this.children[i], end = off - child.breakAfter, start = end - child.length;
+            if (end < pos)
+                break;
+            if (start <= pos && (start < pos || child.covers(-1)) && (end > pos || child.covers(1)) &&
+                (!best || child instanceof LineView && !(best instanceof LineView && side >= 0))) {
+                best = child;
+                bestPos = start;
+            }
             off = start;
         }
+        return best ? best.coordsAt(pos - bestPos, side) : null;
     }
     coordsForChar(pos) {
         let { i, off } = this.childPos(pos, 1), child = this.children[i];
@@ -3183,74 +3117,27 @@ class BlockGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.height; }
 }
-function findCompositionNode(view, dLen) {
+function findCompositionNode(view, headPos) {
     let sel = view.observer.selectionRange;
     let textNode = sel.focusNode && nearbyTextNode(sel.focusNode, sel.focusOffset, 0);
     if (!textNode)
         return null;
-    let cView = ContentView.get(textNode);
-    let from, to;
-    if (cView instanceof TextView) {
-        from = cView.posAtStart;
-        to = from + cView.length;
-    }
-    else {
-        let oldLen = Math.max(0, textNode.nodeValue.length - dLen);
-        up: for (let offset = 0, node = textNode;;) {
-            for (let sibling = node.previousSibling, cView; sibling; sibling = sibling.previousSibling) {
-                if (cView = ContentView.get(sibling)) {
-                    to = cView.posAtEnd + offset;
-                    from = Math.max(0, to - oldLen);
-                    break up;
-                }
-                let reader = new DOMReader([], view.state);
-                reader.readNode(sibling);
-                if (reader.text.indexOf(LineBreakPlaceholder) > -1)
-                    return null;
-                offset += reader.text.length;
-            }
-            node = node.parentNode;
-            if (!node)
-                return null;
-            let parentView = ContentView.get(node);
-            if (parentView) {
-                from = parentView.posAtStart + offset;
-                to = from + oldLen;
-                break;
-            }
-        }
-    }
-    return { from, to: to, node: textNode };
+    let from = headPos - textNode.offset;
+    return { from, to: from + textNode.node.nodeValue.length, node: textNode.node };
 }
-function findCompositionRange(view, changes) {
-    let found = findCompositionNode(view, changes.newLength - changes.length);
+function findCompositionRange(view, changes, headPos) {
+    let found = findCompositionNode(view, headPos);
     if (!found)
         return null;
-    let { from: fromA, to: toA, node: textNode } = found;
-    let fromB = changes.mapPos(fromA, -1), toB = changes.mapPos(toA, 1);
-    let text = textNode.nodeValue;
+    let { node: textNode, from, to } = found, text = textNode.nodeValue;
     // Don't try to preserve multi-line compositions
     if (/[\n\r]/.test(text))
         return null;
-    if (toB - fromB != text.length) {
-        // If there is a length mismatch, see if mapping non-inclusively helps
-        let fromB2 = changes.mapPos(fromA, 1), toB2 = changes.mapPos(toA, -1);
-        if (toB2 - fromB2 == text.length)
-            fromB = fromB2, toB = toB2;
-        // See if we can find an instance of the text at either side
-        else if (view.state.doc.sliceString(toB - text.length, toB) == text)
-            fromB = toB - text.length;
-        else if (view.state.doc.sliceString(fromB, fromB + text.length) == text)
-            toB = fromB + text.length;
-        // Not found
-        else
-            return null;
-    }
-    let { main } = view.state.selection;
-    if (view.state.doc.sliceString(fromB, toB) != text || fromB > main.head || toB < main.head)
+    if (view.state.doc.sliceString(found.from, found.to) != text)
         return null;
+    let inv = changes.invertedDesc;
+    let range = new ChangedRange(inv.mapPos(from), inv.mapPos(to), from, to);
     let marks = [];
-    let range = new ChangedRange(fromA, toA, fromB, toB);
     for (let parent = textNode.parentNode;; parent = parent.parentNode) {
         let parentView = ContentView.get(parent);
         if (parentView instanceof MarkView)
@@ -3271,7 +3158,7 @@ function nearbyTextNode(startNode, startOffset, side) {
     if (side <= 0)
         for (let node = startNode, offset = startOffset;;) {
             if (node.nodeType == 3)
-                return node;
+                return { node: node, offset: offset };
             if (node.nodeType == 1 && offset > 0) {
                 node = node.childNodes[offset - 1];
                 offset = maxOffset(node);
@@ -3283,7 +3170,7 @@ function nearbyTextNode(startNode, startOffset, side) {
     if (side >= 0)
         for (let node = startNode, offset = startOffset;;) {
             if (node.nodeType == 3)
-                return node;
+                return { node: node, offset: offset };
             if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
                 node = node.childNodes[offset];
                 offset = 0;
@@ -3320,6 +3207,15 @@ function inUneditable(node, inside) {
     }
     return false;
 }
+function touchesComposition(changes, composition) {
+    let touched = false;
+    if (composition)
+        changes.iterChangedRanges((from, to) => {
+            if (from < composition.to && to > composition.from)
+                touched = true;
+        });
+    return touched;
+}
 
 function groupAt(state, pos, bias = 1) {
     let categorize = state.charCategorizer(pos);
@@ -3693,13 +3589,13 @@ class InputState {
         this.lastSelectionTime = Date.now();
     }
     constructor(view) {
+        this.view = view;
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
         this.lastTouchTime = 0;
         this.lastFocusTime = 0;
         this.lastScrollTop = 0;
         this.lastScrollLeft = 0;
-        this.chromeScrollHack = -1;
         // On iOS, some keys need to have their default behavior happen
         // (after which we retroactively handle them and reset the DOM) to
         // avoid messing up the virtual keyboard state.
@@ -3709,8 +3605,7 @@ class InputState {
         this.lastEscPress = 0;
         this.lastContextMenu = 0;
         this.scrollHandlers = [];
-        this.registeredEvents = [];
-        this.customHandlers = [];
+        this.handlers = Object.create(null);
         // -1 means not in a composition. Otherwise, this counts the number
         // of changes made during the composition. The count is used to
         // avoid treating the start state of the composition, before any
@@ -3731,29 +3626,10 @@ class InputState {
         // the mutation events fire shortly after the compositionend event
         this.compositionPendingChange = false;
         this.mouseSelection = null;
-        let handleEvent = (handler, event) => {
-            if (this.ignoreDuringComposition(event))
-                return;
-            if (event.type == "keydown" && this.keydown(view, event))
-                return;
-            if (this.mustFlushObserver(event))
-                view.observer.forceFlush();
-            if (this.runCustomHandlers(event.type, view, event))
-                event.preventDefault();
-            else
-                handler(view, event);
-        };
-        for (let type in handlers) {
-            let handler = handlers[type];
-            view.contentDOM.addEventListener(type, event => {
-                if (eventBelongsToEditor(view, event))
-                    handleEvent(handler, event);
-            }, handlerOptions[type]);
-            this.registeredEvents.push(type);
-        }
+        this.handleEvent = this.handleEvent.bind(this);
         view.scrollDOM.addEventListener("mousedown", (event) => {
             if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom) {
-                handleEvent(handlers.mousedown, event);
+                this.handleEvent(event);
                 if (!event.defaultPrevented && event.button == 2) {
                     // Make sure the content covers the entire scroller height, in order
                     // to catch a native context menu click below it
@@ -3765,23 +3641,8 @@ class InputState {
         });
         view.scrollDOM.addEventListener("drop", (event) => {
             if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom)
-                handleEvent(handlers.drop, event);
+                this.handleEvent(event);
         });
-        if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
-            // On Chrome 102, viewport updates somehow stop wheel-based
-            // scrolling. Turning off pointer events during the scroll seems
-            // to avoid the issue.
-            view.scrollDOM.addEventListener("wheel", () => {
-                if (this.chromeScrollHack < 0)
-                    view.contentDOM.style.pointerEvents = "none";
-                else
-                    window.clearTimeout(this.chromeScrollHack);
-                this.chromeScrollHack = setTimeout(() => {
-                    this.chromeScrollHack = -1;
-                    view.contentDOM.style.pointerEvents = "";
-                }, 100);
-            }, { passive: true });
-        }
         this.notifiedFocused = view.hasFocus;
         // On Safari adding an input event handler somehow prevents an
         // issue where the composition vanishes when you press enter.
@@ -3790,63 +3651,54 @@ class InputState {
         if (browser.gecko)
             firefoxCopyCutHack(view.contentDOM.ownerDocument);
     }
-    ensureHandlers(view, plugins) {
-        var _a;
-        let handlers;
-        this.customHandlers = [];
-        for (let plugin of plugins)
-            if (handlers = (_a = plugin.update(view).spec) === null || _a === void 0 ? void 0 : _a.domEventHandlers) {
-                this.customHandlers.push({ plugin: plugin.value, handlers });
-                for (let type in handlers)
-                    if (this.registeredEvents.indexOf(type) < 0 && type != "scroll") {
-                        this.registeredEvents.push(type);
-                        view.contentDOM.addEventListener(type, (event) => {
-                            if (!eventBelongsToEditor(view, event))
-                                return;
-                            if (this.runCustomHandlers(type, view, event))
-                                event.preventDefault();
-                        });
-                    }
-            }
-    }
-    runCustomHandlers(type, view, event) {
-        for (let set of this.customHandlers) {
-            let handler = set.handlers[type];
-            if (handler) {
-                try {
-                    if (handler.call(set.plugin, event, view) || event.defaultPrevented)
-                        return true;
-                }
-                catch (e) {
-                    logException(view.state, e);
+    handleEvent(event) {
+        if (!eventBelongsToEditor(this.view, event) || this.ignoreDuringComposition(event))
+            return;
+        if (event.type == "keydown" && this.keydown(event))
+            return;
+        this.runHandlers(event.type, event);
+    }
+    runHandlers(type, event) {
+        let handlers = this.handlers[type];
+        if (handlers) {
+            for (let observer of handlers.observers)
+                observer(this.view, event);
+            for (let handler of handlers.handlers) {
+                if (event.defaultPrevented)
+                    break;
+                if (handler(this.view, event)) {
+                    event.preventDefault();
+                    break;
                 }
             }
         }
-        return false;
     }
-    runScrollHandlers(view, event) {
-        this.lastScrollTop = view.scrollDOM.scrollTop;
-        this.lastScrollLeft = view.scrollDOM.scrollLeft;
-        for (let set of this.customHandlers) {
-            let handler = set.handlers.scroll;
-            if (handler) {
-                try {
-                    handler.call(set.plugin, event, view);
-                }
-                catch (e) {
-                    logException(view.state, e);
+    ensureHandlers(plugins) {
+        let handlers = computeHandlers(plugins), prev = this.handlers, dom = this.view.contentDOM;
+        for (let type in handlers)
+            if (type != "scroll") {
+                let passive = !handlers[type].handlers.length;
+                let exists = prev[type];
+                if (exists && passive != !exists.handlers.length) {
+                    dom.removeEventListener(type, this.handleEvent);
+                    exists = null;
                 }
+                if (!exists)
+                    dom.addEventListener(type, this.handleEvent, { passive });
             }
-        }
+        for (let type in prev)
+            if (type != "scroll" && !handlers[type])
+                dom.removeEventListener(type, this.handleEvent);
+        this.handlers = handlers;
     }
-    keydown(view, event) {
+    keydown(event) {
         // Must always run, even if a custom handler handled the event
         this.lastKeyCode = event.keyCode;
         this.lastKeyTime = Date.now();
         if (event.keyCode == 9 && Date.now() < this.lastEscPress + 2000)
             return true;
         if (event.keyCode != 27 && modifierCodes.indexOf(event.keyCode) < 0)
-            view.inputState.lastEscPress = 0;
+            this.view.inputState.lastEscPress = 0;
         // Chrome for Android usually doesn't fire proper key events, but
         // occasionally does, usually surrounded by a bunch of complicated
         // composition changes. When an enter or backspace key event is
@@ -3854,10 +3706,10 @@ class InputState {
         // dispatch it.
         if (browser.android && browser.chrome && !event.synthetic &&
             (event.keyCode == 13 || event.keyCode == 8)) {
-            view.observer.delayAndroidKey(event.key, event.keyCode);
+            this.view.observer.delayAndroidKey(event.key, event.keyCode);
             return true;
         }
-        // Prevent the default behavior of Enter on iOS makes the
+        // Preventing the default behavior of Enter on iOS makes the
         // virtual keyboard get stuck in the wrong (lowercase)
         // state. So we let it go through, and then, in
         // applyDOMChange, notify key handlers of it and reset to
@@ -3867,17 +3719,19 @@ class InputState {
             ((pending = PendingKeys.find(key => key.keyCode == event.keyCode)) && !event.ctrlKey ||
                 EmacsyPendingKeys.indexOf(event.key) > -1 && event.ctrlKey && !event.shiftKey)) {
             this.pendingIOSKey = pending || event;
-            setTimeout(() => this.flushIOSKey(view), 250);
+            setTimeout(() => this.flushIOSKey(), 250);
             return true;
         }
+        if (event.keyCode != 229)
+            this.view.observer.forceFlush();
         return false;
     }
-    flushIOSKey(view) {
+    flushIOSKey() {
         let key = this.pendingIOSKey;
         if (!key)
             return false;
         this.pendingIOSKey = undefined;
-        return dispatchKey(view.contentDOM, key.key, key.keyCode);
+        return dispatchKey(this.view.contentDOM, key.key, key.keyCode);
     }
     ignoreDuringComposition(event) {
         if (!/^key/.test(event.type))
@@ -3896,9 +3750,6 @@ class InputState {
         }
         return false;
     }
-    mustFlushObserver(event) {
-        return event.type == "keydown" && event.keyCode != 229;
-    }
     startMouseSelection(mouseSelection) {
         if (this.mouseSelection)
             this.mouseSelection.destroy();
@@ -3915,6 +3766,42 @@ class InputState {
             this.mouseSelection.destroy();
     }
 }
+function bindHandler(plugin, handler) {
+    return (view, event) => {
+        try {
+            return handler.call(plugin, event, view);
+        }
+        catch (e) {
+            logException(view.state, e);
+        }
+    };
+}
+function computeHandlers(plugins) {
+    let result = Object.create(null);
+    function record(type) {
+        return result[type] || (result[type] = { observers: [], handlers: [] });
+    }
+    for (let plugin of plugins) {
+        let spec = plugin.spec;
+        if (spec && spec.domEventHandlers)
+            for (let type in spec.domEventHandlers) {
+                let f = spec.domEventHandlers[type];
+                if (f)
+                    record(type).handlers.push(bindHandler(plugin.value, f));
+            }
+        if (spec && spec.domEventObservers)
+            for (let type in spec.domEventObservers) {
+                let f = spec.domEventObservers[type];
+                if (f)
+                    record(type).observers.push(bindHandler(plugin.value, f));
+            }
+    }
+    for (let type in handlers)
+        record(type).handlers.push(handlers[type]);
+    for (let type in observers)
+        record(type).observers.push(observers[type]);
+    return result;
+}
 const PendingKeys = [
     { key: "Backspace", keyCode: 8, inputType: "deleteContentBackward" },
     { key: "Enter", keyCode: 13, inputType: "insertParagraph" },
@@ -3952,10 +3839,8 @@ class MouseSelection {
     start(event) {
         // When clicking outside of the selection, immediately apply the
         // effect of starting the selection
-        if (this.dragging === false) {
-            event.preventDefault();
+        if (this.dragging === false)
             this.select(event);
-        }
     }
     move(event) {
         var _a;
@@ -4091,7 +3976,7 @@ function eventBelongsToEditor(view, event) {
     return true;
 }
 const handlers = /*@__PURE__*/Object.create(null);
-const handlerOptions = /*@__PURE__*/Object.create(null);
+const observers = /*@__PURE__*/Object.create(null);
 // This is very crude, but unfortunately both these browsers _pretend_
 // that they have a clipboard API—all the objects and methods are
 // there, they just don't work, and they are hard to test.
@@ -4141,23 +4026,27 @@ function doPaste(view, input) {
         scrollIntoView: true
     });
 }
+observers.scroll = view => {
+    view.inputState.lastScrollTop = view.scrollDOM.scrollTop;
+    view.inputState.lastScrollLeft = view.scrollDOM.scrollLeft;
+};
 handlers.keydown = (view, event) => {
     view.inputState.setSelectionOrigin("select");
     if (event.keyCode == 27)
         view.inputState.lastEscPress = Date.now();
+    return false;
 };
-handlers.touchstart = (view, e) => {
+observers.touchstart = (view, e) => {
     view.inputState.lastTouchTime = Date.now();
     view.inputState.setSelectionOrigin("select.pointer");
 };
-handlers.touchmove = view => {
+observers.touchmove = view => {
     view.inputState.setSelectionOrigin("select.pointer");
 };
-handlerOptions.touchstart = handlerOptions.touchmove = { passive: true };
 handlers.mousedown = (view, event) => {
     view.observer.flush();
     if (view.inputState.lastTouchTime > Date.now() - 2000)
-        return; // Ignore touch interaction
+        return false; // Ignore touch interaction
     let style = null;
     for (let makeStyle of view.state.facet(mouseSelectionStyle)) {
         style = makeStyle(view, event);
@@ -4171,9 +4060,13 @@ handlers.mousedown = (view, event) => {
         view.inputState.startMouseSelection(new MouseSelection(view, event, style, mustFocus));
         if (mustFocus)
             view.observer.ignore(() => focusPreventScroll(view.contentDOM));
-        if (view.inputState.mouseSelection)
-            view.inputState.mouseSelection.start(event);
+        let mouseSel = view.inputState.mouseSelection;
+        if (mouseSel) {
+            mouseSel.start(event);
+            return !mouseSel.dragging;
+        }
     }
+    return false;
 };
 function rangeForClick(view, pos, bias, type) {
     if (type == 1) { // Single click
@@ -4277,12 +4170,12 @@ handlers.dragstart = (view, event) => {
         event.dataTransfer.setData("Text", view.state.sliceDoc(main.from, main.to));
         event.dataTransfer.effectAllowed = "copyMove";
     }
+    return false;
 };
 function dropText(view, event, text, direct) {
     if (!text)
         return;
     let dropPos = view.posAtCoords({ x: event.clientX, y: event.clientY }, false);
-    event.preventDefault();
     let { mouseSelection } = view.inputState;
     let del = direct && mouseSelection && mouseSelection.dragging && dragMovesSelection(view, event) ?
         { from: mouseSelection.dragging.from, to: mouseSelection.dragging.to } : null;
@@ -4297,12 +4190,11 @@ function dropText(view, event, text, direct) {
 }
 handlers.drop = (view, event) => {
     if (!event.dataTransfer)
-        return;
+        return false;
     if (view.state.readOnly)
-        return event.preventDefault();
+        return true;
     let files = event.dataTransfer.files;
     if (files && files.length) { // For a file drop, read the file's text.
-        event.preventDefault();
         let text = Array(files.length), read = 0;
         let finishFile = () => {
             if (++read == files.length)
@@ -4318,22 +4210,29 @@ handlers.drop = (view, event) => {
             };
             reader.readAsText(files[i]);
         }
+        return true;
     }
     else {
-        dropText(view, event, event.dataTransfer.getData("Text"), true);
+        let text = event.dataTransfer.getData("Text");
+        if (text) {
+            dropText(view, event, text, true);
+            return true;
+        }
     }
+    return false;
 };
 handlers.paste = (view, event) => {
     if (view.state.readOnly)
-        return event.preventDefault();
+        return true;
     view.observer.flush();
     let data = brokenClipboardAPI ? null : event.clipboardData;
     if (data) {
         doPaste(view, data.getData("text/plain") || data.getData("text/uri-text"));
-        event.preventDefault();
+        return true;
     }
     else {
         capturePaste(view);
+        return false;
     }
 };
 function captureCopy(view, text) {
@@ -4379,23 +4278,24 @@ let lastLinewiseCopy = null;
 handlers.copy = handlers.cut = (view, event) => {
     let { text, ranges, linewise } = copiedRange(view.state);
     if (!text && !linewise)
-        return;
+        return false;
     lastLinewiseCopy = linewise ? text : null;
+    if (event.type == "cut" && !view.state.readOnly)
+        view.dispatch({
+            changes: ranges,
+            scrollIntoView: true,
+            userEvent: "delete.cut"
+        });
     let data = brokenClipboardAPI ? null : event.clipboardData;
     if (data) {
-        event.preventDefault();
         data.clearData();
         data.setData("text/plain", text);
+        return true;
     }
     else {
         captureCopy(view, text);
+        return false;
     }
-    if (event.type == "cut" && !view.state.readOnly)
-        view.dispatch({
-            changes: ranges,
-            scrollIntoView: true,
-            userEvent: "delete.cut"
-        });
 };
 const isFocusChange = /*@__PURE__*/Annotation.define();
 function focusChangeTransaction(state, focus) {
@@ -4419,7 +4319,7 @@ function updateForFocusChange(view) {
         }
     }, 10);
 }
-handlers.focus = view => {
+observers.focus = view => {
     view.inputState.lastFocusTime = Date.now();
     // When focusing reset the scroll position, move it back to where it was
     if (!view.scrollDOM.scrollTop && (view.inputState.lastScrollTop || view.inputState.lastScrollLeft)) {
@@ -4428,11 +4328,11 @@ handlers.focus = view => {
     }
     updateForFocusChange(view);
 };
-handlers.blur = view => {
+observers.blur = view => {
     view.observer.clearSelectionRange();
     updateForFocusChange(view);
 };
-handlers.compositionstart = handlers.compositionupdate = view => {
+observers.compositionstart = observers.compositionupdate = view => {
     if (view.inputState.compositionFirstChange == null)
         view.inputState.compositionFirstChange = true;
     if (view.inputState.composing < 0) {
@@ -4440,7 +4340,7 @@ handlers.compositionstart = handlers.compositionupdate = view => {
         view.inputState.composing = 0;
     }
 };
-handlers.compositionend = view => {
+observers.compositionend = view => {
     view.inputState.composing = -1;
     view.inputState.compositionEndedAt = Date.now();
     view.inputState.compositionPendingKey = true;
@@ -4464,7 +4364,7 @@ handlers.compositionend = view => {
         }, 50);
     }
 };
-handlers.contextmenu = view => {
+observers.contextmenu = view => {
     view.inputState.lastContextMenu = Date.now();
 };
 handlers.beforeinput = (view, event) => {
@@ -4493,6 +4393,7 @@ handlers.beforeinput = (view, event) => {
             }, 100);
         }
     }
+    return false;
 };
 const appliedFirefoxHack = /*@__PURE__*/new Set;
 // In Firefox, when cut/copy handlers are added to the document, that
@@ -5162,14 +5063,13 @@ class NodeBuilder {
         return line;
     }
     addBlock(block) {
-        var _a;
         this.enterLine();
-        let type = (_a = block.deco) === null || _a === void 0 ? void 0 : _a.type;
-        if (type == BlockType.WidgetAfter && !this.isCovered)
+        let deco = block.deco;
+        if (deco && deco.startSide > 0 && !this.isCovered)
             this.ensureLine();
         this.nodes.push(block);
         this.writtenTo = this.pos = this.pos + block.length;
-        if (type != BlockType.WidgetBefore)
+        if (deco && deco.endSide > 0)
             this.covering = block;
     }
     addLineDeco(height, breaks, length) {
@@ -6077,6 +5977,113 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     }
 }, lightDarkIDs);
 
+const LineBreakPlaceholder = "\uffff";
+class DOMReader {
+    constructor(points, state) {
+        this.points = points;
+        this.text = "";
+        this.lineSeparator = state.facet(EditorState.lineSeparator);
+    }
+    append(text) {
+        this.text += text;
+    }
+    lineBreak() {
+        this.text += LineBreakPlaceholder;
+    }
+    readRange(start, end) {
+        if (!start)
+            return this;
+        let parent = start.parentNode;
+        for (let cur = start;;) {
+            this.findPointBefore(parent, cur);
+            let oldLen = this.text.length;
+            this.readNode(cur);
+            let next = cur.nextSibling;
+            if (next == end)
+                break;
+            let view = ContentView.get(cur), nextView = ContentView.get(next);
+            if (view && nextView ? view.breakAfter :
+                (view ? view.breakAfter : isBlockElement(cur)) ||
+                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore) && this.text.length > oldLen))
+                this.lineBreak();
+            cur = next;
+        }
+        this.findPointBefore(parent, end);
+        return this;
+    }
+    readTextNode(node) {
+        let text = node.nodeValue;
+        for (let point of this.points)
+            if (point.node == node)
+                point.pos = this.text.length + Math.min(point.offset, text.length);
+        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
+            let nextBreak = -1, breakSize = 1, m;
+            if (this.lineSeparator) {
+                nextBreak = text.indexOf(this.lineSeparator, off);
+                breakSize = this.lineSeparator.length;
+            }
+            else if (m = re.exec(text)) {
+                nextBreak = m.index;
+                breakSize = m[0].length;
+            }
+            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
+            if (nextBreak < 0)
+                break;
+            this.lineBreak();
+            if (breakSize > 1)
+                for (let point of this.points)
+                    if (point.node == node && point.pos > this.text.length)
+                        point.pos -= breakSize - 1;
+            off = nextBreak + breakSize;
+        }
+    }
+    readNode(node) {
+        if (node.cmIgnore)
+            return;
+        let view = ContentView.get(node);
+        let fromView = view && view.overrideDOMText;
+        if (fromView != null) {
+            this.findPointInside(node, fromView.length);
+            for (let i = fromView.iter(); !i.next().done;) {
+                if (i.lineBreak)
+                    this.lineBreak();
+                else
+                    this.append(i.value);
+            }
+        }
+        else if (node.nodeType == 3) {
+            this.readTextNode(node);
+        }
+        else if (node.nodeName == "BR") {
+            if (node.nextSibling)
+                this.lineBreak();
+        }
+        else if (node.nodeType == 1) {
+            this.readRange(node.firstChild, null);
+        }
+    }
+    findPointBefore(node, next) {
+        for (let point of this.points)
+            if (point.node == node && node.childNodes[point.offset] == next)
+                point.pos = this.text.length;
+    }
+    findPointInside(node, maxLen) {
+        for (let point of this.points)
+            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
+                point.pos = this.text.length + Math.min(maxLen, point.offset);
+    }
+}
+function isBlockElement(node) {
+    return node.nodeType == 1 && /^(DIV|P|LI|UL|OL|BLOCKQUOTE|DD|DT|H\d|SECTION|PRE)$/.test(node.nodeName);
+}
+class DOMPoint {
+    constructor(node, offset) {
+        this.node = node;
+        this.offset = offset;
+        this.pos = -1;
+    }
+}
+
 class DOMChange {
     constructor(view, start, end, typeOver) {
         this.typeOver = typeOver;
@@ -6170,7 +6177,7 @@ function applyDOMChange(view, domChange) {
         change = { from: sel.from, to: sel.to, insert: Text.of([" "]) };
     }
     if (change) {
-        if (browser.ios && view.inputState.flushIOSKey(view))
+        if (browser.ios && view.inputState.flushIOSKey())
             return true;
         // Android browsers don't fire reasonable key events for enter,
         // backspace, or delete. So this detects changes that look like
@@ -6227,8 +6234,14 @@ function applyDefaultInsert(view, change, newSel) {
         if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
             change.to <= sel.to && change.to >= sel.to - 10) {
             let replaced = view.state.sliceDoc(change.from, change.to);
-            let composition = findCompositionNode(view, change.insert.length - (change.to - change.from)) ||
-                view.state.doc.lineAt(sel.head);
+            let compositionRange, composition = newSel && findCompositionNode(view, newSel.main.head);
+            if (composition) {
+                let dLen = change.insert.length - (change.to - change.from);
+                compositionRange = { from: composition.from, to: composition.to - dLen };
+            }
+            else {
+                compositionRange = view.state.doc.lineAt(sel.head);
+            }
             let offset = sel.to - change.to, size = sel.to - sel.from;
             tr = startState.changeByRange(range => {
                 if (range.from == sel.from && range.to == sel.to)
@@ -6239,7 +6252,7 @@ function applyDefaultInsert(view, change, newSel) {
                     // changes in the same node work without aborting
                     // composition, so cursors in the composition range are
                     // ignored.
-                    composition && range.to >= composition.from && range.from <= composition.to)
+                    range.to >= compositionRange.from && range.from <= compositionRange.to)
                     return { range };
                 let rangeChanges = startState.changes({ from, to, insert: change.insert }), selOff = range.to - sel.to;
                 return {
@@ -6418,7 +6431,7 @@ class DOMObserver {
         this.readSelectionRange();
     }
     onScrollChanged(e) {
-        this.view.inputState.runScrollHandlers(this.view, e);
+        this.view.inputState.runHandlers("scroll", e);
         if (this.intersecting)
             this.view.measure();
     }
@@ -6658,7 +6671,9 @@ class DOMObserver {
             this.lastChange = Date.now();
         this.view.inputState.lastFocusTime = 0;
         this.selectionChanged = false;
-        return new DOMChange(this.view, from, to, typeOver);
+        let change = new DOMChange(this.view, from, to, typeOver);
+        this.view.docView.domChanged = { newSel: change.newSel ? change.newSel.main : null };
+        return change;
     }
     // Apply pending changes, if any
     flush(readSelection = true) {
@@ -6887,7 +6902,7 @@ class EditorView {
             plugin.update(this);
         this.observer = new DOMObserver(this);
         this.inputState = new InputState(this);
-        this.inputState.ensureHandlers(this, this.plugins);
+        this.inputState.ensureHandlers(this.plugins);
         this.docView = new DocView(this);
         this.mountStyles();
         this.updateAttrs();
@@ -7029,7 +7044,7 @@ class EditorView {
             for (let plugin of this.plugins)
                 plugin.update(this);
             this.docView = new DocView(this);
-            this.inputState.ensureHandlers(this, this.plugins);
+            this.inputState.ensureHandlers(this.plugins);
             this.mountStyles();
             this.updateAttrs();
             this.bidiCache = [];
@@ -7061,7 +7076,7 @@ class EditorView {
                     plugin.destroy(this);
             this.plugins = newPlugins;
             this.pluginMap.clear();
-            this.inputState.ensureHandlers(this, this.plugins);
+            this.inputState.ensureHandlers(this.plugins);
         }
         else {
             for (let p of this.plugins)
@@ -7589,6 +7604,17 @@ class EditorView {
         return ViewPlugin.define(() => ({}), { eventHandlers: handlers });
     }
     /**
+    Create an extension that registers DOM event observers. Contrary
+    to event [handlers](https://codemirror.net/6/docs/ref/#view.EditorView^domEventHandlers),
+    observers can't be prevented from running by a higher-precedence
+    handler returning true. They also don't prevent other handlers
+    and observers from running when they return true, and should not
+    call `preventDefault`.
+    */
+    static domEventObservers(observers) {
+        return ViewPlugin.define(() => ({}), { eventObservers: observers });
+    }
+    /**
     Create a theme extension. The first argument can be a
     [`style-mod`](https://github.com/marijnh/style-mod#documentation)
     style spec providing the styles for the theme. These will be
@@ -8441,7 +8467,7 @@ const drawDropCursor = /*@__PURE__*/ViewPlugin.fromClass(class {
             this.view.dispatch({ effects: setDropCursorPos.of(pos) });
     }
 }, {
-    eventHandlers: {
+    eventObservers: {
         dragover(event) {
             this.setDropPos(this.view.posAtCoords({ x: event.clientX, y: event.clientY }));
         },
@@ -8951,7 +8977,7 @@ function crosshairCursor(options = {}) {
             }
         }
     }, {
-        eventHandlers: {
+        eventObservers: {
             keydown(e) {
                 this.set(e.keyCode == code || getter(e));
             },
@@ -9262,7 +9288,7 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         }
     }
 }, {
-    eventHandlers: {
+    eventObservers: {
         scroll() { this.maybeMeasure(); }
     }
 });
@@ -9903,6 +9929,10 @@ const gutterView = /*@__PURE__*/ViewPlugin.fromClass(class {
                 for (let cx of contexts)
                     cx.line(this.view, line, classSet);
             }
+            else if (line.widget) {
+                for (let cx of contexts)
+                    cx.widget(this.view, line);
+            }
         }
         for (let cx of contexts)
             cx.finish();