@codemirror/view 0.19.44 → 0.19.45

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 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

@@ -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,7 +855,12 @@ class WidgetView extends ContentView {
     }
 }
 class CompositionView extends WidgetView {
-    domAtPos(pos) { return new DOMPos(this.widget.text, pos); }
+    domAtPos(pos) {
+        let { topView } = this.widget;
+        if (!topView)
+            return new DOMPos(this.widget.text, Math.min(pos, this.widget.text.nodeValue.length));
+        return posInCompositionTree(pos, topView, this.widget.text);
+    }
     sync() { this.setDOM(this.widget.toDOM()); }
     localPosFromDOM(node, offset) {
         return !offset ? 0 : node.nodeType == 3 ? Math.min(offset, this.length) : this.length;
@@ -857,8 +868,34 @@ class CompositionView extends WidgetView {
     ignoreMutation() { return false; }
     get overrideDOMText() { return null; }
     coordsAt(pos, side) { return textCoords(this.widget.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 posInCompositionTree(pos, view, text) {
+    if (view instanceof MarkView) {
+        for (let child of view.children) {
+            let hasComp = child.dom == text || child.dom.contains(text.parentNode);
+            let len = hasComp ? text.nodeValue.length : child.length;
+            if (pos < len || pos == len && child.getSide() <= 0)
+                return hasComp ? posInCompositionTree(pos, child, text) : child.domAtPos(pos);
+            pos -= len;
+        }
+        return view.domAtPos(view.length);
+    }
+    else if (view.dom == text) {
+        return new DOMPos(text, Math.min(pos, text.nodeValue.length));
+    }
+    else {
+        return view.domAtPos(pos);
+    }
+}
 // 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.
@@ -1388,6 +1425,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 +1447,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 +1463,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;
@@ -2850,13 +2893,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 +5246,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 +5357,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 +5392,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 +5615,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 +5935,6 @@ class EditorView {
         this.mountStyles();
         this.updateAttrs();
         this.updateState = 0 /* Idle */;
-        ensureGlobalHandler();
         this.requestMeasure();
         if (config.parent)
             config.parent.appendChild(this.dom);
@@ -6717,22 +6771,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

@@ -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,7 +852,12 @@ class WidgetView extends ContentView {
     }
 }
 class CompositionView extends WidgetView {
-    domAtPos(pos) { return new DOMPos(this.widget.text, pos); }
+    domAtPos(pos) {
+        let { topView } = this.widget;
+        if (!topView)
+            return new DOMPos(this.widget.text, Math.min(pos, this.widget.text.nodeValue.length));
+        return posInCompositionTree(pos, topView, this.widget.text);
+    }
     sync() { this.setDOM(this.widget.toDOM()); }
     localPosFromDOM(node, offset) {
         return !offset ? 0 : node.nodeType == 3 ? Math.min(offset, this.length) : this.length;
@@ -854,8 +865,34 @@ class CompositionView extends WidgetView {
     ignoreMutation() { return false; }
     get overrideDOMText() { return null; }
     coordsAt(pos, side) { return textCoords(this.widget.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 posInCompositionTree(pos, view, text) {
+    if (view instanceof MarkView) {
+        for (let child of view.children) {
+            let hasComp = child.dom == text || child.dom.contains(text.parentNode);
+            let len = hasComp ? text.nodeValue.length : child.length;
+            if (pos < len || pos == len && child.getSide() <= 0)
+                return hasComp ? posInCompositionTree(pos, child, text) : child.domAtPos(pos);
+            pos -= len;
+        }
+        return view.domAtPos(view.length);
+    }
+    else if (view.dom == text) {
+        return new DOMPos(text, Math.min(pos, text.nodeValue.length));
+    }
+    else {
+        return view.domAtPos(pos);
+    }
+}
 // 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.
@@ -1384,6 +1421,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 +1443,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 +1459,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;
@@ -2845,13 +2888,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 +5240,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 +5351,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 +5386,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 +5609,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 +5929,6 @@ class EditorView {
         this.mountStyles();
         this.updateAttrs();
         this.updateState = 0 /* Idle */;
-        ensureGlobalHandler();
         this.requestMeasure();
         if (config.parent)
             config.parent.appendChild(this.dom);
@@ -6711,22 +6765,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.45",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",