@codemirror/view 0.19.42 → 0.19.43

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.19.43 (2022-02-16)
+
+### Bug fixes
+
+Fix several issues where editing or composition went wrong due to our zero-width space kludge characters ending up in unexpected places.
+
+Make sure the editor re-measures its dimensions whenever its theme changes.
+
+Fix an issue where some keys on Android phones could leave the editor DOM unsynced with the actual document.
+
 ## 0.19.42 (2022-02-05)
 
 ### Bug fixes
@@ -88,7 +98,7 @@ Fix an issue where backspacing out a selection on Chrome Android would sometimes
 
 ### Bug fixes
 
-Fix a bug where content line elements would in some cases lose their `cm-line` class. Move test to scrollIntoView
+Fix a bug where content line elements would in some cases lose their `cm-line` class.
 
 ## 0.19.33 (2021-12-16)
 

package/dist/index.cjs

@@ -859,9 +859,6 @@ class CompositionView extends WidgetView {
     coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
     get isEditable() { return true; }
 }
-// Use two characters on Android, to prevent Chrome from closing the
-// virtual keyboard when backspacing after a widget (#602).
-const ZeroWidthSpace = browser.android ? "\u200b\u200b" : "\u200b";
 // 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,21 +874,21 @@ class WidgetBufferView extends ContentView {
     }
     split() { return new WidgetBufferView(this.side); }
     sync() {
-        if (!this.dom)
-            this.setDOM(document.createTextNode(ZeroWidthSpace));
-        else if (this.dirty && this.dom.nodeValue != ZeroWidthSpace)
-            this.dom.nodeValue = ZeroWidthSpace;
+        if (!this.dom) {
+            let dom = document.createElement("img");
+            dom.className = "cm-widgetBuffer";
+            this.setDOM(dom);
+        }
     }
     getSide() { return this.side; }
     domAtPos(pos) { return DOMPos.before(this.dom); }
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
-        let rects = clientRectsFor(this.dom);
-        return rects[rects.length - 1] || null;
+        return this.dom.getBoundingClientRect();
     }
     get overrideDOMText() {
-        return text.Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
+        return text.Text.empty;
     }
 }
 TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
@@ -5199,6 +5196,10 @@ const baseTheme = buildTheme("." + baseThemeID, {
         overflow: "hidden",
         verticalAlign: "bottom"
     },
+    ".cm-widgetBuffer": {
+        verticalAlign: "text-bottom",
+        height: "1em",
+    },
     ".cm-placeholder": {
         color: "#888",
         display: "inline-block",
@@ -5447,7 +5448,7 @@ class DOMObserver {
     }
     // Throw away any pending changes
     clear() {
-        this.observer.takeRecords();
+        this.processRecords();
         this.queue.length = 0;
         this.selectionChanged = false;
     }
@@ -5625,23 +5626,11 @@ function applyDOMChange(view, start, end, typeOver) {
         }
         let diff = findDiff(view.state.doc.sliceString(from, to, LineBreakPlaceholder), reader.text, preferredPos - from, preferredSide);
         if (diff) {
-            let orig = diff;
             // Chrome inserts two newlines when pressing shift-enter at the
             // end of a line. This drops one of those.
             if (browser.chrome && view.inputState.lastKeyCode == 13 &&
                 diff.toB == diff.from + 2 && reader.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
                 diff.toB--;
-            // Strip leading and trailing zero-width spaces from the inserted
-            // content, to work around widget buffers being moved into text
-            // nodes by the browser.
-            while (diff.from < diff.toB && reader.text[diff.from] == "\u200b") {
-                diff = { from: diff.from + 1, toA: diff.toA, toB: diff.toB };
-                selPoints.forEach(p => p.pos -= p.pos > orig.from ? 1 : 0);
-            }
-            while (diff.toB > diff.from && reader.text[diff.toB - 1] == "\u200b") {
-                diff = { from: diff.from, toA: diff.toA, toB: diff.toB - 1 };
-                selPoints.forEach(p => p.pos -= p.pos > orig.toB ? 1 : 0);
-            }
             change = { from: from + diff.from, to: from + diff.toA,
                 insert: state.Text.of(reader.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
         }
@@ -5992,7 +5981,9 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
-        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc)
+        if (update.startState.facet(theme) != update.state.facet(theme))
+            this.viewState.mustMeasureContent = true;
+        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))

package/dist/index.js

@@ -856,9 +856,6 @@ class CompositionView extends WidgetView {
     coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
     get isEditable() { return true; }
 }
-// Use two characters on Android, to prevent Chrome from closing the
-// virtual keyboard when backspacing after a widget (#602).
-const ZeroWidthSpace = browser.android ? "\u200b\u200b" : "\u200b";
 // 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,21 +871,21 @@ class WidgetBufferView extends ContentView {
     }
     split() { return new WidgetBufferView(this.side); }
     sync() {
-        if (!this.dom)
-            this.setDOM(document.createTextNode(ZeroWidthSpace));
-        else if (this.dirty && this.dom.nodeValue != ZeroWidthSpace)
-            this.dom.nodeValue = ZeroWidthSpace;
+        if (!this.dom) {
+            let dom = document.createElement("img");
+            dom.className = "cm-widgetBuffer";
+            this.setDOM(dom);
+        }
     }
     getSide() { return this.side; }
     domAtPos(pos) { return DOMPos.before(this.dom); }
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
-        let rects = clientRectsFor(this.dom);
-        return rects[rects.length - 1] || null;
+        return this.dom.getBoundingClientRect();
     }
     get overrideDOMText() {
-        return Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
+        return Text.empty;
     }
 }
 TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
