@marimo-team/islands 0.25.3-dev20 → 0.25.3-dev200

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

@@ -1,11 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { history } from "@codemirror/commands";
+import { history, historyField, invertedEffects } from "@codemirror/commands";
 import {
   Compartment,
   EditorSelection,
+  EditorState,
   StateEffect,
   StateField,
+  Transaction,
 } from "@codemirror/state";
 import { type EditorView, keymap, showPanel } from "@codemirror/view";
 import type { CellId } from "@/core/cells/ids";
@@ -25,11 +27,10 @@ import {
   placeholderState,
 } from "../config/extension";
 import type { PlaceholderType } from "../config/types";
-import { historyCompartment } from "../editing/extensions";
 import { formattingChangeEffect } from "../format";
 import { createPanel } from "../react-dom/createPanel";
 import { getLanguageAdapters, LanguageAdapters } from "./LanguageAdapters";
-import { initializeSQLDialect } from "./languages/sql/sql";
+import { sqlDialectEffect } from "./languages/sql/sql";
 import type { LanguageMetadata } from "./metadata";
 import { languageMetadataField, setLanguageMetadata } from "./metadata";
 import { LanguagePanelComponent } from "./panel/panel";
@@ -42,6 +43,32 @@ import { getEditorCodeAsPython } from "./utils";
  */
 const languageCompartment = new Compartment();
 
+/** Reconfigure a language and discard history written in its previous representation. */
+export function languageConfigurationEffects(
+  state: EditorState,
+  language: LanguageAdapter,
+): StateEffect<unknown>[] {
+  const extensions = language.getExtension({
+    cellId: state.facet(cellIdState),
+    completionConfig: state.facet(completionConfigState),
+    hotkeys: state.facet(hotkeysProviderState),
+    placeholderType: state.facet(placeholderState),
+    lspConfig: state.facet(lspConfigState),
+  });
+  if (state.field(historyField, false) !== undefined) {
+    // A fresh initializer resets the history in the same transaction as the language.
+    extensions.push(
+      historyField.init(() =>
+        EditorState.create({ extensions: [history()] }).field(historyField),
+      ),
+    );
+  }
+  return [
+    setLanguageAdapter.of(language),
+    languageCompartment.reconfigure(extensions),
+  ];
+}
+
 /**
  * State effect to set the language adapter.
  */
