@marimo-team/islands 0.25.3-dev18 → 0.25.3-dev182

package/src/components/editor/links/__tests__/cell-link.test.tsx

@@ -0,0 +1,148 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { HTMLCellId, SCRATCH_CELL_ID } from "@/core/cells/ids";
+import { goToCellLine } from "@/core/codemirror/go-to-definition/utils";
+import { CellLink, CellLinkTraceback } from "../cell-link";
+
+const showCellIfHidden = vi.hoisted(() => vi.fn());
+const targetId = cellId("target");
+
+vi.mock("@/core/cells/actions", () => ({
+  useCellActions: () => ({ showCellIfHidden }),
+}));
+vi.mock("@/core/cells/cells", () => ({
+  useCellIds: () => ({ inOrderIds: [targetId] }),
+  useCellNames: () => ({ [targetId]: "Target" }),
+}));
+vi.mock("@/core/saving/filename", () => ({ useFilename: () => "notebook.py" }));
+vi.mock("@/core/codemirror/go-to-definition/utils", () => ({
+  goToCellLine: vi.fn(),
+}));
+
+function flushNavigation() {
+  act(() => vi.advanceTimersToNextFrame());
+}
+
+describe("CellLink navigation", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+    showCellIfHidden.mockReset();
+  });
+  afterEach(() => vi.useRealTimers());
+
+  it("focuses, scrolls, and highlights the target on keyboard activation", () => {
+    render(
+      <>
+        <CellLink cellId={targetId} />
+        <div
+          id={HTMLCellId.create(targetId)}
+          tabIndex={-1}
+          data-testid="target"
+        />
+      </>,
+    );
+    const target = screen.getByTestId("target");
+    target.scrollIntoView = vi.fn();
+    const focus = vi.spyOn(target, "focus");
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("href", `#${target.id}`);
+    link.focus();
+    // Native anchors emit a click with detail=0 when activated with Enter.
+    expect(fireEvent.click(link, { detail: 0 })).toBe(false);
+    flushNavigation();
+
+    expect(showCellIfHidden).toHaveBeenCalledExactlyOnceWith({
+      cellId: targetId,
+    });
+    expect(target).toHaveFocus();
+    expect(focus).toHaveBeenCalledWith({ preventScroll: true });
+    expect(target.scrollIntoView).toHaveBeenCalledExactlyOnceWith({
+      behavior: "smooth",
+      block: "center",
+    });
+    expect(target).toHaveClass("focus-outline");
+  });
+
+  it("reveals a hidden destination before moving focus", () => {
+    function HiddenCell() {
+      const [visible, setVisible] = useState(false);
+      showCellIfHidden.mockImplementation(() => setVisible(true));
+      return (
+        <>
+          <CellLink cellId={targetId} skipScroll={true} />
+          {visible && (
+            <div
+              id={HTMLCellId.create(targetId)}
+              tabIndex={-1}
+              data-testid="target"
+            />
+          )}
+        </>
+      );
+    }
+    render(<HiddenCell />);
+    expect(screen.queryByTestId("target")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("link"));
+    flushNavigation();
+    expect(screen.getByTestId("target")).toHaveFocus();
+  });
+
+  it.each([
+    { metaKey: true },
+    { ctrlKey: true },
+    { shiftKey: true },
+    { altKey: true },
+    { button: 1 },
+  ])("preserves browser activation for %o", (modifiers) => {
+    render(<CellLink cellId={targetId} />);
+    const link = screen.getByRole("link");
+    link.focus();
+    expect(fireEvent.click(link, modifiers)).toBe(true);
+    flushNavigation();
+    expect(showCellIfHidden).not.toHaveBeenCalled();
+    expect(link).toHaveFocus();
+  });
+
+  it("lets traceback line navigation choose the final focus", () => {
+    render(
+      <>
+        <CellLinkTraceback cellId={targetId} lineNumber={7} />
+        <div
+          id={HTMLCellId.create(targetId)}
+          tabIndex={-1}
+          data-testid="target"
+        >
+          <textarea aria-label="Editor" />
+        </div>
+      </>,
+    );
+    const target = screen.getByTestId("target");
+    target.scrollIntoView = vi.fn();
+    const editor = screen.getByRole("textbox", { name: "Editor" });
+    vi.mocked(goToCellLine).mockImplementation(() => {
+      expect(target).toHaveFocus();
+      editor.focus();
+      return true;
+    });
+    fireEvent.click(screen.getByRole("link"));
+    flushNavigation();
+    expect(goToCellLine).toHaveBeenCalledExactlyOnceWith(targetId, 7);
+    expect(editor).toHaveFocus();
+    expect(target.scrollIntoView).not.toHaveBeenCalled();
+  });
+
+  it("keeps scratch references non-navigable", () => {
+    render(
+      <CellLink cellId={SCRATCH_CELL_ID} formatCellName={() => "scratch"} />,
+    );
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText("scratch"));
+    flushNavigation();
+    expect(showCellIfHidden).not.toHaveBeenCalled();
+  });
+});

