@codemirror/view 0.19.10 → 0.19.11

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.19.11 (2021-11-03)
+
+### Breaking changes
+
+`EditorView.scrollPosIntoView` has been deprecated. Use the `EditorView.scrollTo` effect instead.
+
+### New features
+
+The new `EditorView.centerOn` effect can be used to scroll a given range to the center of the view.
+
 ## 0.19.10 (2021-11-02)
 
 ### Bug fixes

package/dist/index.cjs

@@ -102,9 +102,9 @@ function windowRect(win) {
         top: 0, bottom: win.innerHeight };
 }
 const ScrollSpace = 5;
-function scrollRectIntoView(dom, rect, side) {
+function scrollRectIntoView(dom, rect, side, center) {
     let doc = dom.ownerDocument, win = doc.defaultView;
-    for (let cur = dom.parentNode; cur;) {
+    for (let cur = dom; cur;) {
         if (cur.nodeType == 1) { // Element
             let bounding, top = cur == doc.body;
             if (top) {
@@ -121,7 +121,20 @@ function scrollRectIntoView(dom, rect, side) {
                     top: rect.top, bottom: rect.top + cur.clientHeight };
             }
             let moveX = 0, moveY = 0;
-            if (rect.top < bounding.top) {
+            if (center) {
+                let rectHeight = rect.bottom - rect.top, boundingHeight = bounding.bottom - bounding.top;
+                let targetTop;
+                if (rectHeight <= boundingHeight)
+                    targetTop = rect.top + rectHeight / 2 - boundingHeight / 2;
+                else if (side < 0)
+                    targetTop = rect.top - ScrollSpace;
+                else
+                    targetTop = rect.bottom + ScrollSpace - boundingHeight;
+                moveY = targetTop - bounding.top;
+                if (Math.abs(moveY) <= 1)
+                    moveY = 0;
+            }
+            else if (rect.top < bounding.top) {
                 moveY = -(bounding.top - rect.top + ScrollSpace);
                 if (side > 0 && rect.bottom > bounding.bottom + moveY)
                     moveY = rect.bottom - bounding.bottom + moveY + ScrollSpace;
@@ -163,6 +176,7 @@ function scrollRectIntoView(dom, rect, side) {
             if (top)
                 break;
             cur = cur.assignedSlot || cur.parentNode;
+            center = false;
         }
         else if (cur.nodeType == 11) { // A shadow root
             cur = cur.host;
@@ -1560,6 +1574,9 @@ const inputHandler = state.Facet.define();
 const scrollTo = state.StateEffect.define({
     map: (range, changes) => range.map(changes)
 });
+const centerOn = state.StateEffect.define({
+    map: (range, changes) => range.map(changes)
+});
 /**
 Log or report an unhandled exception in client code. Should
 probably only be used by extension code that allows client code to
@@ -2304,7 +2321,7 @@ class DocView extends ContentView {
             this.view.viewState.lineGapDeco
         ];
     }
-    scrollRangeIntoView(range) {
+    scrollIntoView({ range, center }) {
         let rect = this.coordsAt(range.head, range.empty ? range.assoc : range.head > range.anchor ? -1 : 1), other;
         if (!rect)
             return;
@@ -2324,10 +2341,10 @@ class DocView extends ContentView {
                 if (bottom != null)
                     mBottom = Math.max(mBottom, bottom);
             }
-        scrollRectIntoView(this.dom, {
+        scrollRectIntoView(this.view.scrollDOM, {
             left: rect.left - mLeft, top: rect.top - mTop,
             right: rect.right + mRight, bottom: rect.bottom + mBottom
-        }, range.head < range.anchor ? -1 : 1);
+        }, range.head < range.anchor ? -1 : 1, center);
     }
 }
 function betweenUneditable(pos) {
@@ -4446,6 +4463,15 @@ class LineGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.vertical ? this.size : -1; }
 }
+class ScrollTarget {
+    constructor(range, center = false) {
+        this.range = range;
+        this.center = center;
+    }
+    map(changes) {
+        return changes.empty ? this : new ScrollTarget(this.range.map(changes), this.center);
+    }
+}
 class ViewState {
     constructor(state) {
         this.state = state;
@@ -4458,7 +4484,7 @@ class ViewState {
         this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
-        this.scrollTo = null;
+        this.scrollTarget = null;
         // Briefly set to true when printing, to disable viewport limiting
         this.printing = false;
         this.visibleRanges = [];
@@ -4491,7 +4517,7 @@ class ViewState {
         this.scaler = this.heightMap.height <= 7000000 /* MaxDOMHeight */ ? IdScaler :
             new BigScaler(this.heightOracle.doc, this.heightMap, this.viewports);
     }
-    update(update, scrollTo = null) {
+    update(update, scrollTarget = null) {
         let prev = this.state;
         this.state = update.state;
         let newDeco = this.state.facet(decorations);
@@ -4502,15 +4528,16 @@ class ViewState {
         if (this.heightMap.height != prevHeight)
             update.flags |= 2 /* Height */;
         let viewport = heightChanges.length ? this.mapViewport(this.viewport, update.changes) : this.viewport;
-        if (scrollTo && (scrollTo.head < viewport.from || scrollTo.head > viewport.to) || !this.viewportIsAppropriate(viewport))
-            viewport = this.getViewport(0, scrollTo);
+        if (scrollTarget && (scrollTarget.range.head < viewport.from || scrollTarget.range.head > viewport.to) ||
+            !this.viewportIsAppropriate(viewport))
+            viewport = this.getViewport(0, scrollTarget);
         this.viewport = viewport;
         this.updateForViewport();
         if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
             this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
         update.flags |= this.computeVisibleRanges();
-        if (scrollTo)
-            this.scrollTo = scrollTo;
+        if (scrollTarget)
+            this.scrollTarget = scrollTarget;
         if (!this.mustEnforceCursorAssoc && update.selectionSet && update.view.lineWrapping &&
             update.state.selection.main.empty && update.state.selection.main.assoc)
             this.mustEnforceCursorAssoc = true;
@@ -4563,8 +4590,8 @@ class ViewState {
         if (oracle.heightChanged)
             result |= 2 /* Height */;
         if (!this.viewportIsAppropriate(this.viewport, bias) ||
-            this.scrollTo && (this.scrollTo.head < this.viewport.from || this.scrollTo.head > this.viewport.to))
-            this.viewport = this.getViewport(bias, this.scrollTo);
+            this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from || this.scrollTarget.range.head > this.viewport.to))
+            this.viewport = this.getViewport(bias, this.scrollTarget);
         this.updateForViewport();
         if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
             this.updateLineGaps(this.ensureLineGaps(refresh ? [] : this.lineGaps));
@@ -4581,22 +4608,25 @@ class ViewState {
     }
     get visibleTop() { return this.scaler.fromDOM(this.pixelViewport.top, 0); }
     get visibleBottom() { return this.scaler.fromDOM(this.pixelViewport.bottom, 0); }
-    getViewport(bias, scrollTo) {
+    getViewport(bias, scrollTarget) {
         // This will divide VP.Margin between the top and the
         // bottom, depending on the bias (the change in viewport position
         // since the last update). It'll hold a number between 0 and 1
         let marginTop = 0.5 - Math.max(-0.5, Math.min(0.5, bias / 1000 /* Margin */ / 2));
         let map = this.heightMap, doc = this.state.doc, { visibleTop, visibleBottom } = this;
         let viewport = new Viewport(map.lineAt(visibleTop - marginTop * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(visibleBottom + (1 - marginTop) * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).to);
-        // If scrollTo is given, make sure the viewport includes that position
-        if (scrollTo) {
-            if (scrollTo.head < viewport.from) {
-                let { top: newTop } = map.lineAt(scrollTo.head, QueryType.ByPos, doc, 0, 0);
-                viewport = new Viewport(map.lineAt(newTop - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(newTop + (visibleBottom - visibleTop) + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
-            }
-            else if (scrollTo.head > viewport.to) {
-                let { bottom: newBottom } = map.lineAt(scrollTo.head, QueryType.ByPos, doc, 0, 0);
-                viewport = new Viewport(map.lineAt(newBottom - (visibleBottom - visibleTop) - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(newBottom + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
+        // If scrollTarget is given, make sure the viewport includes that position
+        if (scrollTarget) {
+            let { head } = scrollTarget.range, viewHeight = visibleBottom - visibleTop;
+            if (head < viewport.from || head > viewport.to) {
+                let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
+                if (scrollTarget.center)
+                    topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
+                else if (head < viewport.from)
+                    topPos = block.top;
+                else
+                    topPos = block.bottom - viewHeight;
+                viewport = new Viewport(map.lineAt(topPos - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(topPos + viewHeight + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
             }
         }
         return viewport;
@@ -5691,21 +5721,24 @@ class EditorView {
         if (state$1.facet(state.EditorState.phrases) != this.state.facet(state.EditorState.phrases))
             return this.setState(state$1);
         update = new ViewUpdate(this, state$1, transactions);
-        let scrollPos = null;
+        let scrollTarget = null;
         try {
             this.updateState = 2 /* Updating */;
             for (let tr of transactions) {
-                if (scrollPos)
-                    scrollPos = scrollPos.map(tr.changes);
+                if (scrollTarget)
+                    scrollTarget = scrollTarget.map(tr.changes);
                 if (tr.scrollIntoView) {
                     let { main } = tr.state.selection;
-                    scrollPos = main.empty ? main : state.EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1);
+                    scrollTarget = new ScrollTarget(main.empty ? main : state.EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1));
                 }
-                for (let e of tr.effects)
+                for (let e of tr.effects) {
                     if (e.is(scrollTo))
-                        scrollPos = e.value;
+                        scrollTarget = new ScrollTarget(e.value);
+                    else if (e.is(centerOn))
+                        scrollTarget = new ScrollTarget(e.value, true);
+                }
             }
-            this.viewState.update(update, scrollPos);
+            this.viewState.update(update, scrollTarget);
             this.bidiCache = CachedOrder.update(this.bidiCache, update.changes);
             if (!update.empty) {
                 this.updatePlugins(update);
@@ -5720,7 +5753,7 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
-        if (redrawn || scrollPos || this.viewState.mustEnforceCursorAssoc)
+        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
@@ -5802,7 +5835,7 @@ class EditorView {
                 this.updateState = 1 /* Measuring */;
                 let oldViewport = this.viewport;
                 let changed = this.viewState.measure(this.docView, i > 0);
-                if (!changed && !this.measureRequests.length && this.viewState.scrollTo == null)
+                if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
                 if (i > 5) {
                     console.warn("Viewport failed to stabilize");
@@ -5844,9 +5877,9 @@ class EditorView {
                             logException(this.state, e);
                         }
                     }
-                if (this.viewState.scrollTo) {
-                    this.docView.scrollRangeIntoView(this.viewState.scrollTo);
-                    this.viewState.scrollTo = null;
+                if (this.viewState.scrollTarget) {
+                    this.docView.scrollIntoView(this.viewState.scrollTarget);
+                    this.viewState.scrollTarget = null;
                 }
                 if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to && this.measureRequests.length == 0)
                     break;
@@ -6069,12 +6102,9 @@ class EditorView {
     moveVertically(start, forward, distance) {
         return skipAtoms(this, start, moveVertically(this, start, forward, distance));
     }
-    /**
-    Scroll the given document position into view.
-    */
+    // FIXME remove on next major version
     scrollPosIntoView(pos) {
-        this.viewState.scrollTo = state.EditorSelection.cursor(pos);
-        this.requestMeasure();
+        this.dispatch({ effects: scrollTo.of(state.EditorSelection.cursor(pos)) });
     }
     /**
     Find the DOM parent node and offset (child offset if `node` is
@@ -6250,6 +6280,11 @@ transaction to make it scroll the given range into view.
 */
 EditorView.scrollTo = scrollTo;
 /**
+Effect that makes the editor scroll the given range to the
+center of the visible view.
+*/
+EditorView.centerOn = centerOn;
+/**
 Facet to add a [style
 module](https://github.com/marijnh/style-mod#documentation) to
 an editor view. The view will ensure that the module is

package/dist/index.d.ts

@@ -856,9 +856,6 @@ declare class EditorView {
     used.
     */
     moveVertically(start: SelectionRange, forward: boolean, distance?: number): SelectionRange;
-    /**
-    Scroll the given document position into view.
-    */
     scrollPosIntoView(pos: number): void;
     /**
     Find the DOM parent node and offset (child offset if `node` is
@@ -949,6 +946,11 @@ declare class EditorView {
     */
     static scrollTo: _codemirror_state.StateEffectType<SelectionRange>;
     /**
+    Effect that makes the editor scroll the given range to the
+    center of the visible view.
+    */
+    static centerOn: _codemirror_state.StateEffectType<SelectionRange>;
+    /**
     Facet to add a [style
     module](https://github.com/marijnh/style-mod#documentation) to
     an editor view. The view will ensure that the module is

package/dist/index.js

@@ -99,9 +99,9 @@ function windowRect(win) {
         top: 0, bottom: win.innerHeight };
 }
 const ScrollSpace = 5;
-function scrollRectIntoView(dom, rect, side) {
+function scrollRectIntoView(dom, rect, side, center) {
     let doc = dom.ownerDocument, win = doc.defaultView;
-    for (let cur = dom.parentNode; cur;) {
+    for (let cur = dom; cur;) {
         if (cur.nodeType == 1) { // Element
             let bounding, top = cur == doc.body;
             if (top) {
@@ -118,7 +118,20 @@ function scrollRectIntoView(dom, rect, side) {
                     top: rect.top, bottom: rect.top + cur.clientHeight };
             }
             let moveX = 0, moveY = 0;
-            if (rect.top < bounding.top) {
+            if (center) {
+                let rectHeight = rect.bottom - rect.top, boundingHeight = bounding.bottom - bounding.top;
+                let targetTop;
+                if (rectHeight <= boundingHeight)
+                    targetTop = rect.top + rectHeight / 2 - boundingHeight / 2;
+                else if (side < 0)
+                    targetTop = rect.top - ScrollSpace;
+                else
+                    targetTop = rect.bottom + ScrollSpace - boundingHeight;
+                moveY = targetTop - bounding.top;
+                if (Math.abs(moveY) <= 1)
+                    moveY = 0;
+            }
+            else if (rect.top < bounding.top) {
                 moveY = -(bounding.top - rect.top + ScrollSpace);
                 if (side > 0 && rect.bottom > bounding.bottom + moveY)
                     moveY = rect.bottom - bounding.bottom + moveY + ScrollSpace;
@@ -160,6 +173,7 @@ function scrollRectIntoView(dom, rect, side) {
             if (top)
                 break;
             cur = cur.assignedSlot || cur.parentNode;
+            center = false;
         }
         else if (cur.nodeType == 11) { // A shadow root
             cur = cur.host;
@@ -1556,6 +1570,9 @@ const inputHandler = /*@__PURE__*/Facet.define();
 const scrollTo = /*@__PURE__*/StateEffect.define({
     map: (range, changes) => range.map(changes)
 });
+const centerOn = /*@__PURE__*/StateEffect.define({
+    map: (range, changes) => range.map(changes)
+});
 /**
 Log or report an unhandled exception in client code. Should
 probably only be used by extension code that allows client code to
@@ -2300,7 +2317,7 @@ class DocView extends ContentView {
             this.view.viewState.lineGapDeco
         ];
     }
-    scrollRangeIntoView(range) {
+    scrollIntoView({ range, center }) {
         let rect = this.coordsAt(range.head, range.empty ? range.assoc : range.head > range.anchor ? -1 : 1), other;
         if (!rect)
             return;
@@ -2320,10 +2337,10 @@ class DocView extends ContentView {
                 if (bottom != null)
                     mBottom = Math.max(mBottom, bottom);
             }
-        scrollRectIntoView(this.dom, {
+        scrollRectIntoView(this.view.scrollDOM, {
             left: rect.left - mLeft, top: rect.top - mTop,
             right: rect.right + mRight, bottom: rect.bottom + mBottom
-        }, range.head < range.anchor ? -1 : 1);
+        }, range.head < range.anchor ? -1 : 1, center);
     }
 }
 function betweenUneditable(pos) {
@@ -4440,6 +4457,15 @@ class LineGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.vertical ? this.size : -1; }
 }
+class ScrollTarget {
+    constructor(range, center = false) {
+        this.range = range;
+        this.center = center;
+    }
+    map(changes) {
+        return changes.empty ? this : new ScrollTarget(this.range.map(changes), this.center);
+    }
+}
 class ViewState {
     constructor(state) {
         this.state = state;
@@ -4452,7 +4478,7 @@ class ViewState {
         this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
-        this.scrollTo = null;
+        this.scrollTarget = null;
         // Briefly set to true when printing, to disable viewport limiting
         this.printing = false;
         this.visibleRanges = [];
@@ -4485,7 +4511,7 @@ class ViewState {
         this.scaler = this.heightMap.height <= 7000000 /* MaxDOMHeight */ ? IdScaler :
             new BigScaler(this.heightOracle.doc, this.heightMap, this.viewports);
     }
-    update(update, scrollTo = null) {
+    update(update, scrollTarget = null) {
         let prev = this.state;
         this.state = update.state;
         let newDeco = this.state.facet(decorations);
@@ -4496,15 +4522,16 @@ class ViewState {
         if (this.heightMap.height != prevHeight)
             update.flags |= 2 /* Height */;
         let viewport = heightChanges.length ? this.mapViewport(this.viewport, update.changes) : this.viewport;
-        if (scrollTo && (scrollTo.head < viewport.from || scrollTo.head > viewport.to) || !this.viewportIsAppropriate(viewport))
-            viewport = this.getViewport(0, scrollTo);
+        if (scrollTarget && (scrollTarget.range.head < viewport.from || scrollTarget.range.head > viewport.to) ||
+            !this.viewportIsAppropriate(viewport))
+            viewport = this.getViewport(0, scrollTarget);
         this.viewport = viewport;
         this.updateForViewport();
         if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
             this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
         update.flags |= this.computeVisibleRanges();
-        if (scrollTo)
-            this.scrollTo = scrollTo;
+        if (scrollTarget)
+            this.scrollTarget = scrollTarget;
         if (!this.mustEnforceCursorAssoc && update.selectionSet && update.view.lineWrapping &&
             update.state.selection.main.empty && update.state.selection.main.assoc)
             this.mustEnforceCursorAssoc = true;
@@ -4557,8 +4584,8 @@ class ViewState {
         if (oracle.heightChanged)
             result |= 2 /* Height */;
         if (!this.viewportIsAppropriate(this.viewport, bias) ||
-            this.scrollTo && (this.scrollTo.head < this.viewport.from || this.scrollTo.head > this.viewport.to))
-            this.viewport = this.getViewport(bias, this.scrollTo);
+            this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from || this.scrollTarget.range.head > this.viewport.to))
+            this.viewport = this.getViewport(bias, this.scrollTarget);
         this.updateForViewport();
         if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
             this.updateLineGaps(this.ensureLineGaps(refresh ? [] : this.lineGaps));
@@ -4575,22 +4602,25 @@ class ViewState {
     }
     get visibleTop() { return this.scaler.fromDOM(this.pixelViewport.top, 0); }
     get visibleBottom() { return this.scaler.fromDOM(this.pixelViewport.bottom, 0); }
-    getViewport(bias, scrollTo) {
+    getViewport(bias, scrollTarget) {
         // This will divide VP.Margin between the top and the
         // bottom, depending on the bias (the change in viewport position
         // since the last update). It'll hold a number between 0 and 1
         let marginTop = 0.5 - Math.max(-0.5, Math.min(0.5, bias / 1000 /* Margin */ / 2));
         let map = this.heightMap, doc = this.state.doc, { visibleTop, visibleBottom } = this;
         let viewport = new Viewport(map.lineAt(visibleTop - marginTop * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(visibleBottom + (1 - marginTop) * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).to);
-        // If scrollTo is given, make sure the viewport includes that position
-        if (scrollTo) {
-            if (scrollTo.head < viewport.from) {
-                let { top: newTop } = map.lineAt(scrollTo.head, QueryType.ByPos, doc, 0, 0);
-                viewport = new Viewport(map.lineAt(newTop - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(newTop + (visibleBottom - visibleTop) + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
-            }
-            else if (scrollTo.head > viewport.to) {
-                let { bottom: newBottom } = map.lineAt(scrollTo.head, QueryType.ByPos, doc, 0, 0);
-                viewport = new Viewport(map.lineAt(newBottom - (visibleBottom - visibleTop) - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(newBottom + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
+        // If scrollTarget is given, make sure the viewport includes that position
+        if (scrollTarget) {
+            let { head } = scrollTarget.range, viewHeight = visibleBottom - visibleTop;
+            if (head < viewport.from || head > viewport.to) {
+                let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
+                if (scrollTarget.center)
+                    topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
+                else if (head < viewport.from)
+                    topPos = block.top;
+                else
+                    topPos = block.bottom - viewHeight;
+                viewport = new Viewport(map.lineAt(topPos - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(topPos + viewHeight + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
             }
         }
         return viewport;
@@ -5685,21 +5715,24 @@ class EditorView {
         if (state.facet(EditorState.phrases) != this.state.facet(EditorState.phrases))
             return this.setState(state);
         update = new ViewUpdate(this, state, transactions);
-        let scrollPos = null;
+        let scrollTarget = null;
         try {
             this.updateState = 2 /* Updating */;
             for (let tr of transactions) {
-                if (scrollPos)
-                    scrollPos = scrollPos.map(tr.changes);
+                if (scrollTarget)
+                    scrollTarget = scrollTarget.map(tr.changes);
                 if (tr.scrollIntoView) {
                     let { main } = tr.state.selection;
-                    scrollPos = main.empty ? main : EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1);
+                    scrollTarget = new ScrollTarget(main.empty ? main : EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1));
                 }
-                for (let e of tr.effects)
+                for (let e of tr.effects) {
                     if (e.is(scrollTo))
-                        scrollPos = e.value;
+                        scrollTarget = new ScrollTarget(e.value);
+                    else if (e.is(centerOn))
+                        scrollTarget = new ScrollTarget(e.value, true);
+                }
             }
-            this.viewState.update(update, scrollPos);
+            this.viewState.update(update, scrollTarget);
             this.bidiCache = CachedOrder.update(this.bidiCache, update.changes);
             if (!update.empty) {
                 this.updatePlugins(update);
@@ -5714,7 +5747,7 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
-        if (redrawn || scrollPos || this.viewState.mustEnforceCursorAssoc)
+        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
@@ -5796,7 +5829,7 @@ class EditorView {
                 this.updateState = 1 /* Measuring */;
                 let oldViewport = this.viewport;
                 let changed = this.viewState.measure(this.docView, i > 0);
-                if (!changed && !this.measureRequests.length && this.viewState.scrollTo == null)
+                if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
                 if (i > 5) {
                     console.warn("Viewport failed to stabilize");
@@ -5838,9 +5871,9 @@ class EditorView {
                             logException(this.state, e);
                         }
                     }
-                if (this.viewState.scrollTo) {
-                    this.docView.scrollRangeIntoView(this.viewState.scrollTo);
-                    this.viewState.scrollTo = null;
+                if (this.viewState.scrollTarget) {
+                    this.docView.scrollIntoView(this.viewState.scrollTarget);
+                    this.viewState.scrollTarget = null;
                 }
                 if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to && this.measureRequests.length == 0)
                     break;
@@ -6063,12 +6096,9 @@ class EditorView {
     moveVertically(start, forward, distance) {
         return skipAtoms(this, start, moveVertically(this, start, forward, distance));
     }
-    /**
-    Scroll the given document position into view.
-    */
+    // FIXME remove on next major version
     scrollPosIntoView(pos) {
-        this.viewState.scrollTo = EditorSelection.cursor(pos);
-        this.requestMeasure();
+        this.dispatch({ effects: scrollTo.of(EditorSelection.cursor(pos)) });
     }
     /**
     Find the DOM parent node and offset (child offset if `node` is
@@ -6244,6 +6274,11 @@ transaction to make it scroll the given range into view.
 */
 EditorView.scrollTo = scrollTo;
 /**
+Effect that makes the editor scroll the given range to the
+center of the visible view.
+*/
+EditorView.centerOn = centerOn;
+/**
 Facet to add a [style
 module](https://github.com/marijnh/style-mod#documentation) to
 an editor view. The view will ensure that the module is

package/package.json

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