@marimo-team/islands 0.23.16-dev26 → 0.23.16-dev29

package/src/core/codemirror/find-replace/__tests__/navigate.test.ts

@@ -20,6 +20,26 @@ vi.mock("@/core/cells/cells", () => ({
   getAllEditorViews: () => mockGetAllEditorViews(),
 }));
 
+/**
+ * A view stub that only carries what navigate needs
+ */
+function createMockView(state: EditorState): EditorView {
+  const cell = document.createElement("div");
+  cell.className = "marimo-cell";
+  // jsdom doesn't implement scrollIntoView.
+  cell.scrollIntoView = vi.fn();
+  const dom = document.createElement("div");
+  cell.append(dom);
+
+  return {
+    state,
+    dom,
+    // Don't actually apply changes; it's complex to mock properly and the
+    // assertions only care that dispatch was called.
+    dispatch: vi.fn(),
+  } as unknown as EditorView;
+}
+
 describe("navigate", () => {
   let view1: EditorView;
   let view2: EditorView;
@@ -36,20 +56,8 @@ describe("navigate", () => {
     });
 
     // Create mock views that track dispatch calls
-    view1 = {
-      state: state1,
-      dispatch: vi.fn(() => {
-        // Mock dispatch - in real tests we just need to verify it was called
-        // Don't actually apply changes as it's complex to mock properly
-      }),
-    } as unknown as EditorView;
-
-    view2 = {
-      state: state2,
-      dispatch: vi.fn(() => {
-        // Mock dispatch - in real tests we just need to verify it was called
-      }),
-    } as unknown as EditorView;
+    view1 = createMockView(state1);
+    view2 = createMockView(state2);
 
     mockViews = [view1, view2];
     mockGetAllEditorViews.mockReturnValue(mockViews);
@@ -234,6 +242,22 @@ describe("navigate", () => {
 
       expect(result).toBe(false);
     });
+
+    it("should scroll the cell owning the match into view", async () => {
+      const cell = view1.dom.closest(".marimo-cell");
+      invariant(cell, "mock view should be inside a cell");
+
+      expect(findNext()).toBeTruthy();
+
+      // The scroll is deferred a frame.
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+
+      expect(cell.scrollIntoView).toHaveBeenCalledWith({
+        behavior: "instant",
+        block: "nearest",
+        inline: "nearest",
+      });
+    });
   });
 
   describe("findPrev", () => {
@@ -319,10 +343,7 @@ describe("navigate", () => {
         extensions: [EditorState.readOnly.of(true)],
       });
 
-      const readOnlyView = {
-        state: readOnlyState,
-        dispatch: vi.fn(),
-      } as unknown as EditorView;
+      const readOnlyView = createMockView(readOnlyState);
 
       // Replace view1 with read-only view temporarily
       mockGetAllEditorViews.mockReturnValueOnce([readOnlyView, view2]);
@@ -568,10 +589,7 @@ describe("navigate", () => {
         doc: Text.of(["hello world hello there hello"]),
       });
 
-      const testView = {
-        state: testDoc,
-        dispatch: vi.fn(),
-      } as unknown as EditorView;
+      const testView = createMockView(testDoc);
 
       mockGetAllEditorViews.mockReturnValue([testView]);
 
@@ -613,10 +631,7 @@ describe("navigate", () => {
         doc: Text.of([""]),
       });
 
-      const emptyView = {
-        state: emptyState,
-        dispatch: vi.fn(),
-      } as unknown as EditorView;
+      const emptyView = createMockView(emptyState);
 
       mockGetAllEditorViews.mockReturnValue([emptyView]);
 
@@ -629,10 +644,7 @@ describe("navigate", () => {
         doc: Text.of(["orphan content"]),
       });
 
-      const orphanView = {
-        state: orphanState,
-        dispatch: vi.fn(),
-      } as unknown as EditorView;
+      const orphanView = createMockView(orphanState);
 
       store.set(findReplaceAtom, {
         type: "setCurrentView",

package/src/core/codemirror/find-replace/navigate.ts

@@ -6,6 +6,7 @@ import { EditorView } from "@codemirror/view";
 import { getAllEditorViews } from "@/core/cells/cells";
 import { replaceEditorContent } from "@/core/codemirror/replace-editor-content";
 import { store } from "@/core/state/jotai";
+import { scrollOwnerCell } from "../utils";
 import { asQueryCreator, type QueryType } from "./query";
 import { findReplaceAtom } from "./state";
 
@@ -85,6 +86,7 @@ const findInDirection = (direction: "next" | "prev") =>
         effects: [EditorView.scrollIntoView(selection.main, { y: "center" })],
         userEvent: "select.search",
       });
+      scrollOwnerCell(view);
       store.set(findReplaceAtom, {
         type: "setCurrentView",
         view,

package/src/core/codemirror/go-to-definition/__tests__/commands.test.ts

@@ -3,14 +3,14 @@
 import { python } from "@codemirror/lang-python";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
-import { afterEach, describe, expect, test } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 import { goToVariableDefinition } from "../commands";
 
 async function tick(): Promise<void> {
   await new Promise((resolve) => requestAnimationFrame(resolve));
 }
 
-function createEditor(content: string) {
+function createEditor(content: string, parent: HTMLElement = document.body) {
   const state = EditorState.create({
     doc: content,
     extensions: [python()],
@@ -18,7 +18,7 @@ function createEditor(content: string) {
 
   const view = new EditorView({
     state,
-    parent: document.body,
+    parent,
   });
 
   return view;
@@ -383,6 +383,27 @@ print('myVar')`);
       "
     `);
   });
+
+  test("scrolls the cell owning the definition into view", async () => {
+    const cell = document.createElement("div");
+    cell.className = "marimo-cell";
+    // jsdom doesn't implement scrollIntoView.
+    cell.scrollIntoView = vi.fn();
+    document.body.append(cell);
+
+    view = createEditor("myVar = 10\nprint(myVar)", cell);
+    expect(goToVariableDefinition(view, "myVar")).toBe(true);
+    // The jump and the scroll are both deferred to the next frame.
+    await tick();
+
+    expect(cell.scrollIntoView).toHaveBeenCalledWith({
+      behavior: "instant",
+      block: "nearest",
+      inline: "nearest",
+    });
+
+    cell.remove();
+  });
 });
 
 /**

package/src/core/codemirror/go-to-definition/commands.ts

@@ -4,6 +4,7 @@ import { syntaxTree } from "@codemirror/language";
 import type { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import type { SyntaxNode, Tree, TreeCursor } from "@lezer/common";
+import { scrollOwnerCell } from "../utils";
 
 const SCOPE_CREATING_NODES = new Set([
   "FunctionDefinition",
@@ -45,6 +46,8 @@ function goToPosition(view: EditorView, from: number): void {
       }),
     });
   });
+
+  scrollOwnerCell(view);
 }
 
 function findFirstMatchingVariable(

package/src/core/codemirror/utils.ts

@@ -52,6 +52,34 @@ export function focusInputAndMoveToEnd(
   });
 }
 
+/**
+ * Scrolls the `.marimo-cell` that owns `view` into view.
+ *
+ * `EditorView.scrollIntoView` doesn't work in columns mode: it stops at the
+ * first overflowing ancestor even if that ancestor doesn't actually scroll,
+ * so it never reaches the real horizontally-scrolling container. The
+ * browser's native `Element.scrollIntoView` doesn't have that problem.
+ *
+ * Deferred a frame so CodeMirror's own scroll settles first; otherwise it
+ * clamps this scroll right back.
+ *
+ * https://github.com/marimo-team/marimo/issues/10222
+ */
+export function scrollOwnerCell(view: EditorView): void {
+  const cell = view.dom.closest(".marimo-cell");
+  if (!cell) {
+    return;
+  }
+
+  requestAnimationFrame(() => {
+    cell.scrollIntoView({
+      behavior: "instant",
+      block: "nearest",
+      inline: "nearest",
+    });
+  });
+}
+
 export function isInVimMode(ev: EditorView): boolean {
   return getCM(ev)?.state.vim != null;
 }