Make the margin used when scrolling the cursor into view configurable

FEATURE: The new `EditorView.cursorScrollMargin` facet can now be used to configure
the extra space used when scrolling the cursor into view.

Issue codemirror/dev#1689

Author: marijnh

src/dom.ts

@@ -139,11 +139,11 @@ export function scrollRectIntoView(dom: HTMLElement, rect: Rect, side: -1 | 1,
 
       let moveX = 0, moveY = 0
       if (y == "nearest") {
-        if (rect.top < bounding.top) {
+        if (rect.top < bounding.top + yMargin) {
           moveY = rect.top - (bounding.top + yMargin)
           if (side > 0 && rect.bottom > bounding.bottom + moveY)
             moveY = rect.bottom - bounding.bottom + yMargin
-        } else if (rect.bottom > bounding.bottom) {
+        } else if (rect.bottom > bounding.bottom - yMargin) {
           moveY = rect.bottom - bounding.bottom + yMargin
           if (side < 0 && (rect.top - moveY) < bounding.top)
             moveY = rect.top - (bounding.top + yMargin)
@@ -157,11 +157,11 @@ export function scrollRectIntoView(dom: HTMLElement, rect: Rect, side: -1 | 1,
         moveY = targetTop - bounding.top
       }
       if (x == "nearest") {
-        if (rect.left < bounding.left) {
+        if (rect.left < bounding.left + xMargin) {
           moveX = rect.left - (bounding.left + xMargin)
           if (side > 0 && rect.right > bounding.right + moveX)
             moveX = rect.right - bounding.right + xMargin
-        } else if (rect.right > bounding.right) {
+        } else if (rect.right > bounding.right - xMargin) {
           moveX = rect.right - bounding.right + xMargin
           if (side < 0 && rect.left < bounding.left + moveX)
             moveX = rect.left - (bounding.left + xMargin)

src/editorview.ts

@@ -305,8 +305,10 @@ export class EditorView {
         if (scrollTarget) scrollTarget = scrollTarget.map(tr.changes)
         if (tr.scrollIntoView) {
           let {main} = tr.state.selection
+          let {x, y} = this.state.facet(EditorView.cursorScrollMargin)
           scrollTarget = new ScrollTarget(
-            main.empty ? main : EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1))
+            main.empty ? main : EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1),
+            "nearest", "nearest", y, x)
         }
         for (let e of tr.effects)
           if (e.is(scrollIntoView)) scrollTarget = e.value.clip(this.state)
@@ -908,7 +910,8 @@ export class EditorView {
     xMargin?: number,
   } = {}): StateEffect<unknown> {
     return scrollIntoView.of(new ScrollTarget(typeof pos == "number" ? EditorSelection.cursor(pos) : pos,
-                                              options.y, options.x, options.yMargin, options.xMargin))
+                                              options.y ?? "nearest", options.x ?? "nearest",
+                                              options.yMargin ?? 5, options.xMargin ?? 5))
   }
 
   /// Return an effect that resets the editor to its current (at the
@@ -1100,11 +1103,27 @@ export class EditorView {
   /// supported.)
   static bidiIsolatedRanges = bidiIsolatedRanges
 
+  /// Can be used to specify the distance that scrolling cursor into
+  /// view keeps it away from the sides of the editor, either as a
+  /// single pixel number or two different values for the different
+  /// axes. Defaults to 5 pixels on both axes.
+  static cursorScrollMargin = Facet.define<number | {x: number, y: number}, {x: number, y: number}>({
+    combine: inputs => {
+      let x = 5, y = 5
+      for (let i of inputs) {
+        if (typeof i == "number") x = y = i
+        else ({x, y} = i)
+      }
+      return {x, y}
+    }
+  })
+
   /// Facet that allows extensions to provide additional scroll
   /// margins (space around the sides of the scrolling element that
   /// should be considered invisible). This can be useful when the
   /// plugin introduces elements that cover part of that element (for
-  /// example a horizontally fixed gutter).
+  /// example a horizontally fixed gutter). Not to be confused with
+  /// [`cursorScrollMargin`](#view.EditorView^cursorScrollMargin).
   static scrollMargins = scrollMargins
 
   /// Create a theme extension. The first argument can be a

src/extension.ts

@@ -50,10 +50,10 @@ export const scrollHandler = Facet.define<(
 export class ScrollTarget {
   constructor(
     readonly range: SelectionRange,
-    readonly y: ScrollStrategy = "nearest",
-    readonly x: ScrollStrategy = "nearest",
-    readonly yMargin: number = 5,
-    readonly xMargin: number = 5,
+    readonly y: ScrollStrategy,
+    readonly x: ScrollStrategy,
+    readonly yMargin: number,
+    readonly xMargin: number,
     // This data structure is abused to also store precise scroll
     // snapshots, instead of a `scrollIntoView` request. When this
     // flag is `true`, `range` points at a position in the reference