@codemirror/view 0.19.32 → 0.19.33

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 0.19.33 (2021-12-16)
+
+### Breaking changes
+
+`EditorView.scrollTo` and `EditorView.centerOn` are deprecated in favor of `EditorView.scrollIntoView`, and will be removed in the next breaking release.
+
+### Bug fixes
+
+Fix an issue that could cause the editor to unnecessarily interfere with composition (especially visible on macOS Chrome).
+
+A composition started with multiple lines selected will no longer be interruptd by the editor.
+
+### New features
+
+The new `EditorView.scrollIntoView` function allows you to do more fine-grained scrolling.
+
 ## 0.19.32 (2021-12-15)
 
 ### Bug fixes

package/dist/index.cjs

@@ -101,8 +101,7 @@ function windowRect(win) {
     return { left: 0, right: win.innerWidth,
         top: 0, bottom: win.innerHeight };
 }
-const ScrollSpace = 5;
-function scrollRectIntoView(dom, rect, side, center) {
+function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
     let doc = dom.ownerDocument, win = doc.defaultView;
     for (let cur = dom; cur;) {
         if (cur.nodeType == 1) { // Element
@@ -121,38 +120,42 @@ function scrollRectIntoView(dom, rect, side, center) {
                     top: rect.top, bottom: rect.top + cur.clientHeight };
             }
             let moveX = 0, moveY = 0;
-            if (center) {
+            if (y == "nearest") {
+                if (rect.top < bounding.top) {
+                    moveY = -(bounding.top - rect.top + yMargin);
+                    if (side > 0 && rect.bottom > bounding.bottom + moveY)
+                        moveY = rect.bottom - bounding.bottom + moveY + yMargin;
+                }
+                else if (rect.bottom > bounding.bottom) {
+                    moveY = rect.bottom - bounding.bottom + yMargin;
+                    if (side < 0 && (rect.top - moveY) < bounding.top)
+                        moveY = -(bounding.top + moveY - rect.top + yMargin);
+                }
+            }
+            else {
                 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;
+                let targetTop = y == "center" && rectHeight <= boundingHeight ? rect.top + rectHeight / 2 - boundingHeight / 2 :
+                    y == "start" || y == "center" && side < 0 ? rect.top - yMargin :
+                        rect.bottom - boundingHeight + yMargin;
                 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;
             }
-            else if (rect.bottom > bounding.bottom) {
-                moveY = rect.bottom - bounding.bottom + ScrollSpace;
-                if (side < 0 && (rect.top - moveY) < bounding.top)
-                    moveY = -(bounding.top + moveY - rect.top + ScrollSpace);
-            }
-            if (rect.left < bounding.left) {
-                moveX = -(bounding.left - rect.left + ScrollSpace);
-                if (side > 0 && rect.right > bounding.right + moveX)
-                    moveX = rect.right - bounding.right + moveX + ScrollSpace;
+            if (x == "nearest") {
+                if (rect.left < bounding.left) {
+                    moveX = -(bounding.left - rect.left + xMargin);
+                    if (side > 0 && rect.right > bounding.right + moveX)
+                        moveX = rect.right - bounding.right + moveX + xMargin;
+                }
+                else if (rect.right > bounding.right) {
+                    moveX = rect.right - bounding.right + xMargin;
+                    if (side < 0 && rect.left < bounding.left + moveX)
+                        moveX = -(bounding.left + moveX - rect.left + xMargin);
+                }
             }
-            else if (rect.right > bounding.right) {
-                moveX = rect.right - bounding.right + ScrollSpace;
-                if (side < 0 && rect.left < bounding.left + moveX)
-                    moveX = -(bounding.left + moveX - rect.left + ScrollSpace);
+            else {
+                let targetLeft = x == "center" ? rect.left + (rect.right - rect.left) / 2 - (bounding.right - bounding.left) / 2 :
+                    (x == "start") == ltr ? rect.left - xMargin :
+                        rect.right - (bounding.right - bounding.left) + xMargin;
+                moveX = targetLeft - bounding.left;
             }
             if (moveX || moveY) {
                 if (top) {
@@ -176,7 +179,7 @@ function scrollRectIntoView(dom, rect, side, center) {
             if (top)
                 break;
             cur = cur.assignedSlot || cur.parentNode;
-            center = false;
+            x = y = "nearest";
         }
         else if (cur.nodeType == 11) { // A shadow root
             cur = cur.host;
@@ -263,6 +266,10 @@ function getRoot(node) {
     }
     return null;
 }
+function clearAttributes(node) {
+    while (node.attributes.length)
+        node.removeAttributeNode(node.attributes[0]);
+}
 
 class DOMPos {
     constructor(node, offset, precise = true) {
@@ -309,14 +316,16 @@ class ContentView {
     // given position.
     coordsAt(_pos, _side) { return null; }
     sync(track) {
-        var _a;
         if (this.dirty & 2 /* Node */) {
             let parent = this.dom;
             let pos = parent.firstChild;
             for (let child of this.children) {
                 if (child.dirty) {
-                    if (!child.dom && pos && !((_a = ContentView.get(pos)) === null || _a === void 0 ? void 0 : _a.parent))
-                        child.reuseDOM(pos);
+                    if (!child.dom && pos) {
+                        let contentView = ContentView.get(pos);
+                        if (!contentView || !contentView.parent && contentView.constructor == child.constructor)
+                            child.reuseDOM(pos);
+                    }
                     child.sync(track);
                     child.dirty = 0 /* Not */;
                 }
@@ -344,7 +353,7 @@ class ContentView {
                 }
         }
     }
-    reuseDOM(_dom) { return false; }
+    reuseDOM(_dom) { }
     localPosFromDOM(node, offset) {
         let after;
         if (node == this.dom) {
@@ -643,10 +652,8 @@ class TextView extends ContentView {
         }
     }
     reuseDOM(dom) {
-        if (dom.nodeType != 3)
-            return false;
-        this.createDOM(dom);
-        return true;
+        if (dom.nodeType == 3)
+            this.createDOM(dom);
     }
     merge(from, to, source) {
         if (source && (!(source instanceof TextView) || this.length - (to - from) + source.length > MaxJoinLen))
@@ -681,18 +688,26 @@ class MarkView extends ContentView {
         for (let ch of children)
             ch.setParent(this);
     }
-    createDOM() {
-        let dom = document.createElement(this.mark.tagName);
+    setAttrs(dom) {
+        clearAttributes(dom);
         if (this.mark.class)
             dom.className = this.mark.class;
         if (this.mark.attrs)
             for (let name in this.mark.attrs)
                 dom.setAttribute(name, this.mark.attrs[name]);
-        this.setDOM(dom);
+        return dom;
+    }
+    reuseDOM(node) {
+        if (node.nodeName == this.mark.tagName.toUpperCase()) {
+            this.setDOM(node);
+            this.dirty |= 4 /* Attrs */ | 2 /* Node */;
+        }
     }
     sync(track) {
-        if (!this.dom || (this.dirty & 4 /* Attrs */))
-            this.createDOM();
+        if (!this.dom)
+            this.setDOM(this.setAttrs(document.createElement(this.mark.tagName)));
+        else if (this.dirty & 4 /* Attrs */)
+            this.setAttrs(this.dom);
         super.sync(track);
     }
     merge(from, to, source, _hasStart, openStart, openEnd) {
@@ -836,8 +851,7 @@ class WidgetView extends ContentView {
 }
 class CompositionView extends WidgetView {
     domAtPos(pos) { return new DOMPos(this.widget.text, pos); }
-    sync() { if (!this.dom)
-        this.setDOM(this.widget.toDOM()); }
+    sync() { this.setDOM(this.widget.toDOM()); }
     localPosFromDOM(node, offset) {
         return !offset ? 0 : node.nodeType == 3 ? Math.min(offset, this.length) : this.length;
     }
@@ -1302,13 +1316,23 @@ class LineView extends ContentView {
     domAtPos(pos) {
         return inlineDOMAtPos(this.dom, this.children, pos);
     }
+    reuseDOM(node) {
+        if (node.nodeName == "DIV") {
+            this.setDOM(node);
+            this.dirty |= 4 /* Attrs */ | 2 /* Node */;
+        }
+    }
     sync(track) {
         var _a;
-        if (!this.dom || (this.dirty & 4 /* Attrs */)) {
+        if (!this.dom) {
             this.setDOM(document.createElement("div"));
             this.dom.className = "cm-line";
             this.prevAttrs = this.attrs ? null : undefined;
         }
+        else if (this.dirty & 4 /* Attrs */) {
+            clearAttributes(this.dom);
+            this.prevAttrs = this.attrs ? null : undefined;
+        }
         if (this.prevAttrs !== undefined) {
             updateAttrs(this.dom, this.prevAttrs, this.attrs);
             this.dom.classList.add("cm-line");
@@ -1580,12 +1604,27 @@ const mouseSelectionStyle = state.Facet.define();
 const exceptionSink = state.Facet.define();
 const updateListener = state.Facet.define();
 const inputHandler = state.Facet.define();
+// FIXME remove
 const scrollTo = state.StateEffect.define({
     map: (range, changes) => range.map(changes)
 });
+// FIXME remove
 const centerOn = state.StateEffect.define({
     map: (range, changes) => range.map(changes)
 });
+class ScrollTarget {
+    constructor(range, y = "nearest", x = "nearest", yMargin = 5, xMargin = 5) {
+        this.range = range;
+        this.y = y;
+        this.x = x;
+        this.yMargin = yMargin;
+        this.xMargin = xMargin;
+    }
+    map(changes) {
+        return changes.empty ? this : new ScrollTarget(this.range.map(changes), this.y, this.x, this.yMargin, this.xMargin);
+    }
+}
+const scrollIntoView = state.StateEffect.define({ map: (t, ch) => t.map(ch) });
 /**
 Log or report an unhandled exception in client code. Should
 probably only be used by extension code that allows client code to
@@ -2664,7 +2703,8 @@ class DocView extends ContentView {
             this.view.viewState.lineGapDeco
         ];
     }
-    scrollIntoView({ range, center }) {
+    scrollIntoView(target) {
+        let { range } = target;
         let rect = this.coordsAt(range.head, range.empty ? range.assoc : range.head > range.anchor ? -1 : 1), other;
         if (!rect)
             return;
@@ -2684,10 +2724,11 @@ class DocView extends ContentView {
                 if (bottom != null)
                     mBottom = Math.max(mBottom, bottom);
             }
-        scrollRectIntoView(this.view.scrollDOM, {
+        let targetRect = {
             left: rect.left - mLeft, top: rect.top - mTop,
             right: rect.right + mRight, bottom: rect.bottom + mBottom
-        }, range.head < range.anchor ? -1 : 1, center);
+        };
+        scrollRectIntoView(this.view.scrollDOM, targetRect, range.head < range.anchor ? -1 : 1, target.x, target.y, target.xMargin, target.yMargin, this.view.textDirection == exports.Direction.LTR);
     }
 }
 function betweenUneditable(pos) {
@@ -4521,15 +4562,6 @@ 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;
@@ -4710,9 +4742,9 @@ class ViewState {
             let { head } = scrollTarget.range, viewHeight = this.editorHeight;
             if (head < viewport.from || head > viewport.to) {
                 let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
-                if (scrollTarget.center)
+                if (scrollTarget.y == "center")
                     topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
-                else if (head < viewport.from)
+                else if (scrollTarget.y == "start" || head < viewport.from)
                     topPos = block.top;
                 else
                     topPos = block.bottom - viewHeight;
@@ -5818,7 +5850,9 @@ class EditorView {
                     if (e.is(scrollTo))
                         scrollTarget = new ScrollTarget(e.value);
                     else if (e.is(centerOn))
-                        scrollTarget = new ScrollTarget(e.value, true);
+                        scrollTarget = new ScrollTarget(e.value, "center");
+                    else if (e.is(scrollIntoView))
+                        scrollTarget = e.value;
                 }
             }
             this.viewState.update(update, scrollTarget);
@@ -6386,6 +6420,14 @@ class EditorView {
         this.destroyed = true;
     }
     /**
+    Returns an effect that can be
+    [added](https://codemirror.net/6/docs/ref/#state.TransactionSpec.effects) to a transaction to
+    cause it to scroll the given position or range into view.
+    */
+    static scrollIntoView(pos, options = {}) {
+        return scrollIntoView.of(new ScrollTarget(typeof pos == "number" ? state.EditorSelection.cursor(pos) : pos, options.y, options.x, options.yMargin, options.xMargin));
+    }
+    /**
     Facet that can be used to add DOM event handlers. The value
     should be an object mapping event names to handler functions. The
     first such function to return true will be assumed to have handled
@@ -6439,11 +6481,15 @@ class EditorView {
 /**
 Effect that can be [added](https://codemirror.net/6/docs/ref/#state.TransactionSpec.effects) to a
 transaction to make it scroll the given range into view.
+
+*Deprecated*. Use [`scrollIntoView`](https://codemirror.net/6/docs/ref/#view.EditorView^scrollIntoView) instead.
 */
 EditorView.scrollTo = scrollTo;
 /**
 Effect that makes the editor scroll the given range to the
 center of the visible view.
+
+*Deprecated*. Use [`scrollIntoView`](https://codemirror.net/6/docs/ref/#view.EditorView^scrollIntoView) instead.
 */
 EditorView.centerOn = centerOn;
 /**

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as _codemirror_rangeset from '@codemirror/rangeset';
 import { RangeSet, RangeValue, Range } from '@codemirror/rangeset';
 export { Range } from '@codemirror/rangeset';
 import * as _codemirror_state from '@codemirror/state';
-import { EditorState, Extension, Transaction, ChangeSet, EditorSelection, TransactionSpec, SelectionRange, Facet } from '@codemirror/state';
+import { EditorState, Extension, Transaction, ChangeSet, EditorSelection, TransactionSpec, SelectionRange, StateEffect, Facet } from '@codemirror/state';
 import { Line } from '@codemirror/text';
 import { StyleModule, StyleSpec } from 'style-mod';
 
@@ -264,6 +264,7 @@ interface Rect {
     readonly top: number;
     readonly bottom: number;
 }
+declare type ScrollStrategy = "nearest" | "start" | "end" | "center";
 
 /**
 Command functions are used in key bindings and other types of user
@@ -1006,14 +1007,49 @@ declare class EditorView {
     /**
     Effect that can be [added](https://codemirror.net/6/docs/ref/#state.TransactionSpec.effects) to a
     transaction to make it scroll the given range into view.
+    
+    *Deprecated*. Use [`scrollIntoView`](https://codemirror.net/6/docs/ref/#view.EditorView^scrollIntoView) instead.
     */
     static scrollTo: _codemirror_state.StateEffectType<SelectionRange>;
     /**
     Effect that makes the editor scroll the given range to the
     center of the visible view.
+    
+    *Deprecated*. Use [`scrollIntoView`](https://codemirror.net/6/docs/ref/#view.EditorView^scrollIntoView) instead.
     */
     static centerOn: _codemirror_state.StateEffectType<SelectionRange>;
     /**
+    Returns an effect that can be
+    [added](https://codemirror.net/6/docs/ref/#state.TransactionSpec.effects) to a transaction to
+    cause it to scroll the given position or range into view.
+    */
+    static scrollIntoView(pos: number | SelectionRange, options?: {
+        /**
+        By default (`"nearest"`) the position will be vertically
+        scrolled only the minimal amount required to move the given
+        position into view. You can set this to `"start"` to move it
+        to the top of the view, `"end"` to move it to the bottom, or
+        `"center"` to move it to the center.
+        */
+        y?: ScrollStrategy;
+        /**
+        Effect similar to
+        [`y`](https://codemirror.net/6/docs/ref/#view.EditorView^scrollIntoView^options.y), but for the
+        horizontal scroll position.
+        */
+        x?: ScrollStrategy;
+        /**
+        Extra vertical distance to add when moving something into
+        view. Not used with the `"center"` strategy. Defaults to 5.
+        */
+        yMargin?: number;
+        /**
+        Extra horizontal distance to add. Not used with the `"center"`
+        strategy. Defaults to 5.
+        */
+        xMargin?: number;
+    }): StateEffect<unknown>;
+    /**
     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

@@ -98,8 +98,7 @@ function windowRect(win) {
     return { left: 0, right: win.innerWidth,
         top: 0, bottom: win.innerHeight };
 }
-const ScrollSpace = 5;
-function scrollRectIntoView(dom, rect, side, center) {
+function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
     let doc = dom.ownerDocument, win = doc.defaultView;
     for (let cur = dom; cur;) {
         if (cur.nodeType == 1) { // Element
@@ -118,38 +117,42 @@ function scrollRectIntoView(dom, rect, side, center) {
                     top: rect.top, bottom: rect.top + cur.clientHeight };
             }
             let moveX = 0, moveY = 0;
-            if (center) {
+            if (y == "nearest") {
+                if (rect.top < bounding.top) {
+                    moveY = -(bounding.top - rect.top + yMargin);
+                    if (side > 0 && rect.bottom > bounding.bottom + moveY)
+                        moveY = rect.bottom - bounding.bottom + moveY + yMargin;
+                }
+                else if (rect.bottom > bounding.bottom) {
+                    moveY = rect.bottom - bounding.bottom + yMargin;
+                    if (side < 0 && (rect.top - moveY) < bounding.top)
+                        moveY = -(bounding.top + moveY - rect.top + yMargin);
+                }
+            }
+            else {
                 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;
+                let targetTop = y == "center" && rectHeight <= boundingHeight ? rect.top + rectHeight / 2 - boundingHeight / 2 :
+                    y == "start" || y == "center" && side < 0 ? rect.top - yMargin :
+                        rect.bottom - boundingHeight + yMargin;
                 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;
             }
-            else if (rect.bottom > bounding.bottom) {
-                moveY = rect.bottom - bounding.bottom + ScrollSpace;
-                if (side < 0 && (rect.top - moveY) < bounding.top)
-                    moveY = -(bounding.top + moveY - rect.top + ScrollSpace);
-            }
-            if (rect.left < bounding.left) {
-                moveX = -(bounding.left - rect.left + ScrollSpace);
-                if (side > 0 && rect.right > bounding.right + moveX)
-                    moveX = rect.right - bounding.right + moveX + ScrollSpace;
+            if (x == "nearest") {
+                if (rect.left < bounding.left) {
+                    moveX = -(bounding.left - rect.left + xMargin);
+                    if (side > 0 && rect.right > bounding.right + moveX)
+                        moveX = rect.right - bounding.right + moveX + xMargin;
+                }
+                else if (rect.right > bounding.right) {
+                    moveX = rect.right - bounding.right + xMargin;
+                    if (side < 0 && rect.left < bounding.left + moveX)
+                        moveX = -(bounding.left + moveX - rect.left + xMargin);
+                }
             }
-            else if (rect.right > bounding.right) {
-                moveX = rect.right - bounding.right + ScrollSpace;
-                if (side < 0 && rect.left < bounding.left + moveX)
-                    moveX = -(bounding.left + moveX - rect.left + ScrollSpace);
+            else {
+                let targetLeft = x == "center" ? rect.left + (rect.right - rect.left) / 2 - (bounding.right - bounding.left) / 2 :
+                    (x == "start") == ltr ? rect.left - xMargin :
+                        rect.right - (bounding.right - bounding.left) + xMargin;
+                moveX = targetLeft - bounding.left;
             }
             if (moveX || moveY) {
                 if (top) {
@@ -173,7 +176,7 @@ function scrollRectIntoView(dom, rect, side, center) {
             if (top)
                 break;
             cur = cur.assignedSlot || cur.parentNode;
-            center = false;
+            x = y = "nearest";
         }
         else if (cur.nodeType == 11) { // A shadow root
             cur = cur.host;
@@ -260,6 +263,10 @@ function getRoot(node) {
     }
     return null;
 }
+function clearAttributes(node) {
+    while (node.attributes.length)
+        node.removeAttributeNode(node.attributes[0]);
+}
 
 class DOMPos {
     constructor(node, offset, precise = true) {
@@ -306,14 +313,16 @@ class ContentView {
     // given position.
     coordsAt(_pos, _side) { return null; }
     sync(track) {
-        var _a;
         if (this.dirty & 2 /* Node */) {
             let parent = this.dom;
             let pos = parent.firstChild;
             for (let child of this.children) {
                 if (child.dirty) {
-                    if (!child.dom && pos && !((_a = ContentView.get(pos)) === null || _a === void 0 ? void 0 : _a.parent))
-                        child.reuseDOM(pos);
+                    if (!child.dom && pos) {
+                        let contentView = ContentView.get(pos);
+                        if (!contentView || !contentView.parent && contentView.constructor == child.constructor)
+                            child.reuseDOM(pos);
+                    }
                     child.sync(track);
                     child.dirty = 0 /* Not */;
                 }
@@ -341,7 +350,7 @@ class ContentView {
                 }
         }
     }
-    reuseDOM(_dom) { return false; }
+    reuseDOM(_dom) { }
     localPosFromDOM(node, offset) {
         let after;
         if (node == this.dom) {
@@ -640,10 +649,8 @@ class TextView extends ContentView {
         }
     }
     reuseDOM(dom) {
-        if (dom.nodeType != 3)
-            return false;
-        this.createDOM(dom);
-        return true;
+        if (dom.nodeType == 3)
+            this.createDOM(dom);
     }
     merge(from, to, source) {
         if (source && (!(source instanceof TextView) || this.length - (to - from) + source.length > MaxJoinLen))
@@ -678,18 +685,26 @@ class MarkView extends ContentView {
         for (let ch of children)
             ch.setParent(this);
     }
-    createDOM() {
-        let dom = document.createElement(this.mark.tagName);
+    setAttrs(dom) {
+        clearAttributes(dom);
         if (this.mark.class)
             dom.className = this.mark.class;
         if (this.mark.attrs)
             for (let name in this.mark.attrs)
                 dom.setAttribute(name, this.mark.attrs[name]);
-        this.setDOM(dom);
+        return dom;
+    }
+    reuseDOM(node) {
+        if (node.nodeName == this.mark.tagName.toUpperCase()) {
+            this.setDOM(node);
+            this.dirty |= 4 /* Attrs */ | 2 /* Node */;
+        }
     }
     sync(track) {
-        if (!this.dom || (this.dirty & 4 /* Attrs */))
-            this.createDOM();
+        if (!this.dom)
+            this.setDOM(this.setAttrs(document.createElement(this.mark.tagName)));
+        else if (this.dirty & 4 /* Attrs */)
+            this.setAttrs(this.dom);
         super.sync(track);
     }
     merge(from, to, source, _hasStart, openStart, openEnd) {
@@ -833,8 +848,7 @@ class WidgetView extends ContentView {
 }
 class CompositionView extends WidgetView {
     domAtPos(pos) { return new DOMPos(this.widget.text, pos); }
-    sync() { if (!this.dom)
-        this.setDOM(this.widget.toDOM()); }
+    sync() { this.setDOM(this.widget.toDOM()); }
     localPosFromDOM(node, offset) {
         return !offset ? 0 : node.nodeType == 3 ? Math.min(offset, this.length) : this.length;
     }
@@ -1298,13 +1312,23 @@ class LineView extends ContentView {
     domAtPos(pos) {
         return inlineDOMAtPos(this.dom, this.children, pos);
     }
+    reuseDOM(node) {
+        if (node.nodeName == "DIV") {
+            this.setDOM(node);
+            this.dirty |= 4 /* Attrs */ | 2 /* Node */;
+        }
+    }
     sync(track) {
         var _a;
-        if (!this.dom || (this.dirty & 4 /* Attrs */)) {
+        if (!this.dom) {
             this.setDOM(document.createElement("div"));
             this.dom.className = "cm-line";
             this.prevAttrs = this.attrs ? null : undefined;
         }
+        else if (this.dirty & 4 /* Attrs */) {
+            clearAttributes(this.dom);
+            this.prevAttrs = this.attrs ? null : undefined;
+        }
         if (this.prevAttrs !== undefined) {
             updateAttrs(this.dom, this.prevAttrs, this.attrs);
             this.dom.classList.add("cm-line");
@@ -1576,12 +1600,27 @@ const mouseSelectionStyle = /*@__PURE__*/Facet.define();
 const exceptionSink = /*@__PURE__*/Facet.define();
 const updateListener = /*@__PURE__*/Facet.define();
 const inputHandler = /*@__PURE__*/Facet.define();
+// FIXME remove
 const scrollTo = /*@__PURE__*/StateEffect.define({
     map: (range, changes) => range.map(changes)
 });
+// FIXME remove
 const centerOn = /*@__PURE__*/StateEffect.define({
     map: (range, changes) => range.map(changes)
 });
+class ScrollTarget {
+    constructor(range, y = "nearest", x = "nearest", yMargin = 5, xMargin = 5) {
+        this.range = range;
+        this.y = y;
+        this.x = x;
+        this.yMargin = yMargin;
+        this.xMargin = xMargin;
+    }
+    map(changes) {
+        return changes.empty ? this : new ScrollTarget(this.range.map(changes), this.y, this.x, this.yMargin, this.xMargin);
+    }
+}
+const scrollIntoView = /*@__PURE__*/StateEffect.define({ map: (t, ch) => t.map(ch) });
 /**
 Log or report an unhandled exception in client code. Should
 probably only be used by extension code that allows client code to
@@ -2659,7 +2698,8 @@ class DocView extends ContentView {
             this.view.viewState.lineGapDeco
         ];
     }
-    scrollIntoView({ range, center }) {
+    scrollIntoView(target) {
+        let { range } = target;
         let rect = this.coordsAt(range.head, range.empty ? range.assoc : range.head > range.anchor ? -1 : 1), other;
         if (!rect)
             return;
@@ -2679,10 +2719,11 @@ class DocView extends ContentView {
                 if (bottom != null)
                     mBottom = Math.max(mBottom, bottom);
             }
-        scrollRectIntoView(this.view.scrollDOM, {
+        let targetRect = {
             left: rect.left - mLeft, top: rect.top - mTop,
             right: rect.right + mRight, bottom: rect.bottom + mBottom
-        }, range.head < range.anchor ? -1 : 1, center);
+        };
+        scrollRectIntoView(this.view.scrollDOM, targetRect, range.head < range.anchor ? -1 : 1, target.x, target.y, target.xMargin, target.yMargin, this.view.textDirection == Direction.LTR);
     }
 }
 function betweenUneditable(pos) {
@@ -4515,15 +4556,6 @@ 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;
@@ -4704,9 +4736,9 @@ class ViewState {
             let { head } = scrollTarget.range, viewHeight = this.editorHeight;
             if (head < viewport.from || head > viewport.to) {
                 let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
-                if (scrollTarget.center)
+                if (scrollTarget.y == "center")
                     topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
-                else if (head < viewport.from)
+                else if (scrollTarget.y == "start" || head < viewport.from)
                     topPos = block.top;
                 else
                     topPos = block.bottom - viewHeight;
@@ -5812,7 +5844,9 @@ class EditorView {
                     if (e.is(scrollTo))
                         scrollTarget = new ScrollTarget(e.value);
                     else if (e.is(centerOn))
-                        scrollTarget = new ScrollTarget(e.value, true);
+                        scrollTarget = new ScrollTarget(e.value, "center");
+                    else if (e.is(scrollIntoView))
+                        scrollTarget = e.value;
                 }
             }
             this.viewState.update(update, scrollTarget);
@@ -6380,6 +6414,14 @@ class EditorView {
         this.destroyed = true;
     }
     /**
+    Returns an effect that can be
+    [added](https://codemirror.net/6/docs/ref/#state.TransactionSpec.effects) to a transaction to
+    cause it to scroll the given position or range into view.
+    */
+    static scrollIntoView(pos, options = {}) {
+        return scrollIntoView.of(new ScrollTarget(typeof pos == "number" ? EditorSelection.cursor(pos) : pos, options.y, options.x, options.yMargin, options.xMargin));
+    }
+    /**
     Facet that can be used to add DOM event handlers. The value
     should be an object mapping event names to handler functions. The
     first such function to return true will be assumed to have handled
@@ -6433,11 +6475,15 @@ class EditorView {
 /**
 Effect that can be [added](https://codemirror.net/6/docs/ref/#state.TransactionSpec.effects) to a
 transaction to make it scroll the given range into view.
+
+*Deprecated*. Use [`scrollIntoView`](https://codemirror.net/6/docs/ref/#view.EditorView^scrollIntoView) instead.
 */
 EditorView.scrollTo = scrollTo;
 /**
 Effect that makes the editor scroll the given range to the
 center of the visible view.
+
+*Deprecated*. Use [`scrollIntoView`](https://codemirror.net/6/docs/ref/#view.EditorView^scrollIntoView) instead.
 */
 EditorView.centerOn = centerOn;
 /**

package/package.json

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