@codemirror/view 0.19.44 → 0.19.47

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## 0.19.47 (2022-03-08)
+
+### Bug fixes
+
+Fix an issue where block widgets at the start of the viewport could break height computations.
+
+## 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

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.
@@ -877,6 +936,7 @@ class WidgetBufferView extends ContentView {
         if (!this.dom) {
             let dom = document.createElement("img");
             dom.className = "cm-widgetBuffer";
+            dom.setAttribute("aria-hidden", "true");
             this.setDOM(dom);
         }
     }
@@ -885,13 +945,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++) {
@@ -1125,10 +1215,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 = -500000000 /* GapStart */;
+            endSide = 400000000 /* 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 +1254,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;
@@ -1339,7 +1435,7 @@ class LineView extends ContentView {
         let last = this.dom.lastChild;
         while (last && ContentView.get(last) instanceof MarkView)
             last = last.lastChild;
-        if (!last ||
+        if (!last || !this.length ||
             last.nodeName != "BR" && ((_a = ContentView.get(last)) === null || _a === void 0 ? void 0 : _a.isEditable) == false &&
                 (!browser.ios || !this.children.some(ch => ch instanceof TextView))) {
             let hack = document.createElement("BR");
@@ -1388,6 +1484,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 +1506,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 +1522,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 +2833,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 +2957,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 +5310,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 +5421,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 +5456,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 +5679,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 +5999,6 @@ class EditorView {
         this.mountStyles();
         this.updateAttrs();
         this.updateState = 0 /* Idle */;
-        ensureGlobalHandler();
         this.requestMeasure();
         if (config.parent)
             config.parent.appendChild(this.dom);
@@ -6717,22 +6835,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.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.
@@ -874,6 +933,7 @@ class WidgetBufferView extends ContentView {
         if (!this.dom) {
             let dom = document.createElement("img");
             dom.className = "cm-widgetBuffer";
+            dom.setAttribute("aria-hidden", "true");
             this.setDOM(dom);
         }
     }
@@ -882,13 +942,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++) {
@@ -1121,10 +1211,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 = -500000000 /* GapStart */;
+            endSide = 400000000 /* 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 +1250,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;
@@ -1335,7 +1431,7 @@ class LineView extends ContentView {
         let last = this.dom.lastChild;
         while (last && ContentView.get(last) instanceof MarkView)
             last = last.lastChild;
-        if (!last ||
+        if (!last || !this.length ||
             last.nodeName != "BR" && ((_a = ContentView.get(last)) === null || _a === void 0 ? void 0 : _a.isEditable) == false &&
                 (!browser.ios || !this.children.some(ch => ch instanceof TextView))) {
             let hack = document.createElement("BR");
@@ -1384,6 +1480,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 +1502,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 +1518,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 +2828,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 +2952,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 +5304,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 +5415,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 +5450,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 +5673,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 +5993,6 @@ class EditorView {
         this.mountStyles();
         this.updateAttrs();
         this.updateState = 0 /* Idle */;
-        ensureGlobalHandler();
         this.requestMeasure();
         if (config.parent)
             config.parent.appendChild(this.dom);
@@ -6711,22 +6829,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.44",
+  "version": "0.19.47",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",