@marimo-team/islands 0.23.14-dev37 → 0.23.14-dev39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.14-dev37",
+  "version": "0.23.14-dev39",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/editor/cell/cell-context-menu.tsx

@@ -23,7 +23,7 @@ import { toast } from "@/components/ui/use-toast";
 import { useCellData, useCellRuntime } from "@/core/cells/cells";
 import { CellOutputId } from "@/core/cells/ids";
 import { isOutputEmpty } from "@/core/cells/outputs";
-import { goToDefinitionAtCursorPosition } from "@/core/codemirror/go-to-definition/utils";
+import { goToDefinitionWithLspFallback } from "@/core/codemirror/go-to-definition/utils";
 import { sendToPanelManager } from "@/core/vscode/vscode-bindings";
 import { copyImageToClipboard, copyToClipboard } from "@/utils/copy";
 import { getImageExtension } from "@/utils/filenames";
@@ -170,7 +170,7 @@ export const CellActionsContextMenu = ({
           // Only suppress focus restoration when we actually navigated;
           // otherwise let Radix return focus to the trigger cell.
           suppressCloseAutoFocus.current =
-            goToDefinitionAtCursorPosition(editorView);
+            goToDefinitionWithLspFallback(editorView);
         }
       },
     },

package/src/components/editor/code/__tests__/readonly-python-code.test.tsx

@@ -0,0 +1,79 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ReadonlyCode } from "../readonly-python-code";
+
+beforeAll(() => {
+  SetupMocks.resizeObserver();
+});
+
+/**
+ * The only button is the show/hide toggle: copy is disabled and the
+ * insert-cell button is off by default.
+ */
+function renderReadonly(props: { initiallyHideCode?: boolean }) {
+  return render(
+    <TooltipProvider>
+      <ReadonlyCode code="x = 1" showCopyCode={false} {...props} />
+    </TooltipProvider>,
+  );
+}
+
+function isCollapsed(root: ParentNode) {
+  return root.querySelector(".cm")?.classList.contains("opacity-20") ?? false;
+}
+
+describe("ReadonlyCode", () => {
+  it("starts collapsed when initiallyHideCode is true", () => {
+    const { container } = renderReadonly({ initiallyHideCode: true });
+    expect(isCollapsed(container)).toBe(true);
+  });
+
+  it("starts expanded when initiallyHideCode is false", () => {
+    const { container } = renderReadonly({ initiallyHideCode: false });
+    expect(isCollapsed(container)).toBe(false);
+  });
+
+  it("starts expanded when initiallyHideCode is unset", () => {
+    const { container } = renderReadonly({});
+    expect(isCollapsed(container)).toBe(false);
+  });
+
+  it("toggles visibility locally on click", () => {
+    const { container } = renderReadonly({ initiallyHideCode: true });
+    const toggle = screen.getByRole("button");
+
+    fireEvent.click(toggle);
+    expect(isCollapsed(container)).toBe(false);
+
+    fireEvent.click(toggle);
+    expect(isCollapsed(container)).toBe(true);
+  });
+
+  it("keeps each instance's visibility independent", () => {
+    const { container } = render(
+      <TooltipProvider>
+        <ReadonlyCode
+          code="a = 1"
+          showCopyCode={false}
+          initiallyHideCode={true}
+        />
+        <ReadonlyCode
+          code="b = 2"
+          showCopyCode={false}
+          initiallyHideCode={true}
+        />
+      </TooltipProvider>,
+    );
+    const [firstToggle] = screen.getAllByRole("button");
+    const [first, second] = container.querySelectorAll(".cm");
+
+    fireEvent.click(firstToggle);
+
+    expect(first.classList.contains("opacity-20")).toBe(false);
+    expect(second.classList.contains("opacity-20")).toBe(true);
+  });
+});

package/src/components/editor/code/readonly-python-code.tsx

@@ -2,18 +2,24 @@
 
 import { markdown } from "@codemirror/lang-markdown";
 import { sql } from "@codemirror/lang-sql";
