@marimo-team/frontend 0.24.3-dev40 → 0.24.3-dev41

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

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { historyField } from "@codemirror/commands";
-import { EditorState, StateEffect } from "@codemirror/state";
+import { EditorState, type Extension, StateEffect } from "@codemirror/state";
 import { EditorView, ViewPlugin } from "@codemirror/view";
 import { useIntersectionObserver } from "@uidotdev/usehooks";
 import { useAtom, useAtomValue } from "jotai";
@@ -95,6 +95,21 @@ export interface CellEditorProps
   tooltipParentSelector?: string;
 }
 
+export function composeRtcEditorConfig(
+  code: string,
+  extensions: Extension[],
+  rtc: ReturnType<typeof realTimeCollaboration> | undefined,
+): { code: string; extensions: Extension[] } {
+  if (!rtc) {
+    return { code, extensions };
+  }
+
+  return {
+    code: rtc.code,
+    extensions: [...extensions, rtc.extension],
+  };
+}
+
 const CellEditorInternal = ({
   theme,
   showPlaceholder,
@@ -343,27 +358,31 @@ const CellEditorInternal = ({
   ]);
 
   const rtcEnabled = isRtcEnabled() && canUseRtc(cellId);
-  const handleInitializeEditor = useEvent(() => {
-    // If rtc is enabled, use collaborative editing
-    if (rtcEnabled) {
-      const rtc = realTimeCollaboration(
-        cellId,
-        (code) => {
-          // It's not really a formatting change,
-          // but this means it won't be marked as stale
-          cellActions.updateCellCode({ cellId, code, formattingChange: true });
-        },
-        code,
-      );
-      extensions.push(rtc.extension);
-      code = rtc.code;
+  const createEditorConfig = (initialCode?: string) => {
+    if (!rtcEnabled) {
+      return composeRtcEditorConfig(code, extensions, undefined);
     }
 
+    const rtc = realTimeCollaboration(
+      cellId,
+      (code) => {
+        // It's not really a formatting change,
+        // but this means it won't be marked as stale
+        cellActions.updateCellCode({ cellId, code, formattingChange: true });
+      },
+      initialCode,
+    );
+    return composeRtcEditorConfig(code, extensions, rtc);
+  };
+
+  const handleInitializeEditor = useEvent(() => {
+    const editorConfig = createEditorConfig(code);
+
     // Create a new editor
     const ev = new EditorView({
       state: EditorState.create({
-        doc: code,
-        extensions: extensions,
+        doc: editorConfig.code,
+        extensions: editorConfig.extensions,
       }),
     });
     setEditorView(ev);
@@ -377,19 +396,11 @@ const CellEditorInternal = ({
 
   const handleReconfigureEditor = useEvent(() => {
     invariant(editorViewRef.current !== null, "Editor view is not initialized");
-    // If rtc is enabled, use collaborative editing
-    if (rtcEnabled) {
-      const rtc = realTimeCollaboration(cellId, (code) => {
-        // It's not really a formatting change,
-        // but this means it won't be marked as stale
-        cellActions.updateCellCode({ cellId, code, formattingChange: true });
-      });
-      extensions.push(rtc.extension);
-    }
+    const editorConfig = createEditorConfig();
 
     editorViewRef.current.dispatch({
       effects: [
-        StateEffect.reconfigure.of([extensions]),
+        StateEffect.reconfigure.of([editorConfig.extensions]),
         reconfigureLanguageEffect(editorViewRef.current, {
           completionConfig: userConfig.completion,
           hotkeysProvider: new OverridingHotkeyProvider(
@@ -406,26 +417,14 @@ const CellEditorInternal = ({
 
   const handleDeserializeEditor = useEvent(() => {
     invariant(serializedEditorState, "Editor view is not initialized");
-    if (rtcEnabled) {
-      const rtc = realTimeCollaboration(
-        cellId,
-        (code) => {
-          // It's not really a formatting change,
-          // but this means it won't be marked as stale
-          cellActions.updateCellCode({ cellId, code, formattingChange: true });
-        },
-        code,
-      );
-      extensions.push(rtc.extension);
-      code = rtc.code;
-    }
+    const editorConfig = createEditorConfig(code);
 
     const ev = new EditorView({
       state: EditorState.fromJSON(
         serializedEditorState,
         {
-          doc: code,
-          extensions: extensions,
+          doc: editorConfig.code,
+          extensions: editorConfig.extensions,
         },
         { history: historyField },
       ),

package/src/components/editor/dynamic-favicon.tsx

@@ -22,6 +22,19 @@ async function getFaviconUrl(key: FaviconKey): Promise<string> {
   return FAVICON_PATHS[key];
 }
 
+function getOrCreateFavicon(): HTMLLinkElement {
+  const existingFavicon =
+    document.querySelector<HTMLLinkElement>("link[rel~='icon']");
+  if (existingFavicon) {
+    return existingFavicon;
+  }
+
+  const favicon = document.createElement("link");
+  favicon.rel = "icon";
+  document.head.append(favicon);
+  return favicon;
+}
+
 interface Props {
   isRunning: boolean;
 }
@@ -64,16 +77,9 @@ export const DynamicFavicon = (props: Props) => {
   const { isRunning } = props;
   const errors = useCellErrors();
 
-  let favicon: HTMLLinkElement | null =
-    document.querySelector("link[rel~='icon']");
-
-  if (!favicon) {
-    favicon = document.createElement("link");
-    favicon.rel = "icon";
-    document.getElementsByTagName("head")[0].append(favicon);
-  }
-
   useEffect(() => {
+    const favicon = getOrCreateFavicon();
+
     // No change on startup (autorun enabled or not)
     // Treat the default marimo favicon as "idle"
     if (!isRunning && favicon.href.includes("favicon")) {
@@ -105,7 +111,7 @@ export const DynamicFavicon = (props: Props) => {
     };
 
     updateFavicon();
-  }, [isRunning, errors, favicon]);
+  }, [isRunning, errors]);
 
   // Send user notification when run has completed
   const prevRunning = usePrevious(isRunning) ?? isRunning;
@@ -118,6 +124,7 @@ export const DynamicFavicon = (props: Props) => {
   // When notebook comes back in focus, reset favicon
   useEventListener(window, "focus", async (_) => {
     if (!isRunning) {
+      const favicon = getOrCreateFavicon();
       favicon.href = await getFaviconUrl("idle");
     }
   });

package/src/plugins/impl/data-editor/__tests__/glide-data-editor.test.tsx

@@ -6,31 +6,36 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { GlideDataEditor } from "../glide-data-editor";
 
-const capturedDataEditor = vi.hoisted(() => ({
-  ref: undefined as React.RefObject<HTMLElement> | undefined,
-  onCellEdited: undefined as
-    | ((cell: [number, number], value: { data: unknown }) => void)
-    | undefined,
-  onRowAppended: undefined as (() => void) | undefined,
-}));
+interface MockDataEditorProps {
+  portalElementRef?: React.RefObject<HTMLElement>;
+  onCellEdited?: (cell: [number, number], value: { data: unknown }) => void;
+  onRowAppended?: () => void;
+}
+
+const captureDataEditorProps = vi.hoisted(() =>
+  vi.fn<(props: MockDataEditorProps) => void>(),
+);
+
+const capturedDataEditor = {
+  get ref() {
+    return captureDataEditorProps.mock.lastCall?.[0].portalElementRef;
+  },
+  get onCellEdited() {
+    return captureDataEditorProps.mock.lastCall?.[0].onCellEdited;
+  },
+  get onRowAppended() {
+    return captureDataEditorProps.mock.lastCall?.[0].onRowAppended;
+  },
+};
 
 vi.mock("@glideapps/glide-data-grid", async () => {
   const React = await import("react");
   return {
     default: React.forwardRef(function MockDataEditor(
-      props: {
-        portalElementRef?: React.RefObject<HTMLElement>;
-        onCellEdited?: (
-          cell: [number, number],
-          value: { data: unknown },
-        ) => void;
-        onRowAppended?: () => void;
-      },
+      props: MockDataEditorProps,
       _ref: React.Ref<HTMLDivElement>,
     ) {
-      capturedDataEditor.ref = props.portalElementRef;
-      capturedDataEditor.onCellEdited = props.onCellEdited;
-      capturedDataEditor.onRowAppended = props.onRowAppended;
+      captureDataEditorProps(props);
       return <div data-testid="mock-data-editor" />;
     }),
     CompactSelection: {

package/dist/assets/has-Cv16T6xA.js

@@ -1 +0,0 @@
-import{Ga as e}from"./index-DUgerA4i.js";var t=Object.prototype.hasOwnProperty;function n(e,n){return e!=null&&t.call(e,n)}function r(t,r){return t!=null&&e(t,r,n)}export{r as t};