@marimo-team/islands 0.16.5 → 0.17.1

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

@@ -2109,7 +2109,7 @@ describe("cell reducer", () => {
     actions.addSetupCellIfDoesntExist({ code: "# Updated setup code" });
 
     // Check that the same setup cell was updated, not duplicated
-    expect(state.cellData[SETUP_CELL_ID].code).toBe("# Setup code");
+    expect(state.cellData[SETUP_CELL_ID].code).toBe("# Updated setup code");
     expect(state.cellData[SETUP_CELL_ID].edited).toBe(true);
     expect(state.cellIds.inOrderIds).toContain(SETUP_CELL_ID);
   });
@@ -2143,6 +2143,24 @@ describe("cell reducer", () => {
     expect(state.cellIds.inOrderIds).toContain(SETUP_CELL_ID);
   });
 
+  it("can delete and then create a new setup cell", () => {
+    // Create the setup cell
+    actions.addSetupCellIfDoesntExist({ code: "# Setup code" });
+
+    // Delete the setup cell
+    actions.deleteCell({ cellId: SETUP_CELL_ID });
+
+    // Create a new setup cell
+    actions.addSetupCellIfDoesntExist({ code: "# New code" });
+
+    // Check that the new setup cell was created
+    expect(state.cellData[SETUP_CELL_ID].id).toBe(SETUP_CELL_ID);
+    expect(state.cellData[SETUP_CELL_ID].name).toBe("setup");
+    expect(state.cellData[SETUP_CELL_ID].code).toBe("# New code");
+    expect(state.cellData[SETUP_CELL_ID].edited).toBe(true);
+    expect(state.cellIds.inOrderIds).toContain(SETUP_CELL_ID);
+  });
+
   it("can clear all outputs", () => {
     // Add a cell and give it output
     actions.createNewCell({

package/src/core/cells/__tests__/session.test.ts

@@ -210,8 +210,18 @@ describe("notebookStateFromSession", () => {
 
     it("handles console outputs in session cell", () => {
       const consoleOutputs = [
-        { type: "stream", name: "stdout", text: "Hello stdout" } as const,
-        { type: "stream", name: "stderr", text: "Hello stderr" } as const,
+        {
+          type: "stream",
+          name: "stdout",
+          text: "Hello stdout",
+          mimetype: "text/plain",
+        } as const,
+        {
+          type: "stream",
+          name: "stderr",
+          text: "Hello stderr",
+          mimetype: "text/plain",
+        } as const,
       ];
       const session = createSession([
         createSessionCell("cell-1", [], consoleOutputs),
@@ -356,7 +366,14 @@ describe("notebookStateFromSession", () => {
         createSessionCell(
           "cell-1",
           [],
-          [{ type: "stream", name: "stdout", text: "output" }],
+          [
+            {
+              type: "stream",
+              name: "stdout",
+              text: "output",
+              mimetype: "text/plain",
+            },
+          ],
         ),
       ]);
       const notebook = createNotebook([

package/src/core/cells/cells.ts

@@ -145,13 +145,18 @@ export function initialNotebookState(): NotebookState {
   });
 }
 
+/** The target cell ID to create a new cell relative to. Can be:
+ * - A CellId string for an existing cell
+ * - "__end__" to append at the end of the first column
+ * - {type: "__end__", columnId} to append at the end of a specific column
+ */
+export type CellPosition =
+  | CellId
+  | "__end__"
+  | { type: "__end__"; columnId: CellColumnId };
+
 export interface CreateNewCellAction {
-  /** The target cell ID to create a new cell relative to. Can be:
-   * - A CellId string for an existing cell
-   * - "__end__" to append at the end of the first column
-   * - {type: "__end__", columnId} to append at the end of a specific column
-   */
-  cellId: CellId | "__end__" | { type: "__end__"; columnId: CellColumnId };
+  cellId: CellPosition;
   /** Whether to insert before (true) or after (false) the target cell */
   before: boolean;
   /** Initial code content for the new cell */
@@ -1331,7 +1336,7 @@ const {
     }
 
     // First check if setup cell already exists
-    if (SETUP_CELL_ID in state.cellData) {
+    if (SETUP_CELL_ID in state.cellIds) {
       // Just focus on the existing setup cell
       return {
         ...state,
@@ -1615,7 +1620,7 @@ export const columnIdsAtom = atom((get) =>
   get(notebookAtom).cellIds.getColumnIds(),
 );
 
-const cellDataAtom = atomFamily((cellId: CellId) =>
+export const cellDataAtom = atomFamily((cellId: CellId) =>
   atom((get) => get(notebookAtom).cellData[cellId]),
 );
 const cellRuntimeAtom = atomFamily((cellId: CellId) =>

package/src/core/cells/session.ts

@@ -229,7 +229,7 @@ function createCellRuntimeFromSession(
       return {
         channel: consoleOutput.name === "stderr" ? "stderr" : "stdout",
         data: consoleOutput.text,
-        mimetype: "text/plain",
+        mimetype: consoleOutput.mimetype ?? "text/plain",
         timestamp: DEFAULT_TIMESTAMP,
       };
     }),

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

@@ -45,6 +45,7 @@ exports[`snapshot all duplicate keymaps > default keymaps 2`] = `
     },
     {
       "key": "Backspace",
+      "preventDefault": true,
       "run": "deleteCharBackward",
       "shift": "deleteCharBackward",
     },
@@ -153,6 +154,7 @@ exports[`snapshot all duplicate keymaps > vim keymaps 2`] = `
     },
     {
       "key": "Backspace",
+      "preventDefault": true,
       "run": "deleteCharBackward",
       "shift": "deleteCharBackward",
     },

package/src/core/codemirror/__tests__/replace-editor-content.test.ts

@@ -0,0 +1,336 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { describe, expect, it, vi } from "vitest";
+import { replaceEditorContent } from "../replace-editor-content";
+
+describe("replaceEditorContent", () => {
+  it("should replace content when editor doesn't have focus", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "original content",
+      }),
+    });
+
+    // Editor doesn't have focus by default
+    expect(view.hasFocus).toBe(false);
+
+    replaceEditorContent(view, "new content");
+
+    expect(view.state.doc.toString()).toBe("new content");
+    // Cursor position is not preserved when not focused
+    expect(view.state.selection.main.head).toBe(0);
+
+    view.destroy();
+  });
+
+  it("should preserve cursor position when editor has focus (same line)", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "Hello World",
+        selection: { anchor: 6 }, // Position after "Hello "
+      }),
+    });
+
+    // Mock hasFocus to return true
+    Object.defineProperty(view, "hasFocus", {
+      get: () => true,
+      configurable: true,
+    });
+
+    expect(view.hasFocus).toBe(true);
+
+    // Replace with similar length content on same line
+    replaceEditorContent(view, "Goodbye Everyone");
+
+    expect(view.state.doc.toString()).toBe("Goodbye Everyone");
+
+    // Cursor should stay at the same column (6) since it's still within the line
+    const newCursorPos = view.state.selection.main.head;
+    expect(newCursorPos).toBe(6);
+
+    view.destroy();
+  });
+
+  it("should preserve cursor at beginning when focused", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "Hello World",
+        selection: { anchor: 0 }, // At beginning
+      }),
+    });
+
+    Object.defineProperty(view, "hasFocus", {
+      get: () => true,
+      configurable: true,
+    });
+
+    replaceEditorContent(view, "Goodbye Everyone");
+
+    expect(view.state.doc.toString()).toBe("Goodbye Everyone");
+    // Cursor should stay at beginning
+    expect(view.state.selection.main.head).toBe(0);
+
+    view.destroy();
+  });
+
+  it("should clamp cursor when line shrinks", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "Hello World",
+        selection: { anchor: 11 }, // At end (column 11)
+      }),
+    });
+
+    Object.defineProperty(view, "hasFocus", {
+      get: () => true,
+      configurable: true,
+    });
+
+    // Replace with shorter content
+    replaceEditorContent(view, "Goodbye");
+
+    expect(view.state.doc.toString()).toBe("Goodbye");
+    // Cursor should be clamped to end of line since column 11 > line length (7)
+    expect(view.state.selection.main.head).toBe(7);
+
+    view.destroy();
+  });
+
+  it("should handle empty document", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "",
+      }),
+    });
+
+    Object.defineProperty(view, "hasFocus", {
+      get: () => true,
+      configurable: true,
+    });
+
+    replaceEditorContent(view, "new content");
+
+    expect(view.state.doc.toString()).toBe("new content");
+    expect(view.state.selection.main.head).toBe(0);
+
+    view.destroy();
+  });
+
+  it("should do nothing when content is the same", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "same content",
+        selection: { anchor: 5 },
+      }),
+    });
+
+    const dispatchSpy = vi.spyOn(view, "dispatch");
+
+    replaceEditorContent(view, "same content");
+
+    // No dispatch should have been called
+    expect(dispatchSpy).not.toHaveBeenCalled();
+    expect(view.state.doc.toString()).toBe("same content");
+    expect(view.state.selection.main.head).toBe(5);
+
+    view.destroy();
+  });
+
+  it("should handle cursor in middle of focused document", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "The quick brown fox jumps",
+        selection: { anchor: 10 }, // After "The quick " (column 10)
+      }),
+    });
+
+    Object.defineProperty(view, "hasFocus", {
+      get: () => true,
+      configurable: true,
+    });
+
+    // Replace with longer content
+    replaceEditorContent(view, "The extremely quick brown fox jumps over");
+
+    expect(view.state.doc.toString()).toBe(
+      "The extremely quick brown fox jumps over",
+    );
+
+    // Cursor should stay at same column (10) on same line
+    const newCursorPos = view.state.selection.main.head;
+    expect(newCursorPos).toBe(10);
+
+    view.destroy();
+  });
+
+  it("should respect preserveCursor=false when focused", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "Hello World",
+        selection: { anchor: 6 },
+      }),
+    });
+
+    Object.defineProperty(view, "hasFocus", {
+      get: () => true,
+      configurable: true,
+    });
+
+    replaceEditorContent(view, "Goodbye Everyone", { preserveCursor: false });
+
+    expect(view.state.doc.toString()).toBe("Goodbye Everyone");
+    // When preserveCursor is false, cursor is not explicitly set
+    // so it defaults to 0
+    expect(view.state.selection.main.head).toBe(0);
+
+    view.destroy();
+  });
+
+  it("should handle newlines and multiline content", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "Line 1\nLine 2\nLine 3",
+        // Cursor at position 10: "Line 1\nLi|ne 2\nLine 3"
+        // Line 2, column 2 (after "Li")
+        selection: { anchor: 10 },
+      }),
+    });
+
+    Object.defineProperty(view, "hasFocus", {
+      get: () => true,
+      configurable: true,
+    });
+
+    replaceEditorContent(view, "Line 1\nLine 2 updated\nLine 3\nLine 4");
+
+    expect(view.state.doc.toString()).toBe(
+      "Line 1\nLine 2 updated\nLine 3\nLine 4",
+    );
+
+    // Cursor should stay on line 2 at column 2 (after "Li")
+    // "Line 1\nLi|ne 2 updated\nLine 3\nLine 4"
+    const newCursorPos = view.state.selection.main.head;
+    expect(newCursorPos).toBe(10); // Same position, line 2 column 2
+
+    view.destroy();
+  });
+
+  it("should move cursor up when line is deleted", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "Line 1\nLine 2\nLine 3",
+        selection: { anchor: 14 }, // Line 3, start of line
+      }),
+    });
+
+    Object.defineProperty(view, "hasFocus", {
+      get: () => true,
+      configurable: true,
+    });
+
+    // Replace with only 2 lines (line 3 is deleted)
+    replaceEditorContent(view, "Line 1\nLine 2");
+
+    expect(view.state.doc.toString()).toBe("Line 1\nLine 2");
+
+    // Cursor should move to end of last available line
+    const newCursorPos = view.state.selection.main.head;
+    expect(newCursorPos).toBe(13); // End of "Line 1\nLine 2"
+
+    view.destroy();
+  });
+
+  it("should stay at end of line when new line is added", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "Hello World",
+        selection: { anchor: 11 }, // At end (column 11)
+      }),
+    });
+
+    Object.defineProperty(view, "hasFocus", {
+      get: () => true,
+      configurable: true,
+    });
+
+    replaceEditorContent(view, "Hello World\nSome new line");
+
+    expect(view.state.doc.toString()).toBe("Hello World\nSome new line");
+    const newCursorPos = view.state.selection.main.head;
+    expect(newCursorPos).toBe(11);
+
+    view.destroy();
+  });
+
+  it("should preserve cursor on same line with column clamping", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "def function_with_long_name():",
+        selection: { anchor: 25 }, // Near end of line
+      }),
+    });
+
+    Object.defineProperty(view, "hasFocus", {
+      get: () => true,
+      configurable: true,
+    });
+
+    // Replace with shorter line
+    replaceEditorContent(view, "def fn():");
+
+    expect(view.state.doc.toString()).toBe("def fn():");
+
+    // Cursor should be clamped to end of shorter line
+    const newCursorPos = view.state.selection.main.head;
+    expect(newCursorPos).toBe(9); // End of "def fn():"
+
+    view.destroy();
+  });
+
+  it("should handle selection range (collapses to head position)", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "Hello World",
+        selection: { anchor: 0, head: 5 }, // "Hello" selected
+      }),
+    });
+
+    Object.defineProperty(view, "hasFocus", {
+      get: () => true,
+      configurable: true,
+    });
+
+    replaceEditorContent(view, "Goodbye Everyone");
+
+    expect(view.state.doc.toString()).toBe("Goodbye Everyone");
+    // Selection head (5) is preserved as cursor position
+    expect(view.state.selection.main.head).toBe(5);
+    expect(view.state.selection.main.anchor).toBe(5);
+
+    view.destroy();
+  });
+
+  it("should handle replacing with empty string", () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "Some content to clear",
+        selection: { anchor: 10 },
+      }),
+    });
+
+    Object.defineProperty(view, "hasFocus", {
+      get: () => true,
+      configurable: true,
+    });
+
+    replaceEditorContent(view, "");
+
+    expect(view.state.doc.toString()).toBe("");
+    // Cursor should be at position 0 (only valid position in empty doc)
+    expect(view.state.selection.main.head).toBe(0);
+
+    view.destroy();
+  });
+});

