@marimo-team/islands 0.24.1-dev32 → 0.24.1-dev36

package/package.json

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

package/src/components/data-table/__tests__/columns.test.tsx

@@ -1,9 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { Column } from "@tanstack/react-table";
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render, waitFor } from "@testing-library/react";
 import { I18nProvider } from "react-aria";
-import { describe, expect, it, test, vi } from "vitest";
+import { beforeAll, describe, expect, it, test, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Logger } from "@/utils/Logger";
 import { parseContent } from "@/utils/url-parser";
@@ -809,6 +809,48 @@ describe("renderCellValue with string + edge whitespace", () => {
       </I18nProvider>,
     );
 
+  it("closes a long-string popover when its shadow-DOM trigger is clicked again", async () => {
+    const value = "This string is long enough to render in a cell popover.";
+    const result = renderCellValue({
+      column: createMockStringColumn(),
+      renderValue: () => value,
+      getValue: () => value,
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    const host = document.createElement("div");
+    document.body.append(host);
+    try {
+      const shadowRoot = host.attachShadow({ mode: "open" });
+      const { unmount } = render(
+        <I18nProvider locale="en-US">
+          <TooltipProvider>{result}</TooltipProvider>
+        </I18nProvider>,
+        { container: shadowRoot as unknown as HTMLElement },
+      );
+      try {
+        const trigger =
+          shadowRoot.querySelector<HTMLButtonElement>("button[data-state]");
+        const getCopyButton = () =>
+          document.querySelector('[aria-label="Copy to clipboard"]') ??
+          shadowRoot.querySelector('[aria-label="Copy to clipboard"]');
+
+        expect(trigger).not.toBeNull();
+        fireEvent.pointerDown(trigger!);
+        fireEvent.click(trigger!);
+        await waitFor(() => expect(getCopyButton()).not.toBeNull());
+
+        fireEvent.pointerDown(trigger!);
+        fireEvent.click(trigger!);
+        expect(getCopyButton()).toBeNull();
+      } finally {
+        unmount();
+      }
+    } finally {
+      host.remove();
+    }
+  });
+
   it("renders edge whitespace markers and still detects the URL in the middle", () => {
     const mockColumn = createMockStringColumn();
     const value = "  https://example.com  ";
@@ -891,6 +933,128 @@ describe("renderCellValue with string + edge whitespace", () => {
   });
 });
 
+describe("renderCellValue with JSON document strings", () => {
+  beforeAll(() => {
+    // JsonViewer reads the color scheme through matchMedia, which jsdom
+    // does not implement.
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: vi.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    });
+  });
+
+  const createMockStringColumn = () =>
+    ({
+      id: "json_data",
+      columnDef: {
+        meta: {
+          dataType: "string" as const,
+          dtype: "str",
+        },
+      },
+      getColumnFormatting: () => undefined,
+      getColumnWrapping: () => undefined,
+      applyColumnFormatting: (value: unknown) => value,
+    }) as unknown as Column<unknown>;
+
+  const renderCell = (value: string) => {
+    const result = renderCellValue({
+      column: createMockStringColumn(),
+      renderValue: () => value,
+      getValue: () => value,
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    return render(
+      <I18nProvider locale="en-US">
+        <TooltipProvider>{result}</TooltipProvider>
+      </I18nProvider>,
+    );
+  };
+
+  it("opens the JSON viewer for a str cell that holds a JSON object", () => {
+    const value =
+      '{"vendor":"ACME","attachments":[{"name":"inv.pdf","url":"https://example.com/p/AAA"}]}';
+    const { container } = renderCell(value);
+
+    const trigger = container.querySelector("button");
+    expect(trigger).toBeTruthy();
+    fireEvent.click(trigger!);
+
+    // Popover content mounts in a portal, so query the document.
+    expect(document.querySelector(".marimo-json-output")).toBeTruthy();
+    expect(document.body.textContent).toContain('"vendor":"ACME"');
+  });
+
+  it("opens the JSON viewer for a str cell that holds a JSON array", () => {
+    const value = '[{"name":"inv.pdf","url":"https://example.com/p/AAA"}]';
+    const { container } = renderCell(value);
+
+    const trigger = container.querySelector("button");
+    expect(trigger).toBeTruthy();
+    fireEvent.click(trigger!);
+
+    expect(document.querySelector(".marimo-json-output")).toBeTruthy();
+    expect(document.body.textContent).toContain('"name":"inv.pdf"');
+  });
+
+  it("opens the JSON viewer when the JSON document has edge whitespace", () => {
+    const { container } = renderCell('  {"a": 1}  ');
+
+    const trigger = container.querySelector("button");
+    expect(trigger).toBeTruthy();
+    fireEvent.click(trigger!);
+
+    expect(document.querySelector(".marimo-json-output")).toBeTruthy();
+  });
+
+  it("keeps a Python repr as inline text", () => {
+    const value = "{'vendor': 'ACME'}";
+    const { container } = renderCell(value);
+
+    expect(container.querySelector("button")).toBeNull();
+    expect(container.textContent).toBe(value);
+  });
+
+  it("keeps a truncated JSON document as inline text", () => {
+    const value = '{"vendor":"ACME","attachments":';
+    const { container } = renderCell(value);
+
+    expect(container.querySelector("button")).toBeNull();
+    expect(container.textContent).toBe(value);
+  });
+
+  it("keeps JSON scalar strings as inline text", () => {
+    const value = '"hello"';
+    const { container } = renderCell(value);
+
+    expect(container.querySelector("button")).toBeNull();
+    expect(container.textContent).toBe(value);
+  });
+
+  it("keeps the text popout for long strings that are not JSON", () => {
+    const value =
+      "This long plain sentence exceeds the fifty character popout threshold.";
+    const { container } = renderCell(value);
+
+    const trigger = container.querySelector("button");
+    expect(trigger).toBeTruthy();
+    fireEvent.click(trigger!);
+
+    expect(document.querySelector(".marimo-json-output")).toBeNull();
+    expect(document.body.textContent).toContain(value);
+  });
+});
+
 describe("renderCellValue with boolean values", () => {
   const createMockColumn = () =>
     ({

package/src/components/data-table/columns.tsx

@@ -7,12 +7,14 @@ const PopoverClose = PopoverPrimitive.Close;
 
 import type { Column, ColumnDef } from "@tanstack/react-table";
 import { formatDate, isValid } from "date-fns";
+import { useRef } from "react";
 import { useLocale, useNumberFormatter } from "react-aria";
 import { WithLocale } from "@/core/i18n/with-locale";
 import type { DataType } from "@/core/kernel/messages";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import { type DateFormat, exactDateTime, getDateFormat } from "@/utils/dates";
+import { Events } from "@/utils/events";
 import { Logger } from "@/utils/Logger";
 import { Maps } from "@/utils/maps";
 import { maxFractionalDigits } from "@/utils/numbers";
@@ -382,9 +384,10 @@ const PopoutColumn = ({
   rawStringValue,
   edges,
   contentClassName,
-  buttonText,
+  scrollable = false,
   wrapped,
   children,
+  buttonText,
 }: {
   cellStyles?: string;
   selectCell?: () => void;
@@ -393,10 +396,12 @@ const PopoutColumn = ({
   // still use `rawStringValue`. Middle is sliced from `rawStringValue`.
   edges?: { leading: string; trailing: string };
   contentClassName?: string;
-  buttonText?: string;
+  scrollable?: boolean;
   wrapped?: boolean;
+  buttonText?: string;
   children: React.ReactNode;
 }) => {
+  const triggerRef = useRef<HTMLButtonElement>(null);
   const hasEdgeWhitespace =
     edges !== undefined &&
     (edges.leading.length > 0 || edges.trailing.length > 0);
@@ -412,6 +417,7 @@ const PopoutColumn = ({
     <EmotionCacheProvider container={null}>
       <Popover>
         <PopoverTrigger
+          ref={triggerRef}
           className={cn(cellStyles, "max-w-fit outline-hidden")}
           onClick={selectCell}
           onMouseDown={(e) => {
@@ -432,29 +438,77 @@ const PopoutColumn = ({
           </span>
         </PopoverTrigger>
         <PopoverContent
-          className={contentClassName}
+          className={cn(
+            contentClassName,
+            scrollable && "flex flex-col overflow-hidden",
+          )}
           align="start"
           alignOffset={10}
+          onInteractOutside={(event) => {
+            // Radix sees the shadow host as the target. Resolve the original
+            // target so pointer-down does not dismiss before click toggles.
+            const target = Events.composedTarget(event.detail.originalEvent);
+            if (triggerRef.current?.contains(target)) {
+              event.preventDefault();
+            }
+          }}
         >
-          <div className="absolute top-2 right-2">
+          <div
+            className={cn(
+              "flex -mt-3 -mr-2",
+              scrollable ? "shrink-0 justify-end" : "float-right",
+            )}
+          >
             <CopyClipboardIcon
               value={rawStringValue}
-              className="w-2.5 h-2.5"
+              className="size-3 hover:text-link"
+              buttonClassName="flex size-5 items-center justify-center"
               tooltip={false}
             />
-            <PopoverClose>
-              <Button variant="link" size="xs">
+            <PopoverClose asChild={true}>
+              <Button
+                variant="link"
+                size="xs"
+                className={cn("size-5 p-0", !buttonText && "ml-1.5 mr-1")}
+                aria-label="Close"
+              >
                 {buttonText ?? "Close"}
               </Button>
             </PopoverClose>
           </div>
-          {children}
+          {scrollable ? (
+            <div className="min-h-0 overflow-auto">{children}</div>
+          ) : (
+            children
+          )}
         </PopoverContent>
       </Popover>
     </EmotionCacheProvider>
   );
 };
 
+/**
+ * Parse a string that holds a JSON object or array document.
+ * Returns `undefined` for everything else, including JSON scalars,
+ * so ordinary text keeps its plain rendering.
+ */
+function parseJsonDocument(text: string): unknown {
+  const trimmedText = text.trim();
+
+  const first = trimmedText[0];
+  const last = trimmedText[trimmedText.length - 1];
+  const isBracketPair =
+    (first === "{" && last === "}") || (first === "[" && last === "]");
+  if (!isBracketPair) {
+    return undefined;
+  }
+  try {
+    return JSON.parse(trimmedText) as unknown;
+  } catch {
+    return undefined;
+  }
+}
+
 function isPrimitiveOrNullish(value: unknown): boolean {
   if (value == null) {
     return true;
@@ -639,6 +693,28 @@ export function renderCellValue<TData, TValue>({
       splitLeadingTrailingWhitespace(stringValue);
     const hasEdgeWhitespace = leading.length > 0 || trailing.length > 0;
 
+    // A str cell that holds a JSON document opens the same JSON viewer as
+    // native list/struct cells.
+    const jsonDocument = parseJsonDocument(middle);
+    if (jsonDocument !== undefined) {
+      return (
+        <PopoutColumn
+          cellStyles={cellStyles}
+          selectCell={selectCell}
+          rawStringValue={stringValue}
+          edges={{ leading, trailing }}
+          wrapped={isWrapped}
+        >
+          <JsonOutput
+            data={jsonDocument}
+            format="tree"
+            valueTypes="json"
+            className="max-h-64"
+          />
+        </PopoutColumn>
+      );
+    }
+
     // Parse only the inner content for URL detection so URLDetector doesn't
     // split on the whitespace padding.
     const parts = parseContent(hasEdgeWhitespace ? middle : stringValue);
@@ -662,9 +738,10 @@ export function renderCellValue<TData, TValue>({
         selectCell={selectCell}
         rawStringValue={stringValue}
         edges={{ leading, trailing }}
-        contentClassName="max-h-64 overflow-auto whitespace-pre-wrap wrap-break-word text-sm w-96"
-        buttonText="X"
+        contentClassName="max-h-64 whitespace-pre-wrap wrap-break-word text-sm w-96"
+        scrollable={true}
         wrapped={isWrapped}
+        buttonText="X"
       >
         <MarkdownUrlDetector
           content={stringValue}

package/src/utils/__tests__/url-parser.test.ts

@@ -98,4 +98,30 @@ describe("parseContent", () => {
       { type: "url", url: "https://github.com" },
     ]);
   });
+
+  it("stops at JSON delimiters instead of swallowing them (#10567)", () => {
+    const parts = parseContent(
+      '[{"name":"inv.pdf","url":"https://example.com/p/AAA"}]',
+    );
+    expect(parts).toEqual([
+      { type: "text", value: '[{"name":"inv.pdf","url":"' },
+      { type: "url", url: "https://example.com/p/AAA" },
+      { type: "text", value: '"}]' },
+    ]);
+  });
+
+  it("does not include a trailing double-quote in the href", () => {
+    const parts = parseContent('"https://example.com/x"');
+    expect(parts).toContainEqual({
+      type: "url",
+      url: "https://example.com/x",
+    });
+  });
+
+  it("keeps apostrophes, which are valid in URLs", () => {
+    const parts = parseContent("https://example.com/O'Reilly");
+    expect(parts).toEqual([
+      { type: "url", url: "https://example.com/O'Reilly" },
+    ]);
+  });
 });

package/src/utils/json/__tests__/json-parser.test.ts

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import { jsonToMarkdown } from "../json-parser";
+
+describe("jsonToMarkdown URL linkification", () => {
+  it("links a plain URL", () => {
+    const md = jsonToMarkdown([{ link: "https://marimo.io/path" }]);
+    expect(md).toContain("[https://marimo.io/path](https://marimo.io/path)");
+  });
+
+  it("stops the link at the JSON delimiter, not the trailing quote (#10567)", () => {
+    const md = jsonToMarkdown([
+      { attachments: '[{"url":"https://example.com/p/AAA"}]' },
+    ]);
+    // The link target ends exactly at the URL; the closing `"}]` is left as
+    // text rather than pulled into the href.
+    expect(md).toContain("(https://example.com/p/AAA)");
+    expect(md).not.toContain('https://example.com/p/AAA"');
+  });
+
+  it("does not swallow a trailing double-quote into the link", () => {
+    const md = jsonToMarkdown([{ v: '"https://example.com/x"' }]);
+    expect(md).toContain("(https://example.com/x)");
+    expect(md).not.toContain('https://example.com/x"');
+  });
+
+  it("leaves existing markdown links untouched", () => {
+    const md = jsonToMarkdown([{ v: "[docs](https://marimo.io/docs)" }]);
+    expect(md).toContain("[docs](https://marimo.io/docs)");
+    // Must not double-wrap into [[docs](url)](url).
+    expect(md).not.toContain("[[docs]");
+  });
+});

package/src/utils/json/json-parser.ts

@@ -1,7 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { URL_REGEX } from "../url-parser";
 import type { JsonString } from "./base64";
 
+const GLOBAL_URL_REGEX = new RegExp(URL_REGEX.source, "g");
+
 declare global {
   interface BigInt {
     toJSON(): unknown;
@@ -126,9 +129,8 @@ function formatValueForMarkdown(value: unknown): string {
     return placeholder;
   });
 
-  // Convert plain URLs to markdown links
-  const urlRegex = /(https?:\/\/\S+)/g;
-  stringValue = stringValue.replaceAll(urlRegex, "[$1]($1)");
+  // Convert plain URLs to markdown links using the shared URL matcher.
+  stringValue = stringValue.replaceAll(GLOBAL_URL_REGEX, "[$1]($1)");
 
   // Restore markdown links from placeholders
   for (const [placeholder, original] of placeholders) {

package/src/utils/url-parser.ts

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-const urlRegex = /(https?:\/\/\S+)/;
+/** Matches HTTP(S) URLs without consuming surrounding delimiters. */
+export const URL_REGEX = /(https?:\/\/[^\s"<>`{}|\\^]+)/;
 const imageRegex = /\.(png|jpe?g|gif|webp|svg|ico)(\?.*)?$/i;
 const dataImageRegex = /^data:image\//i;
 const knownImageDomains = ["avatars.githubusercontent.com"];
@@ -19,9 +20,9 @@ export function parseContent(text: string): ContentPart[] {
     return [{ type: "image", url: text }];
   }
 
-  const parts = text.split(urlRegex).filter((part) => part !== "");
+  const parts = text.split(URL_REGEX).filter((part) => part !== "");
   return parts.map((part) => {
-    const isUrl = urlRegex.test(part);
+    const isUrl = URL_REGEX.test(part);
     if (isUrl) {
       const isImage =
         imageRegex.test(part) ||