+import {
+  defaultHighlightStyle,
+  syntaxHighlighting,
+} from "@codemirror/language";
 import CodeMirror, {
   EditorView,
   type ReactCodeMirrorProps,
 } from "@uiw/react-codemirror";
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon } from "lucide-react";
-import { memo, useState } from "react";
+import { memo, useMemo, useState } from "react";
 import { useAddCodeToNewCell } from "@/components/editor/cell/useAddCell";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import { customPythonLanguageSupport } from "@/core/codemirror/language/languages/python";
+import { darkTheme } from "@/core/codemirror/theme/dark";
+import { lightTheme } from "@/core/codemirror/theme/light";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -72,33 +78,39 @@ export const ReadonlyCode = memo(
     } = props;
     const [hideCode, setHideCode] = useState(initiallyHideCode);
 
+    const extensions = useMemo(
+      () => [
+        theme === "dark" ? darkTheme : lightTheme,
+        syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+        ...readonlyCodeExtensions(language),
+      ],
+      [theme, language],
+    );
+
     return (
       <div
         className={cn(
-          "relative hover-actions-parent w-full overflow-hidden",
+          "relative hover-actions-parent w-full overflow-hidden pb-1",
           className,
         )}
       >
-        {showHideCode && hideCode && (
-          <HideCodeButton
-            tooltip="Show code"
-            onClick={() => setHideCode(false)}
-          />
-        )}
         <div className="absolute top-0 right-0 my-1 mx-2 z-10 hover-action flex gap-2">
           {showCopyCode && <CopyButton text={code} />}
           {insertNewCell && <InsertNewCell code={code} />}
-          {showHideCode && !hideCode && (
-            <EyeCloseButton onClick={() => setHideCode(true)} />
+          {showHideCode && (
+            <ToggleCodeButton
+              hidden={hideCode ?? false}
+              onClick={() => setHideCode(!hideCode)}
+            />
           )}
         </div>
         <CodeMirror
           {...rest}
           className={cn("cm", hideCode && "opacity-20 h-8 overflow-hidden")}
-          theme={theme === "dark" ? "dark" : "light"}
+          theme="none"
           height="100%"
-          editable={!hideCode}
-          extensions={readonlyCodeExtensions(language)}
+          editable={false}
+          extensions={extensions}
           value={code}
           readOnly={true}
         />
@@ -123,35 +135,28 @@ const CopyButton = (props: { text: string }) => {
   );
 };
 
-const EyeCloseButton = (props: { onClick: () => void }) => {
+const ToggleCodeButton = (props: { hidden: boolean; onClick: () => void }) => {
   return (
-    <Tooltip content="Hide code" usePortal={false}>
+    <Tooltip
+      content={props.hidden ? "Show code" : "Hide code"}
+      usePortal={false}
+    >
       <Button
         onClick={props.onClick}
         size="xs"
         className="py-0"
         variant="secondary"
       >
-        <EyeOffIcon size={14} strokeWidth={1.5} />
+        {props.hidden ? (
+          <EyeIcon size={14} strokeWidth={1.5} />
+        ) : (
+          <EyeOffIcon size={14} strokeWidth={1.5} />
+        )}
       </Button>
     </Tooltip>
   );
 };
 
-export const HideCodeButton = (props: {
-  tooltip?: string;
-  className?: string;
-  onClick: () => void;
-}) => {
-  return (
-    <div className={props.className} onClick={props.onClick}>
-      <Tooltip usePortal={false} content={props.tooltip}>
-        <EyeIcon className="hover-action w-5 h-5 text-muted-foreground cursor-pointer absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-80 hover:opacity-100 z-20" />
-      </Tooltip>
-    </div>
-  );
-};
-
 const InsertNewCell = (props: { code: string }) => {
   const addCodeToNewCell = useAddCodeToNewCell();
 

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -399,7 +399,7 @@ const VerticalCell = memo(
           {display && (
             <div className="tray">
               <ReadonlyCode
-                initiallyHideCode={config.hide_code || kiosk}
+                initiallyHideCode={config.hide_code}
                 code={display.code}
                 language={display.language}
               />

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

@@ -2,13 +2,17 @@
 
 import { python } from "@codemirror/lang-python";
 import { EditorState } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
-import { afterEach, describe, expect, test } from "vitest";
+import { EditorView, keymap } from "@codemirror/view";
+import { afterEach, describe, expect, test, vi } from "vitest";
 import { cellId, variableName } from "@/__tests__/branded";
 import { initialNotebookState, notebookAtom } from "@/core/cells/cells";
 import { store } from "@/core/state/jotai";
 import { variablesAtom } from "@/core/variables/state";
-import { goToDefinitionAtCursorPosition } from "../utils";
+import {
+  goToDefinitionAtCursorPosition,
+  goToDefinitionWithLspFallback,
+  requestLspGoToDefinition,
+} from "../utils";
 
 async function tick(): Promise<void> {
   await new Promise((resolve) => requestAnimationFrame(resolve));
@@ -181,3 +185,71 @@ print(mymodule)`;
     );
   });
 });
+
+describe("goToDefinitionWithLspFallback", () => {
+  test("falls through to LSP when marimo cannot resolve the symbol", () => {
+    const lspGoToDefinition = vi.fn(() => true);
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "parser.add_argument('--foo')",
+        selection: { anchor: "parser.add_argument".indexOf("add_argument") },
+        extensions: [
+          python(),
+          keymap.of([{ key: "F12", run: lspGoToDefinition }]),
+        ],
+      }),
+      parent: document.body,
+    });
+    views.push(view);
+
+    const result = goToDefinitionWithLspFallback(view);
+
+    expect(result).toBe(true);
+    expect(lspGoToDefinition).toHaveBeenCalledOnce();
+  });
+
+  test("does not invoke LSP when marimo resolves the symbol", async () => {
+    const lspGoToDefinition = vi.fn(() => true);
+    const code = "a = 10\nprint(a)";
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: code,
+        selection: { anchor: code.indexOf("a", 3) },
+        extensions: [
+          python(),
+          keymap.of([{ key: "F12", run: lspGoToDefinition }]),
+        ],
+      }),
+      parent: document.body,
+    });
+    views.push(view);
+
+    const result = goToDefinitionWithLspFallback(view);
+
+    expect(result).toBe(true);
+    expect(lspGoToDefinition).not.toHaveBeenCalled();
+    await tick();
+    expect(view.state.selection.main.head).toBe(0);
+  });
+
+  test("falls through with a modified shortcut like Ctrl-F12", () => {
+    const lspGoToDefinition = vi.fn(() => true);
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "parser.add_argument('--foo')",
+        selection: { anchor: "parser.add_argument".indexOf("add_argument") },
+        extensions: [
+          python(),
+          keymap.of([{ key: "Ctrl-F12", run: lspGoToDefinition }]),
+        ],
+      }),
+      parent: document.body,
+    });
+    views.push(view);
+
+    const result = requestLspGoToDefinition(view, "Ctrl-F12");
+
+    expect(result).toBe(true);
+    expect(lspGoToDefinition).toHaveBeenCalledOnce();
+  });
+});

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

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { EditorView } from "@codemirror/view";
 import { createUnderlinePlugin, underlineField } from "./underline";
-import { goToDefinition } from "./utils";
+import { goToDefinitionWithLspFallback } from "./utils";
 
 /**
  * Create a go-to-definition extension.
@@ -9,8 +9,8 @@ import { goToDefinition } from "./utils";
 export function goToDefinitionBundle() {
   return [
     underlineField,
-    createUnderlinePlugin((view, variableName) => {
-      goToDefinition(view, variableName);
+    createUnderlinePlugin((view) => {
+      goToDefinitionWithLspFallback(view);
     }),
     EditorView.baseTheme({
       ".underline": {

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

@@ -55,12 +55,9 @@ class MetaUnderlineVariablePlugin {
   private view: EditorView;
   private commandClickMode: boolean;
   private hoveredRange: { from: number; to: number; position: number } | null;
-  private onClick: (view: EditorView, variableName: string) => void;
+  private onClick: (view: EditorView) => void;
 
-  constructor(
-    view: EditorView,
-    onClick: (view: EditorView, variableName: string) => void,
-  ) {
+  constructor(view: EditorView, onClick: (view: EditorView) => void) {
     this.view = view;
     this.commandClickMode = false;
     this.hoveredRange = null;
@@ -191,20 +188,16 @@ class MetaUnderlineVariablePlugin {
   // If we have a hovered range, go to it
   private click = (event: MouseEvent) => {
     if (this.hoveredRange) {
-      const variableName = this.view.state.doc.sliceString(
-        this.hoveredRange.from,
-        this.hoveredRange.to,
-      );
       event.preventDefault();
       event.stopPropagation();
-      this.onClick(this.view, variableName);
-      // Move the cursor to the clicked position
+      // Move the cursor before resolving so LSP uses the clicked position.
       this.view.dispatch({
         selection: {
           head: this.hoveredRange.position,
           anchor: this.hoveredRange.position,
         },
       });
+      this.onClick(this.view);
     }
   };
 
@@ -217,7 +210,5 @@ class MetaUnderlineVariablePlugin {
   }
 }
 
-export const createUnderlinePlugin = (
-  onClick: (view: EditorView, variableName: string) => void,
-) =>
+export const createUnderlinePlugin = (onClick: (view: EditorView) => void) =>
   ViewPlugin.define((view) => new MetaUnderlineVariablePlugin(view, onClick));

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

@@ -2,8 +2,14 @@
 
 import { closeCompletion } from "@codemirror/autocomplete";
 import type { EditorState } from "@codemirror/state";
-import { closeHoverTooltips, type EditorView } from "@codemirror/view";
+import {
+  closeHoverTooltips,
+  type EditorView,
+  type KeyBinding,
+  keymap,
+} from "@codemirror/view";
 import type { CellId } from "@/core/cells/ids";
+import { hotkeysAtom, platformAtom } from "../../config/config";
 import { notebookAtom } from "../../cells/cells";
 import { store } from "../../state/jotai";
 import { variablesAtom } from "../../variables/state";
@@ -11,6 +17,20 @@ import type { VariableName, Variables } from "../../variables/types";
 import { getPositionAtWordBounds } from "../completion/hints";
 import { goToLine, goToVariableDefinition } from "./commands";
 
+function keymapBindingMatchesHotkey(
+  binding: KeyBinding,
+  hotkey: string,
+): boolean {
+  const platform = store.get(platformAtom);
+  const bindingKey =
+    platform === "mac"
+      ? (binding.mac ?? binding.key)
+      : platform === "windows"
+        ? (binding.win ?? binding.key)
+        : (binding.linux ?? binding.key);
+  return bindingKey === hotkey;
+}
+
 /**
  * Get the word under the cursor.
  */
@@ -68,6 +88,34 @@ export function goToDefinitionAtCursorPosition(view: EditorView): boolean {
   return goToDefinition(view, word, position);
 }
 
+/**
+ * Invoke the editor's go-to-definition keymap handlers for the configured
+ * hotkey. Matches CodeMirror key strings directly (including customized
+ * shortcuts like `Ctrl-F12`) instead of synthesizing keyboard events.
+ */
+export function requestLspGoToDefinition(
+  view: EditorView,
+  hotkey = store.get(hotkeysAtom).getHotkey("cell.goToDefinition").key,
+): boolean {
+  for (const binding of view.state.facet(keymap).flat()) {
+    if (keymapBindingMatchesHotkey(binding, hotkey) && binding.run?.(view)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Go to the definition under the cursor, falling back to the language server
+ * when marimo cannot resolve the symbol (e.g. external library code).
+ */
+export function goToDefinitionWithLspFallback(view: EditorView): boolean {
+  if (goToDefinitionAtCursorPosition(view)) {
+    return true;
+  }
+  return requestLspGoToDefinition(view);
+}
+
 /**
  * Go to the definition of the variable under the cursor.
  * @param view The editor view at which the command was invoked.