@codemirror/view 0.19.19 → 0.19.23

package/dist/index.cjs

@@ -186,7 +186,7 @@ function scrollRectIntoView(dom, rect, side, center) {
         }
     }
 }
-class DOMSelection {
+class DOMSelectionState {
     constructor() {
         this.anchorNode = null;
         this.anchorOffset = 0;
@@ -197,11 +197,14 @@ class DOMSelection {
         return this.anchorNode == domSel.anchorNode && this.anchorOffset == domSel.anchorOffset &&
             this.focusNode == domSel.focusNode && this.focusOffset == domSel.focusOffset;
     }
-    set(domSel) {
-        this.anchorNode = domSel.anchorNode;
-        this.anchorOffset = domSel.anchorOffset;
-        this.focusNode = domSel.focusNode;
-        this.focusOffset = domSel.focusOffset;
+    setRange(range) {
+        this.set(range.anchorNode, range.anchorOffset, range.focusNode, range.focusOffset);
+    }
+    set(anchorNode, anchorOffset, focusNode, focusOffset) {
+        this.anchorNode = anchorNode;
+        this.anchorOffset = anchorOffset;
+        this.focusNode = focusNode;
+        this.focusOffset = focusOffset;
     }
 }
 let preventScrollSupported = null;
@@ -1909,7 +1912,7 @@ class ViewUpdate {
     Whether the document changed in this update.
     */
     get docChanged() {
-        return this.transactions.some(tr => tr.docChanged);
+        return !this.changes.empty;
     }
     /**
     Whether the selection was explicitly set in this update.
@@ -1943,6 +1946,10 @@ class DocView extends ContentView {
         // we don't mess it up when reading it back it
         this.impreciseAnchor = null;
         this.impreciseHead = null;
+        this.forceSelection = false;
+        // Used by the resize observer to ignore resizes that we caused
+        // ourselves
+        this.lastUpdate = Date.now();
         this.setDOM(view.contentDOM);
         this.children = [new LineView];
         this.children[0].setParent(this);
@@ -1975,21 +1982,19 @@ class DocView extends ContentView {
         // getSelection than the one that it actually shows to the user.
         // This forces a selection update when lines are joined to work
         // around that. Issue #54
-        let forceSelection = (browser.ie || browser.chrome) && !this.compositionDeco.size && update &&
-            update.state.doc.lines != update.startState.doc.lines;
+        if ((browser.ie || browser.chrome) && !this.compositionDeco.size && update &&
+            update.state.doc.lines != update.startState.doc.lines)
+            this.forceSelection = true;
         let prevDeco = this.decorations, deco = this.updateDeco();
         let decoDiff = findChangedDeco(prevDeco, deco, update.changes);
         changedRanges = ChangedRange.extendWithRanges(changedRanges, decoDiff);
-        let pointerSel = update.transactions.some(tr => tr.isUserEvent("select.pointer"));
-        if (this.dirty == 0 /* Not */ && changedRanges.length == 0 &&
-            !(update.flags & 4 /* Viewport */) &&
-            update.state.selection.main.from >= this.view.viewport.from &&
-            update.state.selection.main.to <= this.view.viewport.to) {
-            this.updateSelection(forceSelection, pointerSel);
+        if (this.dirty == 0 /* Not */ && changedRanges.length == 0) {
             return false;
         }
         else {
-            this.updateInner(changedRanges, deco, update.startState.doc.length, forceSelection, pointerSel);
+            this.updateInner(changedRanges, deco, update.startState.doc.length);
+            if (update.transactions.length)
+                this.lastUpdate = Date.now();
             return true;
         }
     }
@@ -1997,13 +2002,16 @@ class DocView extends ContentView {
         if (this.dirty) {
             this.view.observer.ignore(() => this.view.docView.sync());
             this.dirty = 0 /* Not */;
+            this.updateSelection(true);
         }
-        if (sel)
+        else {
             this.updateSelection();
+        }
     }
     // Used both by update and checkLayout do perform the actual DOM
     // update
-    updateInner(changes, deco, oldLength, forceSelection = false, pointerSel = false) {
+    updateInner(changes, deco, oldLength) {
+        this.view.viewState.mustMeasureContent = true;
         this.updateChildren(changes, deco, oldLength);
         let { observer } = this.view;
         observer.ignore(() => {
@@ -2011,7 +2019,7 @@ class DocView extends ContentView {
             // messes with the scroll position during DOM mutation (though
             // no relayout is triggered and I cannot imagine how it can
             // recompute the scroll position without a layout)
-            this.dom.style.height = this.view.viewState.domHeight + "px";
+            this.dom.style.height = this.view.viewState.contentHeight + "px";
             this.dom.style.minWidth = this.minWidth ? this.minWidth + "px" : "";
             // Chrome will sometimes, when DOM mutations occur directly
             // around the selection, get confused and report a different
@@ -2021,8 +2029,7 @@ class DocView extends ContentView {
             this.sync(track);
             this.dirty = 0 /* Not */;
             if (track && (track.written || observer.selectionRange.focusNode != track.node))
-                forceSelection = true;
-            this.updateSelection(forceSelection, pointerSel);
+                this.forceSelection = true;
             this.dom.style.height = "";
         });
         let gaps = [];
@@ -2108,10 +2115,14 @@ class DocView extends ContentView {
             this.replaceChildren(fromI, toI, content);
     }
     // Sync the DOM selection to this.state.selection
-    updateSelection(force = false, fromPointer = false) {
+    updateSelection(mustRead = false, fromPointer = false) {
+        if (mustRead)
+            this.view.observer.readSelectionRange();
         if (!(fromPointer || this.mayControlSelection()) ||
             browser.ios && this.view.inputState.rapidCompositionStart)
             return;
+        let force = this.forceSelection;
+        this.forceSelection = false;
         let main = this.view.state.selection.main;
         // FIXME need to handle the case where the selection falls inside a block range
         let anchor = this.domAtPos(main.anchor);
@@ -2293,7 +2304,7 @@ class DocView extends ContentView {
             let next = i == vs.viewports.length ? null : vs.viewports[i];
             let end = next ? next.from - 1 : this.length;
             if (end > pos) {
-                let height = vs.lineAt(end, 0).bottom - vs.lineAt(pos, 0).top;
+                let height = vs.lineBlockAt(end).bottom - vs.lineBlockAt(pos).top;
                 deco.push(Decoration.replace({ widget: new BlockGapWidget(height), block: true, inclusive: true }).range(pos, end));
             }
             if (!next)
@@ -2900,13 +2911,14 @@ function domPosInText(node, x, y) {
 }
 function posAtCoords(view, { x, y }, precise, bias = -1) {
     var _a;
-    let content = view.contentDOM.getBoundingClientRect(), block;
+    let content = view.contentDOM.getBoundingClientRect(), docTop = content.top + view.viewState.paddingTop;
     let halfLine = view.defaultLineHeight / 2;
+    let block, yOffset = y - docTop;
     for (let bounced = false;;) {
-        block = view.blockAtHeight(y, content.top);
-        if (block.top > y || block.bottom < y) {
-            bias = block.top > y ? -1 : 1;
-            y = Math.min(block.bottom - halfLine, Math.max(block.top + halfLine, y));
+        block = view.elementAtHeight(yOffset);
+        if (block.top > yOffset || block.bottom < yOffset) {
+            bias = block.top > yOffset ? -1 : 1;
+            yOffset = Math.min(block.bottom - halfLine, Math.max(block.top + halfLine, yOffset));
             if (bounced)
                 return precise ? null : 0;
             else
@@ -2914,8 +2926,9 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
         }
         if (block.type == exports.BlockType.Text)
             break;
-        y = bias > 0 ? block.bottom + halfLine : block.top - halfLine;
+        yOffset = bias > 0 ? block.bottom + halfLine : block.top - halfLine;
     }
+    y = docTop + yOffset;
     let lineStart = block.from;
     // Clip x to the viewport sides
     x = Math.max(content.left + 1, Math.min(content.right - 1, x));
@@ -3028,17 +3041,17 @@ function moveVertically(view, start, forward, distance) {
         return state.EditorSelection.cursor(startPos);
     let goal = start.goalColumn, startY;
     let rect = view.contentDOM.getBoundingClientRect();
-    let startCoords = view.coordsAtPos(startPos);
+    let startCoords = view.coordsAtPos(startPos), docTop = view.documentTop;
     if (startCoords) {
         if (goal == null)
             goal = startCoords.left - rect.left;
         startY = dir < 0 ? startCoords.top : startCoords.bottom;
     }
     else {
-        let line = view.viewState.lineAt(startPos, view.dom.getBoundingClientRect().top);
+        let line = view.viewState.lineBlockAt(startPos - docTop);
         if (goal == null)
             goal = Math.min(rect.right - rect.left, view.defaultCharacterWidth * (startPos - line.from));
-        startY = dir < 0 ? line.top : line.bottom;
+        startY = (dir < 0 ? line.top : line.bottom) + docTop;
     }
     let resolvedGoal = rect.left + goal;
     let dist = distance !== null && distance !== void 0 ? distance : (view.defaultLineHeight >> 1);
@@ -3289,7 +3302,7 @@ class MouseSelection {
         this.extend = startEvent.shiftKey;
         this.multiple = view.state.facet(state.EditorState.allowMultipleSelections) && addsSelectionRange(view, startEvent);
         this.dragMove = dragMovesSelection(view, startEvent);
-        this.dragging = isInPrimarySelection(view, startEvent) ? null : false;
+        this.dragging = isInPrimarySelection(view, startEvent) && getClickType(startEvent) == 1 ? null : false;
         // When clicking outside of the selection, immediately apply the
         // effect of starting the selection
         if (this.dragging === false) {
@@ -3510,7 +3523,7 @@ function basicMouseSelection(view, event) {
     let last = start, lastEvent = event;
     return {
         update(update) {
-            if (update.changes) {
+            if (update.docChanged) {
                 if (start)
                     start.pos = update.changes.mapPos(start.pos);
                 startSel = startSel.map(update.changes);
@@ -3774,7 +3787,10 @@ class HeightOracle {
         return lines * this.lineHeight;
     }
     setDoc(doc) { this.doc = doc; return this; }
-    mustRefresh(lineHeights, whiteSpace, direction) {
+    mustRefreshForStyle(whiteSpace, direction) {
+        return (wrappingWhiteSpace.indexOf(whiteSpace) > -1) != this.lineWrapping || this.direction != direction;
+    }
+    mustRefreshForHeights(lineHeights) {
         let newHeight = false;
         for (let i = 0; i < lineHeights.length; i++) {
             let h = lineHeights[i];
@@ -3786,7 +3802,7 @@ class HeightOracle {
                 this.heightSamples[Math.floor(h * 10)] = true;
             }
         }
-        return newHeight || (wrappingWhiteSpace.indexOf(whiteSpace) > -1) != this.lineWrapping || this.direction != direction;
+        return newHeight;
     }
     refresh(whiteSpace, direction, lineHeight, charWidth, lineLength, knownHeights) {
         let lineWrapping = wrappingWhiteSpace.indexOf(whiteSpace) > -1;
@@ -3840,7 +3856,8 @@ class BlockInfo {
     */
     length, 
     /**
-    The top position of the element.
+    The top position of the element (relative to the top of the
+    document).
     */
     top, 
     /**
@@ -3874,6 +3891,12 @@ class BlockInfo {
             .concat(Array.isArray(other.type) ? other.type : [other]);
         return new BlockInfo(this.from, this.length + other.length, this.top, this.height + other.height, detail);
     }
+    /**
+    FIXME remove on next breaking release @internal
+    */
+    moveY(offset) {
+        return !offset ? this : new BlockInfo(this.from, this.length, this.top + offset, this.height, Array.isArray(this.type) ? this.type.map(b => b.moveY(offset)) : this.type);
+    }
 }
 var QueryType;
 (function (QueryType) {
@@ -3881,7 +3904,7 @@ var QueryType;
     QueryType[QueryType["ByHeight"] = 1] = "ByHeight";
     QueryType[QueryType["ByPosNoHeight"] = 2] = "ByPosNoHeight";
 })(QueryType || (QueryType = {}));
-const Epsilon = 1e-4;
+const Epsilon = 1e-3;
 class HeightMap {
     constructor(length, // The number of characters covered
     height, // Height of this part of the document
@@ -4108,22 +4131,30 @@ class HeightMapGap extends HeightMap {
             // can't be widgets or collapsed ranges in those lines, because
             // they would already have been added to the heightmap (gaps
             // only contain plain text).
-            let nodes = [], pos = Math.max(offset, measured.from);
+            let nodes = [], pos = Math.max(offset, measured.from), singleHeight = -1;
+            let wasChanged = oracle.heightChanged;
             if (measured.from > offset)
                 nodes.push(new HeightMapGap(measured.from - offset - 1).updateHeight(oracle, offset));
             while (pos <= end && measured.more) {
                 let len = oracle.doc.lineAt(pos).length;
                 if (nodes.length)
                     nodes.push(null);
-                let line = new HeightMapText(len, measured.heights[measured.index++]);
+                let height = measured.heights[measured.index++];
+                if (singleHeight == -1)
+                    singleHeight = height;
+                else if (Math.abs(height - singleHeight) >= Epsilon)
+                    singleHeight = -2;
+                let line = new HeightMapText(len, height);
                 line.outdated = false;
                 nodes.push(line);
                 pos += len + 1;
             }
             if (pos <= end)
                 nodes.push(null, new HeightMapGap(end - pos).updateHeight(oracle, pos));
-            oracle.heightChanged = true;
-            return HeightMap.of(nodes);
+            let result = HeightMap.of(nodes);
+            oracle.heightChanged = wasChanged || singleHeight < 0 || Math.abs(result.height - this.height) >= Epsilon ||
+                Math.abs(singleHeight - this.lines(oracle.doc, offset).lineHeight) >= Epsilon;
+            return result;
         }
         else if (force || this.outdated) {
             this.setHeight(oracle, oracle.heightForGap(offset, offset + this.length));
@@ -4481,13 +4512,18 @@ class ViewState {
         this.inView = true;
         this.paddingTop = 0;
         this.paddingBottom = 0;
-        this.contentWidth = 0;
+        this.contentDOMWidth = 0;
+        this.contentDOMHeight = 0;
+        this.editorHeight = 0;
         this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
         this.scrollTarget = null;
         // Briefly set to true when printing, to disable viewport limiting
         this.printing = false;
+        // Flag set when editor content was redrawn, so that the next
+        // measure stage knows it must read DOM layout
+        this.mustMeasureContent = true;
         this.visibleRanges = [];
         // Cursor 'assoc' is only significant when the cursor is on a line
         // wrap point, where it must stick to the character that it is
@@ -4500,6 +4536,7 @@ class ViewState {
         this.mustEnforceCursorAssoc = false;
         this.heightMap = HeightMap.empty().applyChanges(state.facet(decorations), text.Text.empty, this.heightOracle.setDoc(state.doc), [new ChangedRange(0, 0, 0, state.doc.length)]);
         this.viewport = this.getViewport(0, null);
+        this.updateViewportLines();
         this.updateForViewport();
         this.lineGaps = this.ensureLineGaps([]);
         this.lineGapDeco = Decoration.set(this.lineGaps.map(gap => gap.draw(false)));
@@ -4510,7 +4547,7 @@ class ViewState {
         for (let i = 0; i <= 1; i++) {
             let pos = i ? main.head : main.anchor;
             if (!viewports.some(({ from, to }) => pos >= from && pos <= to)) {
-                let { from, to } = this.lineAt(pos, 0);
+                let { from, to } = this.lineBlockAt(pos);
                 viewports.push(new Viewport(from, to));
             }
         }
@@ -4518,6 +4555,12 @@ class ViewState {
         this.scaler = this.heightMap.height <= 7000000 /* MaxDOMHeight */ ? IdScaler :
             new BigScaler(this.heightOracle.doc, this.heightMap, this.viewports);
     }
+    updateViewportLines() {
+        this.viewportLines = [];
+        this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.state.doc, 0, 0, block => {
+            this.viewportLines.push(this.scaler.scale == 1 ? block : scaleBlock(block, this.scaler));
+        });
+    }
     update(update, scrollTarget = null) {
         let prev = this.state;
         this.state = update.state;
@@ -4532,7 +4575,11 @@ class ViewState {
         if (scrollTarget && (scrollTarget.range.head < viewport.from || scrollTarget.range.head > viewport.to) ||
             !this.viewportIsAppropriate(viewport))
             viewport = this.getViewport(0, scrollTarget);
+        let updateLines = !update.changes.empty || (update.flags & 2 /* Height */) ||
+            viewport.from != this.viewport.from || viewport.to != this.viewport.to;
         this.viewport = viewport;
+        if (updateLines)
+            this.updateViewportLines();
         this.updateForViewport();
         if (this.lineGaps.length || this.viewport.to - this.viewport.from > 4000 /* DoubleMargin */)
             this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
@@ -4543,13 +4590,17 @@ class ViewState {
             update.state.selection.main.empty && update.state.selection.main.assoc)
             this.mustEnforceCursorAssoc = true;
     }
-    measure(docView, repeated) {
-        let dom = docView.dom, whiteSpace = "", direction = exports.Direction.LTR;
-        let result = 0;
-        if (!repeated) {
+    measure(view) {
+        let dom = view.contentDOM, style = window.getComputedStyle(dom);
+        let oracle = this.heightOracle;
+        let whiteSpace = style.whiteSpace, direction = style.direction == "rtl" ? exports.Direction.RTL : exports.Direction.LTR;
+        let refresh = this.heightOracle.mustRefreshForStyle(whiteSpace, direction);
+        let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
+        let result = 0, bias = 0;
+        if (measureContent) {
+            this.mustMeasureContent = false;
+            this.contentDOMHeight = dom.clientHeight;
             // Vertical padding
-            let style = window.getComputedStyle(dom);
-            whiteSpace = style.whiteSpace, direction = (style.direction == "rtl" ? exports.Direction.RTL : exports.Direction.LTR);
             let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
             if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
                 result |= 8 /* Geometry */;
@@ -4564,35 +4615,42 @@ class ViewState {
         this.inView = this.pixelViewport.bottom > this.pixelViewport.top && this.pixelViewport.right > this.pixelViewport.left;
         if (!this.inView)
             return 0;
-        let lineHeights = docView.measureVisibleLineHeights();
-        let refresh = false, bias = 0, oracle = this.heightOracle;
-        if (!repeated) {
-            let contentWidth = docView.dom.clientWidth;
-            if (oracle.mustRefresh(lineHeights, whiteSpace, direction) ||
-                oracle.lineWrapping && Math.abs(contentWidth - this.contentWidth) > oracle.charWidth) {
-                let { lineHeight, charWidth } = docView.measureTextSize();
+        if (measureContent) {
+            let lineHeights = view.docView.measureVisibleLineHeights();
+            if (oracle.mustRefreshForHeights(lineHeights))
+                refresh = true;
+            let contentWidth = dom.clientWidth;
+            if (refresh || oracle.lineWrapping && Math.abs(contentWidth - this.contentDOMWidth) > oracle.charWidth) {
+                let { lineHeight, charWidth } = view.docView.measureTextSize();
                 refresh = oracle.refresh(whiteSpace, direction, lineHeight, charWidth, contentWidth / charWidth, lineHeights);
                 if (refresh) {
-                    docView.minWidth = 0;
+                    view.docView.minWidth = 0;
                     result |= 8 /* Geometry */;
                 }
             }
-            if (this.contentWidth != contentWidth) {
-                this.contentWidth = contentWidth;
+            if (this.contentDOMWidth != contentWidth) {
+                this.contentDOMWidth = contentWidth;
+                result |= 8 /* Geometry */;
+            }
+            if (this.editorHeight != view.scrollDOM.clientHeight) {
+                this.editorHeight = view.scrollDOM.clientHeight;
                 result |= 8 /* Geometry */;
             }
             if (dTop > 0 && dBottom > 0)
                 bias = Math.max(dTop, dBottom);
             else if (dTop < 0 && dBottom < 0)
                 bias = Math.min(dTop, dBottom);
-        }
-        oracle.heightChanged = false;
-        this.heightMap = this.heightMap.updateHeight(oracle, 0, refresh, new MeasuredHeights(this.viewport.from, lineHeights));
-        if (oracle.heightChanged)
-            result |= 2 /* Height */;
-        if (!this.viewportIsAppropriate(this.viewport, bias) ||
-            this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from || this.scrollTarget.range.head > this.viewport.to))
+            oracle.heightChanged = false;
+            this.heightMap = this.heightMap.updateHeight(oracle, 0, refresh, new MeasuredHeights(this.viewport.from, lineHeights));
+            if (oracle.heightChanged)
+                result |= 2 /* Height */;
+        }
+        let viewportChange = !this.viewportIsAppropriate(this.viewport, bias) ||
+            this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from || this.scrollTarget.range.head > this.viewport.to);
+        if (viewportChange)
             this.viewport = this.getViewport(bias, this.scrollTarget);
+        if ((result & 2 /* Height */) || viewportChange)
+            this.updateViewportLines();
         this.updateForViewport();
         if (this.lineGaps.length || this.viewport.to - this.viewport.from > 4000 /* DoubleMargin */)
             this.updateLineGaps(this.ensureLineGaps(refresh ? [] : this.lineGaps));
@@ -4603,12 +4661,12 @@ class ViewState {
             // to a line end is going to trigger a layout anyway, so it
             // can't be a pure write. It should be rare that it does any
             // writing.
-            docView.enforceCursorAssoc();
+            view.docView.enforceCursorAssoc();
         }
         return result;
     }
-    get visibleTop() { return this.scaler.fromDOM(this.pixelViewport.top, 0); }
-    get visibleBottom() { return this.scaler.fromDOM(this.pixelViewport.bottom, 0); }
+    get visibleTop() { return this.scaler.fromDOM(this.pixelViewport.top); }
+    get visibleBottom() { return this.scaler.fromDOM(this.pixelViewport.bottom); }
     getViewport(bias, scrollTarget) {
         // This will divide VP.Margin between the top and the
         // bottom, depending on the bias (the change in viewport position
@@ -4668,12 +4726,12 @@ class ViewState {
         // This won't work at all in predominantly right-to-left text.
         if (this.heightOracle.direction != exports.Direction.LTR)
             return gaps;
-        this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.state.doc, 0, 0, line => {
+        for (let line of this.viewportLines) {
             if (line.length < 4000 /* DoubleMargin */)
-                return;
+                continue;
             let structure = lineStructure(line.from, line.to, this.state);
             if (structure.total < 4000 /* DoubleMargin */)
-                return;
+                continue;
             let viewFrom, viewTo;
             if (this.heightOracle.lineWrapping) {
                 let marginHeight = (2000 /* Margin */ / this.heightOracle.lineLength) * this.heightOracle.lineHeight;
@@ -4703,7 +4761,7 @@ class ViewState {
                         Math.abs(gap.from - from) < 1000 /* HalfMargin */ && Math.abs(gap.to - to) < 1000 /* HalfMargin */) ||
                         new LineGap(from, to, this.gapSize(line, from, to, structure)));
                 }
-        });
+        }
         return gaps;
     }
     gapSize(line, from, to, structure) {
@@ -4735,27 +4793,18 @@ class ViewState {
         this.visibleRanges = ranges;
         return changed ? 4 /* Viewport */ : 0;
     }
-    lineAt(pos, editorTop) {
-        editorTop += this.paddingTop;
-        return scaleBlock(this.heightMap.lineAt(pos, QueryType.ByPos, this.state.doc, editorTop, 0), this.scaler, editorTop);
-    }
-    lineAtHeight(height, editorTop) {
-        editorTop += this.paddingTop;
-        return scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height, editorTop), QueryType.ByHeight, this.state.doc, editorTop, 0), this.scaler, editorTop);
+    lineBlockAt(pos) {
+        return (pos >= this.viewport.from && pos <= this.viewport.to && this.viewportLines.find(b => b.from <= pos && b.to <= pos)) ||
+            scaleBlock(this.heightMap.lineAt(pos, QueryType.ByPos, this.state.doc, 0, 0), this.scaler);
     }
-    blockAtHeight(height, editorTop) {
-        editorTop += this.paddingTop;
-        return scaleBlock(this.heightMap.blockAt(this.scaler.fromDOM(height, editorTop), this.state.doc, editorTop, 0), this.scaler, editorTop);
+    lineBlockAtHeight(height) {
+        return scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType.ByHeight, this.state.doc, 0, 0), this.scaler);
     }
-    forEachLine(from, to, f, editorTop) {
-        editorTop += this.paddingTop;
-        return this.heightMap.forEachLine(from, to, this.state.doc, editorTop, 0, this.scaler.scale == 1 ? f : b => f(scaleBlock(b, this.scaler, editorTop)));
+    elementAtHeight(height) {
+        return scaleBlock(this.heightMap.blockAt(this.scaler.fromDOM(height), this.state.doc, 0, 0), this.scaler);
     }
     get contentHeight() {
-        return this.domHeight + this.paddingTop + this.paddingBottom;
-    }
-    get domHeight() {
-        return this.scaler.toDOM(this.heightMap.height, this.paddingTop);
+        return this.scaler.toDOM(this.heightMap.height) + this.paddingTop + this.paddingBottom;
     }
 }
 class Viewport {
@@ -4852,36 +4901,34 @@ class BigScaler {
             base = obj.bottom;
         }
     }
-    toDOM(n, top) {
-        n -= top;
+    toDOM(n) {
         for (let i = 0, base = 0, domBase = 0;; i++) {
             let vp = i < this.viewports.length ? this.viewports[i] : null;
             if (!vp || n < vp.top)
-                return domBase + (n - base) * this.scale + top;
+                return domBase + (n - base) * this.scale;
             if (n <= vp.bottom)
-                return vp.domTop + (n - vp.top) + top;
+                return vp.domTop + (n - vp.top);
             base = vp.bottom;
             domBase = vp.domBottom;
         }
     }
-    fromDOM(n, top) {
-        n -= top;
+    fromDOM(n) {
         for (let i = 0, base = 0, domBase = 0;; i++) {
             let vp = i < this.viewports.length ? this.viewports[i] : null;
             if (!vp || n < vp.domTop)
-                return base + (n - domBase) / this.scale + top;
+                return base + (n - domBase) / this.scale;
             if (n <= vp.domBottom)
-                return vp.top + (n - vp.domTop) + top;
+                return vp.top + (n - vp.domTop);
             base = vp.bottom;
             domBase = vp.domBottom;
         }
     }
 }
-function scaleBlock(block, scaler, top) {
+function scaleBlock(block, scaler) {
     if (scaler.scale == 1)
         return block;
-    let bTop = scaler.toDOM(block.top, top), bBottom = scaler.toDOM(block.bottom, top);
-    return new BlockInfo(block.from, block.length, bTop, bBottom - bTop, Array.isArray(block.type) ? block.type.map(b => scaleBlock(b, scaler, top)) : block.type);
+    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);
 }
 
 const theme = state.Facet.define({ combine: strs => strs.join(" ") });
@@ -5066,24 +5113,30 @@ class DOMObserver {
         this.onChange = onChange;
         this.onScrollChanged = onScrollChanged;
         this.active = false;
-        this.ignoreSelection = new DOMSelection;
+        // The known selection. Kept in our own object, as opposed to just
+        // directly accessing the selection because:
+        //  - Safari doesn't report the right selection in shadow DOM
+        //  - Reading from the selection forces a DOM layout
+        //  - This way, we can ignore selectionchange events if we have
+        //    already seen the 'new' selection
+        this.selectionRange = new DOMSelectionState;
+        // Set when a selection change is detected, cleared on flush
+        this.selectionChanged = false;
         this.delayedFlush = -1;
+        this.resizeTimeout = -1;
         this.queue = [];
-        this.lastFlush = 0;
         this.scrollTargets = [];
         this.intersection = null;
+        this.resize = null;
         this.intersecting = false;
         this.gapIntersection = null;
         this.gaps = [];
-        // Used to work around a Safari Selection/shadow DOM bug (#414)
-        this._selectionRange = null;
         // Timeout for scheduling check of the parents that need scroll handlers
         this.parentCheck = -1;
         this.dom = view.contentDOM;
         this.observer = new MutationObserver(mutations => {
             for (let mut of mutations)
                 this.queue.push(mut);
-            this._selectionRange = null;
             // IE11 will sometimes (on typing over a selection or
             // backspacing out a single character text node) call the
             // observer callback before actually updating the DOM.
@@ -5108,6 +5161,16 @@ class DOMObserver {
                 this.flushSoon();
             };
         this.onSelectionChange = this.onSelectionChange.bind(this);
+        if (typeof ResizeObserver == "function") {
+            this.resize = new ResizeObserver(() => {
+                if (this.view.docView.lastUpdate < Date.now() - 75 && this.resizeTimeout < 0)
+                    this.resizeTimeout = setTimeout(() => {
+                        this.resizeTimeout = -1;
+                        this.view.requestMeasure();
+                    }, 50);
+            });
+            this.resize.observe(view.scrollDOM);
+        }
         this.start();
         this.onScroll = this.onScroll.bind(this);
         window.addEventListener("scroll", this.onScroll);
@@ -5128,10 +5191,12 @@ class DOMObserver {
             }, {});
         }
         this.listenForScroll();
+        this.readSelectionRange();
+        this.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
     }
     onScroll(e) {
         if (this.intersecting)
-            this.flush();
+            this.flush(false);
         this.onScrollChanged(e);
     }
     updateGaps(gaps) {
@@ -5143,8 +5208,8 @@ class DOMObserver {
         }
     }
     onSelectionChange(event) {
-        if (this.lastFlush < Date.now() - 50)
-            this._selectionRange = null;
+        if (!this.readSelectionRange())
+            return;
         let { view } = this, sel = this.selectionRange;
         if (view.state.facet(editable) ? view.root.activeElement != this.dom : !hasSelection(view.dom, sel))
             return;
@@ -5159,24 +5224,22 @@ class DOMObserver {
             sel.focusNode && isEquivalentPosition(sel.focusNode, sel.focusOffset, sel.anchorNode, sel.anchorOffset))
             this.flushSoon();
         else
-            this.flush();
-    }
-    get selectionRange() {
-        if (!this._selectionRange) {
-            let { root } = this.view, sel = getSelection(root);
-            // The Selection object is broken in shadow roots in Safari. See
-            // https://github.com/codemirror/codemirror.next/issues/414
-            if (browser.safari && root.nodeType == 11 && deepActiveElement() == this.view.contentDOM)
-                sel = safariSelectionRangeHack(this.view) || sel;
-            this._selectionRange = sel;
-        }
-        return this._selectionRange;
+            this.flush(false);
+    }
+    readSelectionRange() {
+        let { root } = this.view, domSel = getSelection(root);
+        // The Selection object is broken in shadow roots in Safari. See
+        // https://github.com/codemirror/codemirror.next/issues/414
+        let range = browser.safari && root.nodeType == 11 && deepActiveElement() == this.view.contentDOM &&
+            safariSelectionRangeHack(this.view) || domSel;
+        if (this.selectionRange.eq(range))
+            return false;
+        this.selectionRange.setRange(range);
+        return this.selectionChanged = true;
     }
     setSelectionRange(anchor, head) {
-        var _a;
-        if (!((_a = this._selectionRange) === null || _a === void 0 ? void 0 : _a.type))
-            this._selectionRange = { anchorNode: anchor.node, anchorOffset: anchor.offset,
-                focusNode: head.node, focusOffset: head.offset };
+        this.selectionRange.set(anchor.node, anchor.offset, head.node, head.offset);
+        this.selectionChanged = false;
     }
     listenForScroll() {
         this.parentCheck = -1;
@@ -5223,7 +5286,6 @@ class DOMObserver {
         if (this.active)
             return;
         this.observer.observe(this.dom, observeOptions);
-        this.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
         if (useCharData)
             this.dom.addEventListener("DOMCharacterDataModified", this.onCharData);
         this.active = true;
@@ -5233,18 +5295,14 @@ class DOMObserver {
             return;
         this.active = false;
         this.observer.disconnect();
-        this.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
         if (useCharData)
             this.dom.removeEventListener("DOMCharacterDataModified", this.onCharData);
     }
-    clearSelection() {
-        this.ignoreSelection.set(this.selectionRange);
-    }
     // Throw away any pending changes
     clear() {
         this.observer.takeRecords();
         this.queue.length = 0;
-        this.clearSelection();
+        this.selectionChanged = false;
     }
     flushSoon() {
         if (this.delayedFlush < 0)
@@ -5281,24 +5339,24 @@ class DOMObserver {
         return { from, to, typeOver };
     }
     // Apply pending changes, if any
-    flush() {
+    flush(readSelection = true) {
+        if (readSelection)
+            this.readSelectionRange();
         // Completely hold off flushing when pending keys are set—the code
         // managing those will make sure processRecords is called and the
         // view is resynchronized after
         if (this.delayedFlush >= 0 || this.view.inputState.pendingAndroidKey)
             return;
-        this.lastFlush = Date.now();
         let { from, to, typeOver } = this.processRecords();
-        let selection = this.selectionRange;
-        let newSel = !this.ignoreSelection.eq(selection) && hasSelection(this.dom, selection);
+        let newSel = this.selectionChanged && hasSelection(this.dom, this.selectionRange);
         if (from < 0 && !newSel)
             return;
+        this.selectionChanged = false;
         let startState = this.view.state;
         this.onChange(from, to, typeOver);
         // The view wasn't updated
         if (this.view.state == startState)
             this.view.docView.reset(newSel);
-        this.clearSelection();
     }
     readMutation(rec) {
         let cView = this.view.docView.nearest(rec.target);
@@ -5321,15 +5379,16 @@ class DOMObserver {
         }
     }
     destroy() {
+        var _a, _b, _c;
         this.stop();
-        if (this.intersection)
-            this.intersection.disconnect();
-        if (this.gapIntersection)
-            this.gapIntersection.disconnect();
+        (_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();
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
         clearTimeout(this.parentCheck);
+        clearTimeout(this.resizeTimeout);
     }
 }
 function findChild(cView, dom, dir) {
@@ -5342,6 +5401,7 @@ function findChild(cView, dom, dir) {
     }
     return null;
 }
+// Used to work around a Safari Selection/shadow DOM bug (#414)
 function safariSelectionRangeHack(view) {
     let found = null;
     // Because Safari (at least in 2018-2021) doesn't provide regular
@@ -5761,6 +5821,7 @@ class EditorView {
                 this.mountStyles();
             this.updateAttrs();
             this.showAnnouncements(transactions);
+            this.docView.updateSelection(redrawn, transactions.some(tr => tr.isUserEvent("select.pointer")));
         }
         finally {
             this.updateState = 0 /* Idle */;
@@ -5838,7 +5899,7 @@ class EditorView {
             return;
         if (this.measureScheduled > -1)
             cancelAnimationFrame(this.measureScheduled);
-        this.measureScheduled = -1; // Prevent requestMeasure calls from scheduling another animation frame
+        this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
             this.observer.flush();
         let updated = null;
@@ -5846,11 +5907,11 @@ class EditorView {
             for (let i = 0;; i++) {
                 this.updateState = 1 /* Measuring */;
                 let oldViewport = this.viewport;
-                let changed = this.viewState.measure(this.docView, i > 0);
+                let changed = this.viewState.measure(this);
                 if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
                 if (i > 5) {
-                    console.warn("Viewport failed to stabilize");
+                    console.warn(this.measureRequests.length ? "Measure loop restarted more than 5 times" : "Viewport failed to stabilize");
                     break;
                 }
                 let measuring = [];
@@ -5866,7 +5927,7 @@ class EditorView {
                         return BadMeasure;
                     }
                 });
-                let update = new ViewUpdate(this, this.state);
+                let update = new ViewUpdate(this, this.state), redrawn = false;
                 update.flags |= changed;
                 if (!updated)
                     updated = update;
@@ -5876,14 +5937,15 @@ class EditorView {
                 if (!update.empty) {
                     this.updatePlugins(update);
                     this.inputState.update(update);
+                    this.updateAttrs();
+                    redrawn = this.docView.update(update);
                 }
-                this.updateAttrs();
-                if (changed)
-                    this.docView.update(update);
                 for (let i = 0; i < measuring.length; i++)
                     if (measured[i] != BadMeasure) {
                         try {
-                            measuring[i].write(measured[i], this);
+                            let m = measuring[i];
+                            if (m.write)
+                                m.write(measured[i], this);
                         }
                         catch (e) {
                             logException(this.state, e);
@@ -5893,14 +5955,16 @@ class EditorView {
                     this.docView.scrollIntoView(this.viewState.scrollTarget);
                     this.viewState.scrollTarget = null;
                 }
+                if (redrawn)
+                    this.docView.updateSelection(true);
                 if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to && this.measureRequests.length == 0)
                     break;
             }
         }
         finally {
             this.updateState = 0 /* Idle */;
+            this.measureScheduled = -1;
         }
-        this.measureScheduled = -1;
         if (updated && !updated.empty)
             for (let listener of this.state.facet(updateListener))
                 listener(updated);
@@ -5917,8 +5981,6 @@ class EditorView {
         let editorAttrs = combineAttrs(this.state.facet(editorAttributes), {
             class: "cm-editor" + (this.hasFocus ? " cm-focused " : " ") + this.themeClasses
         });
-        updateAttrs(this.dom, this.editorAttrs, editorAttrs);
-        this.editorAttrs = editorAttrs;
         let contentAttrs = {
             spellcheck: "false",
             autocorrect: "off",
@@ -5933,7 +5995,11 @@ class EditorView {
         if (this.state.readOnly)
             contentAttrs["aria-readonly"] = "true";
         combineAttrs(this.state.facet(contentAttributes), contentAttrs);
-        updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
+        this.observer.ignore(() => {
+            updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
+            updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+        });
+        this.editorAttrs = editorAttrs;
         this.contentAttrs = contentAttrs;
     }
     showAnnouncements(trs) {
@@ -6003,6 +6069,20 @@ class EditorView {
         return null;
     }
     /**
+    The top position of the document, in screen coordinates. This
+    may be negative when the editor is scrolled down. Points
+    directly to the top of the first line, not above the padding.
+    */
+    get documentTop() {
+        return this.contentDOM.getBoundingClientRect().top + this.viewState.paddingTop;
+    }
+    /**
+    Reports the padding above and below the document.
+    */
+    get documentPadding() {
+        return { top: this.viewState.paddingTop, bottom: this.viewState.paddingBottom };
+    }
+    /**
     Find the line or block widget at the given vertical position.
     
     By default, this position is interpreted as a screen position,
@@ -6012,10 +6092,21 @@ class EditorView {
     position, or a precomputed document top
     (`view.contentDOM.getBoundingClientRect().top`) to limit layout
     queries.
+    
+    *Deprecated: use `blockAtHeight` instead.*
     */
     blockAtHeight(height, docTop) {
+        let top = ensureTop(docTop, this);
+        return this.elementAtHeight(height - top).moveY(top);
+    }
+    /**
+    Find the text line or block widget at the given vertical
+    position (which is interpreted as relative to the [top of the
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)
+    */
+    elementAtHeight(height) {
         this.readMeasured();
-        return this.viewState.blockAtHeight(height, ensureTop(docTop, this.contentDOM));
+        return this.viewState.elementAtHeight(height);
     }
     /**
     Find information for the visual line (see
@@ -6027,20 +6118,43 @@ class EditorView {
     Defaults to treating `height` as a screen position. See
     [`blockAtHeight`](https://codemirror.net/6/docs/ref/#view.EditorView.blockAtHeight) for the
     interpretation of the `docTop` parameter.
+    
+    *Deprecated: use `lineBlockAtHeight` instead.*
     */
     visualLineAtHeight(height, docTop) {
+        let top = ensureTop(docTop, this);
+        return this.lineBlockAtHeight(height - top).moveY(top);
+    }
+    /**
+    Find the line block (see
+    [`lineBlockAt`](https://codemirror.net/6/docs/ref/#view.EditorView.lineBlockAt) at the given
+    height.
+    */
+    lineBlockAtHeight(height) {
         this.readMeasured();
-        return this.viewState.lineAtHeight(height, ensureTop(docTop, this.contentDOM));
+        return this.viewState.lineBlockAtHeight(height);
     }
     /**
     Iterate over the height information of the visual lines in the
     viewport. The heights of lines are reported relative to the
     given document top, which defaults to the screen position of the
     document (forcing a layout).
+    
+    *Deprecated: use `viewportLineBlocks` instead.*
     */
     viewportLines(f, docTop) {
-        let { from, to } = this.viewport;
-        this.viewState.forEachLine(from, to, f, ensureTop(docTop, this.contentDOM));
+        let top = ensureTop(docTop, this);
+        for (let line of this.viewportLineBlocks)
+            f(line.moveY(top));
+    }
+    /**
+    Get the extent and vertical position of all [line
+    blocks](https://codemirror.net/6/docs/ref/#view.EditorView.lineBlockAt) in the viewport. Positions
+    are relative to the [top of the
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop);
+    */
+    get viewportLineBlocks() {
+        return this.viewState.viewportLines;
     }
     /**
     Find the extent and height of the visual line (a range delimited
@@ -6051,9 +6165,22 @@ class EditorView {
     argument, which defaults to 0 for this method. You can pass
     `view.contentDOM.getBoundingClientRect().top` here to get screen
     coordinates.
+    
+    *Deprecated: use `lineBlockAt` instead.*
     */
     visualLineAt(pos, docTop = 0) {
-        return this.viewState.lineAt(pos, docTop);
+        return this.lineBlockAt(pos).moveY(docTop + this.viewState.paddingTop);
+    }
+    /**
+    Find the line block around the given document position. A line
+    block is a range delimited on both sides by either a
+    non-[hidden](https://codemirror.net/6/docs/ref/#view.Decoration^range) line breaks, or the
+    start/end of the document. It will usually just hold a line of
+    text, but may be broken into multiple textblocks by block
+    widgets.
+    */
+    lineBlockAt(pos) {
+        return this.viewState.lineBlockAt(pos);
     }
     /**
     The editor's total content height.
@@ -6386,8 +6513,9 @@ search match).
 EditorView.announce = state.StateEffect.define();
 // Maximum line length for which we compute accurate bidi info
 const MaxBidiLine = 4096;
-function ensureTop(given, dom) {
-    return given == null ? dom.getBoundingClientRect().top : given;
+// FIXME remove this and its callers on next breaking release
+function ensureTop(given, view) {
+    return (given == null ? view.contentDOM.getBoundingClientRect().top : given) + view.viewState.paddingTop;
 }
 let resizeDebounce = -1;
 function ensureGlobalHandler() {
@@ -6738,7 +6866,7 @@ function wrappedLine(view, pos, inside) {
         type: exports.BlockType.Text };
 }
 function blockAt(view, pos) {
-    let line = view.visualLineAt(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))
@@ -7129,7 +7257,7 @@ const activeLineHighlighter = ViewPlugin.fromClass(class {
         for (let r of view.state.selection.ranges) {
             if (!r.empty)
                 return Decoration.none;
-            let line = view.visualLineAt(r.head);
+            let line = view.lineBlockAt(r.head);
             if (line.from > lastLineStart) {
                 deco.push(lineDeco.range(line.from));
                 lastLineStart = line.from;