@codemirror/view 0.19.16 → 0.19.20

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.19.20 (2021-11-19)
+
+### Bug fixes
+
+Run a measure cycle when the editor's size spontaneously changes.
+
+## 0.19.19 (2021-11-17)
+
+### Bug fixes
+
+Fix a bug that caused the precedence of `editorAttributes` and `contentAttributes` to be inverted, making lower-precedence extensions override higher-precedence ones.
+
+## 0.19.18 (2021-11-16)
+
+### Bug fixes
+
+Fix an issue where the editor wasn't aware it was line-wrapping with its own `lineWrapping` extension enabled.
+
+## 0.19.17 (2021-11-16)
+
+### Bug fixes
+
+Avoid an issue where stretches of whitespace on line wrap points could cause the cursor to be placed outside of the content.
+
 ## 0.19.16 (2021-11-11)
 
 ### Breaking changes

package/dist/index.cjs

@@ -666,7 +666,7 @@ function textCoords(text, pos, side) {
     let rect = rects[(flatten ? flatten < 0 : side >= 0) ? 0 : rects.length - 1];
     if (browser.safari && !flatten && rect.width == 0)
         rect = Array.prototype.find.call(rects, r => r.width) || rect;
-    return flatten ? flattenRect(rect, flatten < 0) : rect;
+    return flatten ? flattenRect(rect, flatten < 0) : rect || null;
 }
 // Also used for collapsed ranges that don't have a placeholder widget!
 class WidgetView extends InlineView {
@@ -774,7 +774,7 @@ class WidgetBufferView extends InlineView {
     domBoundsAround() { return null; }
     coordsAt(pos) {
         let rects = clientRectsFor(this.dom);
-        return rects[rects.length - 1];
+        return rects[rects.length - 1] || null;
     }
     get overrideDOMText() {
         return text.Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
@@ -916,7 +916,7 @@ function coordsInChildren(view, pos, side) {
     if (!last)
         return view.dom.getBoundingClientRect();
     let rects = clientRectsFor(last);
-    return rects[rects.length - 1];
+    return rects[rects.length - 1] || null;
 }
 
 function combineAttrs(source, target) {
@@ -1771,11 +1771,17 @@ class PluginInstance {
     }
 }
 PluginInstance.dummy = new PluginInstance(ViewPlugin.define(() => ({})));
+function combineFacetAttrs(values) {
+    let result = {};
+    for (let i = values.length - 1; i >= 0; i--)
+        combineAttrs(values[i], result);
+    return result;
+}
 const editorAttributes = state.Facet.define({
-    combine: values => values.reduce((a, b) => combineAttrs(b, a), {})
+    combine: combineFacetAttrs
 });
 const contentAttributes = state.Facet.define({
-    combine: values => values.reduce((a, b) => combineAttrs(b, a), {})
+    combine: combineFacetAttrs
 });
 // Provide decorations
 const decorations = state.Facet.define();
@@ -1937,6 +1943,9 @@ class DocView extends ContentView {
         // we don't mess it up when reading it back it
         this.impreciseAnchor = null;
         this.impreciseHead = null;
+        // Used by the resize observer to ignore resizes that we caused
+        // ourselves
+        this.lastUpdate = 0;
         this.setDOM(view.contentDOM);
         this.children = [new LineView];
         this.children[0].setParent(this);
@@ -1950,6 +1959,7 @@ class DocView extends ContentView {
     // position, if we know the editor is going to scroll that position
     // into view.
     update(update) {
+        this.lastUpdate = Date.now();
         let changedRanges = update.changedRanges;
         if (this.minWidth > 0 && changedRanges.length) {
             if (!changedRanges.every(({ fromA, toA }) => toA < this.minWidthFrom || fromA > this.minWidthTo)) {
@@ -3742,7 +3752,7 @@ handlers.beforeinput = (view, event) => {
     }
 };
 
-const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line"];
+const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line", "break-spaces"];
 class HeightOracle {
     constructor() {
         this.doc = text.Text.empty;
@@ -4476,6 +4486,7 @@ class ViewState {
         this.paddingTop = 0;
         this.paddingBottom = 0;
         this.contentWidth = 0;
+        this.editorHeight = 0;
         this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
@@ -4575,6 +4586,10 @@ class ViewState {
                 this.contentWidth = contentWidth;
                 result |= 8 /* Geometry */;
             }
+            if (this.editorHeight != docView.view.scrollDOM.clientHeight) {
+                this.editorHeight = docView.view.scrollDOM.clientHeight;
+                result |= 8 /* Geometry */;
+            }
             if (dTop > 0 && dBottom > 0)
                 bias = Math.max(dTop, dBottom);
             else if (dTop < 0 && dBottom < 0)
@@ -4938,7 +4953,8 @@ const baseTheme = buildTheme("." + baseThemeID, {
         }
     },
     ".cm-lineWrapping": {
-        whiteSpace: "pre-wrap",
+        whiteSpace_fallback: "pre-wrap",
+        whiteSpace: "break-spaces",
         wordBreak: "break-word",
         overflowWrap: "anywhere"
     },
@@ -5065,6 +5081,7 @@ class DOMObserver {
         this.lastFlush = 0;
         this.scrollTargets = [];
         this.intersection = null;
+        this.resize = null;
         this.intersecting = false;
         this.gapIntersection = null;
         this.gaps = [];
@@ -5101,6 +5118,13 @@ class DOMObserver {
                 this.flushSoon();
             };
         this.onSelectionChange = this.onSelectionChange.bind(this);
+        if (typeof ResizeObserver == "function") {
+            this.resize = new ResizeObserver(() => {
+                if (this.view.docView.lastUpdate < Date.now() - 100)
+                    this.view.requestMeasure();
+            });
+            this.resize.observe(view.scrollDOM);
+        }
         this.start();
         this.onScroll = this.onScroll.bind(this);
         window.addEventListener("scroll", this.onScroll);
@@ -5314,11 +5338,11 @@ class DOMObserver {
         }
     }
     destroy() {
+        var _a, _b, _c;
         this.stop();
-        if (this.intersection)
-            this.intersection.disconnect();
-        if (this.gapIntersection)
-            this.gapIntersection.disconnect();
+        (_a = this.intersection) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.gapIntersection) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.resize) === null || _c === void 0 ? void 0 : _c.disconnect();
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
@@ -5831,7 +5855,7 @@ class EditorView {
             return;
         if (this.measureScheduled > -1)
             cancelAnimationFrame(this.measureScheduled);
-        this.measureScheduled = -1; // Prevent requestMeasure calls from scheduling another animation frame
+        this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
             this.observer.flush();
         let updated = null;
@@ -5892,8 +5916,8 @@ class EditorView {
         }
         finally {
             this.updateState = 0 /* Idle */;
+            this.measureScheduled = -1;
         }
-        this.measureScheduled = -1;
         if (updated && !updated.empty)
             for (let listener of this.state.facet(updateListener))
                 listener(updated);

package/dist/index.js

@@ -663,7 +663,7 @@ function textCoords(text, pos, side) {
     let rect = rects[(flatten ? flatten < 0 : side >= 0) ? 0 : rects.length - 1];
     if (browser.safari && !flatten && rect.width == 0)
         rect = Array.prototype.find.call(rects, r => r.width) || rect;
-    return flatten ? flattenRect(rect, flatten < 0) : rect;
+    return flatten ? flattenRect(rect, flatten < 0) : rect || null;
 }
 // Also used for collapsed ranges that don't have a placeholder widget!
 class WidgetView extends InlineView {
@@ -771,7 +771,7 @@ class WidgetBufferView extends InlineView {
     domBoundsAround() { return null; }
     coordsAt(pos) {
         let rects = clientRectsFor(this.dom);
-        return rects[rects.length - 1];
+        return rects[rects.length - 1] || null;
     }
     get overrideDOMText() {
         return Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
@@ -913,7 +913,7 @@ function coordsInChildren(view, pos, side) {
     if (!last)
         return view.dom.getBoundingClientRect();
     let rects = clientRectsFor(last);
-    return rects[rects.length - 1];
+    return rects[rects.length - 1] || null;
 }
 
 function combineAttrs(source, target) {
@@ -1767,11 +1767,17 @@ class PluginInstance {
     }
 }
 PluginInstance.dummy = /*@__PURE__*/new PluginInstance(/*@__PURE__*/ViewPlugin.define(() => ({})));
+function combineFacetAttrs(values) {
+    let result = {};
+    for (let i = values.length - 1; i >= 0; i--)
+        combineAttrs(values[i], result);
+    return result;
+}
 const editorAttributes = /*@__PURE__*/Facet.define({
-    combine: values => values.reduce((a, b) => combineAttrs(b, a), {})
+    combine: combineFacetAttrs
 });
 const contentAttributes = /*@__PURE__*/Facet.define({
-    combine: values => values.reduce((a, b) => combineAttrs(b, a), {})
+    combine: combineFacetAttrs
 });
 // Provide decorations
 const decorations = /*@__PURE__*/Facet.define();
@@ -1933,6 +1939,9 @@ class DocView extends ContentView {
         // we don't mess it up when reading it back it
         this.impreciseAnchor = null;
         this.impreciseHead = null;
+        // Used by the resize observer to ignore resizes that we caused
+        // ourselves
+        this.lastUpdate = 0;
         this.setDOM(view.contentDOM);
         this.children = [new LineView];
         this.children[0].setParent(this);
@@ -1946,6 +1955,7 @@ class DocView extends ContentView {
     // position, if we know the editor is going to scroll that position
     // into view.
     update(update) {
+        this.lastUpdate = Date.now();
         let changedRanges = update.changedRanges;
         if (this.minWidth > 0 && changedRanges.length) {
             if (!changedRanges.every(({ fromA, toA }) => toA < this.minWidthFrom || fromA > this.minWidthTo)) {
@@ -3737,7 +3747,7 @@ handlers.beforeinput = (view, event) => {
     }
 };
 
-const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line"];
+const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line", "break-spaces"];
 class HeightOracle {
     constructor() {
         this.doc = Text.empty;
@@ -4470,6 +4480,7 @@ class ViewState {
         this.paddingTop = 0;
         this.paddingBottom = 0;
         this.contentWidth = 0;
+        this.editorHeight = 0;
         this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
@@ -4569,6 +4580,10 @@ class ViewState {
                 this.contentWidth = contentWidth;
                 result |= 8 /* Geometry */;
             }
+            if (this.editorHeight != docView.view.scrollDOM.clientHeight) {
+                this.editorHeight = docView.view.scrollDOM.clientHeight;
+                result |= 8 /* Geometry */;
+            }
             if (dTop > 0 && dBottom > 0)
                 bias = Math.max(dTop, dBottom);
             else if (dTop < 0 && dBottom < 0)
@@ -4932,7 +4947,8 @@ const baseTheme = /*@__PURE__*/buildTheme("." + baseThemeID, {
         }
     },
     ".cm-lineWrapping": {
-        whiteSpace: "pre-wrap",
+        whiteSpace_fallback: "pre-wrap",
+        whiteSpace: "break-spaces",
         wordBreak: "break-word",
         overflowWrap: "anywhere"
     },
@@ -5059,6 +5075,7 @@ class DOMObserver {
         this.lastFlush = 0;
         this.scrollTargets = [];
         this.intersection = null;
+        this.resize = null;
         this.intersecting = false;
         this.gapIntersection = null;
         this.gaps = [];
@@ -5095,6 +5112,13 @@ class DOMObserver {
                 this.flushSoon();
             };
         this.onSelectionChange = this.onSelectionChange.bind(this);
+        if (typeof ResizeObserver == "function") {
+            this.resize = new ResizeObserver(() => {
+                if (this.view.docView.lastUpdate < Date.now() - 100)
+                    this.view.requestMeasure();
+            });
+            this.resize.observe(view.scrollDOM);
+        }
         this.start();
         this.onScroll = this.onScroll.bind(this);
         window.addEventListener("scroll", this.onScroll);
@@ -5308,11 +5332,11 @@ class DOMObserver {
         }
     }
     destroy() {
+        var _a, _b, _c;
         this.stop();
-        if (this.intersection)
-            this.intersection.disconnect();
-        if (this.gapIntersection)
-            this.gapIntersection.disconnect();
+        (_a = this.intersection) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.gapIntersection) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.resize) === null || _c === void 0 ? void 0 : _c.disconnect();
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
@@ -5825,7 +5849,7 @@ class EditorView {
             return;
         if (this.measureScheduled > -1)
             cancelAnimationFrame(this.measureScheduled);
-        this.measureScheduled = -1; // Prevent requestMeasure calls from scheduling another animation frame
+        this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
             this.observer.flush();
         let updated = null;
@@ -5886,8 +5910,8 @@ class EditorView {
         }
         finally {
             this.updateState = 0 /* Idle */;
+            this.measureScheduled = -1;
         }
-        this.measureScheduled = -1;
         if (updated && !updated.empty)
             for (let listener of this.state.facet(updateListener))
                 listener(updated);

package/package.json

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