@codemirror/view 0.19.14 → 0.19.18

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 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
+
+Block replacement decorations now default to inclusive, because non-inclusive block decorations are rarely what you need.
+
+### Bug fixes
+
+Fix an issue that caused block widgets to always have a large side value, making it impossible to show them between to replacement decorations.
+
+Fix a crash that could happen after some types of viewport changes, due to a bug in the block widget view data structure.
+
+## 0.19.15 (2021-11-09)
+
+### Bug fixes
+
+Fix a bug where the editor would think it was invisible when the document body was given screen height and scroll behavior.
+
+Fix selection reading inside a shadow root on iOS.
+
 ## 0.19.14 (2021-11-07)
 
 ### Bug fixes

package/dist/index.cjs

@@ -252,19 +252,6 @@ function dispatchKey(elt, name, code) {
     elt.dispatchEvent(up);
     return down.defaultPrevented || up.defaultPrevented;
 }
-let _plainTextSupported = null;
-function contentEditablePlainTextSupported() {
-    if (_plainTextSupported == null) {
-        _plainTextSupported = false;
-        let dummy = document.createElement("div");
-        try {
-            dummy.contentEditable = "plaintext-only";
-            _plainTextSupported = dummy.contentEditable == "plaintext-only";
-        }
-        catch (_) { }
-    }
-    return _plainTextSupported;
-}
 function getRoot(node) {
     while (node) {
         if (node && (node.nodeType == 9 || node.nodeType == 11 && node.host))
@@ -679,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 {
@@ -787,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, "")]);
@@ -929,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) {
@@ -1097,8 +1084,6 @@ class Decoration extends rangeset.RangeValue {
     */
     static widget(spec) {
         let side = spec.side || 0;
-        if (spec.block)
-            side += (200000000 /* BigBlock */ + 1) * (side > 0 ? 1 : -1);
         return new PointDecoration(spec, side, side, !!spec.block, spec.widget || null, false);
     }
     /**
@@ -1107,9 +1092,9 @@ class Decoration extends rangeset.RangeValue {
     */
     static replace(spec) {
         let block = !!spec.block;
-        let { start, end } = getInclusive(spec);
-        let startSide = block ? -200000000 /* BigBlock */ * (start ? 2 : 1) : 100000000 /* BigInline */ * (start ? -1 : 1);
-        let endSide = block ? 200000000 /* BigBlock */ * (end ? 2 : 1) : 100000000 /* BigInline */ * (end ? 1 : -1);
+        let { start, end } = getInclusive(spec, block);
+        let startSide = 100000000 /* Big */ * (start ? -1 : 1) * (block ? 2 : 1);
+        let endSide = 100000000 /* Big */ * (end ? 1 : -1) * (block ? 2 : 1);
         return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
     }
     /**
@@ -1139,7 +1124,7 @@ Decoration.none = rangeset.RangeSet.empty;
 class MarkDecoration extends Decoration {
     constructor(spec) {
         let { start, end } = getInclusive(spec);
-        super(100000000 /* BigInline */ * (start ? -1 : 1), 100000000 /* BigInline */ * (end ? 1 : -1), null, spec);
+        super(100000000 /* Big */ * (start ? -1 : 1), 100000000 /* Big */ * (end ? 1 : -1), null, spec);
         this.tagName = spec.tagName || "span";
         this.class = spec.class || "";
         this.attrs = spec.attributes || null;
@@ -1160,7 +1145,7 @@ class MarkDecoration extends Decoration {
 MarkDecoration.prototype.point = false;
 class LineDecoration extends Decoration {
     constructor(spec) {
-        super(-100000000 /* BigInline */, -100000000 /* BigInline */, null, spec);
+        super(-100000000 /* Big */, -100000000 /* Big */, null, spec);
     }
     eq(other) {
         return other instanceof LineDecoration && attrsEq(this.spec.attributes, other.spec.attributes);
@@ -1201,13 +1186,13 @@ class PointDecoration extends Decoration {
     }
 }
 PointDecoration.prototype.point = true;
-function getInclusive(spec) {
+function getInclusive(spec, block = false) {
     let { inclusiveStart: start, inclusiveEnd: end } = spec;
     if (start == null)
         start = spec.inclusive;
     if (end == null)
         end = spec.inclusive;
-    return { start: start || false, end: end || false };
+    return { start: start !== null && start !== void 0 ? start : block, end: end !== null && end !== void 0 ? end : block };
 }
 function widgetsEq(a, b) {
     return a == b || !!(a && b && a.compare(b));
@@ -1375,7 +1360,9 @@ class BlockWidgetView extends ContentView {
     split(at) {
         let len = this.length - at;
         this.length = at;
-        return new BlockWidgetView(this.widget, len, this.type);
+        let end = new BlockWidgetView(this.widget, len, this.type);
+        end.breakAfter = this.breakAfter;
+        return end;
     }
     get children() { return none$1; }
     sync() {
@@ -3755,7 +3742,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;
@@ -4402,18 +4389,20 @@ function visiblePixelRange(dom, paddingTop) {
     let rect = dom.getBoundingClientRect();
     let left = Math.max(0, rect.left), right = Math.min(innerWidth, rect.right);
     let top = Math.max(0, rect.top), bottom = Math.min(innerHeight, rect.bottom);
-    for (let parent = dom.parentNode; parent;) { // (Cast to any because TypeScript is useless with Node types)
+    let body = dom.ownerDocument.body;
+    for (let parent = dom.parentNode; parent && parent != body;) {
         if (parent.nodeType == 1) {
-            let style = window.getComputedStyle(parent);
-            if ((parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth) &&
+            let elt = parent;
+            let style = window.getComputedStyle(elt);
+            if ((elt.scrollHeight > elt.clientHeight || elt.scrollWidth > elt.clientWidth) &&
                 style.overflow != "visible") {
-                let parentRect = parent.getBoundingClientRect();
+                let parentRect = elt.getBoundingClientRect();
                 left = Math.max(left, parentRect.left);
                 right = Math.min(right, parentRect.right);
                 top = Math.max(top, parentRect.top);
                 bottom = Math.min(bottom, parentRect.bottom);
             }
-            parent = style.position == "absolute" || style.position == "fixed" ? parent.offsetParent : parent.parentNode;
+            parent = style.position == "absolute" || style.position == "fixed" ? elt.offsetParent : elt.parentNode;
         }
         else if (parent.nodeType == 11) { // Shadow root
             parent = parent.host;
@@ -4943,10 +4932,14 @@ const baseTheme = buildTheme("." + baseThemeID, {
         wordWrap: "normal",
         boxSizing: "border-box",
         padding: "4px 0",
-        outline: "none"
+        outline: "none",
+        "&[contenteditable=true]": {
+            WebkitUserModify: "read-write-plaintext-only",
+        }
     },
     ".cm-lineWrapping": {
-        whiteSpace: "pre-wrap",
+        whiteSpace_fallback: "pre-wrap",
+        whiteSpace: "break-spaces",
         wordBreak: "break-word",
         overflowWrap: "anywhere"
     },
@@ -5925,7 +5918,7 @@ class EditorView {
             autocorrect: "off",
             autocapitalize: "off",
             translate: "no",
-            contenteditable: !this.state.facet(editable) ? "false" : contentEditablePlainTextSupported() ? "plaintext-only" : "true",
+            contenteditable: !this.state.facet(editable) ? "false" : "true",
             class: "cm-content",
             style: `${browser.tabSize}: ${this.state.tabSize}`,
             role: "textbox",

package/dist/index.d.ts

@@ -91,7 +91,8 @@ interface ReplaceDecorationSpec {
     /**
     Whether this range covers the positions on its sides. This
     influences whether new content becomes part of the range and
-    whether the cursor can be drawn on its sides. Defaults to false.
+    whether the cursor can be drawn on its sides. Defaults to false
+    for inline replacements, and true for block replacements.
     */
     inclusive?: boolean;
     /**

package/dist/index.js

@@ -249,19 +249,6 @@ function dispatchKey(elt, name, code) {
     elt.dispatchEvent(up);
     return down.defaultPrevented || up.defaultPrevented;
 }
-let _plainTextSupported = null;
-function contentEditablePlainTextSupported() {
-    if (_plainTextSupported == null) {
-        _plainTextSupported = false;
-        let dummy = document.createElement("div");
-        try {
-            dummy.contentEditable = "plaintext-only";
-            _plainTextSupported = dummy.contentEditable == "plaintext-only";
-        }
-        catch (_) { }
-    }
-    return _plainTextSupported;
-}
 function getRoot(node) {
     while (node) {
         if (node && (node.nodeType == 9 || node.nodeType == 11 && node.host))
@@ -676,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 {
@@ -784,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, "")]);
@@ -926,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) {
@@ -1093,8 +1080,6 @@ class Decoration extends RangeValue {
     */
     static widget(spec) {
         let side = spec.side || 0;
-        if (spec.block)
-            side += (200000000 /* BigBlock */ + 1) * (side > 0 ? 1 : -1);
         return new PointDecoration(spec, side, side, !!spec.block, spec.widget || null, false);
     }
     /**
@@ -1103,9 +1088,9 @@ class Decoration extends RangeValue {
     */
     static replace(spec) {
         let block = !!spec.block;
-        let { start, end } = getInclusive(spec);
-        let startSide = block ? -200000000 /* BigBlock */ * (start ? 2 : 1) : 100000000 /* BigInline */ * (start ? -1 : 1);
-        let endSide = block ? 200000000 /* BigBlock */ * (end ? 2 : 1) : 100000000 /* BigInline */ * (end ? 1 : -1);
+        let { start, end } = getInclusive(spec, block);
+        let startSide = 100000000 /* Big */ * (start ? -1 : 1) * (block ? 2 : 1);
+        let endSide = 100000000 /* Big */ * (end ? 1 : -1) * (block ? 2 : 1);
         return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
     }
     /**
@@ -1135,7 +1120,7 @@ Decoration.none = RangeSet.empty;
 class MarkDecoration extends Decoration {
     constructor(spec) {
         let { start, end } = getInclusive(spec);
-        super(100000000 /* BigInline */ * (start ? -1 : 1), 100000000 /* BigInline */ * (end ? 1 : -1), null, spec);
+        super(100000000 /* Big */ * (start ? -1 : 1), 100000000 /* Big */ * (end ? 1 : -1), null, spec);
         this.tagName = spec.tagName || "span";
         this.class = spec.class || "";
         this.attrs = spec.attributes || null;
@@ -1156,7 +1141,7 @@ class MarkDecoration extends Decoration {
 MarkDecoration.prototype.point = false;
 class LineDecoration extends Decoration {
     constructor(spec) {
-        super(-100000000 /* BigInline */, -100000000 /* BigInline */, null, spec);
+        super(-100000000 /* Big */, -100000000 /* Big */, null, spec);
     }
     eq(other) {
         return other instanceof LineDecoration && attrsEq(this.spec.attributes, other.spec.attributes);
@@ -1197,13 +1182,13 @@ class PointDecoration extends Decoration {
     }
 }
 PointDecoration.prototype.point = true;
-function getInclusive(spec) {
+function getInclusive(spec, block = false) {
     let { inclusiveStart: start, inclusiveEnd: end } = spec;
     if (start == null)
         start = spec.inclusive;
     if (end == null)
         end = spec.inclusive;
-    return { start: start || false, end: end || false };
+    return { start: start !== null && start !== void 0 ? start : block, end: end !== null && end !== void 0 ? end : block };
 }
 function widgetsEq(a, b) {
     return a == b || !!(a && b && a.compare(b));
@@ -1371,7 +1356,9 @@ class BlockWidgetView extends ContentView {
     split(at) {
         let len = this.length - at;
         this.length = at;
-        return new BlockWidgetView(this.widget, len, this.type);
+        let end = new BlockWidgetView(this.widget, len, this.type);
+        end.breakAfter = this.breakAfter;
+        return end;
     }
     get children() { return none$1; }
     sync() {
@@ -3750,7 +3737,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;
@@ -4396,18 +4383,20 @@ function visiblePixelRange(dom, paddingTop) {
     let rect = dom.getBoundingClientRect();
     let left = Math.max(0, rect.left), right = Math.min(innerWidth, rect.right);
     let top = Math.max(0, rect.top), bottom = Math.min(innerHeight, rect.bottom);
-    for (let parent = dom.parentNode; parent;) { // (Cast to any because TypeScript is useless with Node types)
+    let body = dom.ownerDocument.body;
+    for (let parent = dom.parentNode; parent && parent != body;) {
         if (parent.nodeType == 1) {
-            let style = window.getComputedStyle(parent);
-            if ((parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth) &&
+            let elt = parent;
+            let style = window.getComputedStyle(elt);
+            if ((elt.scrollHeight > elt.clientHeight || elt.scrollWidth > elt.clientWidth) &&
                 style.overflow != "visible") {
-                let parentRect = parent.getBoundingClientRect();
+                let parentRect = elt.getBoundingClientRect();
                 left = Math.max(left, parentRect.left);
                 right = Math.min(right, parentRect.right);
                 top = Math.max(top, parentRect.top);
                 bottom = Math.min(bottom, parentRect.bottom);
             }
-            parent = style.position == "absolute" || style.position == "fixed" ? parent.offsetParent : parent.parentNode;
+            parent = style.position == "absolute" || style.position == "fixed" ? elt.offsetParent : elt.parentNode;
         }
         else if (parent.nodeType == 11) { // Shadow root
             parent = parent.host;
@@ -4937,10 +4926,14 @@ const baseTheme = /*@__PURE__*/buildTheme("." + baseThemeID, {
         wordWrap: "normal",
         boxSizing: "border-box",
         padding: "4px 0",
-        outline: "none"
+        outline: "none",
+        "&[contenteditable=true]": {
+            WebkitUserModify: "read-write-plaintext-only",
+        }
     },
     ".cm-lineWrapping": {
-        whiteSpace: "pre-wrap",
+        whiteSpace_fallback: "pre-wrap",
+        whiteSpace: "break-spaces",
         wordBreak: "break-word",
         overflowWrap: "anywhere"
     },
@@ -5919,7 +5912,7 @@ class EditorView {
             autocorrect: "off",
             autocapitalize: "off",
             translate: "no",
-            contenteditable: !this.state.facet(editable) ? "false" : contentEditablePlainTextSupported() ? "plaintext-only" : "true",
+            contenteditable: !this.state.facet(editable) ? "false" : "true",
             class: "cm-content",
             style: `${browser.tabSize}: ${this.state.tabSize}`,
             role: "textbox",

package/package.json

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