@codemirror/view 6.10.0 → 6.11.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 6.11.0 (2023-05-03)
+
+### New features
+
+Gutters now support a `widgetMarker` option that can be used to add markers next to block widgets.
+
+## 6.10.1 (2023-05-01)
+
+### Bug fixes
+
+Limit cursor height in front of custom placeholder DOM elements.
+
 ## 6.10.0 (2023-04-25)
 
 ### Bug fixes

package/dist/index.cjs

@@ -4337,15 +4337,34 @@ class BlockInfo {
     */
     height, 
     /**
-    The type of element this is. When querying lines, this may be
-    an array of all the blocks that make up the line.
+    @internal
+    */
+    children, 
+    /**
+    @internal
     */
-    type) {
+    deco) {
         this.from = from;
         this.length = length;
         this.top = top;
         this.height = height;
-        this.type = type;
+        this.children = children;
+        this.deco = deco;
+    }
+    /**
+    The type of element this is. When querying lines, this may be
+    an array of all the blocks that make up the line.
+    */
+    get type() {
+        var _a, _b, _c;
+        return (_c = (_a = this.children) !== null && _a !== void 0 ? _a : (_b = this.deco) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : exports.BlockType.Text;
+    }
+    /**
+    If this is a widget block, this will return the widget
+    associated with it.
+    */
+    get widget() {
+        return this.deco && this.deco.widget;
     }
     /**
     The end of the element as a document position.
@@ -4359,9 +4378,8 @@ class BlockInfo {
     @internal
     */
     join(other) {
-        let detail = (Array.isArray(this.type) ? this.type : [this])
-            .concat(Array.isArray(other.type) ? other.type : [other]);
-        return new BlockInfo(this.from, this.length + other.length, this.top, this.height + other.height, detail);
+        let children = (this.children || [this]).concat(other.children || [other]);
+        return new BlockInfo(this.from, this.length + other.length, this.top, this.height + other.height, children, null);
     }
 }
 var QueryType;