@@ -5193,6 +5190,10 @@ const baseTheme = /*@__PURE__*/buildTheme("." + baseThemeID, {
         overflow: "hidden",
         verticalAlign: "bottom"
     },
+    ".cm-widgetBuffer": {
+        verticalAlign: "text-bottom",
+        height: "1em",
+    },
     ".cm-placeholder": {
         color: "#888",
         display: "inline-block",
@@ -5441,7 +5442,7 @@ class DOMObserver {
     }
     // Throw away any pending changes
     clear() {
-        this.observer.takeRecords();
+        this.processRecords();
         this.queue.length = 0;
         this.selectionChanged = false;
     }
@@ -5619,23 +5620,11 @@ function applyDOMChange(view, start, end, typeOver) {
         }
         let diff = findDiff(view.state.doc.sliceString(from, to, LineBreakPlaceholder), reader.text, preferredPos - from, preferredSide);
         if (diff) {
-            let orig = diff;
             // Chrome inserts two newlines when pressing shift-enter at the
             // end of a line. This drops one of those.
             if (browser.chrome && view.inputState.lastKeyCode == 13 &&
                 diff.toB == diff.from + 2 && reader.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
                 diff.toB--;
-            // Strip leading and trailing zero-width spaces from the inserted
-            // content, to work around widget buffers being moved into text
-            // nodes by the browser.
-            while (diff.from < diff.toB && reader.text[diff.from] == "\u200b") {
-                diff = { from: diff.from + 1, toA: diff.toA, toB: diff.toB };
-                selPoints.forEach(p => p.pos -= p.pos > orig.from ? 1 : 0);
-            }
-            while (diff.toB > diff.from && reader.text[diff.toB - 1] == "\u200b") {
-                diff = { from: diff.from, toA: diff.toA, toB: diff.toB - 1 };
-                selPoints.forEach(p => p.pos -= p.pos > orig.toB ? 1 : 0);
-            }
             change = { from: from + diff.from, to: from + diff.toA,
                 insert: Text$1.of(reader.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
         }
@@ -5986,7 +5975,9 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
-        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc)
+        if (update.startState.facet(theme) != update.state.facet(theme))
+            this.viewState.mustMeasureContent = true;
+        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))

package/package.json

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