Add auto-scroll during drag selection

src/features/editor/components/editor.tsx

@@ -14,6 +14,7 @@ import { editorAPI } from "../extensions/api";
 import { useAutocomplete } from "../hooks/use-autocomplete";
 import { useBufferSwitch } from "../hooks/use-buffer-switch";
 import { useContextMenu } from "../hooks/use-context-menu";
+import { useDragScroll } from "../hooks/use-drag-scroll";
 import { useEditorKeyDown } from "../hooks/use-editor-keydown";
 import { useEditorOperations } from "../hooks/use-editor-operations";
 import { useEditorScroll } from "../hooks/use-editor-scroll";
@@ -481,6 +482,8 @@ export function Editor({
     handleViewportScroll,
   });
 
+  useDragScroll(inputRef);
+
   useEffect(() => {
     if (inputRef.current) {
       initializeViewport(inputRef.current, lines.length);

src/features/editor/hooks/use-drag-scroll.ts

@@ -0,0 +1,113 @@
+import { type RefObject, useCallback, useEffect, useRef } from "react";
+
+const EDGE_MARGIN = 40;
+const MAX_SCROLL_SPEED = 25;
+
+let dragScrollActive = false;
+
+export function isDragScrolling() {
+  return dragScrollActive;
+}
+
+export function useDragScroll(textareaRef: RefObject<HTMLTextAreaElement | null>) {
+  const isDraggingRef = useRef(false);
+  const rafRef = useRef<number | null>(null);
+  const mousePositionRef = useRef({ x: 0, y: 0 });
+
+  const scrollTick = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea || !isDraggingRef.current) {
+      rafRef.current = null;
+      return;
+    }
+
+    const rect = textarea.getBoundingClientRect();
+    const { x, y } = mousePositionRef.current;
+
+    let scrollX = 0;
+    let scrollY = 0;
+
+    const distFromBottom = rect.bottom - y;
+    const distFromTop = y - rect.top;
+    const distFromRight = rect.right - x;
+    const distFromLeft = x - rect.left;
+
+    if (distFromBottom < EDGE_MARGIN && distFromBottom >= 0) {
+      scrollY = Math.ceil(MAX_SCROLL_SPEED * (1 - distFromBottom / EDGE_MARGIN));
+    } else if (distFromTop < EDGE_MARGIN && distFromTop >= 0) {
+      scrollY = -Math.ceil(MAX_SCROLL_SPEED * (1 - distFromTop / EDGE_MARGIN));
+    }
+
+    if (distFromRight < EDGE_MARGIN && distFromRight >= 0) {
+      scrollX = Math.ceil(MAX_SCROLL_SPEED * (1 - distFromRight / EDGE_MARGIN));
+    } else if (distFromLeft < EDGE_MARGIN && distFromLeft >= 0) {
+      scrollX = -Math.ceil(MAX_SCROLL_SPEED * (1 - distFromLeft / EDGE_MARGIN));
+    }
+
+    // Also scroll when the mouse is outside the textarea bounds
+    if (y > rect.bottom) {
+      scrollY = Math.ceil(MAX_SCROLL_SPEED * Math.min((y - rect.bottom) / EDGE_MARGIN + 1, 3));
+    } else if (y < rect.top) {
+      scrollY = -Math.ceil(MAX_SCROLL_SPEED * Math.min((rect.top - y) / EDGE_MARGIN + 1, 3));
+    }
+
+    if (x > rect.right) {
+      scrollX = Math.ceil(MAX_SCROLL_SPEED * Math.min((x - rect.right) / EDGE_MARGIN + 1, 3));
+    } else if (x < rect.left) {
+      scrollX = -Math.ceil(MAX_SCROLL_SPEED * Math.min((rect.left - x) / EDGE_MARGIN + 1, 3));
+    }
+
+    if (scrollX !== 0 || scrollY !== 0) {
+      textarea.scrollTop += scrollY;
+      textarea.scrollLeft += scrollX;
+
+      // Dispatch scroll event so overlay layers stay in sync
+      textarea.dispatchEvent(new Event("scroll", { bubbles: true }));
+    }
+
+    rafRef.current = requestAnimationFrame(scrollTick);
+  }, [textareaRef]);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      if (e.button !== 0) return;
+      isDraggingRef.current = true;
+      dragScrollActive = true;
+      mousePositionRef.current = { x: e.clientX, y: e.clientY };
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDraggingRef.current) return;
+      mousePositionRef.current = { x: e.clientX, y: e.clientY };
+
+      if (rafRef.current === null) {
+        rafRef.current = requestAnimationFrame(scrollTick);
+      }
+    };
+
+    const handleMouseUp = () => {
+      isDraggingRef.current = false;
+      dragScrollActive = false;
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+
+    textarea.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      textarea.removeEventListener("mousedown", handleMouseDown);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, [textareaRef, scrollTick]);
+}

src/features/editor/stores/state-store.ts

@@ -2,6 +2,7 @@ import type { RefObject } from "react";
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { EDITOR_CONSTANTS } from "@/features/editor/config/constants";
+import { isDragScrolling } from "@/features/editor/hooks/use-drag-scroll";
 import type { Cursor, MultiCursorState, Position, Range } from "@/features/editor/types/editor";
 import { getLineHeight } from "@/features/editor/utils/position";
 import { createSelectors } from "@/utils/zustand-selectors";
@@ -94,6 +95,9 @@ const viewStateCache = new EditorViewStateCacheManager();
 const ensureCursorVisible = (position: Position) => {
   if (typeof window === "undefined") return;
 
+  // Skip scroll adjustment during drag selection auto-scroll
+  if (isDragScrolling()) return;
+
   const viewport = document.querySelector(".editor-viewport") as HTMLDivElement | null;
   if (!viewport) return;