@marimo-team/islands 0.25.3-dev24 → 0.25.3-dev245

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: () => [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-list.tsx

@@ -25,7 +25,7 @@ export const CellLinkList: React.FC<Props> = ({
 }) => {
   const cellIndex = useCellIds();
   const sortedCellIds = cellIds.toSorted((a, b) => {
-    return cellIndex.inOrderIds.indexOf(a) - cellIndex.inOrderIds.indexOf(b);
+    return cellIndex.indexOf(a) - cellIndex.indexOf(b);
   });
 
   if (cellIds.length === 0) {

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;
@@ -24,19 +27,25 @@ export const CellLink = (props: Props): JSX.Element => {
   const { className, cellId, variant, onClick, formatCellName, skipScroll } =
     props;
   const cellName = useCellNames()[cellId] ?? "";
-  const cellIndex = useCellIds().inOrderIds.indexOf(cellId);
+  const cellIndex = useCellIds().indexOf(cellId);
   const { showCellIfHidden } = useCellActions();
   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,
       });
     });
   });