package/src/components/editor/links/cell-link.tsx

@@ -1,13 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { JSX } from "react"; /* Copyright 2026 Marimo. All rights reserved. */
-import { useCellActions, useCellIds, useCellNames } from "@/core/cells/cells";
+import { useCellIds, useCellNames } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { type CellId, HTMLCellId, SCRATCH_CELL_ID } from "@/core/cells/ids";
 import { displayCellName } from "@/core/cells/names";
 import { goToCellLine } from "@/core/codemirror/go-to-definition/utils";
 import { useFilename } from "@/core/saving/filename";
 import { cn } from "@/utils/cn";
+import { Events } from "@/utils/events";
 import { Logger } from "../../../utils/Logger";
+import { focusCell } from "../navigation/focus-utils";
 
 interface Props {
   cellId: CellId;
@@ -29,14 +32,20 @@ export const CellLink = (props: Props): JSX.Element => {
   const formatName = formatCellName ?? ((name: string) => name);
 
   return (
-    <div
+    // Reveal hidden cells before scrolling and focusing the destination.
+    // react-doctor-disable-next-line react-doctor/no-prevent-default
+    <a
+      href={
+        cellId === SCRATCH_CELL_ID ? undefined : `#${HTMLCellId.create(cellId)}`
+      }
       className={cn(
-        "inline-block cursor-pointer text-link hover:underline",
+        "inline-block cursor-pointer text-left text-link hover:underline focus-visible:outline focus-visible:outline-ring",
         className,
       )}
-      role="link"
-      tabIndex={-1}
       onClick={(e) => {
+        if (e.defaultPrevented || e.button !== 0 || Events.hasModifier(e)) {
+          return;
+        }
         // Scratch causes a crash since scratch is not registered like a
         // normal cell.
         if (cellId === SCRATCH_CELL_ID) {
@@ -48,13 +57,14 @@ export const CellLink = (props: Props): JSX.Element => {
         requestAnimationFrame(() => {
           const succeeded = scrollAndHighlightCell(cellId, variant, skipScroll);
           if (succeeded) {
+            focusCell(cellId, { preventScroll: true });
             onClick?.();
           }
         });
       }}
     >
       {formatName(displayCellName(cellName, cellIndex))}
-    </div>
+    </a>
   );
 };
 

package/src/components/editor/navigation/__tests__/clipboard.test.ts

@@ -5,15 +5,18 @@ import { act, renderHook } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { asMock, MockModules, Mocks, SetupMocks } from "@/__mocks__/common";
 import { cellId } from "@/__tests__/branded";
-import type { CellActions, NotebookState } from "@/core/cells/cells";
+import type { CellActions } from "@/core/cells/actions";
+import type { NotebookState } from "@/core/cells/cells";
 import { useCellClipboard } from "../clipboard";
 
 // Mock dependencies
 vi.mock("@/components/ui/use-toast", () => MockModules.toast());
 
+vi.mock("@/core/cells/actions", () => ({
+  useCellActions: vi.fn(),
+}));
 vi.mock("@/core/cells/cells", () => ({
   getNotebook: vi.fn(),
-  useCellActions: vi.fn(),
 }));
 
 vi.mock("@/utils/Logger", () => ({
@@ -33,14 +36,15 @@ vi.mock("@/core/cells/pending-cut-service", () => ({
 
 import { MockNotebook } from "@/__mocks__/notebook";
 import { toast } from "@/components/ui/use-toast";
-import { getNotebook, useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
+import { getNotebook } from "@/core/cells/cells";
 import { Logger } from "@/utils/Logger";
 
 describe("useCellClipboard", () => {
   const [mockCellId1, mockCellId2] = MockNotebook.cellIds();
   const mockCellCode1 = "print('hello world')";
   const mockCellCode2 = "x = 42";
-  const mockCreateNewCell = vi.fn();
+  const mockCreateCell = vi.fn();
 
   const mockClipboard = Mocks.clipboard();
 
@@ -70,7 +74,7 @@ describe("useCellClipboard", () => {
     } as NotebookState);
 
     asMock(useCellActions).mockReturnValue({
-      createNewCell: mockCreateNewCell,
+      createCell: mockCreateCell,
     } as unknown as CellActions);
   });
 
@@ -330,11 +334,40 @@ describe("useCellClipboard", () => {
         await result.current.pasteAtCell(mockCellId1);
       });
 
-      expect(mockCreateNewCell).toHaveBeenCalledWith({
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenCalledWith({
+        after: mockCellId1,
+        code: "x = 42",
+        config: {},
+      });
+    });
+
+    it("drops the copied column so the cell joins the column it is pasted into", async () => {
+      const clipboardData = {
+        cells: [{ code: "x = 42", config: { column: 1, hide_code: true } }],
+        version: "1.0",
+      };
+
+      const mockItem = {
+        types: ["web application/x-marimo-cell"],
+        getType: vi.fn().mockResolvedValue(
+          new Blob([JSON.stringify(clipboardData)], {
+            type: "web application/x-marimo-cell",
+          }),
+        ),
+      };
+
+      mockClipboard.read.mockResolvedValue([mockItem]);
+
+      const { result } = renderHook(() => useCellClipboard());
+
+      await act(async () => {
+        await result.current.pasteAtCell(mockCellId1);
+      });
+
+      expect(mockCreateCell).toHaveBeenCalledWith({
+        after: mockCellId1,
         code: "x = 42",
-        autoFocus: true,
+        config: { hide_code: true },
       });
     });
 
@@ -365,24 +398,21 @@ describe("useCellClipboard", () => {
         await result.current.pasteAtCell(mockCellId1);
       });
 
-      expect(mockCreateNewCell).toHaveBeenCalledTimes(3);
-      expect(mockCreateNewCell).toHaveBeenNthCalledWith(3, {
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenCalledTimes(3);
+      expect(mockCreateCell).toHaveBeenNthCalledWith(3, {
+        after: mockCellId1,
         code: "x = 42",
-        autoFocus: true,
+        config: {},
       });
-      expect(mockCreateNewCell).toHaveBeenNthCalledWith(2, {
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenNthCalledWith(2, {
+        after: mockCellId1,
         code: "y = x * 2",
-        autoFocus: true,
+        config: {},
       });
-      expect(mockCreateNewCell).toHaveBeenNthCalledWith(1, {
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenNthCalledWith(1, {
+        after: mockCellId1,
         code: "print(y)",
-        autoFocus: true,
+        config: {},
       });
     });
 
@@ -401,11 +431,9 @@ describe("useCellClipboard", () => {
         await result.current.pasteAtCell(mockCellId1);
       });
 
-      expect(mockCreateNewCell).toHaveBeenCalledWith({
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenCalledWith({
+        after: mockCellId1,
         code: "plain text code",
-        autoFocus: true,
       });
     });
 
@@ -432,11 +460,9 @@ describe("useCellClipboard", () => {
         "Failed to parse clipboard cell data",
         expect.any(Error),
       );
-      expect(mockCreateNewCell).toHaveBeenCalledWith({
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenCalledWith({
+        after: mockCellId1,
         code: "fallback text",
-        autoFocus: true,
       });
     });
 
@@ -522,11 +548,9 @@ describe("useCellClipboard", () => {
         "Failed to parse clipboard cell data",
         expect.any(Error),
       );
-      expect(mockCreateNewCell).toHaveBeenCalledWith({
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenCalledWith({
+        after: mockCellId1,
         code: "fallback text",
-        autoFocus: true,
       });
     });
 
@@ -554,11 +578,9 @@ describe("useCellClipboard", () => {
         await result.current.pasteAtCell(mockCellId1);
       });
 
-      expect(mockCreateNewCell).toHaveBeenCalledWith({
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenCalledWith({
+        after: mockCellId1,
         code: "fallback text",
-        autoFocus: true,
       });
     });
   });

package/src/components/editor/navigation/__tests__/navigation.test.ts

@@ -3,15 +3,37 @@
 
 import type { EditorView } from "@codemirror/view";
 import { act, renderHook } from "@testing-library/react";
-import { Provider } from "jotai";
 import React, { createRef } from "react";
-import { afterAll, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  afterAll,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
 import { Mocks } from "@/__mocks__/common";
+
+const { mockCreateCell, mockMoveToNextCell } = vi.hoisted(() => ({
+  mockCreateCell: vi.fn(),
+  mockMoveToNextCell: vi.fn(),
+}));
+
+import { DocumentWrapper, mockDocumentModel } from "@/__mocks__/document";
 import { MockNotebook } from "@/__mocks__/notebook";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { aiCompletionCellAtom } from "@/core/ai/state";
-import type { CellActions } from "@/core/cells/cells";
+import type { CellActions } from "@/core/cells/actions";
 import { notebookAtom } from "@/core/cells/cells";
+import type { CellId } from "@/core/cells/ids";
+import type { DocumentModel } from "@/core/notebook/document";
+import {
+  cell,
+  CONFIG,
+  document as documentOf,
+  withCells,
+} from "@/core/notebook/document/__tests__/fixtures";
 import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import { signatureHintField } from "@/core/codemirror/completion/signature-hint";
 import {
@@ -30,9 +52,11 @@ import {
 } from "../navigation";
 
 // Mock only the essential dependencies that we need to control
+vi.mock("@/core/cells/actions", () => ({
+  useCellActions: vi.fn(),
+}));
 vi.mock("@/core/cells/cells", async (importOriginal) => ({
   ...(await importOriginal()),
-  useCellActions: vi.fn(),
 }));
 
 vi.mock("@/core/cells/focus", async (importOriginal) => ({
@@ -80,7 +104,7 @@ vi.mock("@codemirror/autocomplete", () => ({
 
 // Get mocked functions
 const mockUseCellActions = vi.mocked(
-  await import("@/core/cells/cells"),
+  await import("@/core/cells/actions"),
 ).useCellActions;
 
 const mockUseSaveNotebook = vi.mocked(
@@ -93,6 +117,8 @@ const mockUseCellClipboard = vi.mocked(
   await import("../clipboard"),
 ).useCellClipboard;
 
+afterEach(() => stopModel());
+
 afterAll(() => {
   vi.resetAllMocks();
 });
@@ -107,11 +133,17 @@ import {
   useIsCellSelected,
 } from "../selection";
 
+// The document the hooks edit, with cellId3's code hidden
+let model: DocumentModel;
+let stopModel = () => {};
+const hideCodeOf = (id: CellId) =>
+  store.get(model.documentAtom)?.cells.get(id)?.config.hide_code;
+
 // Shared render helper
 const renderWithProvider = <T>(hook: () => T) => {
   return renderHook(hook, {
     wrapper: ({ children }) =>
-      React.createElement(Provider, { store }, children),
+      React.createElement(DocumentWrapper, { store, model }, children),
   });
 };
 
@@ -125,17 +157,16 @@ const mockCutCell = vi.fn().mockResolvedValue(undefined);
 const mockPasteCell = vi.fn();
 
 const mockCellActions = MockNotebook.cellActions({
+  createCell: mockCreateCell,
+  moveToNextCell: mockMoveToNextCell,
   focusCell: vi.fn(),
-  moveToNextCell: vi.fn(),
   focusTopCell: vi.fn(),
   focusBottomCell: vi.fn(),
-  createNewCell: vi.fn(),
   moveCell: vi.fn(),
   sendToTop: vi.fn(),
   sendToBottom: vi.fn(),
-  updateCellConfig: vi.fn(),
   markTouched: vi.fn(),
-  deleteCell: vi.fn(),
+  deleteCells: vi.fn(),
   undoDeleteCell: vi.fn(),
 });
 
@@ -207,6 +238,23 @@ describe("useCellNavigationProps", () => {
       },
     });
     store.set(notebookAtom, notebookState);
+    stopModel();
+    ({ model, stop: stopModel } = mockDocumentModel(
+      store,
+      withCells(
+        documentOf(),
+        {
+          c1: null,
+          c2: null,
+          [cellId1]: cell(cellId1, ""),
+          [cellId2]: cell(cellId2, ""),
+          [cellId3]: cell(cellId3, "", {
+            config: { ...CONFIG, hide_code: true },
+          }),
+        },
+        [cellId1, cellId2, cellId3],
+      ),
+    ));
 
     // Clear AI completion state
     store.set(aiCompletionCellAtom, null);
@@ -367,7 +415,7 @@ describe("useCellNavigationProps", () => {
       });
 
       expect(mockRunCell).toHaveBeenCalled();
-      expect(mockCellActions.moveToNextCell).toHaveBeenCalledWith({
+      expect(mockMoveToNextCell).toHaveBeenCalledWith({
         cellId: mockCellId,
         before: false,
       });
@@ -399,11 +447,7 @@ describe("useCellNavigationProps", () => {
         result.current.onKeyDown?.(mockEvent);
       });
 
-      expect(mockCellActions.createNewCell).toHaveBeenCalledWith({
-        cellId: mockCellId,
-        before: true,
-        autoFocus: true,
-      });
+      expect(mockCreateCell).toHaveBeenCalledWith({ before: mockCellId });
     });
 
     it("should create cell after when 'b' key is pressed", () => {
@@ -417,11 +461,7 @@ describe("useCellNavigationProps", () => {
         result.current.onKeyDown?.(mockEvent);
       });
 
-      expect(mockCellActions.createNewCell).toHaveBeenCalledWith({
-        cellId: mockCellId,
-        before: false,
-        autoFocus: true,
-      });
+      expect(mockCreateCell).toHaveBeenCalledWith({ after: mockCellId });
     });
 
     it("should add an import before and a SQL cell after when 'q' is pressed", () => {
@@ -435,18 +475,15 @@ describe("useCellNavigationProps", () => {
         result.current.onKeyDown?.(Mocks.keyboardEvent({ key: "q" }));
       });
 
-      expect(mockCellActions.createNewCell).toHaveBeenNthCalledWith(
+      expect(mockCreateCell).toHaveBeenNthCalledWith(
         1,
         expect.objectContaining({
-          cellId: mockCellId,
-          before: true,
+          before: mockCellId,
           code: "import marimo as mo",
         }),
       );
-      expect(mockCellActions.createNewCell).toHaveBeenNthCalledWith(2, {
-        cellId: mockCellId,
-        before: false,
-        autoFocus: true,
+      expect(mockCreateCell).toHaveBeenNthCalledWith(2, {
+        after: mockCellId,
         code: LanguageAdapters.sql.defaultCode,
       });
     });
@@ -1034,7 +1071,7 @@ describe("useCellNavigationProps", () => {
 
       expect(mockRunCell).toHaveBeenCalledWith([cellId1, cellId2]);
       // Should move to next cell after the last selected cell
-      expect(mockCellActions.moveToNextCell).toHaveBeenCalledWith({
+      expect(mockMoveToNextCell).toHaveBeenCalledWith({
         cellId: cellId2,
         before: false,
       });
@@ -1066,7 +1103,7 @@ describe("useCellNavigationProps", () => {
 
       expect(mockRunCell).toHaveBeenCalledWith([cellId2, cellId3]);
       // Should move to previous cell before the first selected cell
-      expect(mockCellActions.moveToNextCell).toHaveBeenCalledWith({
+      expect(mockMoveToNextCell).toHaveBeenCalledWith({
         cellId: cellId2,
         before: true,
       });
@@ -1167,15 +1204,7 @@ describe("useCellNavigationProps", () => {
         result.current.onKeyDown?.(mockEvent);
       });
 
-      expect(mockRequestClient.saveCellConfig).toHaveBeenCalledWith({
-        configs: {
-          [cellId1]: { hide_code: true },
-        },
-      });
-      expect(mockCellActions.updateCellConfig).toHaveBeenCalledWith({
-        cellId: cellId1,
-        config: { hide_code: true },
-      });
+      expect(hideCodeOf(cellId1)).toBe(true);
       expect(mockEvent.preventDefault).toHaveBeenCalled();
     });
 
@@ -1190,15 +1219,7 @@ describe("useCellNavigationProps", () => {
         result.current.onKeyDown?.(mockEvent);
       });
 
-      expect(mockRequestClient.saveCellConfig).toHaveBeenCalledWith({
-        configs: {
-          [cellId3]: { hide_code: false },
-        },
-      });
-      expect(mockCellActions.updateCellConfig).toHaveBeenCalledWith({
-        cellId: cellId3,
-        config: { hide_code: false },
-      });
+      expect(hideCodeOf(cellId3)).toBe(false);
     });
 
     it("should toggle hide code for multiple selected cells", () => {
@@ -1220,20 +1241,8 @@ describe("useCellNavigationProps", () => {
         result.current.onKeyDown?.(mockEvent);
       });
 
-      expect(mockRequestClient.saveCellConfig).toHaveBeenCalledWith({
-        configs: {
-          [cellId1]: { hide_code: true },
-          [cellId2]: { hide_code: true },
-        },
-      });
-      expect(mockCellActions.updateCellConfig).toHaveBeenCalledWith({
-        cellId: cellId1,
-        config: { hide_code: true },
-      });
-      expect(mockCellActions.updateCellConfig).toHaveBeenCalledWith({
-        cellId: cellId2,
-        config: { hide_code: true },
-      });
+      expect(hideCodeOf(cellId1)).toBe(true);
+      expect(hideCodeOf(cellId2)).toBe(true);
     });
   });
 
@@ -1701,7 +1710,7 @@ describe("useCellNavigationProps", () => {
         result.current.onKeyDown?.(mockEvent);
       });
 
-      expect(mockCellActions.createNewCell).not.toHaveBeenCalled();
+      expect(mockCreateCell).not.toHaveBeenCalled();
       expect(mockEvent.preventDefault).not.toHaveBeenCalled();
     });
 
@@ -1716,7 +1725,7 @@ describe("useCellNavigationProps", () => {
         result.current.onKeyDown?.(mockEvent);
       });
 
-      expect(mockCellActions.createNewCell).not.toHaveBeenCalled();
+      expect(mockCreateCell).not.toHaveBeenCalled();
       expect(mockEvent.preventDefault).not.toHaveBeenCalled();
     });
   });