@marimo-team/frontend 0.21.2-dev5 → 0.21.2-dev52

package/src/core/codemirror/__tests__/format.test.ts

@@ -6,6 +6,7 @@ import { EditorView } from "@codemirror/view";
 import { atom } from "jotai";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
+import { cellId } from "@/__tests__/branded";
 import type { NotebookState } from "@/core/cells/cells";
 import { getNotebook } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
@@ -99,11 +100,11 @@ afterEach(() => {
 describe("format", () => {
   describe("formatEditorViews", () => {
     it("should format code in editor views", async () => {
-      const cellId1 = "1" as CellId;
-      const cellId2 = "2" as CellId;
+      const cid1 = cellId("1");
+      const cid2 = cellId("2");
       const views = {
-        [cellId1]: createEditor("import numpy as    np", cellId1),
-        [cellId2]: createEditor("import pandas as    pd", cellId2),
+        [cid1]: createEditor("import numpy as    np", cid1),
+        [cid2]: createEditor("import pandas as    pd", cid2),
       };
 
       const formattedCode1 = "import numpy as np";
@@ -111,8 +112,8 @@ describe("format", () => {
 
       mockRequestClient.sendFormat.mockResolvedValueOnce({
         codes: {
-          [cellId1]: formattedCode1,
-          [cellId2]: formattedCode2,
+          [cid1]: formattedCode1,
+          [cid2]: formattedCode2,
         },
       });
 
@@ -122,36 +123,36 @@ describe("format", () => {
 
       expect(mockRequestClient.sendFormat).toHaveBeenCalledWith({
         codes: {
-          [cellId1]: "import numpy as    np",
-          [cellId2]: "import pandas as    pd",
+          [cid1]: "import numpy as    np",
+          [cid2]: "import pandas as    pd",
         },
         lineLength: 88,
       });
 
-      expect(views[cellId1].state.doc.toString()).toBe(formattedCode1);
-      expect(views[cellId2].state.doc.toString()).toBe(formattedCode2);
+      expect(views[cid1].state.doc.toString()).toBe(formattedCode1);
+      expect(views[cid2].state.doc.toString()).toBe(formattedCode2);
       expect(updateCellCode).toHaveBeenCalledWith({
-        cellId: cellId1,
+        cellId: cid1,
         code: formattedCode1,
         formattingChange: true,
       });
       expect(updateCellCode).toHaveBeenCalledWith({
-        cellId: cellId2,
+        cellId: cid2,
         code: formattedCode2,
         formattingChange: true,
       });
     });
 
     it("should not update editor if formatted code is same as original", async () => {
-      const cellId = "1" as CellId;
+      const cid = cellId("1");
       const originalCode = "import numpy as np";
       const views = {
-        [cellId]: createEditor(originalCode, cellId),
+        [cid]: createEditor(originalCode, cid),
       };
 
       mockRequestClient.sendFormat.mockResolvedValueOnce({
         codes: {
-          [cellId]: originalCode,
+          [cid]: originalCode,
         },
       });
 
@@ -159,26 +160,26 @@ describe("format", () => {
 
       await formatEditorViews(views);
 
-      expect(views[cellId].state.doc.toString()).toBe(originalCode);
+      expect(views[cid].state.doc.toString()).toBe(originalCode);
       expect(updateCellCode).not.toHaveBeenCalled();
     });
   });
 
   describe("formatAll", () => {
     it("should format all cells in notebook", async () => {
-      const cellId1 = "1" as CellId;
-      const cellId2 = "2" as CellId;
+      const cid1 = cellId("1");
+      const cid2 = cellId("2");
       const views = {
-        [cellId1]: createEditor("import numpy as    np", cellId1),
-        [cellId2]: createEditor("import pandas as    pd", cellId2),
+        [cid1]: createEditor("import numpy as    np", cid1),
+        [cid2]: createEditor("import pandas as    pd", cid2),
       };
 
       vi.mocked(getNotebook).mockReturnValueOnce({} as NotebookState);
       vi.mocked(notebookCellEditorViews).mockReturnValueOnce(views);
       mockRequestClient.sendFormat.mockResolvedValueOnce({
         codes: {
-          [cellId1]: "import numpy as np",
-          [cellId2]: "import pandas as pd",
+          [cid1]: "import numpy as np",
+          [cid2]: "import pandas as pd",
         },
       });
 
@@ -188,14 +189,14 @@ describe("format", () => {
 
       expect(mockRequestClient.sendFormat).toHaveBeenCalledWith({
         codes: {
-          [cellId1]: "import numpy as    np",
-          [cellId2]: "import pandas as    pd",
+          [cid1]: "import numpy as    np",
+          [cid2]: "import pandas as    pd",
         },
         lineLength: 88,
       });
 
       expect(updateCellCode).toHaveBeenCalledWith({
-        cellId: cellId1,
+        cellId: cid1,
         code: "import numpy as np",
         formattingChange: true,
       });
@@ -204,8 +205,8 @@ describe("format", () => {
 
   describe("formatSQL", () => {
     it("should format SQL code", async () => {
-      const cellId = "1" as CellId;
-      const editor = createEditor("SELECT * FROM table WHERE id = 1", cellId);
+      const cid = cellId("1");
+      const editor = createEditor("SELECT * FROM table WHERE id = 1", cid);
       switchLanguage(editor, { language: "sql" });
 
       await formatSQL(editor, "duckdb" as ConnectionName);
@@ -220,15 +221,15 @@ describe("format", () => {
           id = 1"
       `);
       expect(updateCellCode).toHaveBeenCalledWith({
-        cellId: cellId,
+        cellId: cid,
         code: editor.state.doc.toString(),
         formattingChange: true,
       });
     });
 
     it("should not format if language adapter is not SQL", async () => {
-      const cellId = "1" as CellId;
-      const editor = createEditor("SELECT * FROM table WHERE id = 1", cellId);
+      const cid = cellId("1");
+      const editor = createEditor("SELECT * FROM table WHERE id = 1", cid);
       switchLanguage(editor, { language: "python" });
 
       await formatSQL(editor, "duckdb" as ConnectionName);
@@ -242,11 +243,8 @@ describe("format", () => {
   });
 
   it("should format SQL code with different dialect", async () => {
-    const cellId = "1" as CellId;
-    const editor = createEditor(
-      "SELECT * FROM `table.dot` WHERE id = 1",
-      cellId,
-    );
+    const cid = cellId("1");
+    const editor = createEditor("SELECT * FROM `table.dot` WHERE id = 1", cid);
     switchLanguage(editor, { language: "sql" });
 
     await formatSQL(editor, "mysql" as ConnectionName); // mysql uses backticks for identifiers
@@ -260,7 +258,7 @@ describe("format", () => {
         id = 1"
     `);
     expect(updateCellCode).toHaveBeenCalledWith({
-      cellId: cellId,
+      cellId: cid,
       code: editor.state.doc.toString(),
       formattingChange: true,
     });

package/src/core/codemirror/__tests__/setup.test.ts

@@ -3,7 +3,7 @@
 import { EditorState, type Extension } from "@codemirror/state";
 import { keymap } from "@codemirror/view";
 import { describe, expect, test, vi } from "vitest";
-import type { CellId } from "@/core/cells/ids";
+import { cellId } from "@/__tests__/branded";
 import { OverridingHotkeyProvider } from "@/core/hotkeys/hotkeys";
 import { Objects } from "@/utils/objects";
 import type { CodemirrorCellActions } from "../cells/state";
@@ -35,7 +35,7 @@ function namedFunction(name: string) {
 
 function getOpts() {
   return {
-    cellId: "0" as CellId,
+    cellId: cellId("0"),
     showPlaceholder: false,
     enableAI: false,
     cellActions: {

package/src/core/codemirror/cells/__tests__/extensions.test.ts

@@ -0,0 +1,114 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+
+import {
+  EditorState,
+  Transaction,
+  type TransactionSpec,
+} from "@codemirror/state";
+import { describe, expect, it } from "vitest";
+import { formattingChangeEffect } from "../../format";
+import { loroSyncAnnotation } from "../../rtc/loro/sync";
+import { exportedForTesting } from "../extensions";
+
+const { shouldAutorunMarkdownUpdate } = exportedForTesting;
+
+function createTransaction(spec: TransactionSpec) {
+  return EditorState.create({ doc: "" }).update(spec);
+}
+
+describe("shouldAutorunMarkdownUpdate", () => {
+  it.each([
+    "input.type",
+    "delete.backward",
+    "undo",
+    "redo",
+  ])("accepts local %s transactions", (userEvent) => {
+    const transaction = createTransaction({
+      changes: { from: 0, insert: "#" },
+      annotations: [Transaction.userEvent.of(userEvent)],
+    });
+
+    expect(
+      shouldAutorunMarkdownUpdate({
+        docChanged: transaction.docChanged,
+        transactions: [transaction],
+      }),
+    ).toBe(true);
+  });
+
+  it("ignores formatting changes", () => {
+    const transaction = createTransaction({
+      changes: { from: 0, insert: "#" },
+      annotations: [Transaction.userEvent.of("input.type")],
+      effects: [formattingChangeEffect.of(true)],
+    });
+
+    expect(
+      shouldAutorunMarkdownUpdate({
+        docChanged: transaction.docChanged,
+        transactions: [transaction],
+      }),
+    ).toBe(false);
+  });
+
+  it("ignores RTC sync transactions", () => {
+    const transaction = createTransaction({
+      changes: { from: 0, insert: "#" },
+      annotations: [
+        Transaction.userEvent.of("input.type"),
+        loroSyncAnnotation.of(true),
+      ],
+    });
+
+    expect(
+      shouldAutorunMarkdownUpdate({
+        docChanged: transaction.docChanged,
+        transactions: [transaction],
+        hasFocus: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("ignores programmatic doc changes without a user event", () => {
+    const transaction = createTransaction({
+      changes: { from: 0, insert: "#" },
+    });
+
+    expect(
+      shouldAutorunMarkdownUpdate({
+        docChanged: transaction.docChanged,
+        transactions: [transaction],
+      }),
+    ).toBe(false);
+  });
+
+  it("allows focused local doc changes without user event annotations", () => {
+    const transaction = createTransaction({
+      changes: { from: 0, insert: "#" },
+    });
+
+    expect(
+      shouldAutorunMarkdownUpdate({
+        docChanged: transaction.docChanged,
+        transactions: [transaction],
+        hasFocus: true,
+      }),
+    ).toBe(true);
+  });
+
+  it("honors the predicate gate", () => {
+    const transaction = createTransaction({
+      changes: { from: 0, insert: "#" },
+      annotations: [Transaction.userEvent.of("input.type")],
+    });
+
+    expect(
+      shouldAutorunMarkdownUpdate({
+        docChanged: transaction.docChanged,
+        transactions: [transaction],
+        predicate: () => false,
+      }),
+    ).toBe(false);
+  });
+});

package/src/core/codemirror/cells/__tests__/traceback-decorations.test.ts

@@ -5,6 +5,7 @@ import { foldCode, foldedRanges, foldGutter } from "@codemirror/language";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { afterEach, describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
 import type { CellId } from "@/core/cells/ids";
 import { createMockObservable } from "@/core/state/__mocks__/mocks";
 import type { Observable } from "@/core/state/observable";
@@ -48,7 +49,7 @@ describe("traceback-decorations", () => {
 
   describe("unfoldErrorLines", () => {
     it("should unfold folded regions containing error lines", () => {
-      const cellId = "cell1" as CellId;
+      const cid = cellId("cell1");
       const code = `def my_function():
     x = 1
     y = 2
@@ -60,7 +61,7 @@ result = my_function()`;
       const errorsObservable = createMockObservable<
         TracebackInfo[] | undefined
       >(undefined);
-      view = createEditor(code, cellId, errorsObservable);
+      view = createEditor(code, cid, errorsObservable);
 
       // Fold the function body (lines 2-5)
       // @ts-expect-error - foldCode accepts position as second arg at runtime
@@ -82,7 +83,7 @@ result = my_function()`;
       mockObservable.set([
         {
           kind: "cell",
-          cellId,
+          cellId: cid,
           lineNumber: 3,
         },
       ]);
@@ -100,7 +101,7 @@ result = my_function()`;
     });
 
     it("should not unfold folded regions when error is outside the region", () => {
-      const cellId = "cell1" as CellId;
+      const cid = cellId("cell1");
       const code = `def my_function():
     x = 1
     y = 2
@@ -111,7 +112,7 @@ result = my_function()`;
       const errorsObservable = createMockObservable<
         TracebackInfo[] | undefined
       >(undefined);
-      view = createEditor(code, cellId, errorsObservable);
+      view = createEditor(code, cid, errorsObservable);
 
       // Fold the function body (lines 2-4)
       // @ts-expect-error - foldCode accepts position as second arg at runtime
@@ -133,7 +134,7 @@ result = my_function()`;
       mockObservable.set([
         {
           kind: "cell",
-          cellId,
+          cellId: cid,
           lineNumber: 6,
         },
       ]);
@@ -151,8 +152,8 @@ result = my_function()`;
     });
 
     it("should not unfold regions for errors in different cells", () => {
-      const cellId1 = "cell1" as CellId;
-      const cellId2 = "cell2" as CellId;
+      const cellId1 = cellId("cell1");
+      const cellId2 = cellId("cell2");
       const code = `def my_function():
     x = 1
     y = 2
@@ -201,7 +202,7 @@ result = my_function()`;
     });
 
     it("should handle multiple errors in the same folded region", () => {
-      const cellId = "cell1" as CellId;
+      const cid = cellId("cell1");
       const code = `def my_function():
     x = 1
     y = 2
@@ -213,7 +214,7 @@ result = my_function()`;
       const errorsObservable = createMockObservable<
         TracebackInfo[] | undefined
       >(undefined);
-      view = createEditor(code, cellId, errorsObservable);
+      view = createEditor(code, cid, errorsObservable);
 
       // Fold the function body
       // @ts-expect-error - foldCode accepts position as second arg at runtime
@@ -235,12 +236,12 @@ result = my_function()`;
       mockObservable.set([
         {
           kind: "cell",
-          cellId,
+          cellId: cid,
           lineNumber: 2, // Inside folded region
         },
         {
           kind: "cell",
-          cellId,
+          cellId: cid,
           lineNumber: 4, // Also inside folded region
         },
       ]);
@@ -258,7 +259,7 @@ result = my_function()`;
     });
 
     it("should handle invalid line numbers gracefully in unfoldErrorLines", () => {
-      const cellId = "cell1" as CellId;
+      const cid = cellId("cell1");
       const code = `def my_function():
     x = 1
     return x`;
@@ -266,7 +267,7 @@ result = my_function()`;
       const errorsObservable = createMockObservable<
         TracebackInfo[] | undefined
       >(undefined);
-      view = createEditor(code, cellId, errorsObservable);
+      view = createEditor(code, cid, errorsObservable);
 
       // Fold the function
       // @ts-expect-error - foldCode accepts position as second arg at runtime
@@ -284,7 +285,7 @@ result = my_function()`;
       mockObservable.set([
         {
           kind: "cell",
-          cellId,
+          cellId: cid,
           lineNumber: 2, // Valid line number inside folded region
         },
       ]);
@@ -310,7 +311,7 @@ result = my_function()`;
     });
 
     it("should handle file errors (not cell errors)", () => {
-      const cellId = "cell1" as CellId;
+      const cid = cellId("cell1");
       const code = `def my_function():
     x = 1
     return x`;
@@ -318,7 +319,7 @@ result = my_function()`;
       const errorsObservable = createMockObservable<
         TracebackInfo[] | undefined
       >(undefined);
-      view = createEditor(code, cellId, errorsObservable);
+      view = createEditor(code, cid, errorsObservable);
 
       // Fold the function
       // @ts-expect-error - foldCode accepts position as second arg at runtime
@@ -350,7 +351,7 @@ result = my_function()`;
     });
 
     it("should handle empty or undefined errors", () => {
-      const cellId = "cell1" as CellId;
+      const cid = cellId("cell1");
       const code = `def my_function():
     x = 1
     return x`;
@@ -358,7 +359,7 @@ result = my_function()`;
       const errorsObservable = createMockObservable<
         TracebackInfo[] | undefined
       >(undefined);
-      view = createEditor(code, cellId, errorsObservable);
+      view = createEditor(code, cid, errorsObservable);
 
       // Fold the function
       // @ts-expect-error - foldCode accepts position as second arg at runtime
@@ -392,7 +393,7 @@ result = my_function()`;
     });
 
     it("should handle invalid line numbers gracefully", () => {
-      const cellId = "cell1" as CellId;
+      const cid = cellId("cell1");
       const code = `def my_function():
     x = 1
     return x`;
@@ -400,7 +401,7 @@ result = my_function()`;
       const errorsObservable = createMockObservable<
         TracebackInfo[] | undefined
       >(undefined);
-      view = createEditor(code, cellId, errorsObservable);
+      view = createEditor(code, cid, errorsObservable);
 
       // Fold the function
       // @ts-expect-error - foldCode accepts position as second arg at runtime
@@ -415,7 +416,7 @@ result = my_function()`;
       mockObservable.set([
         {
           kind: "cell",
-          cellId,
+          cellId: cid,
           lineNumber: maxLine + 100, // Invalid line number
         },
       ]);
@@ -438,7 +439,7 @@ result = my_function()`;
     });
 
     it("should unfold nested structures when error is inside", () => {
-      const cellId = "cell1" as CellId;
+      const cid = cellId("cell1");
       const code = `def outer_function():
     def inner_function():
         x = 1
@@ -452,7 +453,7 @@ final = outer_function()`;
       const errorsObservable = createMockObservable<
         TracebackInfo[] | undefined
       >(undefined);
-      view = createEditor(code, cellId, errorsObservable);
+      view = createEditor(code, cid, errorsObservable);
 
       // Fold the outer function (which contains the inner function)
       // @ts-expect-error - foldCode accepts position as second arg at runtime
@@ -474,7 +475,7 @@ final = outer_function()`;
       mockObservable.set([
         {
           kind: "cell",
-          cellId,
+          cellId: cid,
           lineNumber: 4,
         },
       ]);
@@ -492,7 +493,7 @@ final = outer_function()`;
     });
 
     it("should handle errors being cleared and then re-added", () => {
-      const cellId = "cell1" as CellId;
+      const cid = cellId("cell1");
       const code = `def my_function():
     x = 1
     y = 2
@@ -503,7 +504,7 @@ result = my_function()`;
       const errorsObservable = createMockObservable<
         TracebackInfo[] | undefined
       >(undefined);
-      view = createEditor(code, cellId, errorsObservable);
+      view = createEditor(code, cid, errorsObservable);
 
       // Fold the function
       // @ts-expect-error - foldCode accepts position as second arg at runtime
@@ -517,7 +518,7 @@ result = my_function()`;
       mockObservable.set([
         {
           kind: "cell",
-          cellId,
+          cellId: cid,
           lineNumber: 2,
         },
       ]);
@@ -545,7 +546,7 @@ result = my_function()`;
       mockObservable.set([
         {
           kind: "cell",
-          cellId,
+          cellId: cid,
           lineNumber: 3,
         },
       ]);
@@ -562,7 +563,7 @@ result = my_function()`;
     });
 
     it("should unfold immediately when errors are set", () => {
-      const cellId = "cell1" as CellId;
+      const cid = cellId("cell1");
       const code = `def my_function():
     x = 1
     y = 2
@@ -573,7 +574,7 @@ result = my_function()`;
       const errorsObservable = createMockObservable<
         TracebackInfo[] | undefined
       >(undefined);
-      view = createEditor(code, cellId, errorsObservable);
+      view = createEditor(code, cid, errorsObservable);
 
       // Fold the function
       // @ts-expect-error - foldCode accepts position as second arg at runtime
@@ -595,7 +596,7 @@ result = my_function()`;
       mockObservable.set([
         {
           kind: "cell",
-          cellId,
+          cellId: cid,
           lineNumber: 2,
         },
       ]);