@@ -129,11 +156,6 @@ function updateLanguageAdapterAndCode({
 }) {
   const currentLanguage = view.state.field(languageAdapterState);
   const code = view.state.doc.toString();
-  const completionConfig = view.state.facet(completionConfigState);
-  const hotkeysProvider = view.state.facet(hotkeysProviderState);
-  const placeholderType = view.state.facet(placeholderState);
-  const cellId = view.state.facet(cellIdState);
-  const lspConfig = view.state.facet(lspConfigState);
   let metadata = view.state.field(languageMetadataField);
   let cursor = view.state.selection.main.head;
 
@@ -164,22 +186,15 @@ function updateLanguageAdapterAndCode({
   // Update the state
   view.dispatch({
     effects: [
-      setLanguageAdapter.of(nextLanguage),
+      ...languageConfigurationEffects(view.state, nextLanguage),
       setLanguageMetadata.of(metadata),
-      languageCompartment.reconfigure(
-        nextLanguage.getExtension(
-          cellId,
-          completionConfig,
-          hotkeysProvider,
-          placeholderType,
-          lspConfig,
-        ),
-      ),
-      // Clear history
-      historyCompartment.reconfigure([]),
+      ...(nextLanguage.type === "sql"
+        ? [sqlDialectEffect(metadata.engine)]
+        : []),
       // Let downstream extensions know that this is a formatting change
       formattingChangeEffect.of(true),
     ],
+    annotations: Transaction.addToHistory.of(false),
     changes: opts.keepCodeAsIs
       ? undefined
       : {
@@ -189,16 +204,6 @@ function updateLanguageAdapterAndCode({
         },
     selection: opts.keepCodeAsIs ? undefined : EditorSelection.cursor(cursor),
   });
-
-  // Add history back
-  view.dispatch({
-    effects: [historyCompartment.reconfigure([history()])],
-  });
-
-  // Initialize SQL dialect if switching to SQL
-  if (nextLanguage.type === "sql") {
-    initializeSQLDialect(view);
-  }
 }
 
 /**
@@ -218,16 +223,28 @@ export function adaptiveLanguageConfiguration(opts: {
     // Language adapter
     languageToggleKeymaps(),
     languageCompartment.of(
-      LanguageAdapters.python.getExtension(
+      LanguageAdapters.python.getExtension({
         cellId,
         completionConfig,
         hotkeys,
         placeholderType,
         lspConfig,
-      ),
+      }),
     ),
     languageAdapterState,
     languageMetadataField,
+    invertedEffects.of((tr) => {
+      if (!tr.effects.some((effect) => effect.is(setLanguageMetadata))) {
+        return [];
+      }
+      const metadata = tr.startState.field(languageMetadataField);
+      return [
+        setLanguageMetadata.of(metadata),
+        ...(tr.startState.field(languageAdapterState).type === "sql"
+          ? [sqlDialectEffect(metadata.engine)]
+          : []),
+      ];
+    }),
   ];
 }
 
@@ -323,12 +340,12 @@ export function reconfigureLanguageEffect(
   }
 
   return languageCompartment.reconfigure(
-    language.getExtension(
+    language.getExtension({
       cellId,
       completionConfig,
-      hotkeysProvider,
+      hotkeys: hotkeysProvider,
       placeholderType,
       lspConfig,
-    ),
+    }),
   );
 }

package/src/core/codemirror/language/languages/markdown.ts

@@ -69,12 +69,14 @@ export class MarkdownLanguageAdapter implements LanguageAdapter<MarkdownLanguage
     return this.parser.isSupported(pythonCode);
   }
 
-  public getExtension(
-    _cellId: CellId,
-    _completionConfig: CompletionConfig,
-    hotkeys: HotkeyProvider,
-    _: PlaceholderType,
-  ): Extension[] {
+  public getExtension({
+    hotkeys,
+  }: {
+    cellId: CellId;
+    completionConfig: CompletionConfig;
+    hotkeys: HotkeyProvider;
+    placeholderType: PlaceholderType;
+  }): Extension[] {
     const markdownLanguageData = markdown().language.data;
     let view: EditorView | undefined;
 

package/src/core/codemirror/language/languages/python.ts

@@ -157,7 +157,7 @@ const pylspClient = once((lspConfig: LSPConfig) => {
   return notebookClient;
 });
 
-const tyLspClient = once((_: LSPConfig) => {
+const tyLspClient = once((_config: LSPConfig) => {
   // oxlint-disable-next-line prefer-const -- reassigned after closure capture
   let resyncCallback: (() => Promise<void>) | undefined;
 
@@ -176,7 +176,7 @@ const tyLspClient = once((_: LSPConfig) => {
   const notebookClient = new NotebookLanguageServerClient(
     new LanguageServerClient({
       ...lspClientOpts,
-      getWorkspaceConfiguration: (_) => [{ disableLanguageServices: true }],
+      getWorkspaceConfiguration: () => [{ disableLanguageServices: true }],
     }),
     {},
   );
@@ -226,7 +226,7 @@ const pyreflyClient = once(
   },
 );
 
-const pyrightClient = once((_: LSPConfig) => {
+const pyrightClient = once((_config: LSPConfig) => {
   // oxlint-disable-next-line prefer-const -- reassigned after closure capture
   let resyncCallback: (() => Promise<void>) | undefined;
 
@@ -279,13 +279,19 @@ export class PythonLanguageAdapter implements LanguageAdapter<{}> {
     return this.parser.isSupported(code);
   }
 
-  public getExtension(
-    cellId: CellId,
-    completionConfig: CompletionConfig,
-    hotkeys: HotkeyProvider,
-    placeholderType: PlaceholderType,
-    lspConfig: LSPConfig & { diagnostics: DiagnosticsConfig },
-  ): Extension[] {
+  public getExtension({
+    cellId,
+    completionConfig,
+    hotkeys,
+    placeholderType,
+    lspConfig,
+  }: {
+    cellId: CellId;
+    completionConfig: CompletionConfig;
+    hotkeys: HotkeyProvider;
+    placeholderType: PlaceholderType;
+    lspConfig: LSPConfig & { diagnostics: DiagnosticsConfig };
+  }): Extension[] {
     const getCompletionsExtension = () => {
       const autocompleteOptions = {
         // We remove the default keymap because we use our own which

package/src/core/codemirror/language/languages/sql/sql.ts

@@ -2,7 +2,7 @@
 
 import { acceptCompletion, autocompletion } from "@codemirror/autocomplete";
 import { insertTab } from "@codemirror/commands";
-import { type SQLDialect, type SQLNamespace, sql } from "@codemirror/lang-sql";
+import { type SQLNamespace, sql } from "@codemirror/lang-sql";
 import type { EditorState, Extension } from "@codemirror/state";
 import { Compartment } from "@codemirror/state";
 import {
@@ -155,13 +155,15 @@ export class SQLLanguageAdapter implements LanguageAdapter<SQLLanguageAdapterMet
     return this.parser.isSupported(pythonCode);
   }
 
-  public getExtension(
-    _cellId: CellId,
-    _completionConfig: CompletionConfig,
-    _hotkeys: HotkeyProvider,
-    _placeholderType: PlaceholderType,
-    lspConfig: LSPConfig & { diagnostics: DiagnosticsConfig },
-  ): Extension[] {
+  public getExtension({
+    lspConfig,
+  }: {
+    cellId: CellId;
+    completionConfig: CompletionConfig;
+    hotkeys: HotkeyProvider;
+    placeholderType: PlaceholderType;
+    lspConfig: LSPConfig & { diagnostics: DiagnosticsConfig };
+  }): Extension[] {
     const analysis = createSQLAnalysis();
     const extensions = [
       // This can be updated with a dispatch effect
@@ -495,12 +497,12 @@ function isDuckDBConnection(
 }
 
 /**
- * Update the SQL dialect in the editor view.
+ * The effect that reconfigures the SQL language for the connection's dialect.
+ * Callers dispatch it, alone or with the change that selected the connection.
  */
-function updateSQLDialect(view: EditorView, dialect: SQLDialect) {
-  view.dispatch({
-    effects: sqlConfigCompartment.reconfigure(sql({ dialect })),
-  });
+export function sqlDialectEffect(connectionName: ConnectionName) {
+  const dialect = SCHEMA_CACHE.getDialect(connectionName);
+  return sqlConfigCompartment.reconfigure(sql({ dialect }));
 }
 
 // Helper functions to update the SQL dialect
@@ -509,17 +511,7 @@ export function updateSQLDialectFromConnection(
   view: EditorView,
   connectionName: ConnectionName,
 ) {
-  const dialect = SCHEMA_CACHE.getDialect(connectionName);
-  updateSQLDialect(view, dialect);
-}
-
-export function initializeSQLDialect(view: EditorView) {
-  // Get current engine and update dialect
-  const metadata = getSQLMetadata(view.state);
-  const connectionName = metadata.engine;
-  const dialect = SCHEMA_CACHE.getDialect(connectionName);
-
-  updateSQLDialect(view, dialect);
+  view.dispatch({ effects: sqlDialectEffect(connectionName) });
 }
 
 function getSQLMetadata(state: EditorState): SQLLanguageAdapterMetadata {

package/src/core/codemirror/language/panel/panel.tsx

@@ -101,6 +101,7 @@ export const LanguagePanelComponent: React.FC<{
           {metadata.engine === DUCKDB_ENGINE && <SQLModeSelect />}
           <Tooltip content="Format SQL">
             <Button
+              aria-label="Format SQL"
               variant="text"
               size="icon"
               onClick={async () => {

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

@@ -26,13 +26,13 @@ export interface LanguageAdapter<M = Record<string, any>> {
   transformIn(code: string): [string, number, M];
   transformOut(code: string, metadata: M): [string, number];
   isSupported(code: string): boolean;
-  getExtension(
-    cellId: CellId,
-    completionConfig: CompletionConfig,
-    hotkeys: HotkeyProvider,
-    placeholderType: PlaceholderType,
-    lspConfig: LSPConfig & { diagnostics?: DiagnosticsConfig },
-  ): Extension[];
+  getExtension(options: {
+    cellId: CellId;
+    completionConfig: CompletionConfig;
+    hotkeys: HotkeyProvider;
+    placeholderType: PlaceholderType;
+    lspConfig: LSPConfig & { diagnostics?: DiagnosticsConfig };
+  }): Extension[];
 }
 
 export type LanguageMetadataOf<T extends LanguageAdapter> =

package/src/core/codemirror/language/utils.ts

@@ -2,12 +2,8 @@
 
 import type { EditorState } from "@codemirror/state";
 import type { EditorView } from "@codemirror/view";
-import { replaceEditorContent } from "../replace-editor-content";
-import {
-  languageAdapterFromCode,
-  languageAdapterState,
-  switchLanguage,
-} from "./extension";
+import { getCellCode } from "./cell-code";
+import { languageAdapterState } from "./extension";
 import { languageMetadataField } from "./metadata";
 
 /**
@@ -19,42 +15,16 @@ export function getEditorCodeAsPython(
   fromPos?: number,
   toPos?: number,
 ): string {
+  if (fromPos === undefined) {
+    return getCellCode(editor.state);
+  }
   const languageAdapter = editor.state.field(languageAdapterState);
   const metadata = editor.state.field(languageMetadataField);
   const editorText = editor.state.doc.toString();
-  if (fromPos !== undefined) {
-    return languageAdapter.transformOut(
-      editorText.slice(fromPos, toPos),
-      metadata,
-    )[0];
-  }
-  return languageAdapter.transformOut(editorText, metadata)[0];
-}
-
-/**
- * Update the editor code from Python code
- * Handles when the editor is showing a different language (e.g. markdown)
- */
-export function updateEditorCodeFromPython(
-  editor: EditorView,
-  pythonCode: string,
-): string {
-  const currentAdapter = editor.state.field(languageAdapterState);
-  const correctAdapter = languageAdapterFromCode(pythonCode);
-
-  // If the language type changed (e.g., markdown → python), switch adapters
-  if (correctAdapter.type !== currentAdapter.type) {
-    switchLanguage(editor, {
-      language: correctAdapter.type,
-      keepCodeAsIs: true,
-    });
-  }
-
-  const languageAdapter = editor.state.field(languageAdapterState);
-  const [code] = languageAdapter.transformIn(pythonCode);
-  // Use replaceEditorContent which preserves cursor position when focused
-  replaceEditorContent(editor, code);
-  return code;
+  return languageAdapter.transformOut(
+    editorText.slice(fromPos, toPos),
+    metadata,
+  )[0];
 }
 
 /**

package/src/core/codemirror/lsp/__tests__/notebook-lsp.test.ts

@@ -11,7 +11,6 @@ import type { CellId } from "@/core/cells/ids";
 import { initialNotebookState, notebookAtom } from "@/core/cells/cells";
 import { createCell } from "@/core/cells/types";
 import { store } from "@/core/state/jotai";
-import { MultiColumn } from "@/utils/id-tree";
 import { topologicalCodesAtom } from "../../copilot/getCodes";
 import { lspWorkspaceAtom } from "@/core/saving/file-state";
 import { languageAdapterState } from "../../language/extension";
@@ -69,7 +68,7 @@ describe("merged document with unmounted editors", () => {
   it("should include the code of cells whose editors are not mounted", () => {
     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 math" }),
         [Cells.cell2]: createCell({

package/src/core/codemirror/lsp/notebook-lsp.ts

@@ -12,10 +12,8 @@ import { Objects } from "@/utils/objects";
 import { isRecord } from "@/utils/records";
 import { getPositionAtWordBounds } from "../completion/hints";
 import { topologicalCodesAtom } from "../copilot/getCodes";
-import {
-  getEditorCodeAsPython,
-  updateEditorCodeFromPython,
-} from "../language/utils";
+import { prepareCellCodeUpdate } from "../language/cell-code";
+import { getEditorCodeAsPython } from "../language/utils";
 import { createNotebookLens, type NotebookLens } from "./lens";
 import { normalizeLspDocumentation } from "./normalize-markdown-math";
 import {
@@ -770,7 +768,10 @@ export class NotebookLanguageServerClient implements ILanguageServerClient {
       // Only update if it has changed
       const code = getEditorCodeAsPython(ev);
       if (code !== newCode) {
-        updateEditorCodeFromPython(ev, newCode);
+        const update = prepareCellCodeUpdate(ev.state, newCode);
+        if (update) {
+          ev.dispatch(update);
+        }
         updatedCount++;
       }
     }

package/src/core/codemirror/lsp/utils.ts

@@ -13,7 +13,7 @@ export function isKnownCellDocumentUri(uri: string): boolean {
   if (!CellDocumentUri.is(uri)) {
     return false;
   }
-  return store.get(cellIdsAtom).inOrderIds.includes(CellDocumentUri.parse(uri));
+  return store.get(cellIdsAtom).includes(CellDocumentUri.parse(uri));
 }
 
 export function getLspRootUri() {

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

@@ -4,7 +4,7 @@ import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { createStore } from "jotai";
 import { describe, expect, it } from "vitest";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import { connectionAtom } from "../../../network/connection";
 import { dynamicReadonly, isEditorReadonly } from "../extension";
 

package/src/core/codemirror/readonly/extension.ts

@@ -5,9 +5,9 @@ import type { createStore } from "jotai";
 import {
   isAppConnected,
   isAppConnecting,
-} from "@/core/websocket/connection-utils";
+} from "@/core/session/connection-utils";
 import { connectionAtom } from "../../network/connection";
-import { ConnectionState } from "../../websocket/types";
+import { ConnectionState } from "../../session/types";
 
 /**
  * State effect for updating readonly status based on connection

package/src/core/codemirror/rtc/extension.ts

@@ -172,7 +172,6 @@ awareness.addListener((updates, origin) => {
 
 export function realTimeCollaboration(
   cellId: CellId,
-  _updateCellCode: (code: string) => void,
   initialCode = "",
 ): { extension: Extension; code: string } {
   if (isWasm()) {
@@ -207,7 +206,13 @@ export function realTimeCollaboration(
     extension: [
       languageObserverExtension(cellId),
       languageListenerExtension(cellId),
-      loroAwarenessPlugin(doc, awareness, userState, () => loroText, cellId),
+      loroAwarenessPlugin({
+        doc,
+        awareness,
+        user: userState,
+        getTextFromDoc: () => loroText,
+        cellId,
+      }),
       loroSyncPlugin(doc, ["codes", cellId], () => {
         return loroText;
       }),
@@ -419,14 +424,21 @@ function languageListenerExtension(cellId: CellId) {
 /**
  * Create a plugin to observe awareness changes
  */
-function loroAwarenessPlugin(
-  doc: LoroDoc,
-  awareness: Awareness<AwarenessState>,
-  user: UserState,
-  getTextFromDoc: (doc: LoroDoc) => LoroText,
-  cellId: CellId,
-  getUserId?: () => Uid,
-): Extension[] {
+function loroAwarenessPlugin({
+  doc,
+  awareness,
+  user,
+  getTextFromDoc,
+  cellId,
+  getUserId,
+}: {
+  doc: LoroDoc;
+  awareness: Awareness<AwarenessState>;
+  user: UserState;
+  getTextFromDoc: (doc: LoroDoc) => LoroText;
+  cellId: CellId;
+  getUserId?: () => Uid;
+}): Extension[] {
   const scopeId = `loro:cell:${cellId}` as ScopeId;
 
   return [
@@ -435,15 +447,14 @@ function loroAwarenessPlugin(
     createSelectionLayer(),
     ViewPlugin.define(
       (view) =>
-        new AwarenessPlugin(
-          view,
+        new AwarenessPlugin(view, {
           doc,
           user,
           awareness,
           getTextFromDoc,
           scopeId,
           getUserId,
-        ),
+        }),
     ),
     ViewPlugin.define(
       (view) => new RemoteAwarenessPlugin(view, doc, awareness, scopeId),

package/src/core/codemirror/rtc/loro/awareness.ts

@@ -208,13 +208,19 @@ export class RemoteCursorMarker implements LayerMarker {
   private name: string;
   private colorClassName: string;
 
-  public constructor(
-    left: number,
-    top: number,
-    height: number,
-    name: string,
-    colorClassName: string,
-  ) {
+  public constructor({
+    left,
+    top,
+    height,
+    name,
+    colorClassName,
+  }: {
+    left: number;
+    top: number;
+    height: number;
+    name: string;
+    colorClassName: string;
+  }) {
     this.left = left;
     this.top = top;
     this.height = height;
@@ -271,13 +277,13 @@ export class RemoteCursorMarker implements LayerMarker {
     const baseLeft = left - view.scrollDOM.scrollLeft;
     const baseTop = rect.top - view.scrollDOM.scrollTop;
     return [
-      new RemoteCursorMarker(
-        absolutePosition.left - baseLeft,
-        absolutePosition.top - baseTop,
-        absolutePosition.bottom - absolutePosition.top,
-        displayName,
+      new RemoteCursorMarker({
+        left: absolutePosition.left - baseLeft,
+        top: absolutePosition.top - baseTop,
+        height: absolutePosition.bottom - absolutePosition.top,
+        name: displayName,
         colorClassName,
-      ),
+      }),
     ];
   }
 
@@ -375,12 +381,21 @@ export class AwarenessPlugin implements PluginValue {
 
   public constructor(
     view: EditorView,
-    doc: LoroDoc,
-    user: UserState,
-    awareness: Awareness<AwarenessState>,
-    getTextFromDoc: (doc: LoroDoc) => LoroText,
-    scopeId: ScopeId,
-    getUserId?: () => Uid,
+    {
+      doc,
+      user,
+      awareness,
+      getTextFromDoc,
+      scopeId,
+      getUserId,
+    }: {
+      doc: LoroDoc;
+      user: UserState;
+      awareness: Awareness<AwarenessState>;
+      getTextFromDoc: (doc: LoroDoc) => LoroText;
+      scopeId: ScopeId;
+      getUserId?: () => Uid;
+    },
   ) {
     this.view = view;
     this.doc = doc;

package/src/core/codemirror/rtc/loro/sync.ts

@@ -148,6 +148,7 @@ export class LoroSyncPluginValue implements PluginValue {
       return;
     }
     let adj = 0;
+    // oxlint-disable-next-line marimo/prefer-object-params -- CodeMirror supplies positional change ranges and inserted text.
     update.changes.iterChanges((fromA, toA, fromB, toB, insert) => {
       const insertText = insert.sliceString(0, insert.length, "\n");
       if (fromA !== toA) {

package/src/core/codemirror/utils.ts

@@ -122,6 +122,7 @@ export function hasNewLines(tr: Transaction | ViewUpdate): boolean {
 
   let hasNewLines = false;
   // Iterate through all changes in the transaction
+  // oxlint-disable-next-line marimo/prefer-object-params -- CodeMirror supplies positional change ranges and inserted text.
   tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
     // Check if the inserted text contains line breaks
     if (inserted.toString().includes("\n")) {