@codemirror/view 6.1.2 → 6.2.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 6.2.0 (2022-08-05)
+
+### Bug fixes
+
+Fix a bug where `posAtCoords` would return the wrong results for positions to the right of wrapped lines.
+
+### New features
+
+The new `EditorView.setRoot` method can be used when an editor view is moved to a new document or shadow root.
+
+## 6.1.4 (2022-08-04)
+
+### Bug fixes
+
+Make selection-restoration on focus more reliable.
+
+## 6.1.3 (2022-08-03)
+
+### Bug fixes
+
+Fix a bug where a document that contains only non-printing characters would lead to bogus text measurements (and, from those, to crashing).
+
+Make sure differences between estimated and actual block heights don't cause visible scroll glitches.
+
 ## 6.1.2 (2022-07-27)
 
 ### Bug fixes

package/dist/index.cjs

@@ -1473,15 +1473,17 @@ class LineView extends ContentView {
             return null;
         let totalWidth = 0;
         for (let child of this.children) {
-            if (!(child instanceof TextView))
+            if (!(child instanceof TextView) || /[^ -~]/.test(child.text))
                 return null;
             let rects = clientRectsFor(child.dom);
             if (rects.length != 1)
                 return null;
             totalWidth += rects[0].width;
         }
-        return { lineHeight: this.dom.getBoundingClientRect().height,
-            charWidth: totalWidth / this.length };
+        return !totalWidth ? null : {
+            lineHeight: this.dom.getBoundingClientRect().height,
+            charWidth: totalWidth / this.length
+        };
     }
     coordsAt(pos, side) {
         return coordsInChildren(this, pos, side);
@@ -2481,7 +2483,6 @@ class DocView extends ContentView {
         this.updateDeco();
         this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
     }
-    get root() { return this.view.root; }
     get editorView() { return this.view; }
     get length() { return this.view.state.doc.length; }
     // Update the document view to a given state. scrollIntoView can be
@@ -2604,7 +2605,7 @@ class DocView extends ContentView {
                     this.dom.blur();
                     this.dom.focus({ preventScroll: true });
                 }
-                let rawSel = getSelection(this.root);
+                let rawSel = getSelection(this.view.root);
                 if (!rawSel) ;
                 else if (main.empty) {
                     // Work around https://bugzilla.mozilla.org/show_bug.cgi?id=1612076
@@ -2647,7 +2648,7 @@ class DocView extends ContentView {
         if (this.compositionDeco.size)
             return;
         let cursor = this.view.state.selection.main;
-        let sel = getSelection(this.root);
+        let sel = getSelection(this.view.root);
         if (!sel || !cursor.empty || !cursor.assoc || !sel.modify)
             return;
         let line = LineView.find(this, cursor.head);
@@ -2664,7 +2665,7 @@ class DocView extends ContentView {
         sel.modify("move", cursor.assoc < 0 ? "forward" : "backward", "lineboundary");
     }
     mayControlSelection() {
-        let active = this.root.activeElement;
+        let active = this.view.root.activeElement;
         return active == this.dom ||
             hasSelection(this.dom, this.view.observer.selectionRange) && !(active && this.dom.contains(active));
     }
@@ -3017,7 +3018,7 @@ function upBot(rect, bottom) {
     return bottom > rect.bottom ? { top: rect.top, left: rect.left, right: rect.right, bottom } : rect;
 }
 function domPosAtCoords(parent, x, y) {
-    let closest, closestRect, closestX, closestY;
+    let closest, closestRect, closestX, closestY, closestOverlap = false;
     let above, below, aboveRect, belowRect;
     for (let child = parent.firstChild; child; child = child.nextSibling) {
         let rects = clientRectsFor(child);
@@ -3033,6 +3034,7 @@ function domPosAtCoords(parent, x, y) {
                 closestRect = rect;
                 closestX = dx;
                 closestY = dy;
+                closestOverlap = !dx || (dx > 0 ? i < rects.length - 1 : i > 0);
             }
             if (dx == 0) {
                 if (y > rect.bottom && (!aboveRect || aboveRect.bottom < rect.bottom)) {
@@ -3065,7 +3067,7 @@ function domPosAtCoords(parent, x, y) {
     let clipX = Math.max(closestRect.left, Math.min(closestRect.right, x));
     if (closest.nodeType == 3)
         return domPosInText(closest, clipX, y);
-    if (!closestX && closest.contentEditable == "true")
+    if (closestOverlap && closest.contentEditable != "false")
         return domPosAtCoords(closest, clipX, y);
     let offset = Array.prototype.indexOf.call(parent.childNodes, closest) +
         (x >= (closestRect.left + closestRect.right) / 2 ? 1 : 0);
@@ -3162,7 +3164,8 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
             let range = doc.caretRangeFromPoint(x, y);
             if (range) {
                 ({ startContainer: node, startOffset: offset } = range);
-                if (browser.safari && isSuspiciousSafariCaretResult(node, offset, x) ||
+                if (!view.contentDOM.contains(node) ||
+                    browser.safari && isSuspiciousSafariCaretResult(node, offset, x) ||
                     browser.chrome && isSuspiciousChromeCaretResult(node, offset, x))
                     node = undefined;
             }
@@ -4675,7 +4678,7 @@ function visiblePixelRange(dom, paddingTop) {
                 left = Math.max(left, parentRect.left);
                 right = Math.min(right, parentRect.right);
                 top = Math.max(top, parentRect.top);
-                bottom = Math.min(bottom, parentRect.bottom);
+                bottom = parent == dom.parentNode ? parentRect.bottom : Math.min(bottom, parentRect.bottom);
             }
             parent = style.position == "absolute" || style.position == "fixed" ? elt.offsetParent : elt.parentNode;
         }
@@ -5376,6 +5379,7 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     ".cm-widgetBuffer": {
         verticalAlign: "text-top",
         height: "1em",
+        width: 0,
         display: "inline"
     },
     ".cm-placeholder": {
@@ -5485,7 +5489,9 @@ class DOMObserver {
                 this.flushSoon();
             };
         this.onSelectionChange = this.onSelectionChange.bind(this);
-        window.addEventListener("resize", this.onResize = this.onResize.bind(this));
+        this.onResize = this.onResize.bind(this);
+        this.onPrint = this.onPrint.bind(this);
+        this.onScroll = this.onScroll.bind(this);
         if (typeof ResizeObserver == "function") {
             this.resize = new ResizeObserver(() => {
                 if (this.view.docView.lastUpdate < Date.now() - 75)
@@ -5493,9 +5499,9 @@ class DOMObserver {
             });
             this.resize.observe(view.scrollDOM);
         }
-        window.addEventListener("beforeprint", this.onPrint = this.onPrint.bind(this));
+        this.win = view.dom.ownerDocument.defaultView;
+        this.addWindowListeners(this.win);
         this.start();
-        window.addEventListener("scroll", this.onScroll = this.onScroll.bind(this));
         if (typeof IntersectionObserver == "function") {
             this.intersection = new IntersectionObserver(entries => {
                 if (this.parentCheck < 0)
@@ -5514,7 +5520,6 @@ class DOMObserver {
         }
         this.listenForScroll();
         this.readSelectionRange();
-        this.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
     }
     onScroll(e) {
         if (this.intersecting)
@@ -5577,10 +5582,11 @@ class DOMObserver {
         // Detect the situation where the browser has, on focus, moved the
         // selection to the start of the content element. Reset it to the
         // position from the editor state.
-        if (local && !this.selectionChanged && this.selectionRange.focusNode &&
+        if (local && !this.selectionChanged &&
             view.inputState.lastFocusTime > Date.now() - 200 &&
             view.inputState.lastTouchTime < Date.now() - 300 &&
             atElementStart(this.dom, range)) {
+            this.view.inputState.lastFocusTime = 0;
             view.docView.updateSelection();
             return false;
         }
@@ -5757,6 +5763,25 @@ class DOMObserver {
             return null;
         }
     }
+    setWindow(win) {
+        if (win != this.win) {
+            this.removeWindowListeners(this.win);
+            this.win = win;
+            this.addWindowListeners(this.win);
+        }
+    }
+    addWindowListeners(win) {
+        win.addEventListener("resize", this.onResize);
+        win.addEventListener("beforeprint", this.onPrint);
+        win.addEventListener("scroll", this.onScroll);
+        win.document.addEventListener("selectionchange", this.onSelectionChange);
+    }
+    removeWindowListeners(win) {
+        win.removeEventListener("scroll", this.onScroll);
+        win.removeEventListener("resize", this.onResize);
+        win.removeEventListener("beforeprint", this.onPrint);
+        win.document.removeEventListener("selectionchange", this.onSelectionChange);
+    }
     destroy() {
         var _a, _b, _c;
         this.stop();
@@ -5765,10 +5790,7 @@ class DOMObserver {
         (_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);
-        window.removeEventListener("resize", this.onResize);
-        window.removeEventListener("beforeprint", this.onPrint);
-        this.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
+        this.removeWindowListeners(this.win);
         clearTimeout(this.parentCheck);
         clearTimeout(this.resizeTimeout);
     }
@@ -6076,7 +6098,7 @@ class EditorView {
         this.dom.appendChild(this.scrollDOM);
         this._dispatch = config.dispatch || ((tr) => this.update([tr]));
         this.dispatch = this.dispatch.bind(this);
-        this.root = (config.root || getRoot(config.parent) || document);
+        this._root = (config.root || getRoot(config.parent) || document);
         this.viewState = new ViewState(config.state || state.EditorState.create(config));
         this.plugins = this.state.facet(viewPlugin).map(spec => new PluginInstance(spec));
         for (let plugin of this.plugins)
@@ -6137,6 +6159,10 @@ class EditorView {
     composition there.
     */
     get compositionStarted() { return this.inputState.composing >= 0; }
+    /**
+    The document or shadow root that the view lives in.
+    */
+    get root() { return this._root; }
     dispatch(...input) {
         this._dispatch(input.length == 1 && input[0] instanceof state.Transaction ? input[0]
             : this.state.update(...input));
@@ -6284,10 +6310,13 @@ class EditorView {
         if (flush)
             this.observer.forceFlush();
         let updated = null;
+        let { scrollHeight, scrollTop, clientHeight } = this.scrollDOM;
+        let refHeight = scrollTop > scrollHeight - clientHeight - 4 ? scrollHeight : scrollTop;
         try {
             for (let i = 0;; i++) {
                 this.updateState = 1 /* Measuring */;
                 let oldViewport = this.viewport;
+                let refBlock = this.viewState.lineBlockAtHeight(refHeight);
                 let changed = this.viewState.measure(this);
                 if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
@@ -6339,6 +6368,13 @@ class EditorView {
                     this.viewState.scrollTarget = null;
                     scrolled = true;
                 }
+                else {
+                    let diff = this.viewState.lineBlockAt(refBlock.from).top - refBlock.top;
+                    if (diff > 1 || diff < -1) {
+                        this.scrollDOM.scrollTop += diff;
+                        scrolled = true;
+                    }
+                }
                 if (redrawn)
                     this.docView.updateSelection(true);
                 if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to &&
@@ -6462,7 +6498,7 @@ class EditorView {
     /**
     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)
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)).
     */
     elementAtHeight(height) {
         this.readMeasured();
@@ -6471,7 +6507,8 @@ class EditorView {
     /**
     Find the line block (see
     [`lineBlockAt`](https://codemirror.net/6/docs/ref/#view.EditorView.lineBlockAt) at the given
-    height.
+    height, again interpreted relative to the [top of the
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop).
     */
     lineBlockAtHeight(height) {
         this.readMeasured();
@@ -6678,6 +6715,17 @@ class EditorView {
         });
     }
     /**
+    Update the [root](https://codemirror.net/6/docs/ref/##view.EditorViewConfig.root) in which the editor lives. This is only
+    necessary when moving the editor's existing DOM to a new window or shadow root.
+    */
+    setRoot(root) {
+        if (this._root != root) {
+            this._root = root;
+            this.observer.setWindow((root.nodeType == 9 ? root : root.ownerDocument).defaultView);
+            this.mountStyles();
+        }
+    }
+    /**
     Clean up this editor view, removing its element from the
     document, unregistering event handlers, and notifying
     plugins. The view instance can no longer be used after

package/dist/index.d.ts

@@ -647,10 +647,11 @@ declare class EditorView {
     */
     get compositionStarted(): boolean;
     private _dispatch;
+    private _root;
     /**
     The document or shadow root that the view lives in.
     */
-    readonly root: DocumentOrShadowRoot;
+    get root(): DocumentOrShadowRoot;
     /**
     The DOM element that wraps the entire editor view.
     */
@@ -752,13 +753,14 @@ declare class EditorView {
     /**
     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)
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)).
     */
     elementAtHeight(height: number): BlockInfo;
     /**
     Find the line block (see
     [`lineBlockAt`](https://codemirror.net/6/docs/ref/#view.EditorView.lineBlockAt) at the given
-    height.
+    height, again interpreted relative to the [top of the
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop).
     */
     lineBlockAtHeight(height: number): BlockInfo;
     /**
@@ -921,6 +923,11 @@ declare class EditorView {
     */
     focus(): void;
     /**
+    Update the [root](https://codemirror.net/6/docs/ref/##view.EditorViewConfig.root) in which the editor lives. This is only
+    necessary when moving the editor's existing DOM to a new window or shadow root.
+    */
+    setRoot(root: Document | ShadowRoot): void;
+    /**
     Clean up this editor view, removing its element from the
     document, unregistering event handlers, and notifying
     plugins. The view instance can no longer be used after

package/dist/index.js

@@ -1468,15 +1468,17 @@ class LineView extends ContentView {
             return null;
         let totalWidth = 0;
         for (let child of this.children) {
-            if (!(child instanceof TextView))
+            if (!(child instanceof TextView) || /[^ -~]/.test(child.text))
                 return null;
             let rects = clientRectsFor(child.dom);
             if (rects.length != 1)
                 return null;
             totalWidth += rects[0].width;
         }
-        return { lineHeight: this.dom.getBoundingClientRect().height,
-            charWidth: totalWidth / this.length };
+        return !totalWidth ? null : {
+            lineHeight: this.dom.getBoundingClientRect().height,
+            charWidth: totalWidth / this.length
+        };
     }
     coordsAt(pos, side) {
         return coordsInChildren(this, pos, side);
@@ -2475,7 +2477,6 @@ class DocView extends ContentView {
         this.updateDeco();
         this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
     }
-    get root() { return this.view.root; }
     get editorView() { return this.view; }
     get length() { return this.view.state.doc.length; }
     // Update the document view to a given state. scrollIntoView can be
@@ -2598,7 +2599,7 @@ class DocView extends ContentView {
                     this.dom.blur();
                     this.dom.focus({ preventScroll: true });
                 }
-                let rawSel = getSelection(this.root);
+                let rawSel = getSelection(this.view.root);
                 if (!rawSel) ;
                 else if (main.empty) {
                     // Work around https://bugzilla.mozilla.org/show_bug.cgi?id=1612076
@@ -2641,7 +2642,7 @@ class DocView extends ContentView {
         if (this.compositionDeco.size)
             return;
         let cursor = this.view.state.selection.main;
-        let sel = getSelection(this.root);
+        let sel = getSelection(this.view.root);
         if (!sel || !cursor.empty || !cursor.assoc || !sel.modify)
             return;
         let line = LineView.find(this, cursor.head);
@@ -2658,7 +2659,7 @@ class DocView extends ContentView {
         sel.modify("move", cursor.assoc < 0 ? "forward" : "backward", "lineboundary");
     }
     mayControlSelection() {
-        let active = this.root.activeElement;
+        let active = this.view.root.activeElement;
         return active == this.dom ||
             hasSelection(this.dom, this.view.observer.selectionRange) && !(active && this.dom.contains(active));
     }
@@ -3011,7 +3012,7 @@ function upBot(rect, bottom) {
     return bottom > rect.bottom ? { top: rect.top, left: rect.left, right: rect.right, bottom } : rect;
 }
 function domPosAtCoords(parent, x, y) {
-    let closest, closestRect, closestX, closestY;
+    let closest, closestRect, closestX, closestY, closestOverlap = false;
     let above, below, aboveRect, belowRect;
     for (let child = parent.firstChild; child; child = child.nextSibling) {
         let rects = clientRectsFor(child);
@@ -3027,6 +3028,7 @@ function domPosAtCoords(parent, x, y) {
                 closestRect = rect;
                 closestX = dx;
                 closestY = dy;
+                closestOverlap = !dx || (dx > 0 ? i < rects.length - 1 : i > 0);
             }
             if (dx == 0) {
                 if (y > rect.bottom && (!aboveRect || aboveRect.bottom < rect.bottom)) {
@@ -3059,7 +3061,7 @@ function domPosAtCoords(parent, x, y) {
     let clipX = Math.max(closestRect.left, Math.min(closestRect.right, x));
     if (closest.nodeType == 3)
         return domPosInText(closest, clipX, y);
-    if (!closestX && closest.contentEditable == "true")
+    if (closestOverlap && closest.contentEditable != "false")
         return domPosAtCoords(closest, clipX, y);
     let offset = Array.prototype.indexOf.call(parent.childNodes, closest) +
         (x >= (closestRect.left + closestRect.right) / 2 ? 1 : 0);
@@ -3156,7 +3158,8 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
             let range = doc.caretRangeFromPoint(x, y);
             if (range) {
                 ({ startContainer: node, startOffset: offset } = range);
-                if (browser.safari && isSuspiciousSafariCaretResult(node, offset, x) ||
+                if (!view.contentDOM.contains(node) ||
+                    browser.safari && isSuspiciousSafariCaretResult(node, offset, x) ||
                     browser.chrome && isSuspiciousChromeCaretResult(node, offset, x))
                     node = undefined;
             }
@@ -4668,7 +4671,7 @@ function visiblePixelRange(dom, paddingTop) {
                 left = Math.max(left, parentRect.left);
                 right = Math.min(right, parentRect.right);
                 top = Math.max(top, parentRect.top);
-                bottom = Math.min(bottom, parentRect.bottom);
+                bottom = parent == dom.parentNode ? parentRect.bottom : Math.min(bottom, parentRect.bottom);
             }
             parent = style.position == "absolute" || style.position == "fixed" ? elt.offsetParent : elt.parentNode;
         }
@@ -5369,6 +5372,7 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     ".cm-widgetBuffer": {
         verticalAlign: "text-top",
         height: "1em",
+        width: 0,
         display: "inline"
     },
     ".cm-placeholder": {
@@ -5478,7 +5482,9 @@ class DOMObserver {
                 this.flushSoon();
             };
         this.onSelectionChange = this.onSelectionChange.bind(this);
-        window.addEventListener("resize", this.onResize = this.onResize.bind(this));
+        this.onResize = this.onResize.bind(this);
+        this.onPrint = this.onPrint.bind(this);
+        this.onScroll = this.onScroll.bind(this);
         if (typeof ResizeObserver == "function") {
             this.resize = new ResizeObserver(() => {
                 if (this.view.docView.lastUpdate < Date.now() - 75)
@@ -5486,9 +5492,9 @@ class DOMObserver {
             });
             this.resize.observe(view.scrollDOM);
         }
-        window.addEventListener("beforeprint", this.onPrint = this.onPrint.bind(this));
+        this.win = view.dom.ownerDocument.defaultView;
+        this.addWindowListeners(this.win);
         this.start();
-        window.addEventListener("scroll", this.onScroll = this.onScroll.bind(this));
         if (typeof IntersectionObserver == "function") {
             this.intersection = new IntersectionObserver(entries => {
                 if (this.parentCheck < 0)
@@ -5507,7 +5513,6 @@ class DOMObserver {
         }
         this.listenForScroll();
         this.readSelectionRange();
-        this.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
     }
     onScroll(e) {
         if (this.intersecting)
@@ -5570,10 +5575,11 @@ class DOMObserver {
         // Detect the situation where the browser has, on focus, moved the
         // selection to the start of the content element. Reset it to the
         // position from the editor state.
-        if (local && !this.selectionChanged && this.selectionRange.focusNode &&
+        if (local && !this.selectionChanged &&
             view.inputState.lastFocusTime > Date.now() - 200 &&
             view.inputState.lastTouchTime < Date.now() - 300 &&
             atElementStart(this.dom, range)) {
+            this.view.inputState.lastFocusTime = 0;
             view.docView.updateSelection();
             return false;
         }
@@ -5750,6 +5756,25 @@ class DOMObserver {
             return null;
         }
     }
+    setWindow(win) {
+        if (win != this.win) {
+            this.removeWindowListeners(this.win);
+            this.win = win;
+            this.addWindowListeners(this.win);
+        }
+    }
+    addWindowListeners(win) {
+        win.addEventListener("resize", this.onResize);
+        win.addEventListener("beforeprint", this.onPrint);
+        win.addEventListener("scroll", this.onScroll);
+        win.document.addEventListener("selectionchange", this.onSelectionChange);
+    }
+    removeWindowListeners(win) {
+        win.removeEventListener("scroll", this.onScroll);
+        win.removeEventListener("resize", this.onResize);
+        win.removeEventListener("beforeprint", this.onPrint);
+        win.document.removeEventListener("selectionchange", this.onSelectionChange);
+    }
     destroy() {
         var _a, _b, _c;
         this.stop();
@@ -5758,10 +5783,7 @@ class DOMObserver {
         (_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);
-        window.removeEventListener("resize", this.onResize);
-        window.removeEventListener("beforeprint", this.onPrint);
-        this.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
+        this.removeWindowListeners(this.win);
         clearTimeout(this.parentCheck);
         clearTimeout(this.resizeTimeout);
     }
@@ -6069,7 +6091,7 @@ class EditorView {
         this.dom.appendChild(this.scrollDOM);
         this._dispatch = config.dispatch || ((tr) => this.update([tr]));
         this.dispatch = this.dispatch.bind(this);
-        this.root = (config.root || getRoot(config.parent) || document);
+        this._root = (config.root || getRoot(config.parent) || document);
         this.viewState = new ViewState(config.state || EditorState.create(config));
         this.plugins = this.state.facet(viewPlugin).map(spec => new PluginInstance(spec));
         for (let plugin of this.plugins)
@@ -6130,6 +6152,10 @@ class EditorView {
     composition there.
     */
     get compositionStarted() { return this.inputState.composing >= 0; }
+    /**
+    The document or shadow root that the view lives in.
+    */
+    get root() { return this._root; }
     dispatch(...input) {
         this._dispatch(input.length == 1 && input[0] instanceof Transaction ? input[0]
             : this.state.update(...input));
@@ -6277,10 +6303,13 @@ class EditorView {
         if (flush)
             this.observer.forceFlush();
         let updated = null;
+        let { scrollHeight, scrollTop, clientHeight } = this.scrollDOM;
+        let refHeight = scrollTop > scrollHeight - clientHeight - 4 ? scrollHeight : scrollTop;
         try {
             for (let i = 0;; i++) {
                 this.updateState = 1 /* Measuring */;
                 let oldViewport = this.viewport;
+                let refBlock = this.viewState.lineBlockAtHeight(refHeight);
                 let changed = this.viewState.measure(this);
                 if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
@@ -6332,6 +6361,13 @@ class EditorView {
                     this.viewState.scrollTarget = null;
                     scrolled = true;
                 }
+                else {
+                    let diff = this.viewState.lineBlockAt(refBlock.from).top - refBlock.top;
+                    if (diff > 1 || diff < -1) {
+                        this.scrollDOM.scrollTop += diff;
+                        scrolled = true;
+                    }
+                }
                 if (redrawn)
                     this.docView.updateSelection(true);
                 if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to &&
@@ -6455,7 +6491,7 @@ class EditorView {
     /**
     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)
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)).
     */
     elementAtHeight(height) {
         this.readMeasured();
@@ -6464,7 +6500,8 @@ class EditorView {
     /**
     Find the line block (see
     [`lineBlockAt`](https://codemirror.net/6/docs/ref/#view.EditorView.lineBlockAt) at the given
-    height.
+    height, again interpreted relative to the [top of the
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop).
     */
     lineBlockAtHeight(height) {
         this.readMeasured();
@@ -6671,6 +6708,17 @@ class EditorView {
         });
     }
     /**
+    Update the [root](https://codemirror.net/6/docs/ref/##view.EditorViewConfig.root) in which the editor lives. This is only
+    necessary when moving the editor's existing DOM to a new window or shadow root.
+    */
+    setRoot(root) {
+        if (this._root != root) {
+            this._root = root;
+            this.observer.setWindow((root.nodeType == 9 ? root : root.ownerDocument).defaultView);
+            this.mountStyles();
+        }
+    }
+    /**
     Clean up this editor view, removing its element from the
     document, unregistering event handlers, and notifying
     plugins. The view instance can no longer be used after

package/package.json

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