@marimo-team/islands 0.23.10-dev8 → 0.23.10

package/src/components/editor/file-tree/file-explorer.tsx

@@ -9,8 +9,6 @@ import {
   CopyMinusIcon,
   DownloadIcon,
   ExternalLinkIcon,
-  EyeIcon,
-  EyeOffIcon,
   FilePlus2Icon,
   FolderPlusIcon,
   ListTreeIcon,
@@ -43,6 +41,7 @@ import {
   MENU_ITEM_ICON_CLASS,
   RefreshIconButton,
   TreeChevron,
+  VisibilityToggleButton,
 } from "@/components/editor/file-tree/tree-actions";
 import { MarimoIcon, MarimoPlusIcon } from "@/components/icons/marimo-icons";
 import { Spinner } from "@/components/icons/spinner";
@@ -338,22 +337,13 @@ const Toolbar = ({
         data-testid="file-explorer-refresh-button"
         onClick={onRefresh}
       />
-      <Tooltip
-        content={showHiddenFiles ? "Hide hidden files" : "Show hidden files"}
-      >
-        <Button
-          data-testid="file-explorer-hidden-files-button"
-          onClick={onHidden}
-          variant="text"
-          size="xs"
-        >
-          {showHiddenFiles ? (
-            <EyeIcon size={16} className="text-primary" />
-          ) : (
-            <EyeOffIcon size={16} />
-          )}
-        </Button>
-      </Tooltip>
+      <VisibilityToggleButton
+        data-testid="file-explorer-hidden-files-button"
+        isVisible={showHiddenFiles}
+        onToggle={onHidden}
+        showTooltip="Show hidden files"
+        hideTooltip="Hide hidden files"
+      />
       <Tooltip content="Collapse all folders">
         <Button
           data-testid="file-explorer-collapse-button"

package/src/components/editor/file-tree/tree-actions.tsx

@@ -2,11 +2,13 @@
 
 import {
   ChevronRightIcon,
+  EyeIcon,
+  EyeOffIcon,
   MoreVerticalIcon,
   RefreshCwIcon,
 } from "lucide-react";
 import React, { useCallback, useState } from "react";
-import { Button } from "@/components/ui/button";
+import { Button, type ButtonProps } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
 
@@ -73,6 +75,49 @@ export const RefreshIconButton: React.FC<{
   return <Tooltip content={tooltip}>{button}</Tooltip>;
 };
 
+/**
+ * Toggle button that switches between an eye (visible) and crossed-out eye
+ * (hidden) icon. Used to show/hide optional items in toolbars, e.g. hidden
+ * files in the file explorer or empty schemas in the data sources panel.
+ */
+export const VisibilityToggleButton: React.FC<{
+  /** Whether the optional items are currently visible. */
+  isVisible: boolean;
+  onToggle: () => void;
+  showTooltip: string;
+  hideTooltip: string;
+  size?: ButtonProps["size"];
+  className?: string;
+  iconClassName?: string;
+  "data-testid"?: string;
+}> = ({
+  isVisible,
+  onToggle,
+  showTooltip,
+  hideTooltip,
+  size = "xs",
+  className,
+  iconClassName,
+  "data-testid": dataTestId,
+}) => {
+  const Icon = isVisible ? EyeIcon : EyeOffIcon;
+  return (
+    <Tooltip content={isVisible ? hideTooltip : showTooltip}>
+      <Button
+        data-testid={dataTestId}
+        variant="text"
+        size={size}
+        className={className}
+        onClick={onToggle}
+      >
+        <Icon
+          className={cn("h-4 w-4", isVisible && "text-primary", iconClassName)}
+        />
+      </Button>
+    </Tooltip>
+  );
+};
+
 /**
  * Three-dot menu trigger that fades in on row hover.
  * Must be inside a `group` container.

package/src/components/editor/notebook-cell.tsx

@@ -58,7 +58,6 @@ import type { UserConfig } from "../../core/config/config-schema";
 import { isAppInteractionDisabled } from "../../core/websocket/connection-utils";
 import { useCellRenderCount } from "../../hooks/useCellRenderCount";
 import type { Theme } from "../../theme/useTheme";
-import { derefNotNull } from "../../utils/dereference";
 import { Functions } from "../../utils/functions";
 import { Logger } from "../../utils/Logger";
 import { renderShortcut } from "../shortcuts/renderShortcut";
@@ -233,8 +232,9 @@ export type CellComponentActions = Pick<
 export interface CellHandle {
   /**
    * The CodeMirror editor view.
+   * TODO: merge this with editorViewOrNull
    */
-  editorView: EditorView;
+  editorView: EditorView | null;
   /**
    * The CodeMirror editor view, or null if it is not yet mounted.
    */
@@ -280,7 +280,7 @@ const CellComponent = (props: CellProps) => {
     ref,
     () => ({
       get editorView() {
-        return derefNotNull(editorView);
+        return editorView.current;
       },
       get editorViewOrNull() {
         return editorView.current;

package/src/components/editor/renderers/slides-layout/__tests__/plugin.test.ts

@@ -248,6 +248,26 @@ const BACKWARDS_COMPAT_SNAPSHOTS: BackwardsCompatCase[] = [
       ],
     },
   },
+  {
+    // `showCode` was added to SlideConfig. The validator must know about it (so
+    // it isn't silently stripped), the deserializer must carry it through, and
+    // serialize → deserialize must round-trip both values.
+    label: "showCode round-trips through validate + (de)serialize",
+    input: {
+      cells: [
+        { type: "slide", showCode: true },
+        { type: "fragment", showCode: false },
+      ],
+    },
+    expected: {
+      deck: {},
+      cellIds: ["a", "b"],
+      cellEntries: [
+        ["a", { type: "slide", showCode: true }],
+        ["b", { type: "fragment", showCode: false }],
+      ],
+    },
+  },
 ];
 
 describe("SlidesLayoutPlugin backwards compatibility", () => {

package/src/components/editor/renderers/slides-layout/types.ts

@@ -9,6 +9,7 @@ export type SlideType = z.infer<typeof SlideTypeSchema>;
 const SlideConfigSchema = z.looseObject({
   type: SlideTypeSchema.optional(),
   speakerNotes: z.string().optional(),
+  showCode: z.boolean().optional(),
 });
 export type SlideConfig = z.infer<typeof SlideConfigSchema>;
 

package/src/components/markdown/__tests__/markdown-renderer.test.tsx

@@ -0,0 +1,43 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { MarkdownRenderer } from "../markdown-renderer";
+
+describe("MarkdownRenderer", () => {
+  // Regression test for https://github.com/marimo-team/marimo/issues/9847
+  it("preserves class names on raw HTML (e.g. marimo admonitions)", async () => {
+    const { container } = render(
+      <MarkdownRenderer
+        content={
+          '<div class="admonition error">' +
+          '<p class="admonition-title">Error</p>' +
+          "<p>Nope!</p>" +
+          "</div>"
+        }
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Nope!")).toBeInTheDocument();
+    });
+
+    const admonition = container.querySelector(".admonition.error");
+    expect(admonition).toBeInTheDocument();
+    expect(container.querySelector(".admonition-title")).toBeInTheDocument();
+  });
+
+  it("strips unsafe tags while keeping class names", async () => {
+    const { container } = render(
+      <MarkdownRenderer
+        content={'<div class="safe"><script>alert(1)</script>hello</div>'}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("hello")).toBeInTheDocument();
+    });
+
+    expect(container.querySelector(".safe")).toBeInTheDocument();
+    expect(container.querySelector("script")).not.toBeInTheDocument();
+  });
+});

package/src/components/markdown/markdown-renderer.tsx

@@ -4,7 +4,12 @@ import { EditorView } from "@codemirror/view";
 import { useAtomValue } from "jotai";
 import { BetweenHorizontalStartIcon } from "lucide-react";
 import { memo, Suspense, useState } from "react";
-import { Streamdown, type StreamdownProps } from "streamdown";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import {
+  defaultRehypePlugins,
+  Streamdown,
+  type StreamdownProps,
+} from "streamdown";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
@@ -148,6 +153,23 @@ const CopyButton: React.FC<ButtonProps> = ({ onClick, ...props }) => {
   );
 };
 
+// Allow `className` on every element; the default GitHub schema strips it,
+// which drops the styling on marimo HTML like `mo.md(...)` admonitions.
+const sanitizeSchema = {
+  ...defaultSchema,
+  attributes: {
+    ...defaultSchema.attributes,
+    "*": [...(defaultSchema.attributes?.["*"] ?? []), "className"],
+  },
+};
+
+// Keep Streamdown's other rehype plugins (raw, harden) so scripts and unsafe
+// URLs are still sanitized.
+const REHYPE_PLUGINS: StreamdownProps["rehypePlugins"] = Object.values({
+  ...defaultRehypePlugins,
+  sanitize: [rehypeSanitize, sanitizeSchema],
+});
+
 type Components = StreamdownProps["components"];
 
 const COMPONENTS: Components = {
@@ -187,6 +209,7 @@ export const MarkdownRenderer = memo(({ content }: { content: string }) => {
     <Streamdown
       components={COMPONENTS}
       plugins={plugins}
+      rehypePlugins={REHYPE_PLUGINS}
       className="mo-markdown-renderer"
     >
       {content}

package/src/components/slides/__tests__/minimap-actions.test.tsx

@@ -0,0 +1,166 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import type { CellId } from "@/core/cells/ids";
+import type { CellData, CellRuntimeState } from "@/core/cells/types";
+import { MultiColumn } from "@/utils/id-tree";
+import { SlidesMinimap } from "../minimap";
+
+const A = cellId("a");
+const B = cellId("b");
+
+// Spies shared with the hoisted module mocks below.
+const { createNewCell, deleteCell, moveCellToIndex } = vi.hoisted(() => ({
+  createNewCell: vi.fn(),
+  deleteCell: vi.fn(),
+  moveCellToIndex: vi.fn(),
+}));
+
+vi.mock("@/core/cells/cells", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/core/cells/cells")>();
+  return {
+    ...actual,
+    useCellActions: () => ({ moveCellToIndex, createNewCell }),
+    useCellIds: () => MultiColumn.from([[A, B]]),
+  };
+});
+
+vi.mock("@/components/editor/cell/useDeleteCell", () => ({
+  useDeleteCellCallback: () => deleteCell,
+}));
+
+beforeAll(() => {
+  // jsdom doesn't implement these; radix menus poke at them.
+  global.HTMLElement.prototype.scrollIntoView = () => {
+    /* noop */
+  };
+  if (!global.HTMLElement.prototype.hasPointerCapture) {
+    global.HTMLElement.prototype.hasPointerCapture = () => false;
+  }
+  if (!global.HTMLElement.prototype.releasePointerCapture) {
+    global.HTMLElement.prototype.releasePointerCapture = () => {
+      /* noop */
+    };
+  }
+  global.IntersectionObserver ??= class {
+    observe() {
+      /* noop */
+    }
+    unobserve() {
+      /* noop */
+    }
+    disconnect() {
+      /* noop */
+    }
+    takeRecords() {
+      return [];
+    }
+    root = null;
+    rootMargin = "";
+    thresholds = [];
+  } as unknown as typeof IntersectionObserver;
+});
+
+// The minimap only reads `id`/`code`/`status`/`output`, so a minimal stub is
+// enough; the cast is confined to this helper.
+function makeCell(id: CellId): CellRuntimeState & CellData {
+  return {
+    id,
+    code: `print("${id}")`,
+    output: null,
+    status: "idle",
+  } as unknown as CellRuntimeState & CellData;
+}
+
+function renderMinimap() {
+  const onSlideClick = vi.fn();
+  const utils = render(
+    <TooltipProvider>
+      <SlidesMinimap
+        cells={[makeCell(A), makeCell(B)]}
+        thumbnailWidth={200}
+        canReorder={false}
+        activeCellId={null}
+        onSlideClick={onSlideClick}
+      />
+    </TooltipProvider>,
+  );
+  return { ...utils, onSlideClick };
+}
+
+const EMPTY_CELL = { code: "", autoFocus: false } as const;
+
+describe("SlidesMinimap insert lines", () => {
+  it("inserts a blank cell above the first row and below any row", () => {
+    renderMinimap();
+    // First row exposes both an above and a below line; later rows only below.
+    // DOM order: [A-above, A-below, B-below].
+    const inserts = screen.getAllByTestId("minimap-insert-cell");
+    expect(inserts).toHaveLength(3);
+
+    fireEvent.click(inserts[0]);
+    expect(createNewCell).toHaveBeenLastCalledWith({
+      cellId: A,
+      before: true,
+      ...EMPTY_CELL,
+    });
+
+    fireEvent.click(inserts[1]);
+    expect(createNewCell).toHaveBeenLastCalledWith({
+      cellId: A,
+      before: false,
+      ...EMPTY_CELL,
+    });
+
+    fireEvent.click(inserts[2]);
+    expect(createNewCell).toHaveBeenLastCalledWith({
+      cellId: B,
+      before: false,
+      ...EMPTY_CELL,
+    });
+  });
+});
+
+describe("SlidesMinimap context menu", () => {
+  const openRowMenu = (container: HTMLElement, id: CellId) => {
+    const row = container.querySelector<HTMLElement>(`[data-cell-id="${id}"]`);
+    expect(row).not.toBeNull();
+    fireEvent.contextMenu(row!);
+  };
+
+  it('"Add cell" inserts a blank cell below the row', () => {
+    const { container } = renderMinimap();
+    openRowMenu(container, A);
+    fireEvent.click(screen.getByText("Add cell"));
+    expect(createNewCell).toHaveBeenCalledWith({
+      cellId: A,
+      before: false,
+      ...EMPTY_CELL,
+    });
+  });
+
+  it('"Delete cell" deletes the row\'s cell', () => {
+    const { container } = renderMinimap();
+    openRowMenu(container, B);
+    fireEvent.click(screen.getByText("Delete cell"));
+    expect(deleteCell).toHaveBeenCalledWith({ cellId: B });
+  });
+});
+
+describe("SlidesMinimap keyboard activation", () => {
+  it("activates the row on Enter but ignores Space (reserved by reveal.js)", () => {
+    const { container, onSlideClick } = renderMinimap();
+    const row = container.querySelector<HTMLElement>(`[data-cell-id="${A}"]`);
+    expect(row).not.toBeNull();
+
+    fireEvent.keyDown(row!, { key: "Enter" });
+    expect(onSlideClick).toHaveBeenCalledWith(0);
+
+    onSlideClick.mockClear();
+    fireEvent.keyDown(row!, { key: " " });
+    expect(onSlideClick).not.toHaveBeenCalled();
+  });
+});