@@ -4477,12 +4495,12 @@ class HeightMap {
 }
 HeightMap.prototype.size = 1;
 class HeightMapBlock extends HeightMap {
-    constructor(length, height, type) {
+    constructor(length, height, deco) {
         super(length, height);
-        this.type = type;
+        this.deco = deco;
     }
     blockAt(_height, _oracle, top, offset) {
-        return new BlockInfo(offset, this.length, top, this.height, this.type);
+        return new BlockInfo(offset, this.length, top, this.height, null, this.deco);
     }
     lineAt(_value, _type, oracle, top, offset) {
         return this.blockAt(0, oracle, top, offset);
@@ -4501,7 +4519,7 @@ class HeightMapBlock extends HeightMap {
 }
 class HeightMapText extends HeightMapBlock {
     constructor(length, height) {
-        super(length, height, exports.BlockType.Text);
+        super(length, height, null);
         this.collapsed = 0; // Amount of collapsed content in the line
         this.widgetHeight = 0; // Maximum inline widget height
     }
@@ -4556,12 +4574,12 @@ class HeightMapGap extends HeightMap {
             let guess = offset + Math.round(Math.max(0, Math.min(1, (height - top) / this.height)) * this.length);
             let line = oracle.doc.lineAt(guess), lineHeight = perLine + line.length * perChar;
             let lineTop = Math.max(top, height - lineHeight / 2);
-            return new BlockInfo(line.from, line.length, lineTop, lineHeight, exports.BlockType.Text);
+            return new BlockInfo(line.from, line.length, lineTop, lineHeight, null, null);
         }
         else {
             let line = Math.max(0, Math.min(lastLine - firstLine, Math.floor((height - top) / perLine)));
             let { from, length } = oracle.doc.line(firstLine + line);
-            return new BlockInfo(from, length, top + perLine * line, perLine, exports.BlockType.Text);
+            return new BlockInfo(from, length, top + perLine * line, perLine, null, null);
         }
     }
     lineAt(value, type, oracle, top, offset) {
@@ -4569,13 +4587,13 @@ class HeightMapGap extends HeightMap {
             return this.blockAt(value, oracle, top, offset);
         if (type == QueryType.ByPosNoHeight) {
             let { from, to } = oracle.doc.lineAt(value);
-            return new BlockInfo(from, to - from, 0, 0, exports.BlockType.Text);
+            return new BlockInfo(from, to - from, 0, 0, null, null);
         }
         let { firstLine, perLine, perChar } = this.heightMetrics(oracle, offset);
         let line = oracle.doc.lineAt(value), lineHeight = perLine + line.length * perChar;
         let linesAbove = line.number - firstLine;
         let lineTop = top + perLine * linesAbove + perChar * (line.from - offset - linesAbove);
-        return new BlockInfo(line.from, line.length, Math.max(top, Math.min(lineTop, top + this.height - lineHeight)), lineHeight, exports.BlockType.Text);
+        return new BlockInfo(line.from, line.length, Math.max(top, Math.min(lineTop, top + this.height - lineHeight)), lineHeight, null, null);
     }
     forEachLine(from, to, oracle, top, offset, f) {
         from = Math.max(from, offset);
@@ -4588,7 +4606,7 @@ class HeightMapGap extends HeightMap {
                 lineTop += perLine * linesAbove + perChar * (from - offset - linesAbove);
             }
             let lineHeight = perLine + perChar * line.length;
-            f(new BlockInfo(line.from, line.length, lineTop, lineHeight, exports.BlockType.Text));
+            f(new BlockInfo(line.from, line.length, lineTop, lineHeight, null, null));
             lineTop += lineHeight;
             pos = line.to + 1;
         }
@@ -4818,7 +4836,7 @@ class NodeBuilder {
                 height = this.oracle.lineHeight;
             let len = to - from;
             if (deco.block) {
-                this.addBlock(new HeightMapBlock(len, height, deco.type));
+                this.addBlock(new HeightMapBlock(len, height, deco));
             }
             else if (len || height >= relevantWidgetHeight) {
                 this.addLineDeco(height, len);
@@ -4861,12 +4879,14 @@ class NodeBuilder {
         return line;
     }
     addBlock(block) {
+        var _a;
         this.enterLine();
-        if (block.type == exports.BlockType.WidgetAfter && !this.isCovered)
+        let type = (_a = block.deco) === null || _a === void 0 ? void 0 : _a.type;
+        if (type == exports.BlockType.WidgetAfter && !this.isCovered)
             this.ensureLine();
         this.nodes.push(block);
         this.writtenTo = this.pos = this.pos + block.length;
-        if (block.type != exports.BlockType.WidgetBefore)
+        if (type != exports.BlockType.WidgetBefore)
             this.covering = block;
     }
     addLineDeco(height, length) {
@@ -5469,7 +5489,7 @@ function scaleBlock(block, scaler) {
     if (scaler.scale == 1)
         return block;
     let bTop = scaler.toDOM(block.top), bBottom = scaler.toDOM(block.bottom);
-    return new BlockInfo(block.from, block.length, bTop, bBottom - bTop, Array.isArray(block.type) ? block.type.map(b => scaleBlock(b, scaler)) : block.type);
+    return new BlockInfo(block.from, block.length, bTop, bBottom - bTop, block.children && block.children.map(b => scaleBlock(b, scaler)), block.deco);
 }
 
 const theme = state.Facet.define({ combine: strs => strs.join(" ") });
@@ -8352,7 +8372,14 @@ class Placeholder extends WidgetType {
     }
     coordsAt(dom) {
         let rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
-        return rects.length ? flattenRect(rects[0], window.getComputedStyle(dom).direction != "rtl") : null;
+        if (!rects.length)
+            return null;
+        let style = window.getComputedStyle(dom.parentNode);
+        let rect = flattenRect(rects[0], style.direction != "rtl");
+        let lineHeight = parseInt(style.lineHeight);
+        if (rect.bottom - rect.top > lineHeight * 1.5)
+            return { left: rect.left, right: rect.right, top: rect.top, bottom: rect.top + lineHeight };
+        return rect;
     }
     ignoreEvent() { return false; }
 }
@@ -9292,6 +9319,7 @@ const defaults = {
     elementStyle: "",
     markers: () => state.RangeSet.empty,
     lineMarker: () => null,
+    widgetMarker: () => null,
     lineMarkerChange: null,
     initialSpacer: null,
     updateSpacer: null,
@@ -9372,24 +9400,28 @@ const gutterView = ViewPlugin.fromClass(class {
         let classSet = [];
         let contexts = this.gutters.map(gutter => new UpdateContext(gutter, this.view.viewport, -this.view.documentPadding.top));
         for (let line of this.view.viewportLineBlocks) {
-            let text;
+            if (classSet.length)
+                classSet = [];
             if (Array.isArray(line.type)) {
-                for (let b of line.type)
-                    if (b.type == exports.BlockType.Text) {
-                        text = b;
-                        break;
+                let first = true;
+                for (let b of line.type) {
+                    if (b.type == exports.BlockType.Text && first) {
+                        advanceCursor(lineClasses, classSet, b.from);
+                        for (let cx of contexts)
+                            cx.line(this.view, b, classSet);
+                        first = false;
+                    }
+                    else if (b.widget) {
+                        for (let cx of contexts)
+                            cx.widget(this.view, b);
                     }
+                }
             }
-            else {
-                text = line.type == exports.BlockType.Text ? line : undefined;
+            else if (line.type == exports.BlockType.Text) {
+                advanceCursor(lineClasses, classSet, line.from);
+                for (let cx of contexts)
+                    cx.line(this.view, line, classSet);
             }
-            if (!text)
-                continue;
-            if (classSet.length)
-                classSet = [];
-            advanceCursor(lineClasses, classSet, line.from);
-            for (let cx of contexts)
-                cx.line(this.view, text, classSet);
         }
         for (let cx of contexts)
             cx.finish();
@@ -9457,6 +9489,19 @@ class UpdateContext {
         this.i = 0;
         this.cursor = state.RangeSet.iter(gutter.markers, viewport.from);
     }
+    addElement(view, block, markers) {
+        let { gutter } = this, above = block.top - this.height;
+        if (this.i == gutter.elements.length) {
+            let newElt = new GutterElement(view, block.height, above, markers);
+            gutter.elements.push(newElt);
+            gutter.dom.appendChild(newElt.dom);
+        }
+        else {
+            gutter.elements[this.i].update(view, block.height, above, markers);
+        }
+        this.height = block.bottom;
+        this.i++;
+    }
     line(view, line, extraMarkers) {
         let localMarkers = [];
         advanceCursor(this.cursor, localMarkers, line.from);
@@ -9468,17 +9513,12 @@ class UpdateContext {
         let gutter = this.gutter;
         if (localMarkers.length == 0 && !gutter.config.renderEmptyElements)
             return;
-        let above = line.top - this.height;
-        if (this.i == gutter.elements.length) {
-            let newElt = new GutterElement(view, line.height, above, localMarkers);
-            gutter.elements.push(newElt);
-            gutter.dom.appendChild(newElt.dom);
-        }
-        else {
-            gutter.elements[this.i].update(view, line.height, above, localMarkers);
-        }
-        this.height = line.bottom;
-        this.i++;
+        this.addElement(view, line, localMarkers);
+    }
+    widget(view, block) {
+        let marker = this.gutter.config.widgetMarker(view, block.widget, block);
+        if (marker)
+            this.addElement(view, block, [marker]);
     }
     finish() {
         let gutter = this.gutter;
@@ -9646,6 +9686,7 @@ const lineNumberGutter = activeGutters.compute([lineNumberConfig], state => ({
             return null;
         return new NumberMarker(formatNumber(view, view.state.doc.lineAt(line.from).number));
     },
+    widgetMarker: () => null,
     lineMarkerChange: update => update.startState.facet(lineNumberConfig) != update.state.facet(lineNumberConfig),
     initialSpacer(view) {
         return new NumberMarker(formatNumber(view, maxLineNumber(view.state.doc.lines)));

package/dist/index.d.ts

@@ -516,7 +516,12 @@ declare class BlockInfo {
     The type of element this is. When querying lines, this may be
     an array of all the blocks that make up the line.
     */
-    readonly type: BlockType | readonly BlockInfo[];
+    get type(): BlockType | readonly BlockInfo[];
+    /**
+    If this is a widget block, this will return the widget
+    associated with it.
+    */
+    get widget(): WidgetType | null;
     /**
     The end of the element as a document position.
     */
@@ -1864,8 +1869,12 @@ interface GutterConfig {
     */
     lineMarker?: (view: EditorView, line: BlockInfo, otherMarkers: readonly GutterMarker[]) => GutterMarker | null;
     /**
-    If line markers depend on additional state, and should be
-    updated when that changes, pass a predicate here that checks
+    Associate markers with block widgets in the document.
+    */
+    widgetMarker?: (view: EditorView, widget: WidgetType, block: BlockInfo) => GutterMarker | null;
+    /**
+    If line or widget markers depend on additional state, and should
+    be updated when that changes, pass a predicate here that checks
     whether a given view update might change the line markers.
     */
     lineMarkerChange?: null | ((update: ViewUpdate) => boolean);

package/dist/index.js

@@ -4331,15 +4331,34 @@ class BlockInfo {
     */
     height, 
     /**
-    The type of element this is. When querying lines, this may be
-    an array of all the blocks that make up the line.
+    @internal
+    */
+    children, 
+    /**
+    @internal
     */
-    type) {
+    deco) {
         this.from = from;
         this.length = length;
         this.top = top;
         this.height = height;
-        this.type = type;
+        this.children = children;
+        this.deco = deco;
+    }
+    /**
+    The type of element this is. When querying lines, this may be
+    an array of all the blocks that make up the line.
+    */
+    get type() {
+        var _a, _b, _c;
+        return (_c = (_a = this.children) !== null && _a !== void 0 ? _a : (_b = this.deco) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : BlockType.Text;
+    }
+    /**
+    If this is a widget block, this will return the widget
+    associated with it.
+    */
+    get widget() {
+        return this.deco && this.deco.widget;
     }
     /**
     The end of the element as a document position.
@@ -4353,9 +4372,8 @@ class BlockInfo {
     @internal
     */
     join(other) {
-        let detail = (Array.isArray(this.type) ? this.type : [this])
-            .concat(Array.isArray(other.type) ? other.type : [other]);
-        return new BlockInfo(this.from, this.length + other.length, this.top, this.height + other.height, detail);
+        let children = (this.children || [this]).concat(other.children || [other]);
+        return new BlockInfo(this.from, this.length + other.length, this.top, this.height + other.height, children, null);
     }
 }
 var QueryType = /*@__PURE__*/(function (QueryType) {
@@ -4470,12 +4488,12 @@ class HeightMap {
 }
 HeightMap.prototype.size = 1;
 class HeightMapBlock extends HeightMap {
-    constructor(length, height, type) {
+    constructor(length, height, deco) {
         super(length, height);
-        this.type = type;
+        this.deco = deco;
     }
     blockAt(_height, _oracle, top, offset) {
-        return new BlockInfo(offset, this.length, top, this.height, this.type);
+        return new BlockInfo(offset, this.length, top, this.height, null, this.deco);
     }
     lineAt(_value, _type, oracle, top, offset) {
         return this.blockAt(0, oracle, top, offset);
@@ -4494,7 +4512,7 @@ class HeightMapBlock extends HeightMap {
 }
 class HeightMapText extends HeightMapBlock {
     constructor(length, height) {
-        super(length, height, BlockType.Text);
+        super(length, height, null);
         this.collapsed = 0; // Amount of collapsed content in the line
         this.widgetHeight = 0; // Maximum inline widget height
     }
@@ -4549,12 +4567,12 @@ class HeightMapGap extends HeightMap {
             let guess = offset + Math.round(Math.max(0, Math.min(1, (height - top) / this.height)) * this.length);
             let line = oracle.doc.lineAt(guess), lineHeight = perLine + line.length * perChar;
             let lineTop = Math.max(top, height - lineHeight / 2);
-            return new BlockInfo(line.from, line.length, lineTop, lineHeight, BlockType.Text);
+            return new BlockInfo(line.from, line.length, lineTop, lineHeight, null, null);
         }
         else {
             let line = Math.max(0, Math.min(lastLine - firstLine, Math.floor((height - top) / perLine)));
             let { from, length } = oracle.doc.line(firstLine + line);
-            return new BlockInfo(from, length, top + perLine * line, perLine, BlockType.Text);
+            return new BlockInfo(from, length, top + perLine * line, perLine, null, null);
         }
     }
     lineAt(value, type, oracle, top, offset) {
@@ -4562,13 +4580,13 @@ class HeightMapGap extends HeightMap {
             return this.blockAt(value, oracle, top, offset);
         if (type == QueryType.ByPosNoHeight) {
             let { from, to } = oracle.doc.lineAt(value);
-            return new BlockInfo(from, to - from, 0, 0, BlockType.Text);
+            return new BlockInfo(from, to - from, 0, 0, null, null);
         }
         let { firstLine, perLine, perChar } = this.heightMetrics(oracle, offset);
         let line = oracle.doc.lineAt(value), lineHeight = perLine + line.length * perChar;
         let linesAbove = line.number - firstLine;
         let lineTop = top + perLine * linesAbove + perChar * (line.from - offset - linesAbove);
-        return new BlockInfo(line.from, line.length, Math.max(top, Math.min(lineTop, top + this.height - lineHeight)), lineHeight, BlockType.Text);
+        return new BlockInfo(line.from, line.length, Math.max(top, Math.min(lineTop, top + this.height - lineHeight)), lineHeight, null, null);
     }
     forEachLine(from, to, oracle, top, offset, f) {
         from = Math.max(from, offset);
@@ -4581,7 +4599,7 @@ class HeightMapGap extends HeightMap {
                 lineTop += perLine * linesAbove + perChar * (from - offset - linesAbove);
             }
             let lineHeight = perLine + perChar * line.length;
-            f(new BlockInfo(line.from, line.length, lineTop, lineHeight, BlockType.Text));
+            f(new BlockInfo(line.from, line.length, lineTop, lineHeight, null, null));
             lineTop += lineHeight;
             pos = line.to + 1;
         }
@@ -4811,7 +4829,7 @@ class NodeBuilder {
                 height = this.oracle.lineHeight;
             let len = to - from;
             if (deco.block) {
-                this.addBlock(new HeightMapBlock(len, height, deco.type));
+                this.addBlock(new HeightMapBlock(len, height, deco));
             }
             else if (len || height >= relevantWidgetHeight) {
                 this.addLineDeco(height, len);
@@ -4854,12 +4872,14 @@ class NodeBuilder {
         return line;
     }
     addBlock(block) {
+        var _a;
         this.enterLine();
-        if (block.type == BlockType.WidgetAfter && !this.isCovered)
+        let type = (_a = block.deco) === null || _a === void 0 ? void 0 : _a.type;
+        if (type == BlockType.WidgetAfter && !this.isCovered)
             this.ensureLine();
         this.nodes.push(block);
         this.writtenTo = this.pos = this.pos + block.length;
-        if (block.type != BlockType.WidgetBefore)
+        if (type != BlockType.WidgetBefore)
             this.covering = block;
     }
     addLineDeco(height, length) {
@@ -5462,7 +5482,7 @@ function scaleBlock(block, scaler) {
     if (scaler.scale == 1)
         return block;
     let bTop = scaler.toDOM(block.top), bBottom = scaler.toDOM(block.bottom);
-    return new BlockInfo(block.from, block.length, bTop, bBottom - bTop, Array.isArray(block.type) ? block.type.map(b => scaleBlock(b, scaler)) : block.type);
+    return new BlockInfo(block.from, block.length, bTop, bBottom - bTop, block.children && block.children.map(b => scaleBlock(b, scaler)), block.deco);
 }
 
 const theme = /*@__PURE__*/Facet.define({ combine: strs => strs.join(" ") });
@@ -8345,7 +8365,14 @@ class Placeholder extends WidgetType {
     }
     coordsAt(dom) {
         let rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
-        return rects.length ? flattenRect(rects[0], window.getComputedStyle(dom).direction != "rtl") : null;
+        if (!rects.length)
+            return null;
+        let style = window.getComputedStyle(dom.parentNode);
+        let rect = flattenRect(rects[0], style.direction != "rtl");
+        let lineHeight = parseInt(style.lineHeight);
+        if (rect.bottom - rect.top > lineHeight * 1.5)
+            return { left: rect.left, right: rect.right, top: rect.top, bottom: rect.top + lineHeight };
+        return rect;
     }
     ignoreEvent() { return false; }
 }
@@ -9285,6 +9312,7 @@ const defaults = {
     elementStyle: "",
     markers: () => RangeSet.empty,
     lineMarker: () => null,
+    widgetMarker: () => null,
     lineMarkerChange: null,
     initialSpacer: null,
     updateSpacer: null,
@@ -9365,24 +9393,28 @@ const gutterView = /*@__PURE__*/ViewPlugin.fromClass(class {
         let classSet = [];
         let contexts = this.gutters.map(gutter => new UpdateContext(gutter, this.view.viewport, -this.view.documentPadding.top));
         for (let line of this.view.viewportLineBlocks) {
-            let text;
+            if (classSet.length)
+                classSet = [];
             if (Array.isArray(line.type)) {
-                for (let b of line.type)
-                    if (b.type == BlockType.Text) {
-                        text = b;
-                        break;
+                let first = true;
+                for (let b of line.type) {
+                    if (b.type == BlockType.Text && first) {
+                        advanceCursor(lineClasses, classSet, b.from);
+                        for (let cx of contexts)
+                            cx.line(this.view, b, classSet);
+                        first = false;
+                    }
+                    else if (b.widget) {
+                        for (let cx of contexts)
+                            cx.widget(this.view, b);
                     }
+                }
             }
-            else {
-                text = line.type == BlockType.Text ? line : undefined;
+            else if (line.type == BlockType.Text) {
+                advanceCursor(lineClasses, classSet, line.from);
+                for (let cx of contexts)
+                    cx.line(this.view, line, classSet);
             }
-            if (!text)
-                continue;
-            if (classSet.length)
-                classSet = [];
-            advanceCursor(lineClasses, classSet, line.from);
-            for (let cx of contexts)
-                cx.line(this.view, text, classSet);
         }
         for (let cx of contexts)
             cx.finish();
@@ -9450,6 +9482,19 @@ class UpdateContext {
         this.i = 0;
         this.cursor = RangeSet.iter(gutter.markers, viewport.from);
     }
+    addElement(view, block, markers) {
+        let { gutter } = this, above = block.top - this.height;
+        if (this.i == gutter.elements.length) {
+            let newElt = new GutterElement(view, block.height, above, markers);
+            gutter.elements.push(newElt);
+            gutter.dom.appendChild(newElt.dom);
+        }
+        else {
+            gutter.elements[this.i].update(view, block.height, above, markers);
+        }
+        this.height = block.bottom;
+        this.i++;
+    }
     line(view, line, extraMarkers) {
         let localMarkers = [];
         advanceCursor(this.cursor, localMarkers, line.from);
@@ -9461,17 +9506,12 @@ class UpdateContext {
         let gutter = this.gutter;
         if (localMarkers.length == 0 && !gutter.config.renderEmptyElements)
             return;
-        let above = line.top - this.height;
-        if (this.i == gutter.elements.length) {
-            let newElt = new GutterElement(view, line.height, above, localMarkers);
-            gutter.elements.push(newElt);
-            gutter.dom.appendChild(newElt.dom);
-        }
-        else {
-            gutter.elements[this.i].update(view, line.height, above, localMarkers);
-        }
-        this.height = line.bottom;
-        this.i++;
+        this.addElement(view, line, localMarkers);
+    }
+    widget(view, block) {
+        let marker = this.gutter.config.widgetMarker(view, block.widget, block);
+        if (marker)
+            this.addElement(view, block, [marker]);
     }
     finish() {
         let gutter = this.gutter;
@@ -9639,6 +9679,7 @@ const lineNumberGutter = /*@__PURE__*/activeGutters.compute([lineNumberConfig],
             return null;
         return new NumberMarker(formatNumber(view, view.state.doc.lineAt(line.from).number));
     },
+    widgetMarker: () => null,
     lineMarkerChange: update => update.startState.facet(lineNumberConfig) != update.state.facet(lineNumberConfig),
     initialSpacer(view) {
         return new NumberMarker(formatNumber(view, maxLineNumber(view.state.doc.lines)));

package/package.json

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