@codemirror/view 6.6.0 → 6.7.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 6.7.0 (2022-12-07)
+
+### Bug fixes
+
+Make the editor notice widget height changes to automatically adjust its height information.
+
+Fix an issue where widget buffers could be incorrectly omitted after empty lines.
+
+Fix an issue in content redrawing that could cause `coordsAtPos` to return incorrect results.
+
+### New features
+
+The static `RectangleMarker.forRange` method exposes the logic used by the editor to draw rectangles covering a selection range.
+
+Layers can now provide a `destroy` function to be called when the layer is removed.
+
+The new `highlightWhitespace` extension makes spaces and tabs in the editor visible.
+
+The `highlightTrailingWhitespace` extension can be used to make trailing whitespace stand out.
+
 ## 6.6.0 (2022-11-24)
 
 ### New features

package/dist/index.cjs

@@ -1603,6 +1603,7 @@ class ContentBuilder {
         this.curLine = null;
         this.breakAtStart = 0;
         this.pendingBuffer = 0 /* Buf.No */;
+        this.bufferMarks = [];
         // Set to false directly after a widget that covers the position after it
         this.atCursorPos = true;
         this.openStart = -1;
@@ -1625,20 +1626,20 @@ class ContentBuilder {
         }
         return this.curLine;
     }
