@codemirror/view 0.19.35 → 0.19.36

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.19.36 (2021-12-22)
+
+### Bug fixes
+
+Fix a crash in `posAtCoords` when the position lies in a block widget that is rendered but scrolled out of view.
+
+Adding block decorations from a plugin now raises an error. Replacing decorations that cross lines are ignored, when provided by a plugin.
+
+Fix inverted interpretation of the `precise` argument to `posAtCoords`.
+
 ## 0.19.35 (2021-12-20)
 
 ### Bug fixes

package/dist/index.cjs

@@ -1372,16 +1372,17 @@ class LineView extends ContentView {
     become(_other) { return false; }
     get type() { return exports.BlockType.Text; }
     static find(docView, pos) {
-        for (let i = 0, off = 0;; i++) {
+        for (let i = 0, off = 0; i < docView.children.length; i++) {
             let block = docView.children[i], end = off + block.length;
             if (end >= pos) {
                 if (block instanceof LineView)
                     return block;
-                if (block.length)
-                    return null;
+                if (end > pos)
+                    break;
             }
             off = end + block.breakAfter;
         }
+        return null;
     }
 }
 class BlockWidgetView extends ContentView {
@@ -1442,10 +1443,11 @@ class BlockWidgetView extends ContentView {
 }
 
 class ContentBuilder {
-    constructor(doc, pos, end) {
+    constructor(doc, pos, end, disallowBlockEffectsBelow) {
         this.doc = doc;
         this.pos = pos;
         this.end = end;
+        this.disallowBlockEffectsBelow = disallowBlockEffectsBelow;
         this.content = [];
         this.curLine = null;
         this.breakAtStart = 0;
@@ -1574,8 +1576,15 @@ class ContentBuilder {
         if (this.openStart < 0)
             this.openStart = openStart;
     }
-    static build(text, from, to, decorations) {
-        let builder = new ContentBuilder(text, from, to);
+    filterPoint(from, to, value, index) {
+        if (index >= this.disallowBlockEffectsBelow || !(value instanceof PointDecoration))
+            return true;
+        if (value.block)
+            throw new RangeError("Block decorations may not be specified via plugins");
+        return to < this.doc.lineAt(this.pos).to;
+    }
+    static build(text, from, to, decorations, pluginDecorationLength) {
+        let builder = new ContentBuilder(text, from, to, pluginDecorationLength);
         builder.openEnd = rangeset.RangeSet.spans(decorations, from, to, builder);
         if (builder.openStart < 0)
             builder.openStart = builder.openEnd;
@@ -1698,11 +1707,13 @@ This field can be used by plugins to provide
 **Note**: For reasons of data flow (plugins are only updated
 after the viewport is computed), decorations produced by plugins
 are _not_ taken into account when predicting the vertical layout
-structure of the editor. Thus, things like large widgets or big
-replacements (i.e. code folding) should be provided through the
-state-level [`decorations` facet](https://codemirror.net/6/docs/ref/#view.EditorView^decorations),
-not this plugin field. Specifically, replacing decorations that
-cross line boundaries will break if provided through a plugin.
+structure of the editor. They **must not** introduce block
+widgets (that will raise an error) or replacing decorations that
+cover line breaks (these will be ignored if they occur). Such
+decorations, or others that cause a large amount of vertical
+size shift compared to the undecorated content, should be
+provided through the state-level [`decorations`
+facet](https://codemirror.net/6/docs/ref/#view.EditorView^decorations) instead.
 */
 PluginField.decorations = PluginField.define();
 /**
@@ -1935,8 +1946,6 @@ class ViewUpdate {
             view.inputState.notifiedFocused = focus;
             this.flags |= 1 /* Focus */;
         }
-        if (this.docChanged)
-            this.flags |= 2 /* Height */;
     }
     /**
     Tells you whether the [viewport](https://codemirror.net/6/docs/ref/#view.EditorView.viewport) or
@@ -1947,14 +1956,15 @@ class ViewUpdate {
         return (this.flags & 4 /* Viewport */) > 0;
     }
     /**
-    Indicates whether the line height in the editor changed in this update.
+    Indicates whether the height of an element in the editor changed
+    in this update.
     */
     get heightChanged() {
         return (this.flags & 2 /* Height */) > 0;
     }
     /**
-    Returns true when the document changed or the size of the editor
-    or the lines or characters within it has changed.
+    Returns true when the document was modified or the size of the
+    editor, or elements within the editor, changed.
     */
     get geometryChanged() {
         return this.docChanged || (this.flags & (8 /* Geometry */ | 2 /* Height */)) > 0;
@@ -2373,6 +2383,7 @@ class DocView extends ContentView {
         this.view = view;
         this.compositionDeco = Decoration.none;
         this.decorations = [];
+        this.pluginDecorationLength = 0;
         // Track a minimum width for the editor. When measuring sizes in
         // measureVisibleLineHeights, this is updated to point at the width
         // of a given element and its extent in the document. When a change
@@ -2394,7 +2405,8 @@ class DocView extends ContentView {
         this.setDOM(view.contentDOM);
         this.children = [new LineView];
         this.children[0].setParent(this);
-        this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], this.updateDeco(), 0);
+        this.updateDeco();
+        this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
     }
     get root() { return this.view.root; }
     get editorView() { return this.view; }
@@ -2433,7 +2445,7 @@ class DocView extends ContentView {
             return false;
         }
         else {
-            this.updateInner(changedRanges, deco, update.startState.doc.length);
+            this.updateInner(changedRanges, update.startState.doc.length);
             if (update.transactions.length)
                 this.lastUpdate = Date.now();
             return true;
@@ -2441,9 +2453,9 @@ class DocView extends ContentView {
     }
     // Used by update and the constructor do perform the actual DOM
     // update
-    updateInner(changes, deco, oldLength) {
+    updateInner(changes, oldLength) {
         this.view.viewState.mustMeasureContent = true;
-        this.updateChildren(changes, deco, oldLength);
+        this.updateChildren(changes, oldLength);
         let { observer } = this.view;
         observer.ignore(() => {
             // Lock the height during redrawing, since Chrome sometimes
@@ -2470,14 +2482,14 @@ class DocView extends ContentView {
                     gaps.push(child.dom);
         observer.updateGaps(gaps);
     }
-    updateChildren(changes, deco, oldLength) {
+    updateChildren(changes, oldLength) {
         let cursor = this.childCursor(oldLength);
         for (let i = changes.length - 1;; i--) {
             let next = i >= 0 ? changes[i] : null;
             if (!next)
                 break;
             let { fromA, toA, fromB, toB } = next;
-            let { content, breakAtStart, openStart, openEnd } = ContentBuilder.build(this.view.state.doc, fromB, toB, deco);
+            let { content, breakAtStart, openStart, openEnd } = ContentBuilder.build(this.view.state.doc, fromB, toB, this.decorations, this.pluginDecorationLength);
             let { i: toI, off: toOff } = cursor.findPos(toA, 1);
             let { i: fromI, off: fromOff } = cursor.findPos(fromA, -1);
             replaceRange(this, fromI, fromOff, toI, toOff, content, breakAtStart, openStart, openEnd);
@@ -2696,8 +2708,10 @@ class DocView extends ContentView {
         return Decoration.set(deco);
     }
     updateDeco() {
+        let pluginDecorations = this.view.pluginField(PluginField.decorations);
+        this.pluginDecorationLength = pluginDecorations.length;
         return this.decorations = [
-            ...this.view.pluginField(PluginField.decorations),
+            ...pluginDecorations,
             ...this.view.state.facet(decorations),
             this.compositionDeco,
             this.computeBlockGapDeco(),
@@ -3014,10 +3028,10 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
     let lineStart = block.from;
     // If this is outside of the rendered viewport, we can't determine a position
     if (lineStart < view.viewport.from)
-        return view.viewport.from == 0 ? 0 : precise ? posAtCoordsImprecise(view, content, block, x, y) : null;
+        return view.viewport.from == 0 ? 0 : precise ? null : posAtCoordsImprecise(view, content, block, x, y);
     if (lineStart > view.viewport.to)
         return view.viewport.to == view.state.doc.length ? view.state.doc.length :
-            precise ? posAtCoordsImprecise(view, content, block, x, y) : null;
+            precise ? null : posAtCoordsImprecise(view, content, block, x, y);
     // Prefer ShadowRootOrDocument.elementFromPoint if present, fall back to document if not
     let doc = view.dom.ownerDocument;
     let root = view.root.elementFromPoint ? view.root : doc;
@@ -3052,6 +3066,8 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
     // No luck, do our own (potentially expensive) search
     if (!node || !view.docView.dom.contains(node)) {
         let line = LineView.find(view.docView, lineStart);
+        if (!line)
+            return yOffset > block.top + block.height / 2 ? block.to : block.from;
         ({ node, offset } = domPosAtCoords(line.dom, x, y));
     }
     return view.docView.posFromDOM(node, offset);

package/dist/index.d.ts

@@ -340,11 +340,13 @@ declare class PluginField<T> {
     **Note**: For reasons of data flow (plugins are only updated
     after the viewport is computed), decorations produced by plugins
     are _not_ taken into account when predicting the vertical layout
-    structure of the editor. Thus, things like large widgets or big
-    replacements (i.e. code folding) should be provided through the
-    state-level [`decorations` facet](https://codemirror.net/6/docs/ref/#view.EditorView^decorations),
-    not this plugin field. Specifically, replacing decorations that
-    cross line boundaries will break if provided through a plugin.
+    structure of the editor. They **must not** introduce block
+    widgets (that will raise an error) or replacing decorations that
+    cover line breaks (these will be ignored if they occur). Such
+    decorations, or others that cause a large amount of vertical
+    size shift compared to the undecorated content, should be
+    provided through the state-level [`decorations`
+    facet](https://codemirror.net/6/docs/ref/#view.EditorView^decorations) instead.
     */
     static decorations: PluginField<DecorationSet>;
     /**
@@ -470,12 +472,13 @@ declare class ViewUpdate {
     */
     get viewportChanged(): boolean;
     /**
-    Indicates whether the line height in the editor changed in this update.
+    Indicates whether the height of an element in the editor changed
+    in this update.
     */
     get heightChanged(): boolean;
     /**
-    Returns true when the document changed or the size of the editor
-    or the lines or characters within it has changed.
+    Returns true when the document was modified or the size of the
+    editor, or elements within the editor, changed.
     */
     get geometryChanged(): boolean;
     /**

package/dist/index.js

@@ -1368,16 +1368,17 @@ class LineView extends ContentView {
     become(_other) { return false; }
     get type() { return BlockType.Text; }
     static find(docView, pos) {
-        for (let i = 0, off = 0;; i++) {
+        for (let i = 0, off = 0; i < docView.children.length; i++) {
             let block = docView.children[i], end = off + block.length;
             if (end >= pos) {
                 if (block instanceof LineView)
                     return block;
-                if (block.length)
-                    return null;
+                if (end > pos)
+                    break;
             }
             off = end + block.breakAfter;
         }
+        return null;
     }
 }
 class BlockWidgetView extends ContentView {
@@ -1438,10 +1439,11 @@ class BlockWidgetView extends ContentView {
 }
 
 class ContentBuilder {
-    constructor(doc, pos, end) {
+    constructor(doc, pos, end, disallowBlockEffectsBelow) {
         this.doc = doc;
         this.pos = pos;
         this.end = end;
+        this.disallowBlockEffectsBelow = disallowBlockEffectsBelow;
         this.content = [];
         this.curLine = null;
         this.breakAtStart = 0;
@@ -1570,8 +1572,15 @@ class ContentBuilder {
         if (this.openStart < 0)
             this.openStart = openStart;
     }
-    static build(text, from, to, decorations) {
-        let builder = new ContentBuilder(text, from, to);
+    filterPoint(from, to, value, index) {
+        if (index >= this.disallowBlockEffectsBelow || !(value instanceof PointDecoration))
+            return true;
+        if (value.block)
+            throw new RangeError("Block decorations may not be specified via plugins");
+        return to < this.doc.lineAt(this.pos).to;
+    }
+    static build(text, from, to, decorations, pluginDecorationLength) {
+        let builder = new ContentBuilder(text, from, to, pluginDecorationLength);
         builder.openEnd = RangeSet.spans(decorations, from, to, builder);
         if (builder.openStart < 0)
             builder.openStart = builder.openEnd;
@@ -1694,11 +1703,13 @@ This field can be used by plugins to provide
 **Note**: For reasons of data flow (plugins are only updated
 after the viewport is computed), decorations produced by plugins
 are _not_ taken into account when predicting the vertical layout
-structure of the editor. Thus, things like large widgets or big
-replacements (i.e. code folding) should be provided through the
-state-level [`decorations` facet](https://codemirror.net/6/docs/ref/#view.EditorView^decorations),
-not this plugin field. Specifically, replacing decorations that
-cross line boundaries will break if provided through a plugin.
+structure of the editor. They **must not** introduce block
+widgets (that will raise an error) or replacing decorations that
+cover line breaks (these will be ignored if they occur). Such
+decorations, or others that cause a large amount of vertical
+size shift compared to the undecorated content, should be
+provided through the state-level [`decorations`
+facet](https://codemirror.net/6/docs/ref/#view.EditorView^decorations) instead.
 */
 PluginField.decorations = /*@__PURE__*/PluginField.define();
 /**
@@ -1931,8 +1942,6 @@ class ViewUpdate {
             view.inputState.notifiedFocused = focus;
             this.flags |= 1 /* Focus */;
         }
-        if (this.docChanged)
-            this.flags |= 2 /* Height */;
     }
     /**
     Tells you whether the [viewport](https://codemirror.net/6/docs/ref/#view.EditorView.viewport) or
@@ -1943,14 +1952,15 @@ class ViewUpdate {
         return (this.flags & 4 /* Viewport */) > 0;
     }
     /**
-    Indicates whether the line height in the editor changed in this update.
+    Indicates whether the height of an element in the editor changed
+    in this update.
     */
     get heightChanged() {
         return (this.flags & 2 /* Height */) > 0;
     }
     /**
-    Returns true when the document changed or the size of the editor
-    or the lines or characters within it has changed.
+    Returns true when the document was modified or the size of the
+    editor, or elements within the editor, changed.
     */
     get geometryChanged() {
         return this.docChanged || (this.flags & (8 /* Geometry */ | 2 /* Height */)) > 0;
@@ -2368,6 +2378,7 @@ class DocView extends ContentView {
         this.view = view;
         this.compositionDeco = Decoration.none;
         this.decorations = [];
+        this.pluginDecorationLength = 0;
         // Track a minimum width for the editor. When measuring sizes in
         // measureVisibleLineHeights, this is updated to point at the width
         // of a given element and its extent in the document. When a change
@@ -2389,7 +2400,8 @@ class DocView extends ContentView {
         this.setDOM(view.contentDOM);
         this.children = [new LineView];
         this.children[0].setParent(this);
-        this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], this.updateDeco(), 0);
+        this.updateDeco();
+        this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
     }
     get root() { return this.view.root; }
     get editorView() { return this.view; }
@@ -2428,7 +2440,7 @@ class DocView extends ContentView {
             return false;
         }
         else {
-            this.updateInner(changedRanges, deco, update.startState.doc.length);
+            this.updateInner(changedRanges, update.startState.doc.length);
             if (update.transactions.length)
                 this.lastUpdate = Date.now();
             return true;
@@ -2436,9 +2448,9 @@ class DocView extends ContentView {
     }
     // Used by update and the constructor do perform the actual DOM
     // update
-    updateInner(changes, deco, oldLength) {
+    updateInner(changes, oldLength) {
         this.view.viewState.mustMeasureContent = true;
-        this.updateChildren(changes, deco, oldLength);
+        this.updateChildren(changes, oldLength);
         let { observer } = this.view;
         observer.ignore(() => {
             // Lock the height during redrawing, since Chrome sometimes
@@ -2465,14 +2477,14 @@ class DocView extends ContentView {
                     gaps.push(child.dom);
         observer.updateGaps(gaps);
     }
-    updateChildren(changes, deco, oldLength) {
+    updateChildren(changes, oldLength) {
         let cursor = this.childCursor(oldLength);
         for (let i = changes.length - 1;; i--) {
             let next = i >= 0 ? changes[i] : null;
             if (!next)
                 break;
             let { fromA, toA, fromB, toB } = next;
-            let { content, breakAtStart, openStart, openEnd } = ContentBuilder.build(this.view.state.doc, fromB, toB, deco);
+            let { content, breakAtStart, openStart, openEnd } = ContentBuilder.build(this.view.state.doc, fromB, toB, this.decorations, this.pluginDecorationLength);
             let { i: toI, off: toOff } = cursor.findPos(toA, 1);
             let { i: fromI, off: fromOff } = cursor.findPos(fromA, -1);
             replaceRange(this, fromI, fromOff, toI, toOff, content, breakAtStart, openStart, openEnd);
@@ -2691,8 +2703,10 @@ class DocView extends ContentView {
         return Decoration.set(deco);
     }
     updateDeco() {
+        let pluginDecorations = this.view.pluginField(PluginField.decorations);
+        this.pluginDecorationLength = pluginDecorations.length;
         return this.decorations = [
-            ...this.view.pluginField(PluginField.decorations),
+            ...pluginDecorations,
             ...this.view.state.facet(decorations),
             this.compositionDeco,
             this.computeBlockGapDeco(),
@@ -3009,10 +3023,10 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
     let lineStart = block.from;
     // If this is outside of the rendered viewport, we can't determine a position
     if (lineStart < view.viewport.from)
-        return view.viewport.from == 0 ? 0 : precise ? posAtCoordsImprecise(view, content, block, x, y) : null;
+        return view.viewport.from == 0 ? 0 : precise ? null : posAtCoordsImprecise(view, content, block, x, y);
     if (lineStart > view.viewport.to)
         return view.viewport.to == view.state.doc.length ? view.state.doc.length :
-            precise ? posAtCoordsImprecise(view, content, block, x, y) : null;
+            precise ? null : posAtCoordsImprecise(view, content, block, x, y);
     // Prefer ShadowRootOrDocument.elementFromPoint if present, fall back to document if not
     let doc = view.dom.ownerDocument;
     let root = view.root.elementFromPoint ? view.root : doc;
@@ -3047,6 +3061,8 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
     // No luck, do our own (potentially expensive) search
     if (!node || !view.docView.dom.contains(node)) {
         let line = LineView.find(view.docView, lineStart);
+        if (!line)
+            return yOffset > block.top + block.height / 2 ? block.to : block.from;
         ({ node, offset } = domPosAtCoords(line.dom, x, y));
     }
     return view.docView.posFromDOM(node, offset);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "0.19.35",
+  "version": "0.19.36",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -26,7 +26,7 @@
   "sideEffects": false,
   "license": "MIT",
   "dependencies": {
-    "@codemirror/rangeset": "^0.19.4",
+    "@codemirror/rangeset": "^0.19.5",
     "@codemirror/state": "^0.19.3",
     "@codemirror/text": "^0.19.0",
     "style-mod": "^4.0.0",