package/src/core/codemirror/ai/resources.ts

@@ -1,8 +1,9 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import { acceptCompletion } from "@codemirror/autocomplete";
 import type { Language } from "@codemirror/language";
-import type { Extension } from "@codemirror/state";
-import type { TooltipView } from "@codemirror/view";
+import { type Extension, Prec } from "@codemirror/state";
+import { type EditorView, keymap, type TooltipView } from "@codemirror/view";
 import {
   hoverResource,
   type Resource,
@@ -67,6 +68,16 @@ export function resourceExtension(opts: {
         },
       ),
     }),
+    Prec.high(
+      keymap.of([
+        {
+          key: "Tab",
+          run: (view: EditorView) => {
+            return acceptCompletion(view);
+          },
+        },
+      ]),
+    ),
     contextCallbacks.of({
       addAttachment: (attachment) => onAddFiles?.([attachment]),
     }),

package/src/core/codemirror/copilot/state.ts

@@ -7,13 +7,15 @@ import {
   resolvedMarimoConfigAtom,
 } from "@/core/config/config";
 import { store, waitFor } from "@/core/state/jotai";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
+import { availableStorage } from "@/utils/storage/storage";
 
 const KEY = "marimo:copilot:signedIn";
 
 export const isGitHubCopilotSignedInState = atomWithStorage<boolean | null>(
   KEY,
   null,
-  undefined,
+  jotaiJsonStorage,
   {
     getOnInit: true,
   },
@@ -49,7 +51,7 @@ export function clearGitHubCopilotLoadingVersion(expectedVersion: number) {
 }
 
 function getIsLastSignedIn() {
-  const lastSignedIn = localStorage.getItem(KEY);
+  const lastSignedIn = availableStorage.getItem(KEY);
   return lastSignedIn === "true";
 }
 

package/src/core/codemirror/find-replace/navigate.ts

@@ -4,6 +4,7 @@ import { SearchQuery } from "@codemirror/search";
 import { EditorSelection } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { getAllEditorViews } from "@/core/cells/cells";
+import { replaceEditorContent } from "@/core/codemirror/replace-editor-content";
 import { store } from "@/core/state/jotai";
 import { asQueryCreator, type QueryType } from "./query";
 import { findReplaceAtom } from "./state";
@@ -127,8 +128,7 @@ export const replaceAll = searchCommand(({ query }) => {
 
     const prevDoc = view.state.doc.toString();
     undoHandlers.push(() => {
-      view.dispatch({
-        changes: [{ from: 0, to: view.state.doc.length, insert: prevDoc }],
+      replaceEditorContent(view, prevDoc, {
         userEvent: "input.replace.all",
       });
     });

package/src/core/codemirror/format.ts

@@ -17,6 +17,7 @@ import {
   getEditorCodeAsPython,
   updateEditorCodeFromPython,
 } from "./language/utils";
+import { replaceEditorContent } from "./replace-editor-content";
 
 export const formattingChangeEffect = StateEffect.define<boolean>();
 
@@ -106,15 +107,7 @@ export async function formatSQL(editor: EditorView) {
   });
 
   // Update editor with formatted SQL
-  const doc = editor.state.doc;
-
-  // Noop if the code is the same
-  if (doc.toString() === formattedSQL) {
-    return;
-  }
-
-  editor.dispatch({
-    changes: { from: 0, to: doc.length, insert: formattedSQL },
+  replaceEditorContent(editor, formattedSQL, {
     effects: [formattingChangeEffect.of(true)],
   });
 }

package/src/core/codemirror/language/__tests__/extension.test.ts

@@ -174,8 +174,12 @@ describe("switchLanguage", () => {
     // Switch to sql
     switchLanguage(mockEditor, { language: "sql", keepCodeAsIs: false });
     expect(mockEditor.state.doc.toString()).toMatchInlineSnapshot(`
-      "print('Hello')
-      print('Goodbye')"
+      "mo.md(
+          r"""
+      print('Hello')
+      print('Goodbye')
+      """
+      )"
     `);
 
     // Switch back to python
@@ -183,8 +187,12 @@ describe("switchLanguage", () => {
     expect(mockEditor.state.doc.toString()).toMatchInlineSnapshot(`
       "_df = mo.sql(
           f"""
+          mo.md(
+              r\\"""
           print('Hello')
           print('Goodbye')
+          \\"""
+          )
           """
       )"
     `);