@codemirror/view 6.6.0 → 6.7.1

package/dist/index.cjs

@@ -191,6 +191,26 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
         }
     }
 }
+function scrollableParent(dom) {
+    let doc = dom.ownerDocument;
+    for (let cur = dom.parentNode; cur;) {
+        if (cur == doc.body) {
+            break;
+        }
+        else if (cur.nodeType == 1) {
+            if (cur.scrollHeight > cur.clientHeight || cur.scrollWidth > cur.clientWidth)
+                return cur;
+            cur = cur.assignedSlot || cur.parentNode;
+        }
+        else if (cur.nodeType == 11) {
+            cur = cur.host;
+        }
+        else {
+            break;
+        }
+    }
+    return null;
+}
 class DOMSelectionState {
     constructor() {
         this.anchorNode = null;
@@ -1603,6 +1623,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 +1646,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 +1679,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 +1723,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 +1734,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
@@ -3387,22 +3411,30 @@ class InputState {
         this.compositionFirstChange = null;
         this.compositionEndedAt = 0;
         this.mouseSelection = null;
+        let handleEvent = (handler, event) => {
+            if (this.ignoreDuringComposition(event))
+                return;
+            if (event.type == "keydown" && this.keydown(view, event))
+                return;
+            if (this.mustFlushObserver(event))
+                view.observer.forceFlush();
+            if (this.runCustomHandlers(event.type, view, event))
+                event.preventDefault();
+            else
+                handler(view, event);
+        };
         for (let type in handlers) {
             let handler = handlers[type];
-            view.contentDOM.addEventListener(type, (event) => {
-                if (!eventBelongsToEditor(view, event) || this.ignoreDuringComposition(event))
-                    return;
-                if (type == "keydown" && this.keydown(view, event))
-                    return;
-                if (this.mustFlushObserver(event))
-                    view.observer.forceFlush();
-                if (this.runCustomHandlers(type, view, event))
-                    event.preventDefault();
-                else
-                    handler(view, event);
+            view.contentDOM.addEventListener(type, event => {
+                if (eventBelongsToEditor(view, event))
+                    handleEvent(handler, event);
             }, handlerOptions[type]);
             this.registeredEvents.push(type);
         }
+        view.scrollDOM.addEventListener("mousedown", (event) => {
+            if (event.target == view.scrollDOM)
+                handleEvent(handlers.mousedown, event);
+        });
         if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
             // On Chrome 102, viewport updates somehow stop wheel-based
             // scrolling. Turning off pointer events during the scroll seems
@@ -3559,12 +3591,18 @@ const PendingKeys = [
 const EmacsyPendingKeys = "dthko";
 // Key codes for modifier keys
 const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
+function dragScrollSpeed(dist) {
+    return dist * 0.7 + 8;
+}
 class MouseSelection {
     constructor(view, startEvent, style, mustSelect) {
         this.view = view;
         this.style = style;
         this.mustSelect = mustSelect;
+        this.scrollSpeed = { x: 0, y: 0 };
+        this.scrolling = -1;
         this.lastEvent = startEvent;
+        this.scrollParent = scrollableParent(view.contentDOM);
         let doc = view.contentDOM.ownerDocument;
         doc.addEventListener("mousemove", this.move = this.move.bind(this));
         doc.addEventListener("mouseup", this.up = this.up.bind(this));
@@ -3580,11 +3618,24 @@ class MouseSelection {
         }
     }
     move(event) {
+        var _a;
         if (event.buttons == 0)
             return this.destroy();
         if (this.dragging !== false)
             return;
         this.select(this.lastEvent = event);
+        let sx = 0, sy = 0;
+        let rect = ((_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect())
+            || { left: 0, top: 0, right: this.view.win.innerWidth, bottom: this.view.win.innerHeight };
+        if (event.clientX <= rect.left)
+            sx = -dragScrollSpeed(rect.left - event.clientX);
+        else if (event.clientX >= rect.right)
+            sx = dragScrollSpeed(event.clientX - rect.right);
+        if (event.clientY <= rect.top)
+            sy = -dragScrollSpeed(rect.top - event.clientY);
+        else if (event.clientY >= rect.bottom)
+            sy = dragScrollSpeed(event.clientY - rect.bottom);
+        this.setScrollSpeed(sx, sy);
     }
     up(event) {
         if (this.dragging == null)
@@ -3594,19 +3645,41 @@ class MouseSelection {
         this.destroy();
     }
     destroy() {
+        this.setScrollSpeed(0, 0);
         let doc = this.view.contentDOM.ownerDocument;
         doc.removeEventListener("mousemove", this.move);
         doc.removeEventListener("mouseup", this.up);
         this.view.inputState.mouseSelection = null;
     }
+    setScrollSpeed(sx, sy) {
+        this.scrollSpeed = { x: sx, y: sy };
+        if (sx || sy) {
+            if (this.scrolling < 0)
+                this.scrolling = setInterval(() => this.scroll(), 50);
+        }
+        else if (this.scrolling > -1) {
+            clearInterval(this.scrolling);
+            this.scrolling = -1;
+        }
+    }
+    scroll() {
+        if (this.scrollParent) {
+            this.scrollParent.scrollLeft += this.scrollSpeed.x;
+            this.scrollParent.scrollTop += this.scrollSpeed.y;
+        }
+        else {
+            this.view.win.scrollBy(this.scrollSpeed.x, this.scrollSpeed.y);
+        }
+        if (this.dragging === false)
+            this.select(this.lastEvent);
+    }
     select(event) {
         let selection = this.style.get(event, this.extend, this.multiple);
         if (this.mustSelect || !selection.eq(this.view.state.selection) ||
             selection.main.assoc != this.view.state.selection.main.assoc)
             this.view.dispatch({
                 selection,
-                userEvent: "select.pointer",
-                scrollIntoView: true
+                userEvent: "select.pointer"
             });
         this.mustSelect = false;
     }
@@ -3797,23 +3870,15 @@ function getClickType(event) {
 function basicMouseSelection(view, event) {
     let start = queryPos(view, event), type = getClickType(event);
     let startSel = view.state.selection;
-    let last = start, lastEvent = event;
     return {
         update(update) {
             if (update.docChanged) {
                 start.pos = update.changes.mapPos(start.pos);
                 startSel = startSel.map(update.changes);
-                lastEvent = null;
             }
         },
         get(event, extend, multiple) {
-            let cur;
-            if (lastEvent && event.clientX == lastEvent.clientX && event.clientY == lastEvent.clientY)
-                cur = last;
-            else {
-                cur = last = queryPos(view, event);
-                lastEvent = event;
-            }
+            let cur = queryPos(view, event);
             let range = rangeForClick(view, cur.pos, cur.bias, type);
             if (start.pos != cur.pos && !extend) {
                 let startRange = rangeForClick(view, start.pos, start.bias, type);
@@ -5291,7 +5356,6 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
         margin: 0,
         flexGrow: 2,
         flexShrink: 0,
-        minHeight: "100%",
         display: "block",
         whiteSpace: "pre",
         wordWrap: "normal",
@@ -5438,6 +5502,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 +5819,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 +5858,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 +6184,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 +6288,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 +7379,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 +7404,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 +7412,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 +7594,8 @@ class LayerView {
         }
     }
     destroy() {
+        if (this.layer.destroy)
+            this.layer.destroy(this.dom, this.view);
         this.dom.remove();
     }
 }
@@ -7446,13 +7655,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 +7687,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 +7704,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 +9470,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 +9550,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;