@marimo-team/frontend 0.23.7-dev64 → 0.23.7-dev66

package/src/components/slides/slide-notes-editor.tsx

@@ -0,0 +1,127 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { StickyNoteIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import useEvent from "react-use-event-hook";
+import type { CellId } from "@/core/cells/ids";
+import { useDebouncedCallback } from "@/hooks/useDebounce";
+import { cn } from "@/utils/cn";
+import { Events } from "@/utils/events";
+import type { SlidesLayout } from "../editor/renderers/slides-layout/types";
+
+interface SlideNotesEditorProps {
+  layout: SlidesLayout;
+  setLayout: (layout: SlidesLayout) => void;
+  cellId: CellId | undefined;
+  className?: string;
+}
+
+const PERSIST_DELAY_MS = 300;
+
+export const SlideNotesEditor = ({
+  layout,
+  setLayout,
+  cellId,
+  className,
+}: SlideNotesEditorProps) => {
+  const initialValue = cellId
+    ? (layout.cells.get(cellId)?.speakerNotes ?? "")
+    : "";
+
+  const [draft, setDraft] = useState(initialValue);
+
+  // Tracks whether the user has typed something that hasn't been persisted
+  // yet. Used to decide if the textarea is safe to overwrite from props.
+  const hasPendingEditRef = useRef(false);
+
+  // The debounced callback takes `(cellId, text)` so a `flush()` replays with
+  // the latest args — which means the in-flight text lands on the slide it
+  // was typed for, even if `cellId` has since changed.
+  const persistImmediate = useEvent((targetCellId: CellId, next: string) => {
+    hasPendingEditRef.current = false;
+    const existing = layout.cells.get(targetCellId);
+    if ((existing?.speakerNotes ?? "") === next) {
+      return;
+    }
+    const newCells = new Map(layout.cells);
+    newCells.set(targetCellId, { ...existing, speakerNotes: next });
+    setLayout({ ...layout, cells: newCells });
+  });
+
+  const persistDebounced = useDebouncedCallback(
+    persistImmediate,
+    PERSIST_DELAY_MS,
+  );
+
+  // Keep the textarea in sync with `layout`:
+  // - On slide switch, flush any in-flight edit to the *previous* slide before
+  //   adopting the new slide's notes.
+  // - On same-slide updates (e.g. future undo/redo or external setLayout
+  //   writers), adopt the new value only when the user isn't mid-edit so
+  //   pending keystrokes aren't clobbered.
+  const prevCellIdRef = useRef(cellId);
+  useEffect(() => {
+    if (prevCellIdRef.current !== cellId) {
+      persistDebounced.flush();
+      hasPendingEditRef.current = false;
+      setDraft(initialValue);
+      prevCellIdRef.current = cellId;
+      return;
+    }
+    if (!hasPendingEditRef.current && initialValue !== draft) {
+      setDraft(initialValue);
+    }
+  }, [cellId, initialValue, draft, persistDebounced]);
+
+  // Flush on unmount so closing the panel / navigating away doesn't lose text.
+  useEffect(() => {
+    return () => {
+      persistDebounced.flush();
+    };
+  }, [persistDebounced]);
+
+  const handleChange = (next: string) => {
+    setDraft(next);
+    if (cellId) {
+      hasPendingEditRef.current = true;
+      persistDebounced(cellId, next);
+    }
+  };
+
+  return (
+    <section
+      className={cn(
+        "h-full min-h-0 flex flex-col bg-muted/40 dark:bg-muted/20 border-t",
+        className,
+      )}
+      aria-label="Speaker notes"
+      // Keep keystrokes inside the textarea from advancing the reveal.js deck.
+      onKeyDown={(e) => e.stopPropagation()}
+    >
+      <header className="flex items-center gap-1.5 px-3 h-8 shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        <StickyNoteIcon className="h-3.5 w-3.5" />
+        <span>Speaker notes</span>
+      </header>
+      <div className="flex-1 min-h-0 p-2">
+        {cellId ? (
+          <textarea
+            value={draft}
+            onChange={(event) => handleChange(event.target.value)}
+            onClick={Events.stopPropagation()}
+            placeholder="Add notes for this slide. Visible to you in speaker view (press S during presentation)."
+            className={cn(
+              "h-full w-full resize-none rounded-sm border border-input/25 bg-background",
+              "px-3 py-2 text-sm leading-relaxed text-foreground placeholder:text-muted-foreground",
+              "ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-accent",
+            )}
+            aria-label="Speaker notes for the current slide"
+          />
+        ) : (
+          <div className="h-full flex items-center justify-center text-xs text-muted-foreground">
+            Select a slide to add notes.
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};

package/src/components/slides/slide-notes.ts

@@ -0,0 +1,64 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { CellId } from "@/core/cells/ids";
+import type { SlideConfig } from "../editor/renderers/slides-layout/types";
+import type { ComposedSubslide } from "./compose-slides";
+
+/** Lone-line marker between blocks; `<NotesAside>` renders this as `<hr>`. */
+export const NOTES_DIVIDER = "---";
+
+const BLOCK_JOIN = `\n\n${NOTES_DIVIDER}\n\n`;
+
+export const collectBlockNotes = <C extends { id: CellId }>(
+  cells: readonly C[],
+  slideConfigs: ReadonlyMap<CellId, SlideConfig>,
+): string =>
+  cells
+    .map((cell) => slideConfigs.get(cell.id)?.speakerNotes ?? "")
+    .filter((note) => note.trim().length > 0)
+    .join("\n\n");
+
+export interface SubslideNotes {
+  /** Notes shown when no fragment is current. */
+  slideLevel: string;
+  /** Cumulative notes for each fragment block, keyed by block index. */
+  cumulativeByBlock: Map<number, string>;
+}
+
+/**
+ * Per-fragment cumulative notes: slide-level notes plus each revealed
+ * fragment's notes, separated by a horizontal-rule line.
+ */
+export const buildSubslideNotes = <C extends { id: CellId }>(
+  subslide: ComposedSubslide<C>,
+  slideConfigs: ReadonlyMap<CellId, SlideConfig>,
+): SubslideNotes => {
+  const blockNotes = subslide.blocks.map((block) =>
+    collectBlockNotes(block.cells, slideConfigs),
+  );
+
+  const slideLevel = subslide.blocks
+    .map((block, i) => (block.isFragment ? "" : blockNotes[i]))
+    .filter((note) => note.length > 0)
+    .join("\n\n");
+
+  const cumulativeByBlock = new Map<number, string>();
+  const revealsSoFar: string[] = [];
+  subslide.blocks.forEach((block, i) => {
+    if (!block.isFragment) {
+      return;
+    }
+    const myNotes = blockNotes[i];
+    if (myNotes.length > 0) {
+      revealsSoFar.push(myNotes);
+    }
+    const accumulated = [slideLevel, ...revealsSoFar]
+      .filter((s) => s.length > 0)
+      .join(BLOCK_JOIN);
+    if (accumulated.length > 0) {
+      cumulativeByBlock.set(i, accumulated);
+    }
+  });
+
+  return { slideLevel, cumulativeByBlock };
+};

package/src/components/slides/slides.css

@@ -31,6 +31,20 @@
   }
 }
 
+/* Resize handle for the notes panel below the deck. Self-contained so the
+   slides layout doesn't have to inherit styles from app-chrome.css. */
+.mo-slides-notes-resize {
+  height: 4px;
+  background-color: transparent;
+  transition: background-color 200ms linear;
+  outline: none;
+}
+
+.mo-slides-notes-resize:hover,
+.mo-slides-notes-resize[data-resize-handle-active] {
+  background-color: var(--slate-11);
+}
+
 /* helpful for debugging */
 /* .mo-slide-content {
   background-color: red;

package/src/core/edit-app.tsx

@@ -157,7 +157,7 @@ export const EditApp: React.FC<AppProps> = ({
             "sticky left-0",
           )}
         >
-          {isEditing && (
+          {!hideControls && isEditing && (
             <div className="flex items-center justify-center container">
               <FilenameForm filename={filename} />
             </div>