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

package/package.json

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

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}
               />