@marimo-team/islands 0.21.2-dev0 → 0.21.2-dev100

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -5,8 +5,12 @@ import { useRef } from "react";
 import { useErrorBoundary } from "react-error-boundary";
 import { toast } from "@/components/ui/use-toast";
 import { getNotebook, useCellActions } from "@/core/cells/cells";
+import { applyTransactionChanges } from "@/core/cells/document-changes";
 import { AUTOCOMPLETER } from "@/core/codemirror/completion/Autocompleter";
-import type { NotificationPayload } from "@/core/kernel/messages";
+import type {
+  NotificationMessageData,
+  NotificationPayload,
+} from "@/core/kernel/messages";
 import { useConnectionTransport } from "@/core/websocket/useWebSocket";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import {
@@ -24,7 +28,7 @@ import { Logger } from "@/utils/Logger";
 import { reloadSafe } from "@/utils/reload-safe";
 import { useAlertActions } from "../alerts/state";
 import { cacheInfoAtom } from "../cache/requests";
-import { type CellId, SCRATCH_CELL_ID, type UIElementId } from "../cells/ids";
+import { SCRATCH_CELL_ID } from "../cells/ids";
 import { useRunsActions } from "../cells/runs";
 import { focusAndScrollCellOutputIntoView } from "../cells/scrollCellIntoView";
 import type { CellData } from "../cells/types";
@@ -33,6 +37,7 @@ import { useSetAppConfig } from "../config/config";
 import { useDataSourceActions } from "../datasets/data-source-connections";
 import type { ConnectionName } from "../datasets/engines";
 import {
+  PreviewSQLSchemaList,
   PreviewSQLTable,
   PreviewSQLTableList,
   ValidateSQL,
@@ -92,7 +97,18 @@ export function useMarimoKernelConnection(opts: {
   const { autoInstantiate, sessionId, setCells } = opts;
   const { showBoundary } = useErrorBoundary();
 
-  const { handleCellMessage, setCellCodes, setCellIds } = useCellActions();
+  const { handleCellMessage } = useCellActions();
+  const actionsWithoutMiddleware = useCellActions({ skipMiddleware: true });
+
+  const handleDocumentTransaction = (
+    transaction: NotificationMessageData<"notebook-document-transaction">["transaction"],
+  ) => {
+    applyTransactionChanges(
+      transaction.changes,
+      actionsWithoutMiddleware,
+      () => getNotebook().cellIds.inOrderIds,
+    );
+  };
   const { addCellNotification } = useRunsActions();
   const setKernelState = useSetAtom(kernelStateAtom);
   const setAppConfig = useSetAppConfig();
@@ -153,7 +169,7 @@ export function useMarimoKernelConnection(opts: {
         if (uiElement) {
           const buffers = safeExtractSetUIElementMessageBuffers(msg.data);
           UI_ELEMENT_REGISTRY.broadcastMessage(
-            uiElement as UIElementId,
+            uiElement,
             msg.data.message,
             buffers,
           );
@@ -173,14 +189,11 @@ export function useMarimoKernelConnection(opts: {
         AUTOCOMPLETER.resolve(msg.data.completion_id as RequestId, msg.data);
         return;
       case "function-call-result":
-        FUNCTIONS_REGISTRY.resolve(
-          msg.data.function_call_id as RequestId,
-          msg.data,
-        );
+        FUNCTIONS_REGISTRY.resolve(msg.data.function_call_id, msg.data);
         return;
       case "cell-op": {
         handleCellNotificationeration(msg.data, handleCellMessage);
-        const cellData = getNotebook().cellData[msg.data.cell_id as CellId];
+        const cellData = getNotebook().cellData[msg.data.cell_id];
         if (!cellData) {
           return;
         }
@@ -195,8 +208,8 @@ export function useMarimoKernelConnection(opts: {
         setVariables(
           msg.data.variables.map((v) => ({
             name: v.name as VariableName,
-            declaredBy: v.declared_by as CellId[],
-            usedBy: v.used_by as CellId[],
+            declaredBy: v.declared_by,
+            usedBy: v.used_by,
           })),
         );
         filterDatasetsFromVariables(
@@ -271,16 +284,19 @@ export function useMarimoKernelConnection(opts: {
         addColumnPreview(msg.data);
         return;
       case "sql-table-preview":
-        PreviewSQLTable.resolve(msg.data.request_id as RequestId, msg.data);
+        PreviewSQLTable.resolve(msg.data.request_id, msg.data);
         return;
       case "sql-table-list-preview":
-        PreviewSQLTableList.resolve(msg.data.request_id as RequestId, msg.data);
+        PreviewSQLTableList.resolve(msg.data.request_id, msg.data);
+        return;
+      case "sql-schema-list-preview":
+        PreviewSQLSchemaList.resolve(msg.data.request_id, msg.data);
         return;
       case "validate-sql-result":
         ValidateSQL.resolve(msg.data.request_id as RequestId, msg.data);
         return;
       case "secret-keys-result":
-        SECRETS_REGISTRY.resolve(msg.data.request_id as RequestId, msg.data);
+        SECRETS_REGISTRY.resolve(msg.data.request_id, msg.data);
         return;
       case "cache-info":
         setCacheInfo(msg.data);
@@ -310,19 +326,10 @@ export function useMarimoKernelConnection(opts: {
         return;
 
       case "focus-cell":
-        focusAndScrollCellOutputIntoView(msg.data.cell_id as CellId);
-        return;
-      case "update-cell-codes":
-        setCellCodes({
-          codes: msg.data.codes,
-          ids: msg.data.cell_ids as CellId[],
-          codeIsStale: msg.data.code_is_stale,
-          names: msg.data.names,
-          configs: msg.data.configs,
-        });
+        focusAndScrollCellOutputIntoView(msg.data.cell_id);
         return;
-      case "update-cell-ids":
-        setCellIds({ cellIds: msg.data.cell_ids as CellId[] });
+      case "notebook-document-transaction":
+        handleDocumentTransaction(msg.data.transaction);
         return;
       default:
         logNever(msg.data);

package/src/css/app/fonts.css

@@ -6,7 +6,7 @@ see frontend/src/core/static/download-html.ts */
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("../../fonts/Lora/Lora-VariableFont_wght.ttf") format("truetype");
+  src: url("../../fonts/Lora/Lora-VariableFont_wght.woff2") format("woff2");
 }
 
 @font-face {
@@ -14,7 +14,7 @@ see frontend/src/core/static/download-html.ts */
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("../../fonts/PT_Sans/PTSans-Regular.ttf") format("truetype");
+  src: url("../../fonts/PT_Sans/PTSans-Regular.woff2") format("woff2");
 }
 
 @font-face {
@@ -22,7 +22,7 @@ see frontend/src/core/static/download-html.ts */
   font-style: normal;
   font-weight: 700;
   font-display: block;
-  src: url("../../fonts/PT_Sans/PTSans-Bold.ttf") format("truetype");
+  src: url("../../fonts/PT_Sans/PTSans-Bold.woff2") format("woff2");
 }
 
 @font-face {
@@ -30,7 +30,7 @@ see frontend/src/core/static/download-html.ts */
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("../../fonts/Fira_Mono/FiraMono-Regular.ttf") format("truetype");
+  src: url("../../fonts/Fira_Mono/FiraMono-Regular.woff2") format("woff2");
 }
 
 @font-face {
@@ -38,7 +38,7 @@ see frontend/src/core/static/download-html.ts */
   font-style: normal;
   font-weight: 500;
   font-display: block;
-  src: url("../../fonts/Fira_Mono/FiraMono-Medium.ttf") format("truetype");
+  src: url("../../fonts/Fira_Mono/FiraMono-Medium.woff2") format("woff2");
 }
 
 @font-face {
@@ -46,5 +46,5 @@ see frontend/src/core/static/download-html.ts */
   font-style: normal;
   font-weight: 700;
   font-display: block;
-  src: url("../../fonts/Fira_Mono/FiraMono-Bold.ttf") format("truetype");
+  src: url("../../fonts/Fira_Mono/FiraMono-Bold.woff2") format("woff2");
 }

package/src/css/md-tooltip.css

@@ -3,50 +3,15 @@
 /*
   This allows you to create a basic tooltip using the data-tooltip attribute
   e.g. <span data-tooltip="Hello, World!">Hover me</span>
+
+  The tooltip content is rendered via the React Tooltip component (Radix UI portal),
+  which prevents clipping inside containers with overflow:hidden.
+  See: RenderHTML.tsx -> wrapTooltipTargets
 */
 
 .markdown {
   [data-tooltip] {
-    position: relative;
     cursor: pointer;
     text-decoration: underline dotted;
   }
-
-  [data-tooltip]::before,
-  [data-tooltip]::after {
-    visibility: hidden;
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.2s ease;
-    position: absolute;
-    z-index: 1000;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  [data-tooltip]::before {
-    content: attr(data-tooltip);
-    bottom: calc(100% + 10px);
-    padding: 5px 10px;
-    width: max-content;
-    max-width: 300px;
-    border-radius: 6px;
-    background-color: ;
-    text-align: center;
-    line-height: 1.4;
-    white-space: pre-wrap;
-
-    @apply bg-background text-foreground shadow-md border text-base;
-  }
-
-  [data-tooltip]:hover::before,
-  [data-tooltip]:hover::after {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  [data-tooltip]:hover::before {
-    /* stylelint-disable-next-line unit-allowed-list */
-    transform: translateX(-50%) translateY(10px);
-  }
 }

package/src/css/md.css

@@ -12,6 +12,16 @@
   margin-block-end: 0;
 }
 
+.markdown ul li,
+.markdown ol li {
+  margin-block: 0;
+}
+
+/* Restore browser default bullet cycling that Tailwind Typography overrides */
+.markdown ul ul {
+  list-style-type: revert;
+}
+
 .markdown h1 {
   text-align: start;
 }
@@ -374,6 +384,13 @@ button .prose.prose {
   @apply p-4 pt-0;
 }
 
+/* Restore proper list indentation inside details blocks.
+   The p-4 above overrides prose's padding-inline-start for bullet space.
+   This ensures bullets render correctly with list-style-position: outside. */
+.markdown details > :is(ul, ol) {
+  padding-inline-start: 2.5rem;
+}
+
 .markdown .codehilite {
   background-color: var(--slate-2);
   border-radius: 4px;

package/src/plugins/core/RenderHTML.tsx

@@ -14,6 +14,7 @@ import React, {
 } from "react";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { QueryParamPreservingLink } from "@/components/ui/query-param-preserving-link";
+import { Tooltip } from "@/components/ui/tooltip";
 import { DocHoverTarget } from "@/core/documentation/DocHoverTarget";
 import { sanitizeHtml, useSanitizeHtml } from "./sanitize";
 
@@ -160,6 +161,21 @@ const wrapDocHoverTargets: TransformFn = (
   }
 };
 
+// Wrap elements with data-tooltip attribute in a Tooltip component.
+// This renders the tooltip in a portal (top layer), fixing clipping inside
+// containers with overflow:hidden (e.g. grid cells).
+const wrapTooltipTargets: TransformFn = (
+  reactNode: ReactNode,
+  domNode: DOMNode,
+): JSX.Element | undefined => {
+  if (domNode instanceof Element && domNode.attribs?.["data-tooltip"]) {
+    const tooltipContent = domNode.attribs["data-tooltip"];
+    return (
+      <Tooltip content={tooltipContent}>{reactNode as JSX.Element}</Tooltip>
+    );
+  }
+};
+
 const CopyableCode = ({ children }: { children: ReactNode }) => {
   const ref = useRef<HTMLDivElement>(null);
   return (
@@ -239,6 +255,7 @@ function parseHtml({
     addCopyButtonToCodehilite,
     preserveQueryParamsInAnchorLinks,
     wrapDocHoverTargets,
+    wrapTooltipTargets,
     removeWrappingBodyTags,
     removeWrappingHtmlTags,
   ];

package/src/plugins/core/__test__/RenderHTML.test.ts

@@ -197,6 +197,51 @@ describe("parseHtml", () => {
   });
 });
 
+describe("wrapTooltipTargets", () => {
+  test("data-tooltip wraps element in Tooltip component", () => {
+    const html = '<span data-tooltip="Hello world">Hover me</span>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <Tooltip
+        content="Hello world"
+      >
+        <span
+          data-tooltip="Hello world"
+        >
+          Hover me
+        </span>
+      </Tooltip>
+    `);
+  });
+
+  test("element without data-tooltip is not wrapped", () => {
+    const html = "<span>No tooltip</span>";
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <span>
+        No tooltip
+      </span>
+    `);
+  });
+
+  test("data-tooltip on nested element wraps only that element", () => {
+    const html = '<p>Outer <span data-tooltip="tip">inner</span> text</p>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <p>
+        Outer 
+        <Tooltip
+          content="tip"
+        >
+          <span
+            data-tooltip="tip"
+          >
+            inner
+          </span>
+        </Tooltip>
+         text
+      </p>
+    `);
+  });
+});
+
 describe("parseHtml with < nad >", () => {
   const html =
     'thread <unnamed> panicked at "assertion failed: `(left == right)`"';

package/src/plugins/core/sanitize-html.ts

@@ -2,28 +2,35 @@
 import DOMPurify, { type Config } from "dompurify";
 
 // preserve target=_blank https://github.com/cure53/DOMPurify/issues/317#issuecomment-912474068
-const TEMPORARY_ATTRIBUTE = "data-temp-href-target";
-DOMPurify.addHook("beforeSanitizeAttributes", (node) => {
-  if (node.tagName === "A") {
-    if (!node.hasAttribute("target")) {
-      node.setAttribute("target", "_self");
-    }
+// Guard for non-browser environments (e.g. Node.js in the marimo-lsp extension)
+// where `document` is not available.
+if (typeof document !== "undefined") {
+  const TEMPORARY_ATTRIBUTE = "data-temp-href-target";
+  DOMPurify.addHook("beforeSanitizeAttributes", (node) => {
+    if (node.tagName === "A") {
+      if (!node.hasAttribute("target")) {
+        node.setAttribute("target", "_self");
+      }
 
-    if (node.hasAttribute("target")) {
-      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute("target") || "");
+      if (node.hasAttribute("target")) {
+        node.setAttribute(
+          TEMPORARY_ATTRIBUTE,
+          node.getAttribute("target") || "",
+        );
+      }
     }
-  }
-});
+  });
 
-DOMPurify.addHook("afterSanitizeAttributes", (node) => {
-  if (node.tagName === "A" && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
-    node.setAttribute("target", node.getAttribute(TEMPORARY_ATTRIBUTE) || "");
-    node.removeAttribute(TEMPORARY_ATTRIBUTE);
-    if (node.getAttribute("target") === "_blank") {
-      node.setAttribute("rel", "noopener noreferrer");
+  DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+    if (node.tagName === "A" && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+      node.setAttribute("target", node.getAttribute(TEMPORARY_ATTRIBUTE) || "");
+      node.removeAttribute(TEMPORARY_ATTRIBUTE);
+      if (node.getAttribute("target") === "_blank") {
+        node.setAttribute("rel", "noopener noreferrer");
+      }
     }
-  }
-});
+  });
+}
 
 /**
  * This removes script tags, form tags, iframe tags, and other potentially dangerous tags