@marimo-team/islands 0.23.9-dev44 → 0.23.9-dev46

package/src/components/slides/slide-cell-view.tsx

@@ -3,6 +3,7 @@
 import { useMemo, useRef, useState } from "react";
 import type { EditorView } from "@codemirror/view";
 import { useAtomValue } from "jotai";
+import { cellDomProps } from "@/components/editor/common";
 import { CellEditor } from "@/components/editor/cell/code/cell-editor";
 import { CellStatusComponent } from "@/components/editor/cell/CellStatus";
 import { RunButton } from "@/components/editor/cell/RunButton";
@@ -111,7 +112,10 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
   );
 
   const editor = (
-    <div className={editorWrapperClassName}>
+    <div
+      className={editorWrapperClassName}
+      {...cellDomProps(cell.id, cell.name)}
+    >
       <CellEditor
         theme={theme}
         showPlaceholder={false}
@@ -134,7 +138,14 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
         languageAdapter={languageAdapter}
         setLanguageAdapter={setLanguageAdapter}
         showLanguageToggles={false}
+        // The reveal.js transforms in slides view break the inline AI
+        // tooltip's fixed positioning, so disable it here.
+        inlineAiTooltip={false}
         outputArea={cellOutputPosition}
+        // Parent tooltips (completions, hover, signature help) to the Reveal
+        // viewport so they stay visible when presenting fullscreen; `#App` sits
+        // outside the fullscreened subtree and would never paint.
+        tooltipParentSelector=".reveal-viewport"
       />
       {toolbar}
     </div>

package/src/core/codemirror/cm.ts

@@ -83,6 +83,11 @@ export interface CodeMirrorSetupOpts {
   diagnosticsConfig: DiagnosticsConfig;
   displayConfig: Pick<DisplayConfig, "reference_highlighting">;
   inlineAiTooltip: boolean;
+  /**
+   * CSS selector for the element that CodeMirror tooltips (completions, hover,
+   * signature help) should be appended to. Defaults to `#App`.
+   */
+  tooltipParentSelector?: string;
 }
 
 function getPlaceholderType(opts: CodeMirrorSetupOpts) {
@@ -90,6 +95,46 @@ function getPlaceholderType(opts: CodeMirrorSetupOpts) {
   return showPlaceholder ? "marimo-import" : enableAI ? "ai" : "none";
 }
 
+const CODEMIRROR_TOOLTIP_PORTAL_CLASS = "cm-tooltip-portal";
+
+/**
+ * Resolve the element that editor tooltips (completions, hover, signature help)
+ * should be appended to.
+ *
+ * The default `#App` parent is returned directly. Custom parents are useful
+ * when editors live inside a fullscreen subtree, dialog, or scoped typography
+ * region. In those cases we append tooltips to a dedicated `not-prose` portal
+ * inside the requested parent, reusing it across cells so surrounding typography
+ * styles don't leak into editor popups.
+ */
+function resolveCodeMirrorTooltipParent(
+  selector: string | undefined,
+): HTMLElement | undefined {
+  if (selector == null) {
+    return document.querySelector<HTMLElement>("#App") ?? undefined;
+  }
+
+  const host = document.querySelector<HTMLElement>(selector);
+  if (host == null) {
+    return undefined;
+  }
+
+  const existing = host.querySelector<HTMLElement>(
+    `:scope > .${CODEMIRROR_TOOLTIP_PORTAL_CLASS}`,
+  );
+  if (existing != null) {
+    return existing;
+  }
+
+  const portal = document.createElement("div");
+  // `not-prose` escapes scoped typography; `contents` keeps the wrapper
+  // layout-neutral. Tooltips are `position: fixed`, so the wrapper having no
+  // box doesn't affect positioning.
+  portal.className = `${CODEMIRROR_TOOLTIP_PORTAL_CLASS} not-prose contents`;
+  host.append(portal);
+  return portal;
+}
+
 /**
  * Setup CodeMirror for a cell
  */
@@ -180,6 +225,7 @@ export const basicBundle = (opts: CodeMirrorSetupOpts): Extension[] => {
     cellId,
     lspConfig,
     diagnosticsConfig,
+    tooltipParentSelector,
   } = opts;
   const placeholderType = getPlaceholderType(opts);
   const autoClosePairs = completionConfig.auto_close_pairs !== false;
@@ -200,7 +246,7 @@ export const basicBundle = (opts: CodeMirrorSetupOpts): Extension[] => {
       position: "fixed",
       // This the z-index multiple tooltips being stacked
       // For example, if we have a hover tooltip and a completion tooltip
-      parent: document.querySelector<HTMLElement>("#App") ?? undefined,
+      parent: resolveCodeMirrorTooltipParent(tooltipParentSelector),
     }),
     scrollActiveLineIntoViewExtension(),
     theme === "dark" ? darkTheme : lightTheme,