-    flushBuffer(active) {
+    flushBuffer(active = this.bufferMarks) {
         if (this.pendingBuffer) {
             this.curLine.append(wrapMarks(new WidgetBufferView(-1), active), active.length);
             this.pendingBuffer = 0 /* Buf.No */;
         }
     }
     addBlockWidget(view) {
-        this.flushBuffer([]);
+        this.flushBuffer();
         this.curLine = null;
         this.content.push(view);
     }
     finish(openEnd) {
-        if (!openEnd)
-            this.flushBuffer([]);
+        if (this.pendingBuffer && openEnd <= this.bufferMarks.length)
+            this.flushBuffer();
         else
             this.pendingBuffer = 0 /* Buf.No */;
         if (!this.posCovered())
@@ -1658,8 +1659,9 @@ class ContentBuilder {
                         this.content[this.content.length - 1].breakAfter = 1;
                     else
                         this.breakAtStart = 1;
-                    this.flushBuffer([]);
+                    this.flushBuffer();
                     this.curLine = null;
+                    this.atCursorPos = true;
                     length--;
                     continue;
                 }
@@ -1701,7 +1703,7 @@ class ContentBuilder {
             else {
                 let view = WidgetView.create(deco.widget || new NullWidget("span"), len, len ? 0 : deco.startSide);
                 let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length && (from < to || deco.startSide > 0);
-                let cursorAfter = !view.isEditable && (from < to || deco.startSide <= 0);
+                let cursorAfter = !view.isEditable && (from < to || openStart > active.length || deco.startSide <= 0);
                 let line = this.getLine();
                 if (this.pendingBuffer == 2 /* Buf.IfCursor */ && !cursorBefore)
                     this.pendingBuffer = 0 /* Buf.No */;
@@ -1712,7 +1714,9 @@ class ContentBuilder {
                 }
                 line.append(wrapMarks(view, active), openStart);
                 this.atCursorPos = cursorAfter;
-                this.pendingBuffer = !cursorAfter ? 0 /* Buf.No */ : from < to ? 1 /* Buf.Yes */ : 2 /* Buf.IfCursor */;
+                this.pendingBuffer = !cursorAfter ? 0 /* Buf.No */ : from < to || openStart > active.length ? 1 /* Buf.Yes */ : 2 /* Buf.IfCursor */;
+                if (this.pendingBuffer)
+                    this.bufferMarks = active.slice();
             }
         }
         else if (this.doc.lineAt(this.pos).from == this.pos) { // Line decoration
@@ -5291,7 +5295,6 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
         margin: 0,
         flexGrow: 2,
         flexShrink: 0,
-        minHeight: "100%",
         display: "block",
         whiteSpace: "pre",
         wordWrap: "normal",
@@ -5438,6 +5441,21 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
         display: "inline-block",
         verticalAlign: "top",
     },
+    ".cm-highlightSpace:before": {
+        content: "attr(data-display)",
+        position: "absolute",
+        pointerEvents: "none",
+        color: "#888"
+    },
+    ".cm-highlightTab": {
+        backgroundImage: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><path stroke="%23888" stroke-width="1" fill="none" d="M1 10H196L190 5M190 15L196 10M197 4L197 16"/></svg>')`,
+        backgroundSize: "auto 100%",
+        backgroundPosition: "right 90%",
+        backgroundRepeat: "no-repeat"
+    },
+    ".cm-trailingSpace": {
+        backgroundColor: "#ff332255"
+    },
     ".cm-button": {
         verticalAlign: "middle",
         color: "inherit",
@@ -5740,7 +5758,8 @@ class DOMObserver {
         this.lastChange = 0;
         this.scrollTargets = [];
         this.intersection = null;
-        this.resize = null;
+        this.resizeScroll = null;
+        this.resizeContent = null;
         this.intersecting = false;
         this.gapIntersection = null;
         this.gaps = [];
@@ -5778,12 +5797,14 @@ class DOMObserver {
         this.onPrint = this.onPrint.bind(this);
         this.onScroll = this.onScroll.bind(this);
         if (typeof ResizeObserver == "function") {
-            this.resize = new ResizeObserver(() => {
+            this.resizeScroll = new ResizeObserver(() => {
                 var _a;
                 if (((_a = this.view.docView) === null || _a === void 0 ? void 0 : _a.lastUpdate) < Date.now() - 75)
                     this.onResize();
             });
-            this.resize.observe(view.scrollDOM);
+            this.resizeScroll.observe(view.scrollDOM);
+            this.resizeContent = new ResizeObserver(() => this.view.requestMeasure());
+            this.resizeContent.observe(view.contentDOM);
         }
         this.addWindowListeners(this.win = view.win);
         this.start();
@@ -6102,11 +6123,12 @@ class DOMObserver {
         win.document.removeEventListener("selectionchange", this.onSelectionChange);
     }
     destroy() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.stop();
         (_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();
+        (_c = this.resizeScroll) === null || _c === void 0 ? void 0 : _c.disconnect();
+        (_d = this.resizeContent) === null || _d === void 0 ? void 0 : _d.disconnect();
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         this.removeWindowListeners(this.win);
@@ -6205,7 +6227,7 @@ class EditorView {
         this.scrollDOM.className = "cm-scroller";
         this.scrollDOM.appendChild(this.contentDOM);
         this.announceDOM = document.createElement("div");
-        this.announceDOM.style.cssText = "position: absolute; top: -10000px";
+        this.announceDOM.style.cssText = "position: fixed; top: -10000px";
         this.announceDOM.setAttribute("aria-live", "polite");
         this.dom = document.createElement("div");
         this.dom.appendChild(this.announceDOM);
@@ -7296,7 +7318,8 @@ a rectangle at a given set of coordinates.
 */
 class RectangleMarker {
     /**
-    Create a marker with the given class and dimensions.
+    Create a marker with the given class and dimensions. If `width`
+    is null, the DOM element will get no width style.
     */
     constructor(className, left, top, width, height) {
         this.className = className;
@@ -7320,7 +7343,7 @@ class RectangleMarker {
     adjust(elt) {
         elt.style.left = this.left + "px";
         elt.style.top = this.top + "px";
-        if (this.width >= 0)
+        if (this.width != null)
             elt.style.width = this.width + "px";
         elt.style.height = this.height + "px";
     }
@@ -7328,6 +7351,129 @@ class RectangleMarker {
         return this.left == p.left && this.top == p.top && this.width == p.width && this.height == p.height &&
             this.className == p.className;
     }
+    /**
+    Create a set of rectangles for the given selection range,
+    assigning them theclass`className`. Will create a single
+    rectangle for empty ranges, and a set of selection-style
+    rectangles covering the range's content (in a bidi-aware
+    way) for non-empty ones.
+    */
+    static forRange(view, className, range) {
+        if (range.empty) {
+            let pos = view.coordsAtPos(range.head, range.assoc || 1);
+            if (!pos)
+                return [];
+            let base = getBase(view);
+            return [new RectangleMarker(className, pos.left - base.left, pos.top - base.top, null, pos.bottom - pos.top)];
+        }
+        else {
+            return rectanglesForRange(view, className, range);
+        }
+    }
+}
+function getBase(view) {
+    let rect = view.scrollDOM.getBoundingClientRect();
+    let left = view.textDirection == exports.Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth;
+    return { left: left - view.scrollDOM.scrollLeft, top: rect.top - view.scrollDOM.scrollTop };
+}
+function wrappedLine(view, pos, inside) {
+    let range = state.EditorSelection.cursor(pos);
+    return { from: Math.max(inside.from, view.moveToLineBoundary(range, false, true).from),
+        to: Math.min(inside.to, view.moveToLineBoundary(range, true, true).from),
+        type: exports.BlockType.Text };
+}
+function blockAt(view, pos) {
+    let line = view.lineBlockAt(pos);
+    if (Array.isArray(line.type))
+        for (let l of line.type) {
+            if (l.to > pos || l.to == pos && (l.to == line.to || l.type == exports.BlockType.Text))
+                return l;
+        }
+    return line;
+}
+function rectanglesForRange(view, className, range) {
+    if (range.to <= view.viewport.from || range.from >= view.viewport.to)
+        return [];
+    let from = Math.max(range.from, view.viewport.from), to = Math.min(range.to, view.viewport.to);
+    let ltr = view.textDirection == exports.Direction.LTR;
+    let content = view.contentDOM, contentRect = content.getBoundingClientRect(), base = getBase(view);
+    let lineStyle = window.getComputedStyle(content.firstChild);
+    let leftSide = contentRect.left + parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent));
+    let rightSide = contentRect.right - parseInt(lineStyle.paddingRight);
+    let startBlock = blockAt(view, from), endBlock = blockAt(view, to);
+    let visualStart = startBlock.type == exports.BlockType.Text ? startBlock : null;
+    let visualEnd = endBlock.type == exports.BlockType.Text ? endBlock : null;
+    if (view.lineWrapping) {
+        if (visualStart)
+            visualStart = wrappedLine(view, from, visualStart);
+        if (visualEnd)
+            visualEnd = wrappedLine(view, to, visualEnd);
+    }
+    if (visualStart && visualEnd && visualStart.from == visualEnd.from) {
+        return pieces(drawForLine(range.from, range.to, visualStart));
+    }
+    else {
+        let top = visualStart ? drawForLine(range.from, null, visualStart) : drawForWidget(startBlock, false);
+        let bottom = visualEnd ? drawForLine(null, range.to, visualEnd) : drawForWidget(endBlock, true);
+        let between = [];
+        if ((visualStart || startBlock).to < (visualEnd || endBlock).from - 1)
+            between.push(piece(leftSide, top.bottom, rightSide, bottom.top));
+        else if (top.bottom < bottom.top && view.elementAtHeight((top.bottom + bottom.top) / 2).type == exports.BlockType.Text)
+            top.bottom = bottom.top = (top.bottom + bottom.top) / 2;
+        return pieces(top).concat(between).concat(pieces(bottom));
+    }
+    function piece(left, top, right, bottom) {
+        return new RectangleMarker(className, left - base.left, top - base.top - 0.01 /* C.Epsilon */, right - left, bottom - top + 0.01 /* C.Epsilon */);
+    }
+    function pieces({ top, bottom, horizontal }) {
+        let pieces = [];
+        for (let i = 0; i < horizontal.length; i += 2)
+            pieces.push(piece(horizontal[i], top, horizontal[i + 1], bottom));
+        return pieces;
+    }
+    // Gets passed from/to in line-local positions
+    function drawForLine(from, to, line) {
+        let top = 1e9, bottom = -1e9, horizontal = [];
+        function addSpan(from, fromOpen, to, toOpen, dir) {
+            // Passing 2/-2 is a kludge to force the view to return
+            // coordinates on the proper side of block widgets, since
+            // normalizing the side there, though appropriate for most
+            // coordsAtPos queries, would break selection drawing.
+            let fromCoords = view.coordsAtPos(from, (from == line.to ? -2 : 2));
+            let toCoords = view.coordsAtPos(to, (to == line.from ? 2 : -2));
+            top = Math.min(fromCoords.top, toCoords.top, top);
+            bottom = Math.max(fromCoords.bottom, toCoords.bottom, bottom);
+            if (dir == exports.Direction.LTR)
+                horizontal.push(ltr && fromOpen ? leftSide : fromCoords.left, ltr && toOpen ? rightSide : toCoords.right);
+            else
+                horizontal.push(!ltr && toOpen ? leftSide : toCoords.left, !ltr && fromOpen ? rightSide : fromCoords.right);
+        }
+        let start = from !== null && from !== void 0 ? from : line.from, end = to !== null && to !== void 0 ? to : line.to;
+        // Split the range by visible range and document line
+        for (let r of view.visibleRanges)
+            if (r.to > start && r.from < end) {
+                for (let pos = Math.max(r.from, start), endPos = Math.min(r.to, end);;) {
+                    let docLine = view.state.doc.lineAt(pos);
+                    for (let span of view.bidiSpans(docLine)) {
+                        let spanFrom = span.from + docLine.from, spanTo = span.to + docLine.from;
+                        if (spanFrom >= endPos)
+                            break;
+                        if (spanTo > pos)
+                            addSpan(Math.max(spanFrom, pos), from == null && spanFrom <= start, Math.min(spanTo, endPos), to == null && spanTo >= end, span.dir);
+                    }
+                    pos = docLine.to + 1;
+                    if (pos >= endPos)
+                        break;
+                }
+            }
+        if (horizontal.length == 0)
+            addSpan(start, from == null, end, to == null, view.textDirection);
+        return { top, bottom, horizontal };
+    }
+    function drawForWidget(block, top) {
+        let y = contentRect.top + (top ? block.top : block.bottom);
+        return { top: y, bottom: y, horizontal: [] };
+    }
 }
 function sameMarker(a, b) {
     return a.constructor == b.constructor && a.eq(b);
@@ -7387,6 +7533,8 @@ class LayerView {
         }
     }
     destroy() {
+        if (this.layer.destroy)
+            this.layer.destroy(this.dom, this.view);
         this.dom.remove();
     }
 }
@@ -7446,13 +7594,14 @@ function configChanged(update) {
 const cursorLayer = layer({
     above: true,
     markers(view) {
-        let { state } = view, conf = state.facet(selectionConfig);
+        let { state: state$1 } = view, conf = state$1.facet(selectionConfig);
         let cursors = [];
-        for (let r of state.selection.ranges) {
-            let prim = r == state.selection.main;
+        for (let r of state$1.selection.ranges) {
+            let prim = r == state$1.selection.main;
             if (r.empty ? !prim || CanHidePrimary : conf.drawRangeCursor) {
-                let piece = measureCursor(view, r, prim);
-                if (piece)
+                let className = prim ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary";
+                let cursor = r.empty ? r : state.EditorSelection.cursor(r.head, r.head > r.anchor ? -1 : 1);
+                for (let piece of RectangleMarker.forRange(view, className, cursor))
                     cursors.push(piece);
             }
         }
@@ -7477,7 +7626,8 @@ function setBlinkRate(state, dom) {
 const selectionLayer = layer({
     above: false,
     markers(view) {
-        return view.state.selection.ranges.map(r => r.empty ? [] : measureRange(view, r)).reduce((a, b) => a.concat(b));
+        return view.state.selection.ranges.map(r => r.empty ? [] : RectangleMarker.forRange(view, "cm-selectionBackground", r))
+            .reduce((a, b) => a.concat(b));
     },
     update(update, dom) {
         return update.docChanged || update.selectionSet || update.viewportChanged || configChanged(update);
@@ -7493,117 +7643,6 @@ const themeSpec = {
 if (CanHidePrimary)
     themeSpec[".cm-line"].caretColor = "transparent !important";
 const hideNativeSelection = state.Prec.highest(EditorView.theme(themeSpec));
-function getBase(view) {
-    let rect = view.scrollDOM.getBoundingClientRect();
-    let left = view.textDirection == exports.Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth;
-    return { left: left - view.scrollDOM.scrollLeft, top: rect.top - view.scrollDOM.scrollTop };
-}
-function wrappedLine(view, pos, inside) {
-    let range = state.EditorSelection.cursor(pos);
-    return { from: Math.max(inside.from, view.moveToLineBoundary(range, false, true).from),
-        to: Math.min(inside.to, view.moveToLineBoundary(range, true, true).from),
-        type: exports.BlockType.Text };
-}
-function blockAt(view, pos) {
-    let line = view.lineBlockAt(pos);
-    if (Array.isArray(line.type))
-        for (let l of line.type) {
-            if (l.to > pos || l.to == pos && (l.to == line.to || l.type == exports.BlockType.Text))
-                return l;
-        }
-    return line;
-}
-function measureRange(view, range) {
-    if (range.to <= view.viewport.from || range.from >= view.viewport.to)
-        return [];
-    let from = Math.max(range.from, view.viewport.from), to = Math.min(range.to, view.viewport.to);
-    let ltr = view.textDirection == exports.Direction.LTR;
-    let content = view.contentDOM, contentRect = content.getBoundingClientRect(), base = getBase(view);
-    let lineStyle = window.getComputedStyle(content.firstChild);
-    let leftSide = contentRect.left + parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent));
-    let rightSide = contentRect.right - parseInt(lineStyle.paddingRight);
-    let startBlock = blockAt(view, from), endBlock = blockAt(view, to);
-    let visualStart = startBlock.type == exports.BlockType.Text ? startBlock : null;
-    let visualEnd = endBlock.type == exports.BlockType.Text ? endBlock : null;
-    if (view.lineWrapping) {
-        if (visualStart)
-            visualStart = wrappedLine(view, from, visualStart);
-        if (visualEnd)
-            visualEnd = wrappedLine(view, to, visualEnd);
-    }
-    if (visualStart && visualEnd && visualStart.from == visualEnd.from) {
-        return pieces(drawForLine(range.from, range.to, visualStart));
-    }
-    else {
-        let top = visualStart ? drawForLine(range.from, null, visualStart) : drawForWidget(startBlock, false);
-        let bottom = visualEnd ? drawForLine(null, range.to, visualEnd) : drawForWidget(endBlock, true);
-        let between = [];
-        if ((visualStart || startBlock).to < (visualEnd || endBlock).from - 1)
-            between.push(piece(leftSide, top.bottom, rightSide, bottom.top));
-        else if (top.bottom < bottom.top && view.elementAtHeight((top.bottom + bottom.top) / 2).type == exports.BlockType.Text)
-            top.bottom = bottom.top = (top.bottom + bottom.top) / 2;
-        return pieces(top).concat(between).concat(pieces(bottom));
-    }
-    function piece(left, top, right, bottom) {
-        return new RectangleMarker("cm-selectionBackground", left - base.left, top - base.top - 0.01 /* C.Epsilon */, right - left, bottom - top + 0.01 /* C.Epsilon */);
-    }
-    function pieces({ top, bottom, horizontal }) {
-        let pieces = [];
-        for (let i = 0; i < horizontal.length; i += 2)
-            pieces.push(piece(horizontal[i], top, horizontal[i + 1], bottom));
-        return pieces;
-    }
-    // Gets passed from/to in line-local positions
-    function drawForLine(from, to, line) {
-        let top = 1e9, bottom = -1e9, horizontal = [];
-        function addSpan(from, fromOpen, to, toOpen, dir) {
-            // Passing 2/-2 is a kludge to force the view to return
-            // coordinates on the proper side of block widgets, since
-            // normalizing the side there, though appropriate for most
-            // coordsAtPos queries, would break selection drawing.
-            let fromCoords = view.coordsAtPos(from, (from == line.to ? -2 : 2));
-            let toCoords = view.coordsAtPos(to, (to == line.from ? 2 : -2));
-            top = Math.min(fromCoords.top, toCoords.top, top);
-            bottom = Math.max(fromCoords.bottom, toCoords.bottom, bottom);
-            if (dir == exports.Direction.LTR)
-                horizontal.push(ltr && fromOpen ? leftSide : fromCoords.left, ltr && toOpen ? rightSide : toCoords.right);
-            else
-                horizontal.push(!ltr && toOpen ? leftSide : toCoords.left, !ltr && fromOpen ? rightSide : fromCoords.right);
-        }
-        let start = from !== null && from !== void 0 ? from : line.from, end = to !== null && to !== void 0 ? to : line.to;
-        // Split the range by visible range and document line
-        for (let r of view.visibleRanges)
-            if (r.to > start && r.from < end) {
-                for (let pos = Math.max(r.from, start), endPos = Math.min(r.to, end);;) {
-                    let docLine = view.state.doc.lineAt(pos);
-                    for (let span of view.bidiSpans(docLine)) {
-                        let spanFrom = span.from + docLine.from, spanTo = span.to + docLine.from;
-                        if (spanFrom >= endPos)
-                            break;
-                        if (spanTo > pos)
-                            addSpan(Math.max(spanFrom, pos), from == null && spanFrom <= start, Math.min(spanTo, endPos), to == null && spanTo >= end, span.dir);
-                    }
-                    pos = docLine.to + 1;
-                    if (pos >= endPos)
-                        break;
-                }
-            }
-        if (horizontal.length == 0)
-            addSpan(start, from == null, end, to == null, view.textDirection);
-        return { top, bottom, horizontal };
-    }
-    function drawForWidget(block, top) {
-        let y = contentRect.top + (top ? block.top : block.bottom);
-        return { top: y, bottom: y, horizontal: [] };
-    }
-}
-function measureCursor(view, cursor, primary) {
-    let pos = view.coordsAtPos(cursor.head, cursor.assoc || 1);
-    if (!pos)
-        return null;
-    let base = getBase(view);
-    return new RectangleMarker(primary ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary", pos.left - base.left, pos.top - base.top, -1, pos.bottom - pos.top);
-}
 
 const setDropCursorPos = state.StateEffect.define({
     map(pos, mapping) { return pos == null ? null : mapping.mapPos(pos); }
@@ -9370,6 +9409,57 @@ function highlightActiveLineGutter() {
     return activeLineGutterHighlighter;
 }
 
+const WhitespaceDeco = new Map();
+function getWhitespaceDeco(space) {
+    let deco = WhitespaceDeco.get(space);
+    if (!deco)
+        WhitespaceDeco.set(space, deco = Decoration.mark({
+            attributes: space === "\t" ? {
+                class: "cm-highlightTab",
+            } : {
+                class: "cm-highlightSpace",
+                "data-display": space.replace(/ /g, "·")
+            }
+        }));
+    return deco;
+}
+function matcher(decorator) {
+    return ViewPlugin.define(view => ({
+        decorations: decorator.createDeco(view),
+        update(u) {
+            this.decorations = decorator.updateDeco(u, this.decorations);
+        },
+    }), {
+        decorations: v => v.decorations
+    });
+}
+const whitespaceHighlighter = matcher(new MatchDecorator({
+    regexp: /\t| +/g,
+    decoration: match => getWhitespaceDeco(match[0]),
+    boundary: /\S/,
+}));
+/**
+Returns an extension that highlights whitespace, adding a
+`cm-highlightSpace` class to stretches of spaces, and a
+`cm-highlightTab` class to individual tab characters. By default,
+the former are shown as faint dots, and the latter as arrows.
+*/
+function highlightWhitespace() {
+    return whitespaceHighlighter;
+}
+const trailingHighlighter = matcher(new MatchDecorator({
+    regexp: /\s+$/g,
+    decoration: Decoration.mark({ class: "cm-trailingSpace" }),
+    boundary: /\S/,
+}));
+/**
+Returns an extension that adds a `cm-trailingSpace` class to all
+trailing whitespace.
+*/
+function highlightTrailingWhitespace() {
+    return trailingHighlighter;
+}
+
 /**
 @internal
 */
@@ -9399,6 +9489,8 @@ exports.hasHoverTooltips = hasHoverTooltips;
 exports.highlightActiveLine = highlightActiveLine;
 exports.highlightActiveLineGutter = highlightActiveLineGutter;
 exports.highlightSpecialChars = highlightSpecialChars;
+exports.highlightTrailingWhitespace = highlightTrailingWhitespace;
+exports.highlightWhitespace = highlightWhitespace;
 exports.hoverTooltip = hoverTooltip;
 exports.keymap = keymap;
 exports.layer = layer;

package/dist/index.d.ts

@@ -1402,13 +1402,22 @@ declare class RectangleMarker implements LayerMarker {
     private width;
     private height;
     /**
-    Create a marker with the given class and dimensions.
+    Create a marker with the given class and dimensions. If `width`
+    is null, the DOM element will get no width style.
     */
-    constructor(className: string, left: number, top: number, width: number, height: number);
+    constructor(className: string, left: number, top: number, width: number | null, height: number);
     draw(): HTMLDivElement;
     update(elt: HTMLElement, prev: RectangleMarker): boolean;
     private adjust;
     eq(p: RectangleMarker): boolean;
+    /**
+    Create a set of rectangles for the given selection range,
+    assigning them theclass`className`. Will create a single
+    rectangle for empty ranges, and a set of selection-style
+    rectangles covering the range's content (in a bidi-aware
+    way) for non-empty ones.
+    */
+    static forRange(view: EditorView, className: string, range: SelectionRange): readonly RectangleMarker[];
 }
 interface LayerConfig {
     /**
@@ -1434,6 +1443,11 @@ interface LayerConfig {
     If given, this is called when the layer is created.
     */
     mount?(layer: HTMLElement, view: EditorView): void;
+    /**
+    If given, called when the layer is removed from the editor or
+    the entire editor is destroyed.
+    */
+    destroy?(layer: HTMLElement, view: EditorView): void;
 }
 /**
 Define a layer.
@@ -1900,4 +1914,17 @@ line](https://codemirror.net/6/docs/ref/#view.highlightActiveLine).
 */
 declare function highlightActiveLineGutter(): Extension;
 
-export { BidiSpan, BlockInfo, BlockType, Command, DOMEventHandlers, DOMEventMap, Decoration, DecorationSet, Direction, EditorView, EditorViewConfig, GutterMarker, KeyBinding, LayerMarker, MatchDecorator, MouseSelectionStyle, Panel, PanelConstructor, PluginSpec, PluginValue, Rect, RectangleMarker, Tooltip, TooltipView, ViewPlugin, ViewUpdate, WidgetType, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, hoverTooltip, keymap, layer, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };
+/**
+Returns an extension that highlights whitespace, adding a
+`cm-highlightSpace` class to stretches of spaces, and a
+`cm-highlightTab` class to individual tab characters. By default,
+the former are shown as faint dots, and the latter as arrows.
+*/
+declare function highlightWhitespace(): Extension;
+/**
+Returns an extension that adds a `cm-trailingSpace` class to all
+trailing whitespace.
+*/
+declare function highlightTrailingWhitespace(): Extension;
+
+export { BidiSpan, BlockInfo, BlockType, Command, DOMEventHandlers, DOMEventMap, Decoration, DecorationSet, Direction, EditorView, EditorViewConfig, GutterMarker, KeyBinding, LayerMarker, MatchDecorator, MouseSelectionStyle, Panel, PanelConstructor, PluginSpec, PluginValue, Rect, RectangleMarker, Tooltip, TooltipView, ViewPlugin, ViewUpdate, WidgetType, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, highlightTrailingWhitespace, highlightWhitespace, hoverTooltip, keymap, layer, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };

package/dist/index.js

@@ -1598,6 +1598,7 @@ class ContentBuilder {
         this.curLine = null;
         this.breakAtStart = 0;
         this.pendingBuffer = 0 /* Buf.No */;
+        this.bufferMarks = [];
         // Set to false directly after a widget that covers the position after it
         this.atCursorPos = true;
         this.openStart = -1;
@@ -1620,20 +1621,20 @@ class ContentBuilder {
         }
         return this.curLine;
     }
-    flushBuffer(active) {
+    flushBuffer(active = this.bufferMarks) {
         if (this.pendingBuffer) {
             this.curLine.append(wrapMarks(new WidgetBufferView(-1), active), active.length);
             this.pendingBuffer = 0 /* Buf.No */;
         }
     }
     addBlockWidget(view) {
-        this.flushBuffer([]);
+        this.flushBuffer();
         this.curLine = null;
         this.content.push(view);
     }
     finish(openEnd) {
-        if (!openEnd)
-            this.flushBuffer([]);
+        if (this.pendingBuffer && openEnd <= this.bufferMarks.length)
+            this.flushBuffer();
         else
             this.pendingBuffer = 0 /* Buf.No */;
         if (!this.posCovered())
@@ -1653,8 +1654,9 @@ class ContentBuilder {
                         this.content[this.content.length - 1].breakAfter = 1;
                     else
                         this.breakAtStart = 1;
-                    this.flushBuffer([]);
+                    this.flushBuffer();
                     this.curLine = null;
+                    this.atCursorPos = true;
                     length--;
                     continue;
                 }
@@ -1696,7 +1698,7 @@ class ContentBuilder {
             else {
                 let view = WidgetView.create(deco.widget || new NullWidget("span"), len, len ? 0 : deco.startSide);
                 let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length && (from < to || deco.startSide > 0);
-                let cursorAfter = !view.isEditable && (from < to || deco.startSide <= 0);
+                let cursorAfter = !view.isEditable && (from < to || openStart > active.length || deco.startSide <= 0);
                 let line = this.getLine();
                 if (this.pendingBuffer == 2 /* Buf.IfCursor */ && !cursorBefore)
                     this.pendingBuffer = 0 /* Buf.No */;
@@ -1707,7 +1709,9 @@ class ContentBuilder {
                 }
                 line.append(wrapMarks(view, active), openStart);
                 this.atCursorPos = cursorAfter;
-                this.pendingBuffer = !cursorAfter ? 0 /* Buf.No */ : from < to ? 1 /* Buf.Yes */ : 2 /* Buf.IfCursor */;
+                this.pendingBuffer = !cursorAfter ? 0 /* Buf.No */ : from < to || openStart > active.length ? 1 /* Buf.Yes */ : 2 /* Buf.IfCursor */;
+                if (this.pendingBuffer)
+                    this.bufferMarks = active.slice();
             }
         }
         else if (this.doc.lineAt(this.pos).from == this.pos) { // Line decoration
@@ -5284,7 +5288,6 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
         margin: 0,
         flexGrow: 2,
         flexShrink: 0,
-        minHeight: "100%",
         display: "block",
         whiteSpace: "pre",
         wordWrap: "normal",
@@ -5431,6 +5434,21 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
         display: "inline-block",
         verticalAlign: "top",
     },
+    ".cm-highlightSpace:before": {
+        content: "attr(data-display)",
+        position: "absolute",
+        pointerEvents: "none",
+        color: "#888"
+    },
+    ".cm-highlightTab": {
+        backgroundImage: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><path stroke="%23888" stroke-width="1" fill="none" d="M1 10H196L190 5M190 15L196 10M197 4L197 16"/></svg>')`,
+        backgroundSize: "auto 100%",
+        backgroundPosition: "right 90%",
+        backgroundRepeat: "no-repeat"
+    },
+    ".cm-trailingSpace": {
+        backgroundColor: "#ff332255"
+    },
     ".cm-button": {
         verticalAlign: "middle",
         color: "inherit",
@@ -5733,7 +5751,8 @@ class DOMObserver {
         this.lastChange = 0;
         this.scrollTargets = [];
         this.intersection = null;
-        this.resize = null;
+        this.resizeScroll = null;
+        this.resizeContent = null;
         this.intersecting = false;
         this.gapIntersection = null;
         this.gaps = [];
@@ -5771,12 +5790,14 @@ class DOMObserver {
         this.onPrint = this.onPrint.bind(this);
         this.onScroll = this.onScroll.bind(this);
         if (typeof ResizeObserver == "function") {
-            this.resize = new ResizeObserver(() => {
+            this.resizeScroll = new ResizeObserver(() => {
                 var _a;
                 if (((_a = this.view.docView) === null || _a === void 0 ? void 0 : _a.lastUpdate) < Date.now() - 75)
                     this.onResize();
             });
-            this.resize.observe(view.scrollDOM);
+            this.resizeScroll.observe(view.scrollDOM);
+            this.resizeContent = new ResizeObserver(() => this.view.requestMeasure());
+            this.resizeContent.observe(view.contentDOM);
         }
         this.addWindowListeners(this.win = view.win);
         this.start();
@@ -6095,11 +6116,12 @@ class DOMObserver {
         win.document.removeEventListener("selectionchange", this.onSelectionChange);
     }
     destroy() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.stop();
         (_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();
+        (_c = this.resizeScroll) === null || _c === void 0 ? void 0 : _c.disconnect();
+        (_d = this.resizeContent) === null || _d === void 0 ? void 0 : _d.disconnect();
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         this.removeWindowListeners(this.win);
@@ -6198,7 +6220,7 @@ class EditorView {
         this.scrollDOM.className = "cm-scroller";
         this.scrollDOM.appendChild(this.contentDOM);
         this.announceDOM = document.createElement("div");
-        this.announceDOM.style.cssText = "position: absolute; top: -10000px";
+        this.announceDOM.style.cssText = "position: fixed; top: -10000px";
         this.announceDOM.setAttribute("aria-live", "polite");
         this.dom = document.createElement("div");
         this.dom.appendChild(this.announceDOM);
@@ -7289,7 +7311,8 @@ a rectangle at a given set of coordinates.
 */
 class RectangleMarker {
     /**
-    Create a marker with the given class and dimensions.
+    Create a marker with the given class and dimensions. If `width`
+    is null, the DOM element will get no width style.
     */
     constructor(className, left, top, width, height) {
         this.className = className;
@@ -7313,7 +7336,7 @@ class RectangleMarker {
     adjust(elt) {
         elt.style.left = this.left + "px";
         elt.style.top = this.top + "px";
-        if (this.width >= 0)
+        if (this.width != null)
             elt.style.width = this.width + "px";
         elt.style.height = this.height + "px";
     }
@@ -7321,6 +7344,129 @@ class RectangleMarker {
         return this.left == p.left && this.top == p.top && this.width == p.width && this.height == p.height &&
             this.className == p.className;
     }
+    /**
+    Create a set of rectangles for the given selection range,
+    assigning them theclass`className`. Will create a single
+    rectangle for empty ranges, and a set of selection-style
+    rectangles covering the range's content (in a bidi-aware
+    way) for non-empty ones.
+    */
+    static forRange(view, className, range) {
+        if (range.empty) {
+            let pos = view.coordsAtPos(range.head, range.assoc || 1);
+            if (!pos)
+                return [];
+            let base = getBase(view);
+            return [new RectangleMarker(className, pos.left - base.left, pos.top - base.top, null, pos.bottom - pos.top)];
+        }
+        else {
+            return rectanglesForRange(view, className, range);
+        }
+    }
+}
+function getBase(view) {
+    let rect = view.scrollDOM.getBoundingClientRect();
+    let left = view.textDirection == Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth;
+    return { left: left - view.scrollDOM.scrollLeft, top: rect.top - view.scrollDOM.scrollTop };
+}
+function wrappedLine(view, pos, inside) {
+    let range = EditorSelection.cursor(pos);
+    return { from: Math.max(inside.from, view.moveToLineBoundary(range, false, true).from),
+        to: Math.min(inside.to, view.moveToLineBoundary(range, true, true).from),
+        type: BlockType.Text };
+}
+function blockAt(view, pos) {
+    let line = view.lineBlockAt(pos);
+    if (Array.isArray(line.type))
+        for (let l of line.type) {
+            if (l.to > pos || l.to == pos && (l.to == line.to || l.type == BlockType.Text))
+                return l;
+        }
+    return line;
+}
+function rectanglesForRange(view, className, range) {
+    if (range.to <= view.viewport.from || range.from >= view.viewport.to)
+        return [];
+    let from = Math.max(range.from, view.viewport.from), to = Math.min(range.to, view.viewport.to);
+    let ltr = view.textDirection == Direction.LTR;
+    let content = view.contentDOM, contentRect = content.getBoundingClientRect(), base = getBase(view);
+    let lineStyle = window.getComputedStyle(content.firstChild);
+    let leftSide = contentRect.left + parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent));
+    let rightSide = contentRect.right - parseInt(lineStyle.paddingRight);
+    let startBlock = blockAt(view, from), endBlock = blockAt(view, to);
+    let visualStart = startBlock.type == BlockType.Text ? startBlock : null;
+    let visualEnd = endBlock.type == BlockType.Text ? endBlock : null;
+    if (view.lineWrapping) {
+        if (visualStart)
+            visualStart = wrappedLine(view, from, visualStart);
+        if (visualEnd)
+            visualEnd = wrappedLine(view, to, visualEnd);
+    }
+    if (visualStart && visualEnd && visualStart.from == visualEnd.from) {
+        return pieces(drawForLine(range.from, range.to, visualStart));
+    }
+    else {
+        let top = visualStart ? drawForLine(range.from, null, visualStart) : drawForWidget(startBlock, false);
+        let bottom = visualEnd ? drawForLine(null, range.to, visualEnd) : drawForWidget(endBlock, true);
+        let between = [];
+        if ((visualStart || startBlock).to < (visualEnd || endBlock).from - 1)
+            between.push(piece(leftSide, top.bottom, rightSide, bottom.top));
+        else if (top.bottom < bottom.top && view.elementAtHeight((top.bottom + bottom.top) / 2).type == BlockType.Text)
+            top.bottom = bottom.top = (top.bottom + bottom.top) / 2;
+        return pieces(top).concat(between).concat(pieces(bottom));
+    }
+    function piece(left, top, right, bottom) {
+        return new RectangleMarker(className, left - base.left, top - base.top - 0.01 /* C.Epsilon */, right - left, bottom - top + 0.01 /* C.Epsilon */);
+    }
+    function pieces({ top, bottom, horizontal }) {
+        let pieces = [];
+        for (let i = 0; i < horizontal.length; i += 2)
+            pieces.push(piece(horizontal[i], top, horizontal[i + 1], bottom));
+        return pieces;
+    }
+    // Gets passed from/to in line-local positions
+    function drawForLine(from, to, line) {
+        let top = 1e9, bottom = -1e9, horizontal = [];
+        function addSpan(from, fromOpen, to, toOpen, dir) {
+            // Passing 2/-2 is a kludge to force the view to return
+            // coordinates on the proper side of block widgets, since
+            // normalizing the side there, though appropriate for most
+            // coordsAtPos queries, would break selection drawing.
+            let fromCoords = view.coordsAtPos(from, (from == line.to ? -2 : 2));
+            let toCoords = view.coordsAtPos(to, (to == line.from ? 2 : -2));
+            top = Math.min(fromCoords.top, toCoords.top, top);
+            bottom = Math.max(fromCoords.bottom, toCoords.bottom, bottom);
+            if (dir == Direction.LTR)
+                horizontal.push(ltr && fromOpen ? leftSide : fromCoords.left, ltr && toOpen ? rightSide : toCoords.right);
+            else
+                horizontal.push(!ltr && toOpen ? leftSide : toCoords.left, !ltr && fromOpen ? rightSide : fromCoords.right);
+        }
+        let start = from !== null && from !== void 0 ? from : line.from, end = to !== null && to !== void 0 ? to : line.to;
+        // Split the range by visible range and document line
+        for (let r of view.visibleRanges)
+            if (r.to > start && r.from < end) {
+                for (let pos = Math.max(r.from, start), endPos = Math.min(r.to, end);;) {
+                    let docLine = view.state.doc.lineAt(pos);
+                    for (let span of view.bidiSpans(docLine)) {
+                        let spanFrom = span.from + docLine.from, spanTo = span.to + docLine.from;
+                        if (spanFrom >= endPos)
+                            break;
+                        if (spanTo > pos)
+                            addSpan(Math.max(spanFrom, pos), from == null && spanFrom <= start, Math.min(spanTo, endPos), to == null && spanTo >= end, span.dir);
+                    }
+                    pos = docLine.to + 1;
+                    if (pos >= endPos)
+                        break;
+                }
+            }
+        if (horizontal.length == 0)
+            addSpan(start, from == null, end, to == null, view.textDirection);
+        return { top, bottom, horizontal };
+    }
+    function drawForWidget(block, top) {
+        let y = contentRect.top + (top ? block.top : block.bottom);
+        return { top: y, bottom: y, horizontal: [] };
+    }
 }
 function sameMarker(a, b) {
     return a.constructor == b.constructor && a.eq(b);
@@ -7380,6 +7526,8 @@ class LayerView {
         }
     }
     destroy() {
+        if (this.layer.destroy)
+            this.layer.destroy(this.dom, this.view);
         this.dom.remove();
     }
 }
@@ -7444,8 +7592,9 @@ const cursorLayer = /*@__PURE__*/layer({
         for (let r of state.selection.ranges) {
             let prim = r == state.selection.main;
             if (r.empty ? !prim || CanHidePrimary : conf.drawRangeCursor) {
-                let piece = measureCursor(view, r, prim);
-                if (piece)
+                let className = prim ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary";
+                let cursor = r.empty ? r : EditorSelection.cursor(r.head, r.head > r.anchor ? -1 : 1);
+                for (let piece of RectangleMarker.forRange(view, className, cursor))
                     cursors.push(piece);
             }
         }
@@ -7470,7 +7619,8 @@ function setBlinkRate(state, dom) {
 const selectionLayer = /*@__PURE__*/layer({
     above: false,
     markers(view) {
-        return view.state.selection.ranges.map(r => r.empty ? [] : measureRange(view, r)).reduce((a, b) => a.concat(b));
+        return view.state.selection.ranges.map(r => r.empty ? [] : RectangleMarker.forRange(view, "cm-selectionBackground", r))
+            .reduce((a, b) => a.concat(b));
     },
     update(update, dom) {
         return update.docChanged || update.selectionSet || update.viewportChanged || configChanged(update);
@@ -7486,117 +7636,6 @@ const themeSpec = {
 if (CanHidePrimary)
     themeSpec[".cm-line"].caretColor = "transparent !important";
 const hideNativeSelection = /*@__PURE__*/Prec.highest(/*@__PURE__*/EditorView.theme(themeSpec));
-function getBase(view) {
-    let rect = view.scrollDOM.getBoundingClientRect();
-    let left = view.textDirection == Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth;
-    return { left: left - view.scrollDOM.scrollLeft, top: rect.top - view.scrollDOM.scrollTop };
-}
-function wrappedLine(view, pos, inside) {
-    let range = EditorSelection.cursor(pos);
-    return { from: Math.max(inside.from, view.moveToLineBoundary(range, false, true).from),
-        to: Math.min(inside.to, view.moveToLineBoundary(range, true, true).from),
-        type: BlockType.Text };
-}
-function blockAt(view, pos) {
-    let line = view.lineBlockAt(pos);
-    if (Array.isArray(line.type))
-        for (let l of line.type) {
-            if (l.to > pos || l.to == pos && (l.to == line.to || l.type == BlockType.Text))
-                return l;
-        }
-    return line;
-}
-function measureRange(view, range) {
-    if (range.to <= view.viewport.from || range.from >= view.viewport.to)
-        return [];
-    let from = Math.max(range.from, view.viewport.from), to = Math.min(range.to, view.viewport.to);
-    let ltr = view.textDirection == Direction.LTR;
-    let content = view.contentDOM, contentRect = content.getBoundingClientRect(), base = getBase(view);
-    let lineStyle = window.getComputedStyle(content.firstChild);
-    let leftSide = contentRect.left + parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent));
-    let rightSide = contentRect.right - parseInt(lineStyle.paddingRight);
-    let startBlock = blockAt(view, from), endBlock = blockAt(view, to);
-    let visualStart = startBlock.type == BlockType.Text ? startBlock : null;
-    let visualEnd = endBlock.type == BlockType.Text ? endBlock : null;
-    if (view.lineWrapping) {
-        if (visualStart)
-            visualStart = wrappedLine(view, from, visualStart);
-        if (visualEnd)
-            visualEnd = wrappedLine(view, to, visualEnd);
-    }
-    if (visualStart && visualEnd && visualStart.from == visualEnd.from) {
-        return pieces(drawForLine(range.from, range.to, visualStart));
-    }
-    else {
-        let top = visualStart ? drawForLine(range.from, null, visualStart) : drawForWidget(startBlock, false);
-        let bottom = visualEnd ? drawForLine(null, range.to, visualEnd) : drawForWidget(endBlock, true);
-        let between = [];
-        if ((visualStart || startBlock).to < (visualEnd || endBlock).from - 1)
-            between.push(piece(leftSide, top.bottom, rightSide, bottom.top));
-        else if (top.bottom < bottom.top && view.elementAtHeight((top.bottom + bottom.top) / 2).type == BlockType.Text)
-            top.bottom = bottom.top = (top.bottom + bottom.top) / 2;
-        return pieces(top).concat(between).concat(pieces(bottom));
-    }
-    function piece(left, top, right, bottom) {
-        return new RectangleMarker("cm-selectionBackground", left - base.left, top - base.top - 0.01 /* C.Epsilon */, right - left, bottom - top + 0.01 /* C.Epsilon */);
-    }
-    function pieces({ top, bottom, horizontal }) {
-        let pieces = [];
-        for (let i = 0; i < horizontal.length; i += 2)
-            pieces.push(piece(horizontal[i], top, horizontal[i + 1], bottom));
-        return pieces;
-    }
-    // Gets passed from/to in line-local positions
-    function drawForLine(from, to, line) {
-        let top = 1e9, bottom = -1e9, horizontal = [];
-        function addSpan(from, fromOpen, to, toOpen, dir) {
-            // Passing 2/-2 is a kludge to force the view to return
-            // coordinates on the proper side of block widgets, since
-            // normalizing the side there, though appropriate for most
-            // coordsAtPos queries, would break selection drawing.
-            let fromCoords = view.coordsAtPos(from, (from == line.to ? -2 : 2));
-            let toCoords = view.coordsAtPos(to, (to == line.from ? 2 : -2));
-            top = Math.min(fromCoords.top, toCoords.top, top);
-            bottom = Math.max(fromCoords.bottom, toCoords.bottom, bottom);
-            if (dir == Direction.LTR)
-                horizontal.push(ltr && fromOpen ? leftSide : fromCoords.left, ltr && toOpen ? rightSide : toCoords.right);
-            else
-                horizontal.push(!ltr && toOpen ? leftSide : toCoords.left, !ltr && fromOpen ? rightSide : fromCoords.right);
-        }
-        let start = from !== null && from !== void 0 ? from : line.from, end = to !== null && to !== void 0 ? to : line.to;
-        // Split the range by visible range and document line
-        for (let r of view.visibleRanges)
-            if (r.to > start && r.from < end) {
-                for (let pos = Math.max(r.from, start), endPos = Math.min(r.to, end);;) {
-                    let docLine = view.state.doc.lineAt(pos);
-                    for (let span of view.bidiSpans(docLine)) {
-                        let spanFrom = span.from + docLine.from, spanTo = span.to + docLine.from;
-                        if (spanFrom >= endPos)
-                            break;
-                        if (spanTo > pos)
-                            addSpan(Math.max(spanFrom, pos), from == null && spanFrom <= start, Math.min(spanTo, endPos), to == null && spanTo >= end, span.dir);
-                    }
-                    pos = docLine.to + 1;
-                    if (pos >= endPos)
-                        break;
-                }
-            }
-        if (horizontal.length == 0)
-            addSpan(start, from == null, end, to == null, view.textDirection);
-        return { top, bottom, horizontal };
-    }
-    function drawForWidget(block, top) {
-        let y = contentRect.top + (top ? block.top : block.bottom);
-        return { top: y, bottom: y, horizontal: [] };
-    }
-}
-function measureCursor(view, cursor, primary) {
-    let pos = view.coordsAtPos(cursor.head, cursor.assoc || 1);
-    if (!pos)
-        return null;
-    let base = getBase(view);
-    return new RectangleMarker(primary ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary", pos.left - base.left, pos.top - base.top, -1, pos.bottom - pos.top);
-}
 
 const setDropCursorPos = /*@__PURE__*/StateEffect.define({
     map(pos, mapping) { return pos == null ? null : mapping.mapPos(pos); }
@@ -9363,9 +9402,60 @@ function highlightActiveLineGutter() {
     return activeLineGutterHighlighter;
 }
 
+const WhitespaceDeco = /*@__PURE__*/new Map();
+function getWhitespaceDeco(space) {
+    let deco = WhitespaceDeco.get(space);
+    if (!deco)
+        WhitespaceDeco.set(space, deco = Decoration.mark({
+            attributes: space === "\t" ? {
+                class: "cm-highlightTab",
+            } : {
+                class: "cm-highlightSpace",
+                "data-display": space.replace(/ /g, "·")
+            }
+        }));
+    return deco;
+}
+function matcher(decorator) {
+    return ViewPlugin.define(view => ({
+        decorations: decorator.createDeco(view),
+        update(u) {
+            this.decorations = decorator.updateDeco(u, this.decorations);
+        },
+    }), {
+        decorations: v => v.decorations
+    });
+}
+const whitespaceHighlighter = /*@__PURE__*/matcher(/*@__PURE__*/new MatchDecorator({
+    regexp: /\t| +/g,
+    decoration: match => getWhitespaceDeco(match[0]),
+    boundary: /\S/,
+}));
+/**
+Returns an extension that highlights whitespace, adding a
+`cm-highlightSpace` class to stretches of spaces, and a
+`cm-highlightTab` class to individual tab characters. By default,
+the former are shown as faint dots, and the latter as arrows.
+*/
+function highlightWhitespace() {
+    return whitespaceHighlighter;
+}
+const trailingHighlighter = /*@__PURE__*/matcher(/*@__PURE__*/new MatchDecorator({
+    regexp: /\s+$/g,
+    decoration: /*@__PURE__*/Decoration.mark({ class: "cm-trailingSpace" }),
+    boundary: /\S/,
+}));
+/**
+Returns an extension that adds a `cm-trailingSpace` class to all
+trailing whitespace.
+*/
+function highlightTrailingWhitespace() {
+    return trailingHighlighter;
+}
+
 /**
 @internal
 */
 const __test = { HeightMap, HeightOracle, MeasuredHeights, QueryType, ChangedRange, computeOrder, moveVisually };
 
-export { BidiSpan, BlockInfo, BlockType, Decoration, Direction, EditorView, GutterMarker, MatchDecorator, RectangleMarker, ViewPlugin, ViewUpdate, WidgetType, __test, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, hoverTooltip, keymap, layer, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };
+export { BidiSpan, BlockInfo, BlockType, Decoration, Direction, EditorView, GutterMarker, MatchDecorator, RectangleMarker, ViewPlugin, ViewUpdate, WidgetType, __test, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, highlightTrailingWhitespace, highlightWhitespace, hoverTooltip, keymap, layer, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };

package/package.json

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