@codemirror/view 0.19.43 → 0.19.46

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## 0.19.46 (2022-03-03)
+
+### Bug fixes
+
+Fix a bug where block widgets on the edges of viewports could cause the positioning of content to misalign with the gutter and height computations.
+
+Improve cursor height next to widgets.
+
+Fix a bug where mapping positions to screen coordinates could return incorred coordinates during composition.
+
+## 0.19.45 (2022-02-23)
+
+### Bug fixes
+
+Fix an issue where the library failed to call `WidgetType.destroy` on the old widget when replacing a widget with a different widget of the same type.
+
+Fix an issue where the editor would compute DOM positions inside composition contexts incorrectly in some cases, causing the selection to be put in the wrong place and needlessly interrupting compositions.
+
+Fix leaking of resize event handlers.
+
+## 0.19.44 (2022-02-17)
+
+### Bug fixes
+
+Fix a crash that occasionally occurred when drag-selecting in a way that scrolled the editor.
+
+### New features
+
+The new `EditorView.compositionStarted` property indicates whether a composition is starting.
+
 ## 0.19.43 (2022-02-16)
 
 ### Bug fixes

package/dist/index.cjs

@@ -22,7 +22,7 @@ function getSelection(root) {
     return target.getSelection();
 }
 function contains(dom, node) {
-    return node ? dom.contains(node.nodeType != 1 ? node.parentNode : node) : false;
+    return node ? dom == node || dom.contains(node.nodeType != 1 ? node.parentNode : node) : false;
 }
 function deepActiveElement() {
     let elt = document.activeElement;
@@ -781,6 +781,7 @@ class WidgetView extends ContentView {
         this.widget = widget;
         this.length = length;
         this.side = side;
+        this.prevWidget = null;
     }
     static create(widget, length, side) {
         return new (widget.customView || WidgetView)(widget, length, side);
@@ -792,6 +793,9 @@ class WidgetView extends ContentView {
     }
     sync() {
         if (!this.dom || !this.widget.updateDOM(this.dom)) {
+            if (this.dom && this.prevWidget)
+                this.prevWidget.destroy(this.dom);
+            this.prevWidget = null;
             this.setDOM(this.widget.toDOM(this.editorView));
             this.dom.contentEditable = "false";
         }
@@ -809,6 +813,8 @@ class WidgetView extends ContentView {
             if (this.widget.constructor == other.widget.constructor) {
                 if (!this.widget.eq(other.widget))
                     this.markDirty(true);
+                if (this.dom && !this.prevWidget)
+                    this.prevWidget = this.widget;
                 this.widget = other.widget;
                 return true;
             }
@@ -849,16 +855,69 @@ class WidgetView extends ContentView {
     }
 }
 class CompositionView extends WidgetView {
-    domAtPos(pos) { return new DOMPos(this.widget.text, pos); }
+    domAtPos(pos) {
+        let { topView, text } = this.widget;
+        if (!topView)
+            return new DOMPos(text, Math.min(pos, text.nodeValue.length));
+        return scanCompositionTree(pos, 0, topView, text, (v, p) => v.domAtPos(p), p => new DOMPos(text, Math.min(p, text.nodeValue.length)));
+    }
     sync() { this.setDOM(this.widget.toDOM()); }
     localPosFromDOM(node, offset) {
-        return !offset ? 0 : node.nodeType == 3 ? Math.min(offset, this.length) : this.length;
+        let { topView, text } = this.widget;
+        if (!topView)
+            return Math.min(offset, this.length);
+        return posFromDOMInCompositionTree(node, offset, topView, text);
     }
     ignoreMutation() { return false; }
     get overrideDOMText() { return null; }
-    coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
+    coordsAt(pos, side) {
+        let { topView, text } = this.widget;
+        if (!topView)
+            return textCoords(text, pos, side);
+        return scanCompositionTree(pos, side, topView, text, (v, pos, side) => v.coordsAt(pos, side), (pos, side) => textCoords(text, pos, side));
+    }
+    destroy() {
+        var _a;
+        super.destroy();
+        (_a = this.widget.topView) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
     get isEditable() { return true; }
 }
+// Uses the old structure of a chunk of content view frozen for
+// composition to try and find a reasonable DOM location for the given
+// offset.
+function scanCompositionTree(pos, side, view, text, enterView, fromText) {
+    if (view instanceof MarkView) {
+        for (let child of view.children) {
+            let hasComp = contains(child.dom, text);
+            let len = hasComp ? text.nodeValue.length : child.length;
+            if (pos < len || pos == len && child.getSide() <= 0)
+                return hasComp ? scanCompositionTree(pos, side, child, text, enterView, fromText) : enterView(child, pos, side);
+            pos -= len;
+        }
+        return enterView(view, view.length, -1);
+    }
+    else if (view.dom == text) {
+        return fromText(pos, side);
+    }
+    else {
+        return enterView(view, pos, side);
+    }
+}
+function posFromDOMInCompositionTree(node, offset, view, text) {
+    if (view instanceof MarkView) {
+        for (let child of view.children) {
+            let pos = 0, hasComp = contains(child.dom, text);
+            if (contains(child.dom, node))
+                return pos + (hasComp ? posFromDOMInCompositionTree(node, offset, child, text) : child.localPosFromDOM(node, offset));
+            pos += hasComp ? text.nodeValue.length : child.length;
+        }
+    }
+    else if (view.dom == text) {
+        return Math.min(offset, text.nodeValue.length);
+    }
+    return view.localPosFromDOM(node, offset);
+}
 // 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.
@@ -885,13 +944,43 @@ class WidgetBufferView extends ContentView {
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
-        return this.dom.getBoundingClientRect();
+        let imgRect = this.dom.getBoundingClientRect();
+        // Since the <img> height doesn't correspond to text height, try
+        // to borrow the height from some sibling node.
+        let siblingRect = inlineSiblingRect(this, this.side > 0 ? -1 : 1);
+        return siblingRect && siblingRect.top < imgRect.bottom && siblingRect.bottom > imgRect.top
+            ? { left: imgRect.left, right: imgRect.right, top: siblingRect.top, bottom: siblingRect.bottom } : imgRect;
     }
     get overrideDOMText() {
         return text.Text.empty;
     }
 }
 TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
+function inlineSiblingRect(view, side) {
+    let parent = view.parent, index = parent ? parent.children.indexOf(view) : -1;
+    while (parent && index >= 0) {
+        if (side < 0 ? index > 0 : index < parent.children.length) {
+            let next = parent.children[index + side];
+            if (next instanceof TextView) {
+                let nextRect = next.coordsAt(side < 0 ? next.length : 0, side);
+                if (nextRect)
+                    return nextRect;
+            }
+            index += side;
+        }
+        else if (parent instanceof MarkView && parent.parent) {
+            index = parent.parent.children.indexOf(parent) + (side < 0 ? 0 : 1);
+            parent = parent.parent;
+        }
+        else {
+            let last = parent.dom.lastChild;
+            if (last && last.nodeName == "BR")
+                return last.getClientRects()[0];
+            break;
+        }
+    }
+    return undefined;
+}
 function inlineDOMAtPos(dom, children, pos) {
     let i = 0;
     for (let off = 0; i < children.length; i++) {
@@ -935,7 +1024,7 @@ function coordsInChildren(view, pos, side) {
                     continue;
                 flatten = side = -child.getSide();
             }
-            let rect = child.coordsAt(pos - off, side);
+            let rect = child.coordsAt(Math.max(0, pos - off), side);
             return flatten && rect ? flattenRect(rect, side < 0) : rect;
         }
         off = end;
@@ -1117,7 +1206,7 @@ class Decoration extends rangeset.RangeValue {
     */
     static widget(spec) {
         let side = spec.side || 0, block = !!spec.block;
-        side += block ? (side > 0 ? 300000000 /* BlockAfter */ : -400000000 /* BlockBefore */) : (side > 0 ? 100000000 /* InlineAfter */ : -100000000 /* InlineBefore */);
+        side += block ? (side > 0 ? 400000000 /* BlockAfter */ : -500000000 /* BlockBefore */) : (side > 0 ? 100000000 /* InlineAfter */ : -100000000 /* InlineBefore */);
         return new PointDecoration(spec, side, side, block, spec.widget || null, false);
     }
     /**
@@ -1125,10 +1214,16 @@ class Decoration extends rangeset.RangeValue {
     a widget, or simply hides it.
     */
     static replace(spec) {
-        let block = !!spec.block;
-        let { start, end } = getInclusive(spec, block);
-        let startSide = (start ? (block ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 400000000 /* NonIncStart */) - 1;
-        let endSide = (end ? (block ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -500000000 /* NonIncEnd */) + 1;
+        let block = !!spec.block, startSide, endSide;
+        if (spec.isBlockGap) {
+            startSide = -400000000 /* GapStart */;
+            endSide = 300000000 /* GapEnd */;
+        }
+        else {
+            let { start, end } = getInclusive(spec, block);
+            startSide = (start ? (block ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 500000000 /* NonIncStart */) - 1;
+            endSide = (end ? (block ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -600000000 /* NonIncEnd */) + 1;
+        }
         return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
     }
     /**
@@ -1158,7 +1253,7 @@ Decoration.none = rangeset.RangeSet.empty;
 class MarkDecoration extends Decoration {
     constructor(spec) {
         let { start, end } = getInclusive(spec);
-        super(start ? -1 /* InlineIncStart */ : 400000000 /* NonIncStart */, end ? 1 /* InlineIncEnd */ : -500000000 /* NonIncEnd */, null, spec);
+        super(start ? -1 /* InlineIncStart */ : 500000000 /* NonIncStart */, end ? 1 /* InlineIncEnd */ : -600000000 /* NonIncEnd */, null, spec);
         this.tagName = spec.tagName || "span";
         this.class = spec.class || "";
         this.attrs = spec.attributes || null;
@@ -1388,6 +1483,7 @@ class BlockWidgetView extends ContentView {
         this.length = length;
         this.type = type;
         this.breakAfter = 0;
+        this.prevWidget = null;
     }
     merge(from, to, source, _takeDeco, openStart, openEnd) {
         if (source && (!(source instanceof BlockWidgetView) || !this.widget.compare(source.widget) ||
@@ -1409,6 +1505,9 @@ class BlockWidgetView extends ContentView {
     get children() { return noChildren; }
     sync() {
         if (!this.dom || !this.widget.updateDOM(this.dom)) {
+            if (this.dom && this.prevWidget)
+                this.prevWidget.destroy(this.dom);
+            this.prevWidget = null;
             this.setDOM(this.widget.toDOM(this.editorView));
             this.dom.contentEditable = "false";
         }
@@ -1422,6 +1521,8 @@ class BlockWidgetView extends ContentView {
             other.widget.constructor == this.widget.constructor) {
             if (!other.widget.eq(this.widget))
                 this.markDirty(true);
+            if (this.dom && !this.prevWidget)
+                this.prevWidget = this.widget;
             this.widget = other.widget;
             this.length = other.length;
             this.breakAfter = other.breakAfter;
@@ -2731,7 +2832,12 @@ class DocView extends ContentView {
             let end = next ? next.from - 1 : this.length;
             if (end > pos) {
                 let height = vs.lineBlockAt(end).bottom - vs.lineBlockAt(pos).top;
-                deco.push(Decoration.replace({ widget: new BlockGapWidget(height), block: true, inclusive: true }).range(pos, end));
+                deco.push(Decoration.replace({
+                    widget: new BlockGapWidget(height),
+                    block: true,
+                    inclusive: true,
+                    isBlockGap: true,
+                }).range(pos, end));
             }
             if (!next)
                 break;
@@ -2850,13 +2956,19 @@ function computeCompositionDeco(view, changes) {
     else if (state.doc.sliceString(newFrom, newTo, LineBreakPlaceholder) != text) {
         return Decoration.none;
     }
-    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode) }).range(newFrom, newTo));
+    let topView = ContentView.get(node);
+    if (topView instanceof CompositionView)
+        topView = topView.widget.topView;
+    else if (topView)
+        topView.parent = null;
+    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode, topView) }).range(newFrom, newTo));
 }
 class CompositionWidget extends WidgetType {
-    constructor(top, text) {
+    constructor(top, text, topView) {
         super();
         this.top = top;
         this.text = text;
+        this.topView = topView;
     }
     eq(other) { return this.top == other.top && this.text == other.text; }
     toDOM() { return this.top; }
@@ -5197,8 +5309,9 @@ const baseTheme = buildTheme("." + baseThemeID, {
         verticalAlign: "bottom"
     },
     ".cm-widgetBuffer": {
-        verticalAlign: "text-bottom",
+        verticalAlign: "text-top",
         height: "1em",
+        display: "inline"
     },
     ".cm-placeholder": {
         color: "#888",
@@ -5307,19 +5420,16 @@ class DOMObserver {
                 this.flushSoon();
             };
         this.onSelectionChange = this.onSelectionChange.bind(this);
+        window.addEventListener("resize", this.onResize = this.onResize.bind(this));
         if (typeof ResizeObserver == "function") {
             this.resize = new ResizeObserver(() => {
-                if (this.view.docView.lastUpdate < Date.now() - 75 && this.resizeTimeout < 0)
-                    this.resizeTimeout = setTimeout(() => {
-                        this.resizeTimeout = -1;
-                        this.view.requestMeasure();
-                    }, 50);
+                if (this.view.docView.lastUpdate < Date.now() - 75)
+                    this.onResize();
             });
             this.resize.observe(view.scrollDOM);
         }
         this.start();
-        this.onScroll = this.onScroll.bind(this);
-        window.addEventListener("scroll", this.onScroll);
+        window.addEventListener("scroll", this.onScroll = this.onScroll.bind(this));
         if (typeof IntersectionObserver == "function") {
             this.intersection = new IntersectionObserver(entries => {
                 if (this.parentCheck < 0)
@@ -5345,6 +5455,13 @@ class DOMObserver {
             this.flush(false);
         this.onScrollChanged(e);
     }
+    onResize() {
+        if (this.resizeTimeout < 0)
+            this.resizeTimeout = setTimeout(() => {
+                this.resizeTimeout = -1;
+                this.view.requestMeasure();
+            }, 50);
+    }
     updateGaps(gaps) {
         if (this.gapIntersection && (gaps.length != this.gaps.length || this.gaps.some((g, i) => g != gaps[i]))) {
             this.gapIntersection.disconnect();
@@ -5561,6 +5678,7 @@ class DOMObserver {
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
+        window.removeEventListener("resize", this.onResize);
         this.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
         clearTimeout(this.parentCheck);
         clearTimeout(this.resizeTimeout);
@@ -5880,7 +5998,6 @@ class EditorView {
         this.mountStyles();
         this.updateAttrs();
         this.updateState = 0 /* Idle */;
-        ensureGlobalHandler();
         this.requestMeasure();
         if (config.parent)
             config.parent.appendChild(this.dom);
@@ -5913,9 +6030,17 @@ class EditorView {
     get inView() { return this.viewState.inView; }
     /**
     Indicates whether the user is currently composing text via
-    [IME](https://en.wikipedia.org/wiki/Input_method).
+    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
+    one change has been made in the current composition.
     */
     get composing() { return this.inputState.composing > 0; }
+    /**
+    Indicates whether the user is currently in composing state. Note
+    that on some platforms, like Android, this will be the case a
+    lot, since just putting the cursor on a word starts a
+    composition there.
+    */
+    get compositionStarted() { return this.inputState.composing >= 0; }
     dispatch(...input) {
         this._dispatch(input.length == 1 && input[0] instanceof state.Transaction ? input[0]
             : this.state.update(...input));
@@ -6709,22 +6834,6 @@ const MaxBidiLine = 4096;
 function ensureTop(given, view) {
     return (given == null ? view.contentDOM.getBoundingClientRect().top : given) + view.viewState.paddingTop;
 }
-let resizeDebounce = -1;
-function ensureGlobalHandler() {
-    window.addEventListener("resize", () => {
-        if (resizeDebounce == -1)
-            resizeDebounce = setTimeout(handleResize, 50);
-    });
-}
-function handleResize() {
-    resizeDebounce = -1;
-    let found = document.querySelectorAll(".cm-content");
-    for (let i = 0; i < found.length; i++) {
-        let docView = ContentView.get(found[i]);
-        if (docView)
-            docView.editorView.requestMeasure();
-    }
-}
 const BadMeasure = {};
 class CachedOrder {
     constructor(from, to, dir, order) {

package/dist/index.d.ts

@@ -676,9 +676,17 @@ declare class EditorView {
     get inView(): boolean;
     /**
     Indicates whether the user is currently composing text via
-    [IME](https://en.wikipedia.org/wiki/Input_method).
+    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
+    one change has been made in the current composition.
     */
     get composing(): boolean;
+    /**
+    Indicates whether the user is currently in composing state. Note
+    that on some platforms, like Android, this will be the case a
+    lot, since just putting the cursor on a word starts a
+    composition there.
+    */
+    get compositionStarted(): boolean;
     private _dispatch;
     /**
     The document or shadow root that the view lives in.

package/dist/index.js

@@ -19,7 +19,7 @@ function getSelection(root) {
     return target.getSelection();
 }
 function contains(dom, node) {
-    return node ? dom.contains(node.nodeType != 1 ? node.parentNode : node) : false;
+    return node ? dom == node || dom.contains(node.nodeType != 1 ? node.parentNode : node) : false;
 }
 function deepActiveElement() {
     let elt = document.activeElement;
@@ -778,6 +778,7 @@ class WidgetView extends ContentView {
         this.widget = widget;
         this.length = length;
         this.side = side;
+        this.prevWidget = null;
     }
     static create(widget, length, side) {
         return new (widget.customView || WidgetView)(widget, length, side);
@@ -789,6 +790,9 @@ class WidgetView extends ContentView {
     }
     sync() {
         if (!this.dom || !this.widget.updateDOM(this.dom)) {
+            if (this.dom && this.prevWidget)
+                this.prevWidget.destroy(this.dom);
+            this.prevWidget = null;
             this.setDOM(this.widget.toDOM(this.editorView));
             this.dom.contentEditable = "false";
         }
@@ -806,6 +810,8 @@ class WidgetView extends ContentView {
             if (this.widget.constructor == other.widget.constructor) {
                 if (!this.widget.eq(other.widget))
                     this.markDirty(true);
+                if (this.dom && !this.prevWidget)
+                    this.prevWidget = this.widget;
                 this.widget = other.widget;
                 return true;
             }
@@ -846,16 +852,69 @@ class WidgetView extends ContentView {
     }
 }
 class CompositionView extends WidgetView {
-    domAtPos(pos) { return new DOMPos(this.widget.text, pos); }
+    domAtPos(pos) {
+        let { topView, text } = this.widget;
+        if (!topView)
+            return new DOMPos(text, Math.min(pos, text.nodeValue.length));
+        return scanCompositionTree(pos, 0, topView, text, (v, p) => v.domAtPos(p), p => new DOMPos(text, Math.min(p, text.nodeValue.length)));
+    }
     sync() { this.setDOM(this.widget.toDOM()); }
     localPosFromDOM(node, offset) {
-        return !offset ? 0 : node.nodeType == 3 ? Math.min(offset, this.length) : this.length;
+        let { topView, text } = this.widget;
+        if (!topView)
+            return Math.min(offset, this.length);
+        return posFromDOMInCompositionTree(node, offset, topView, text);
     }
     ignoreMutation() { return false; }
     get overrideDOMText() { return null; }
-    coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
+    coordsAt(pos, side) {
+        let { topView, text } = this.widget;
+        if (!topView)
+            return textCoords(text, pos, side);
+        return scanCompositionTree(pos, side, topView, text, (v, pos, side) => v.coordsAt(pos, side), (pos, side) => textCoords(text, pos, side));
+    }
+    destroy() {
+        var _a;
+        super.destroy();
+        (_a = this.widget.topView) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
     get isEditable() { return true; }
 }
+// Uses the old structure of a chunk of content view frozen for
+// composition to try and find a reasonable DOM location for the given
+// offset.
+function scanCompositionTree(pos, side, view, text, enterView, fromText) {
+    if (view instanceof MarkView) {
+        for (let child of view.children) {
+            let hasComp = contains(child.dom, text);
+            let len = hasComp ? text.nodeValue.length : child.length;
+            if (pos < len || pos == len && child.getSide() <= 0)
+                return hasComp ? scanCompositionTree(pos, side, child, text, enterView, fromText) : enterView(child, pos, side);
+            pos -= len;
+        }
+        return enterView(view, view.length, -1);
+    }
+    else if (view.dom == text) {
+        return fromText(pos, side);
+    }
+    else {
+        return enterView(view, pos, side);
+    }
+}
+function posFromDOMInCompositionTree(node, offset, view, text) {
+    if (view instanceof MarkView) {
+        for (let child of view.children) {
+            let pos = 0, hasComp = contains(child.dom, text);
+            if (contains(child.dom, node))
+                return pos + (hasComp ? posFromDOMInCompositionTree(node, offset, child, text) : child.localPosFromDOM(node, offset));
+            pos += hasComp ? text.nodeValue.length : child.length;
+        }
+    }
+    else if (view.dom == text) {
+        return Math.min(offset, text.nodeValue.length);
+    }
+    return view.localPosFromDOM(node, offset);
+}
 // 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.
@@ -882,13 +941,43 @@ class WidgetBufferView extends ContentView {
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
-        return this.dom.getBoundingClientRect();
+        let imgRect = this.dom.getBoundingClientRect();
+        // Since the <img> height doesn't correspond to text height, try
+        // to borrow the height from some sibling node.
+        let siblingRect = inlineSiblingRect(this, this.side > 0 ? -1 : 1);
+        return siblingRect && siblingRect.top < imgRect.bottom && siblingRect.bottom > imgRect.top
+            ? { left: imgRect.left, right: imgRect.right, top: siblingRect.top, bottom: siblingRect.bottom } : imgRect;
     }
     get overrideDOMText() {
         return Text.empty;
     }
 }
 TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
+function inlineSiblingRect(view, side) {
+    let parent = view.parent, index = parent ? parent.children.indexOf(view) : -1;
+    while (parent && index >= 0) {
+        if (side < 0 ? index > 0 : index < parent.children.length) {
+            let next = parent.children[index + side];
+            if (next instanceof TextView) {
+                let nextRect = next.coordsAt(side < 0 ? next.length : 0, side);
+                if (nextRect)
+                    return nextRect;
+            }
+            index += side;
+        }
+        else if (parent instanceof MarkView && parent.parent) {
+            index = parent.parent.children.indexOf(parent) + (side < 0 ? 0 : 1);
+            parent = parent.parent;
+        }
+        else {
+            let last = parent.dom.lastChild;
+            if (last && last.nodeName == "BR")
+                return last.getClientRects()[0];
+            break;
+        }
+    }
+    return undefined;
+}
 function inlineDOMAtPos(dom, children, pos) {
     let i = 0;
     for (let off = 0; i < children.length; i++) {
@@ -932,7 +1021,7 @@ function coordsInChildren(view, pos, side) {
                     continue;
                 flatten = side = -child.getSide();
             }
-            let rect = child.coordsAt(pos - off, side);
+            let rect = child.coordsAt(Math.max(0, pos - off), side);
             return flatten && rect ? flattenRect(rect, side < 0) : rect;
         }
         off = end;
@@ -1113,7 +1202,7 @@ class Decoration extends RangeValue {
     */
     static widget(spec) {
         let side = spec.side || 0, block = !!spec.block;
-        side += block ? (side > 0 ? 300000000 /* BlockAfter */ : -400000000 /* BlockBefore */) : (side > 0 ? 100000000 /* InlineAfter */ : -100000000 /* InlineBefore */);
+        side += block ? (side > 0 ? 400000000 /* BlockAfter */ : -500000000 /* BlockBefore */) : (side > 0 ? 100000000 /* InlineAfter */ : -100000000 /* InlineBefore */);
         return new PointDecoration(spec, side, side, block, spec.widget || null, false);
     }
     /**
@@ -1121,10 +1210,16 @@ class Decoration extends RangeValue {
     a widget, or simply hides it.
     */
     static replace(spec) {
-        let block = !!spec.block;
-        let { start, end } = getInclusive(spec, block);
-        let startSide = (start ? (block ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 400000000 /* NonIncStart */) - 1;
-        let endSide = (end ? (block ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -500000000 /* NonIncEnd */) + 1;
+        let block = !!spec.block, startSide, endSide;
+        if (spec.isBlockGap) {
+            startSide = -400000000 /* GapStart */;
+            endSide = 300000000 /* GapEnd */;
+        }
+        else {
+            let { start, end } = getInclusive(spec, block);
+            startSide = (start ? (block ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 500000000 /* NonIncStart */) - 1;
+            endSide = (end ? (block ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -600000000 /* NonIncEnd */) + 1;
+        }
         return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
     }
     /**
@@ -1154,7 +1249,7 @@ Decoration.none = RangeSet.empty;
 class MarkDecoration extends Decoration {
     constructor(spec) {
         let { start, end } = getInclusive(spec);
-        super(start ? -1 /* InlineIncStart */ : 400000000 /* NonIncStart */, end ? 1 /* InlineIncEnd */ : -500000000 /* NonIncEnd */, null, spec);
+        super(start ? -1 /* InlineIncStart */ : 500000000 /* NonIncStart */, end ? 1 /* InlineIncEnd */ : -600000000 /* NonIncEnd */, null, spec);
         this.tagName = spec.tagName || "span";
         this.class = spec.class || "";
         this.attrs = spec.attributes || null;
@@ -1384,6 +1479,7 @@ class BlockWidgetView extends ContentView {
         this.length = length;
         this.type = type;
         this.breakAfter = 0;
+        this.prevWidget = null;
     }
     merge(from, to, source, _takeDeco, openStart, openEnd) {
         if (source && (!(source instanceof BlockWidgetView) || !this.widget.compare(source.widget) ||
@@ -1405,6 +1501,9 @@ class BlockWidgetView extends ContentView {
     get children() { return noChildren; }
     sync() {
         if (!this.dom || !this.widget.updateDOM(this.dom)) {
+            if (this.dom && this.prevWidget)
+                this.prevWidget.destroy(this.dom);
+            this.prevWidget = null;
             this.setDOM(this.widget.toDOM(this.editorView));
             this.dom.contentEditable = "false";
         }
@@ -1418,6 +1517,8 @@ class BlockWidgetView extends ContentView {
             other.widget.constructor == this.widget.constructor) {
             if (!other.widget.eq(this.widget))
                 this.markDirty(true);
+            if (this.dom && !this.prevWidget)
+                this.prevWidget = this.widget;
             this.widget = other.widget;
             this.length = other.length;
             this.breakAfter = other.breakAfter;
@@ -2726,7 +2827,12 @@ class DocView extends ContentView {
             let end = next ? next.from - 1 : this.length;
             if (end > pos) {
                 let height = vs.lineBlockAt(end).bottom - vs.lineBlockAt(pos).top;
-                deco.push(Decoration.replace({ widget: new BlockGapWidget(height), block: true, inclusive: true }).range(pos, end));
+                deco.push(Decoration.replace({
+                    widget: new BlockGapWidget(height),
+                    block: true,
+                    inclusive: true,
+                    isBlockGap: true,
+                }).range(pos, end));
             }
             if (!next)
                 break;
@@ -2845,13 +2951,19 @@ function computeCompositionDeco(view, changes) {
     else if (state.doc.sliceString(newFrom, newTo, LineBreakPlaceholder) != text) {
         return Decoration.none;
     }
-    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode) }).range(newFrom, newTo));
+    let topView = ContentView.get(node);
+    if (topView instanceof CompositionView)
+        topView = topView.widget.topView;
+    else if (topView)
+        topView.parent = null;
+    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode, topView) }).range(newFrom, newTo));
 }
 class CompositionWidget extends WidgetType {
-    constructor(top, text) {
+    constructor(top, text, topView) {
         super();
         this.top = top;
         this.text = text;
+        this.topView = topView;
     }
     eq(other) { return this.top == other.top && this.text == other.text; }
     toDOM() { return this.top; }
@@ -5191,8 +5303,9 @@ const baseTheme = /*@__PURE__*/buildTheme("." + baseThemeID, {
         verticalAlign: "bottom"
     },
     ".cm-widgetBuffer": {
-        verticalAlign: "text-bottom",
+        verticalAlign: "text-top",
         height: "1em",
+        display: "inline"
     },
     ".cm-placeholder": {
         color: "#888",
@@ -5301,19 +5414,16 @@ class DOMObserver {
                 this.flushSoon();
             };
         this.onSelectionChange = this.onSelectionChange.bind(this);
+        window.addEventListener("resize", this.onResize = this.onResize.bind(this));
         if (typeof ResizeObserver == "function") {
             this.resize = new ResizeObserver(() => {
-                if (this.view.docView.lastUpdate < Date.now() - 75 && this.resizeTimeout < 0)
-                    this.resizeTimeout = setTimeout(() => {
-                        this.resizeTimeout = -1;
-                        this.view.requestMeasure();
-                    }, 50);
+                if (this.view.docView.lastUpdate < Date.now() - 75)
+                    this.onResize();
             });
             this.resize.observe(view.scrollDOM);
         }
         this.start();
-        this.onScroll = this.onScroll.bind(this);
-        window.addEventListener("scroll", this.onScroll);
+        window.addEventListener("scroll", this.onScroll = this.onScroll.bind(this));
         if (typeof IntersectionObserver == "function") {
             this.intersection = new IntersectionObserver(entries => {
                 if (this.parentCheck < 0)
@@ -5339,6 +5449,13 @@ class DOMObserver {
             this.flush(false);
         this.onScrollChanged(e);
     }
+    onResize() {
+        if (this.resizeTimeout < 0)
+            this.resizeTimeout = setTimeout(() => {
+                this.resizeTimeout = -1;
+                this.view.requestMeasure();
+            }, 50);
+    }
     updateGaps(gaps) {
         if (this.gapIntersection && (gaps.length != this.gaps.length || this.gaps.some((g, i) => g != gaps[i]))) {
             this.gapIntersection.disconnect();
@@ -5555,6 +5672,7 @@ class DOMObserver {
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
+        window.removeEventListener("resize", this.onResize);
         this.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
         clearTimeout(this.parentCheck);
         clearTimeout(this.resizeTimeout);
@@ -5874,7 +5992,6 @@ class EditorView {
         this.mountStyles();
         this.updateAttrs();
         this.updateState = 0 /* Idle */;
-        ensureGlobalHandler();
         this.requestMeasure();
         if (config.parent)
             config.parent.appendChild(this.dom);
@@ -5907,9 +6024,17 @@ class EditorView {
     get inView() { return this.viewState.inView; }
     /**
     Indicates whether the user is currently composing text via
-    [IME](https://en.wikipedia.org/wiki/Input_method).
+    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
+    one change has been made in the current composition.
     */
     get composing() { return this.inputState.composing > 0; }
+    /**
+    Indicates whether the user is currently in composing state. Note
+    that on some platforms, like Android, this will be the case a
+    lot, since just putting the cursor on a word starts a
+    composition there.
+    */
+    get compositionStarted() { return this.inputState.composing >= 0; }
     dispatch(...input) {
         this._dispatch(input.length == 1 && input[0] instanceof Transaction ? input[0]
             : this.state.update(...input));
@@ -6703,22 +6828,6 @@ const MaxBidiLine = 4096;
 function ensureTop(given, view) {
     return (given == null ? view.contentDOM.getBoundingClientRect().top : given) + view.viewState.paddingTop;
 }
-let resizeDebounce = -1;
-function ensureGlobalHandler() {
-    window.addEventListener("resize", () => {
-        if (resizeDebounce == -1)
-            resizeDebounce = setTimeout(handleResize, 50);
-    });
-}
-function handleResize() {
-    resizeDebounce = -1;
-    let found = document.querySelectorAll(".cm-content");
-    for (let i = 0; i < found.length; i++) {
-        let docView = ContentView.get(found[i]);
-        if (docView)
-            docView.editorView.requestMeasure();
-    }
-}
 const BadMeasure = {};
 class CachedOrder {
     constructor(from, to, dir, order) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "0.19.43",
+  "version": "0.19.46",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",