@marimo-team/islands 0.25.3-dev34 → 0.25.3-dev348

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

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { closeCompletion, completionStatus } from "@codemirror/autocomplete";
-import { type Extension, Prec } from "@codemirror/state";
+import { type Extension, Prec, Transaction } from "@codemirror/state";
 import {
   EditorView,
   type KeyBinding,
@@ -14,7 +14,6 @@ import {
   clearPendingCutAtom,
   pendingCutCellIdsAtom,
 } from "@/core/cells/pending-cut-service";
-import { loroSyncAnnotation } from "@/core/codemirror/rtc/loro/sync";
 import type { KeymapConfig } from "@/core/config/config-schema";
 import type { HotkeyProvider } from "@/core/hotkeys/hotkeys";
 import { getFeatureFlag } from "@/core/config/feature-flag";
@@ -24,7 +23,6 @@ import { createObservable } from "@/core/state/observable";
 import { formatKeymapExtension } from "../extensions";
 import { formattingChangeEffect } from "../format";
 import { goToDefinitionAtCursorPosition } from "../go-to-definition/utils";
-import { getEditorCodeAsPython } from "../language/utils";
 import { isAtEndOfEditor, isAtStartOfEditor } from "../utils";
 import {
   breakpointGutter,
@@ -190,7 +188,7 @@ function cellKeymaps({
 
           if (isAtStartOfEditor(ev)) {
             const actions = ev.state.facet(cellActionsState);
-            actions.moveToNextCell({ cellId, before: true, noCreate: true });
+            actions.moveToNextCell({ cellId, before: true, create: false });
             return true;
           }
           return false;
@@ -207,7 +205,7 @@ function cellKeymaps({
 
           if (isAtEndOfEditor(ev)) {
             const actions = ev.state.facet(cellActionsState);
-            actions.moveToNextCell({ cellId, before: false, noCreate: true });
+            actions.moveToNextCell({ cellId, before: false, create: false });
             return true;
           }
           return false;
@@ -219,7 +217,7 @@ function cellKeymaps({
         stopPropagation: true,
         run: (ev) => {
           const actions = ev.state.facet(cellActionsState);
-          actions.moveToNextCell({ cellId, before: false, noCreate: true });
+          actions.moveToNextCell({ cellId, before: false, create: false });
           return true;
         },
       },
@@ -229,7 +227,7 @@ function cellKeymaps({
         stopPropagation: true,
         run: (ev) => {
           const actions = ev.state.facet(cellActionsState);
-          actions.moveToNextCell({ cellId, before: true, noCreate: true });
+          actions.moveToNextCell({ cellId, before: true, create: false });
           return true;
         },
       },
@@ -260,7 +258,7 @@ function cellKeymaps({
         run: (ev) => {
           ev.contentDOM.blur();
           const actions = ev.state.facet(cellActionsState);
-          actions.createNewCell({ cellId, before: true });
+          actions.createCell({ before: cellId });
           return true;
         },
       },
@@ -271,7 +269,7 @@ function cellKeymaps({
         run: (ev) => {
           ev.contentDOM.blur();
           const actions = ev.state.facet(cellActionsState);
-          actions.createNewCell({ cellId, before: false });
+          actions.createCell({ after: cellId });
           return true;
         },
       },
@@ -324,26 +322,15 @@ function cellKeymaps({
  */
 function cellCodeEditing(hotkeys: HotkeyProvider): Extension[] {
   const onChangePlugin = EditorView.updateListener.of((update) => {
-    if (update.docChanged) {
-      // Check if the doc update was a formatting change
-      // e.g. changing from python to markdown
-      const isFormattingChange = update.transactions.some((tr) =>
-        tr.effects.some((effect) => effect.is(formattingChangeEffect)),
-      );
-      const nextCode = getEditorCodeAsPython(update.view);
-      const cellActions = update.view.state.facet(cellActionsState);
-      const cellId = update.view.state.facet(cellIdState);
-      cellActions.updateCellCode({
-        cellId,
-        code: nextCode,
-        formattingChange: isFormattingChange,
-      });
+    if (!update.docChanged) {
+      return;
+    }
+    const cellId = update.view.state.facet(cellIdState);
 
-      // Clear pending cut state if this cell was marked for cut
-      const pendingCutCellIds = store.get(pendingCutCellIdsAtom);
-      if (pendingCutCellIds.has(cellId)) {
-        store.set(clearPendingCutAtom);
-      }
+    // Clear pending cut state if this cell was marked for cut
+    const pendingCutCellIds = store.get(pendingCutCellIdsAtom);
+    if (pendingCutCellIds.has(cellId)) {
+      store.set(clearPendingCutAtom);
     }
   });
 
@@ -382,8 +369,9 @@ function shouldAutorunMarkdownUpdate({
   }
 
   return transactions.some((tr) => {
-    // Ignore RTC sync changes to avoid duplicate runs from remote edits.
-    if (tr.annotation(loroSyncAnnotation) !== undefined) {
+    // Ignore remote changes to avoid duplicate runs. The client that made the
+    // edit runs it.
+    if (tr.annotation(Transaction.remote)) {
       return false;
     }
 

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

@@ -1,18 +1,14 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { Facet } from "@codemirror/state";
-import type { CellActions } from "@/core/cells/cells";
+import type { CellActions } from "@/core/cells/actions";
 import type { CellId } from "@/core/cells/ids";
 
 export interface CodemirrorCellActions extends CellActions {
   toggleHideCode: () => boolean;
+  askAiAboutCell: () => void;
   aiCellCompletion: () => boolean;
   createManyBelow: (content: string[]) => void;
-  /**
-   * Create the setup cell with the given code, or append the code to the
-   * existing setup cell if one already exists.
-   */
-  addOrAppendSetupCell: (code: string) => void;
   onRun: () => void;
   deleteCell: () => void;
   afterToggleMarkdown: () => void;

package/src/core/codemirror/cm.ts

@@ -74,6 +74,7 @@ export interface CodeMirrorSetupOpts {
   cellId: CellId;
   showPlaceholder: boolean;
   enableAI: boolean;
+  enableAIChat?: boolean;
   acceptCompletionOnEnter?: boolean;
   cellActions: CodemirrorCellActions;
   completionConfig: CompletionConfig;
@@ -92,7 +93,10 @@ export interface CodeMirrorSetupOpts {
 }
 
 function getPlaceholderType(opts: CodeMirrorSetupOpts) {
-  const { showPlaceholder, enableAI } = opts;
+  const { showPlaceholder, enableAI, enableAIChat } = opts;
+  if (enableAIChat) {
+    return "ai";
+  }
   return showPlaceholder ? "marimo-import" : enableAI ? "ai" : "none";
 }
 

package/src/core/codemirror/config/types.ts

@@ -4,7 +4,7 @@
  * The type of placeholder to use for the editor.
  *
  * - "marimo-import" -> Shows `import marimo as mo`
- * - "ai" -> Shows `Start coding or Generate with AI`
+ * - "ai" -> Shows `Start coding or generate with AI`
  * - "none" -> No placeholder
  */
 export type PlaceholderType = "marimo-import" | "ai" | "none";

package/src/core/codemirror/copilot/__tests__/completion-integration.test.ts

@@ -1,5 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { defaultUserConfig } from "@/core/config/config-schema";
+
 import { EditorView } from "@codemirror/view";
 import {
   languageServerWithClient,
@@ -79,6 +81,7 @@ describe("Copilot editor integration", () => {
       extensions: [
         languageAdapterState,
         copilotBundle({
+          ...defaultUserConfig().completion,
           copilot: "custom",
           activate_on_typing: true,
           signature_hint_on_typing: false,
@@ -130,6 +133,7 @@ describe("Copilot editor integration", () => {
       doc: "pri",
       selection: { anchor: 3 },
       extensions: copilotBundle({
+        ...defaultUserConfig().completion,
         copilot: "github",
         activate_on_typing: true,
         signature_hint_on_typing: false,

package/src/core/codemirror/copilot/__tests__/getCodes.test.ts

@@ -1,5 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { defaultUserConfig } from "@/core/config/config-schema";
+
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { describe, expect, it } from "vitest";
@@ -9,7 +11,6 @@ import { createCell } from "@/core/cells/types";
 import { OverridingHotkeyProvider } from "@/core/hotkeys/hotkeys";
 import { store } from "@/core/state/jotai";
 import { variablesAtom } from "@/core/variables/state";
-import { MultiColumn } from "@/utils/id-tree";
 import { cellConfigExtension } from "../../config/extension";
 import { adaptiveLanguageConfiguration } from "../../language/extension";
 import {
@@ -39,6 +40,7 @@ function createMockEditorView(code: string) {
         adaptiveLanguageConfiguration({
           cellId: cellId("cell1"),
           completionConfig: {
+            ...defaultUserConfig().completion,
             copilot: false,
             activate_on_typing: true,
             signature_hint_on_typing: false,
@@ -46,11 +48,12 @@ function createMockEditorView(code: string) {
           },
           hotkeys: new OverridingHotkeyProvider({}),
           placeholderType: "marimo-import",
-          lspConfig: {},
+          lspConfig: { ...defaultUserConfig().language_servers },
         }),
         cellConfigExtension({
           cellId: cellId("cell1"),
           completionConfig: {
+            ...defaultUserConfig().completion,
             copilot: false,
             activate_on_typing: true,
             signature_hint_on_typing: false,
@@ -58,8 +61,8 @@ function createMockEditorView(code: string) {
           },
           hotkeys: new OverridingHotkeyProvider({}),
           placeholderType: "marimo-import",
-          lspConfig: {},
-          diagnosticsConfig: {},
+          lspConfig: { ...defaultUserConfig().language_servers },
+          diagnosticsConfig: { ...defaultUserConfig().diagnostics },
         }),
       ],
     }),
@@ -159,7 +162,7 @@ describe("getCodes", () => {
     ];
     store.set(notebookAtom, {
       ...initialNotebookState(),
-      cellIds: MultiColumn.from([[Cells.cell1, Cells.cell2]]),
+      cellIds: [Cells.cell1, Cells.cell2],
       cellHandles: {
         [Cells.cell1]: { current: mockEditorViews[0] },
         [Cells.cell2]: { current: mockEditorViews[1] },
@@ -177,7 +180,7 @@ describe("getCodes", () => {
     ];
     store.set(notebookAtom, {
       ...initialNotebookState(),
-      cellIds: MultiColumn.from([[Cells.cell1, Cells.cell2]]),
+      cellIds: [Cells.cell1, Cells.cell2],
       cellHandles: {
         [Cells.cell1]: { current: mockEditorViews[0] },
         [Cells.cell2]: { current: mockEditorViews[1] },
@@ -196,7 +199,7 @@ describe("getCodes", () => {
     ];
     store.set(notebookAtom, {
       ...initialNotebookState(),
-      cellIds: MultiColumn.from([[Cells.cell1, Cells.cell2, Cells.cell3]]),
+      cellIds: [Cells.cell1, Cells.cell2, Cells.cell3],
       cellHandles: {
         [Cells.cell1]: { current: mockEditorViews[0] },
         [Cells.cell2]: { current: mockEditorViews[1] },
@@ -218,7 +221,7 @@ describe("getCodes", () => {
     const otherCode = "print('Hello World')";
     store.set(notebookAtom, {
       ...initialNotebookState(),
-      cellIds: MultiColumn.from([[Cells.cell1, Cells.cell2]]),
+      cellIds: [Cells.cell1, Cells.cell2],
       cellData: {
         [Cells.cell1]: createCell({ id: Cells.cell1, code: "import os" }),
         [Cells.cell2]: createCell({ id: Cells.cell2, code: "x = 1" }),
@@ -232,7 +235,7 @@ describe("getCodes", () => {
     const otherCode = "print('Hello World')";
     store.set(notebookAtom, {
       ...initialNotebookState(),
-      cellIds: MultiColumn.from([[Cells.cell1, Cells.cell2]]),
+      cellIds: [Cells.cell1, Cells.cell2],
       cellData: {
         [Cells.cell1]: createCell({ id: Cells.cell1, code: "import os" }),
         [Cells.cell2]: createCell({ id: Cells.cell2, code: "x = 1" }),
@@ -250,7 +253,7 @@ describe("topologicalCodesAtom", () => {
   it("should include every cell when no editor is mounted", () => {
     store.set(notebookAtom, {
       ...initialNotebookState(),
-      cellIds: MultiColumn.from([[Cells.cell1, Cells.cell2, Cells.cell3]]),
+      cellIds: [Cells.cell1, Cells.cell2, Cells.cell3],
       cellData: {
         [Cells.cell1]: createCell({ id: Cells.cell1, code: "import os" }),
         [Cells.cell2]: createCell({ id: Cells.cell2, code: "x = 1" }),

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

@@ -9,10 +9,10 @@ import type { Variables } from "@/core/variables/types";
 import { Objects } from "@/utils/objects";
 import { getEditorCodeAsPython } from "../language/utils";
 
-const notebookCellCodes = atom((get) => {
+export const notebookCellCodes = atom((get) => {
   const notebook = get(notebookAtom);
   const codes = Objects.fromEntries(
-    notebook.cellIds.inOrderIds.map((id) => {
+    notebook.cellIds.map((id) => {
       // A cell editor mounts progressively, so the notebook store is the only
       // complete source of code until every editor is built.
       const editorView = notebook.cellHandles[id]?.current?.editorViewOrNull;
@@ -54,7 +54,7 @@ export function getOtherCellsCode(otherCode: string) {
 
 const inOrderCellIdsAtom = atom((get) => {
   const notebook = get(notebookAtom);
-  return notebook.cellIds.inOrderIds;
+  return notebook.cellIds;
 });
 const topologicalCellIdsAtom = atom((get) => {
   const cellIds = get(inOrderCellIdsAtom);

package/src/core/codemirror/format.ts

@@ -13,15 +13,11 @@ import { notebookCellEditorViews } from "../cells/utils";
 import { getResolvedMarimoConfig } from "../config/config";
 import type { ConnectionName } from "../datasets/engines";
 import { getRequestClient } from "../network/requests";
-import { cellActionsState } from "./cells/state";
-import { cellIdState } from "./config/extension";
 import { languageAdapterState } from "./language/extension";
 import { SCHEMA_CACHE } from "./language/languages/sql/completion-store";
 import { isKnownDialect } from "./language/languages/sql/utils";
-import {
-  getEditorCodeAsPython,
-  updateEditorCodeFromPython,
-} from "./language/utils";
+import { prepareCellCodeUpdate } from "./language/cell-code";
+import { getEditorCodeAsPython } from "./language/utils";
 import { replaceEditorContent } from "./replace-editor-content";
 
 export const formattingChangeEffect = StateEffect.define<boolean>();
@@ -56,13 +52,10 @@ export async function formatEditorViews(views: Record<CellId, EditorView>) {
       continue;
     }
 
-    const actions = view.state.facet(cellActionsState);
-    actions.updateCellCode({
-      cellId,
-      code: formattedCode,
-      formattingChange: true,
-    });
-    updateEditorCodeFromPython(view, formattedCode);
+    const update = prepareCellCodeUpdate(view.state, formattedCode);
+    if (update) {
+      view.dispatch(update, { effects: formattingChangeEffect.of(true) });
+    }
   }
 }
 
@@ -110,16 +103,6 @@ export async function formatSQL(editor: EditorView, engine: ConnectionName) {
     return;
   }
 
-  // Update Python in the notebook state
-  const codeAsPython = languageAdapter.transformIn(formattedSQL)[0];
-  const actions = editor.state.facet(cellActionsState);
-  const cellId = editor.state.facet(cellIdState);
-  actions.updateCellCode({
-    cellId,
-    code: codeAsPython,
-    formattingChange: true,
-  });
-
   // Update editor with formatted SQL
   replaceEditorContent(editor, formattedSQL, {
     effects: [formattingChangeEffect.of(true)],

package/src/core/codemirror/keymaps/vim.ts

@@ -37,7 +37,7 @@ export function vimKeymapExtension(): Extension[] {
           if (isAtEndOfEditor(ev, true) && isInVimNormalMode(ev)) {
             const actions = ev.state.facet(cellActionsState);
             const cellId = ev.state.facet(cellIdState);
-            actions.moveToNextCell({ cellId, before: false, noCreate: true });
+            actions.moveToNextCell({ cellId, before: false, create: false });
             return true;
           }
           return false;
@@ -51,7 +51,7 @@ export function vimKeymapExtension(): Extension[] {
           if (isAtStartOfEditor(ev) && isInVimNormalMode(ev)) {
             const actions = ev.state.facet(cellActionsState);
             const cellId = ev.state.facet(cellIdState);
-            actions.moveToNextCell({ cellId, before: true, noCreate: true });
+            actions.moveToNextCell({ cellId, before: true, create: false });
             return true;
           }
           return false;
@@ -369,7 +369,7 @@ class CodeMirrorVimSync {
       // We use onIdle to keep the focused editor snappy
       onIdle(() => {
         if (!skipBroadcast) {
-          this.broadcastModeChange(instance, e.mode, e.subMode);
+          this.broadcastModeChange(instance, e.mode);
         }
         this.isBroadcasting = false;
       });
@@ -380,11 +380,7 @@ class CodeMirrorVimSync {
     this.instances.delete(instance);
   }
 
-  public broadcastModeChange(
-    originInstance: EditorView,
-    mode: string,
-    subMode?: string,
-  ) {
+  public broadcastModeChange(originInstance: EditorView, mode: string) {
     invariant(
       "exitInsertMode" in Vim,
       "Vim does not have an exitInsertMode method",

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

@@ -1,4 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+
+import { defaultUserConfig } from "@/core/config/config-schema";
 // @vitest-environment jsdom
 
 import { EditorState } from "@codemirror/state";
@@ -39,18 +41,20 @@ function createState(content: string, selection?: { anchor: number }) {
       adaptiveLanguageConfiguration({
         cellId: "cell1" as CellId,
         completionConfig: {
+          ...defaultUserConfig().completion,
           copilot: false,
           activate_on_typing: true,
           signature_hint_on_typing: false,
           codeium_api_key: null,
         },
-        lspConfig: {},
+        lspConfig: { ...defaultUserConfig().language_servers },
         hotkeys: new OverridingHotkeyProvider({}),
         placeholderType: "marimo-import",
       }),
       cellConfigExtension({
         cellId: "cell1" as CellId,
         completionConfig: {
+          ...defaultUserConfig().completion,
           copilot: false,
           activate_on_typing: true,
           signature_hint_on_typing: false,
@@ -58,8 +62,8 @@ function createState(content: string, selection?: { anchor: number }) {
         },
         hotkeys: new OverridingHotkeyProvider({}),
         placeholderType: "marimo-import",
-        lspConfig: {},
-        diagnosticsConfig: {},
+        lspConfig: { ...defaultUserConfig().language_servers },
+        diagnosticsConfig: { ...defaultUserConfig().diagnostics },
       }),
     ],
     selection,

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

@@ -42,12 +42,14 @@ const adapter = new SQLLanguageAdapter();
 const TEST_ENGINE = "test_engine" as ConnectionName;
 
 const TEST_EXTENSION_ARGS = [
-  {} as CellId,
-  {} as CompletionConfig,
-  {} as HotkeyProvider,
-  {} as PlaceholderType,
-  {} as LSPConfig & {
-    diagnostics: DiagnosticsConfig;
+  {
+    cellId: {} as CellId,
+    completionConfig: {} as CompletionConfig,
+    hotkeys: {} as HotkeyProvider,
+    placeholderType: {} as PlaceholderType,
+    lspConfig: {} as LSPConfig & {
+      diagnostics: DiagnosticsConfig;
+    },
   },
 ] as const;
 
@@ -930,15 +932,15 @@ describe("SQL analysis features", () => {
 
   it("reports semantic diagnostics as warnings", async () => {
     const adapter = new SQLLanguageAdapter();
-    const extensions = adapter.getExtension(
-      {} as CellId,
-      {} as CompletionConfig,
-      {} as HotkeyProvider,
-      {} as PlaceholderType,
-      {
+    const extensions = adapter.getExtension({
+      cellId: {} as CellId,
+      completionConfig: {} as CompletionConfig,
+      hotkeys: {} as HotkeyProvider,
+      placeholderType: {} as PlaceholderType,
+      lspConfig: {
         diagnostics: { sql_linter: true },
       } as LSPConfig & { diagnostics: DiagnosticsConfig },
-    );
+    });
     const state = EditorState.create({
       doc: "SELECT missing FROM users",
       extensions: [languageMetadataField.init(() => metadata), ...extensions],
@@ -963,15 +965,15 @@ describe("SQL analysis features", () => {
 
   it("does not report unknown tables", async () => {
     const adapter = new SQLLanguageAdapter();
-    const extensions = adapter.getExtension(
-      {} as CellId,
-      {} as CompletionConfig,
-      {} as HotkeyProvider,
-      {} as PlaceholderType,
-      {
+    const extensions = adapter.getExtension({
+      cellId: {} as CellId,
+      completionConfig: {} as CompletionConfig,
+      hotkeys: {} as HotkeyProvider,
+      placeholderType: {} as PlaceholderType,
+      lspConfig: {
         diagnostics: { sql_linter: true },
       } as LSPConfig & { diagnostics: DiagnosticsConfig },
-    );
+    });
     const state = EditorState.create({
       doc: "SELECT missing FROM users; SELECT * FROM unknown_table",
       extensions: [languageMetadataField.init(() => metadata), ...extensions],