@marimo-team/frontend 0.14.18-dev46 → 0.14.18-dev48

package/src/components/editor/navigation/__tests__/navigation.test.ts

@@ -5,7 +5,7 @@ import type { EditorView } from "@codemirror/view";
 import { act, renderHook } from "@testing-library/react";
 import { Provider } from "jotai";
 import React, { createRef } from "react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterAll, beforeEach, describe, expect, it, vi } from "vitest";
 import { Mocks } from "@/__mocks__/common";
 import { MockNotebook } from "@/__mocks__/notebook";
 import { MockRequestClient } from "@/__mocks__/requests";
@@ -64,6 +64,10 @@ const mockUseCellClipboard = vi.mocked(
   await import("../clipboard"),
 ).useCellClipboard;
 
+afterAll(() => {
+  vi.resetAllMocks();
+});
+
 import { defaultUserConfig } from "@/core/config/config-schema";
 import { MultiColumn } from "@/utils/id-tree";
 import { focusCell, focusCellEditor } from "../focus-utils";
@@ -1580,12 +1584,22 @@ describe("useCellNavigationProps", () => {
   });
 });
 
+// Mock isPlatformWindows for testing
+const mockIsPlatformWindows = vi.hoisted(() => vi.fn());
+vi.mock("@/core/hotkeys/shortcuts", async (importOriginal) => ({
+  ...(await importOriginal()),
+  isPlatformWindows: mockIsPlatformWindows,
+}));
+
 describe("useCellEditorNavigationProps", () => {
   beforeEach(() => {
     vi.clearAllMocks();
 
     // Reset config overrides
     store.set(configOverridesAtom, {});
+
+    // Reset platform mock to default (non-Windows)
+    mockIsPlatformWindows.mockReturnValue(false);
   });
 
   describe("keyboard shortcuts", () => {
@@ -1692,52 +1706,115 @@ describe("useCellEditorNavigationProps", () => {
       });
     });
 
-    it("should focus cell when Ctrl+Escape is pressed in vim mode", () => {
-      const mockEditorView = { current: null };
-      const { result } = renderWithProvider(() =>
-        useCellEditorNavigationProps(mockCellId, mockEditorView),
-      );
+    describe("non-Windows platforms", () => {
+      beforeEach(() => {
+        mockIsPlatformWindows.mockReturnValue(false);
+      });
 
-      const mockEvent = Mocks.keyboardEvent({ key: "Escape", ctrlKey: true });
+      it("should focus cell when Ctrl+Escape is pressed in vim mode", () => {
+        const mockEditorView = { current: null };
+        const { result } = renderWithProvider(() =>
+          useCellEditorNavigationProps(mockCellId, mockEditorView),
+        );
 
-      act(() => {
-        result.current.onKeyDown?.(mockEvent);
+        const mockEvent = Mocks.keyboardEvent({ key: "Escape", ctrlKey: true });
+
+        act(() => {
+          result.current.onKeyDown?.(mockEvent);
+        });
+
+        expect(focusCell).toHaveBeenCalledWith(mockCellId);
+        expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
       });
 
-      expect(focusCell).toHaveBeenCalledWith(mockCellId);
-      expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
-    });
+      it("should focus cell when Cmd+Escape (metaKey) is pressed in vim mode", () => {
+        const mockEditorView = { current: null };
+        const { result } = renderWithProvider(() =>
+          useCellEditorNavigationProps(mockCellId, mockEditorView),
+        );
 
-    it("should focus cell when Cmd+Escape (metaKey) is pressed in vim mode", () => {
-      const mockEditorView = { current: null };
-      const { result } = renderWithProvider(() =>
-        useCellEditorNavigationProps(mockCellId, mockEditorView),
-      );
+        const mockEvent = Mocks.keyboardEvent({ key: "Escape", metaKey: true });
 
-      const mockEvent = Mocks.keyboardEvent({ key: "Escape", metaKey: true });
+        act(() => {
+          result.current.onKeyDown?.(mockEvent);
+        });
 
-      act(() => {
-        result.current.onKeyDown?.(mockEvent);
+        expect(focusCell).toHaveBeenCalledWith(mockCellId);
+        expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
       });
 
-      expect(focusCell).toHaveBeenCalledWith(mockCellId);
-      expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+      it("should focus cell when Escape (without Ctrl) is pressed in vim mode", () => {
+        const mockEditorView = { current: null };
+        const { result } = renderWithProvider(() =>
+          useCellEditorNavigationProps(mockCellId, mockEditorView),
+        );
+
+        const mockEvent = Mocks.keyboardEvent({ key: "Escape" });
+
+        act(() => {
+          result.current.onKeyDown?.(mockEvent);
+        });
+
+        expect(focusCell).toHaveBeenCalledWith(mockCellId);
+        expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+      });
     });
 
-    it("should not focus cell when Escape (without Ctrl) is pressed in vim mode", () => {
-      const mockEditorView = { current: null };
-      const { result } = renderWithProvider(() =>
-        useCellEditorNavigationProps(mockCellId, mockEditorView),
-      );
+    describe("Windows platform", () => {
+      beforeEach(() => {
+        mockIsPlatformWindows.mockReturnValue(true);
+      });
 
-      const mockEvent = Mocks.keyboardEvent({ key: "Escape" });
+      it("should focus cell when Shift+Escape is pressed in vim mode on Windows", () => {
+        const mockEditorView = { current: null };
+        const { result } = renderWithProvider(() =>
+          useCellEditorNavigationProps(mockCellId, mockEditorView),
+        );
 
-      act(() => {
-        result.current.onKeyDown?.(mockEvent);
+        const mockEvent = Mocks.keyboardEvent({
+          key: "Escape",
+          shiftKey: true,
+        });
+
+        act(() => {
+          result.current.onKeyDown?.(mockEvent);
+        });
+
+        expect(focusCell).toHaveBeenCalledWith(mockCellId);
+        expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
       });
 
-      expect(focusCell).not.toHaveBeenCalled();
-      expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+      it("should focus cell when Ctrl+Escape is pressed in vim mode on Windows", () => {
+        const mockEditorView = { current: null };
+        const { result } = renderWithProvider(() =>
+          useCellEditorNavigationProps(mockCellId, mockEditorView),
+        );
+
+        const mockEvent = Mocks.keyboardEvent({ key: "Escape", ctrlKey: true });
+
+        act(() => {
+          result.current.onKeyDown?.(mockEvent);
+        });
+
+        expect(focusCell).toHaveBeenCalledWith(mockCellId);
+        expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+      });
+
+      it("should focus cell when Escape (without Shift) is pressed in vim mode on Windows", () => {
+        const mockEditorView = { current: null };
+        const { result } = renderWithProvider(() =>
+          useCellEditorNavigationProps(mockCellId, mockEditorView),
+        );
+
+        const mockEvent = Mocks.keyboardEvent({ key: "Escape" });
+
+        act(() => {
+          result.current.onKeyDown?.(mockEvent);
+        });
+
+        expect(focusCell).toHaveBeenCalledWith(mockCellId);
+        expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+      });
     });
   });
 });

package/src/components/editor/navigation/navigation.ts

@@ -4,6 +4,7 @@ import { closeCompletion, completionStatus } from "@codemirror/autocomplete";
 import { EditorSelection } from "@codemirror/state";
 import type { EditorView } from "@codemirror/view";
 import { useAtomValue, useSetAtom, useStore } from "jotai";
+import { useMemo } from "react";
 import { mergeProps, useFocusWithin, useKeyboard } from "react-aria";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import { cellIdsAtom, notebookAtom, useCellActions } from "@/core/cells/cells";
@@ -609,6 +610,12 @@ export function useCellEditorNavigationProps(
 ) {
   const setTemporarilyShownCode = useSetAtom(temporarilyShownCodeAtom);
   const keymapPreset = useAtomValue(keymapPresetAtom);
+  const hotkeys = useAtomValue(hotkeysAtom);
+
+  const vimCommandModeShortcut = useMemo(() => {
+    const shortcut = hotkeys.getHotkey("command.vimEnterCommandMode");
+    return parseShortcut(shortcut.key);
+  }, [hotkeys]);
 
   const exitToCommandMode = () => {
     setTemporarilyShownCode(false);
@@ -648,18 +655,13 @@ export function useCellEditorNavigationProps(
 
   const { keyboardProps } = useKeyboard({
     onKeyDown: (evt) => {
-      // For vim mode, require Ctrl+Escape (or Cmd+Escape on Mac) to exit to command mode
-      if (keymapPreset === "vim") {
-        if (evt.key === "Escape" && (evt.ctrlKey || evt.metaKey)) {
-          handleEscape();
-        }
-      } else {
+      // For vim mode, use configurable shortcut
+      if (keymapPreset === "vim" && vimCommandModeShortcut(evt)) {
+        handleEscape();
+      } else if (evt.key === "Escape") {
         // For non-vim mode, regular Escape exits to command mode
-        if (evt.key === "Escape") {
-          handleEscape();
-        }
+        handleEscape();
       }
-
       evt.continuePropagation();
     },
   });

package/src/core/ai/ids/ids.ts

@@ -11,6 +11,7 @@ export const PROVIDERS = [
   "deepseek",
   "azure",
   "github",
+  "marimo",
 ] as const;
 export type ProviderId = (typeof PROVIDERS)[number];
 

package/src/core/hotkeys/hotkeys.ts

@@ -388,6 +388,14 @@ const DEFAULT_HOT_KEY = {
   },
 
   // Command mode (edit a cell, not the editor)
+  "command.vimEnterCommandMode": {
+    name: "Enter command mode (vim)",
+    group: "Command",
+    key: {
+      main: "Mod-Escape",
+      windows: "Shift-Escape",
+    },
+  },
   "command.createCellBefore": {
     name: "Create a cell before current cell",
     group: "Command",

package/dist/assets/_baseMap-DIl28WvO.js

@@ -1 +0,0 @@
-import{b as m}from"./_baseEach-DP0Vk5cM.js";import{x as s}from"./index-BBv5Z4wg.js";function e(r,o){var a=-1,t=s(r)?Array(r.length):[];return m(r,function(n,f,i){t[++a]=o(n,f,i)}),t}export{e as b};

package/dist/assets/channel-DLEpMWNY.js

@@ -1 +0,0 @@
-import{U as s,C as o}from"./mermaid-cJZwTbZ9.js";const n=(a,r)=>s.lang.round(o.parse(a)[r]);export{n as c};

package/dist/assets/classDiagram-M3E45YP4-B7IlFHTT.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as t,C as o}from"./chunk-SZ463SBG-Cm24_gCb.js";import{_ as e}from"./mermaid-cJZwTbZ9.js";import"./transform-B8bpuzxV.js";import"./chunk-E2GYISFI-CaSGRzQf.js";import"./chunk-BFAMUDN2-DASBJWoB.js";import"./chunk-SKB7J2MH-0Ry0z6Th.js";import"./index-BBv5Z4wg.js";import"./step-BwsUM5iJ.js";import"./timer-BwIYMJWC.js";var i={parser:t,get db(){return new o},renderer:s,styles:a,init:e(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{i as diagram};

package/dist/assets/classDiagram-v2-YAWTLIQI-B7IlFHTT.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as t,C as o}from"./chunk-SZ463SBG-Cm24_gCb.js";import{_ as e}from"./mermaid-cJZwTbZ9.js";import"./transform-B8bpuzxV.js";import"./chunk-E2GYISFI-CaSGRzQf.js";import"./chunk-BFAMUDN2-DASBJWoB.js";import"./chunk-SKB7J2MH-0Ry0z6Th.js";import"./index-BBv5Z4wg.js";import"./step-BwsUM5iJ.js";import"./timer-BwIYMJWC.js";var i={parser:t,get db(){return new o},renderer:s,styles:a,init:e(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{i as diagram};

package/dist/assets/clone-D8gzUlmC.js

@@ -1 +0,0 @@
-import{b as n}from"./_baseUniq-eozUAmg_.js";function o(r){return n(r,4)}export{o as c};

package/dist/assets/infoDiagram-LHK5PUON-b-0aEtzy.js

@@ -1,2 +0,0 @@
-import{_ as a,l as i,I as s,d as p,K as n}from"./mermaid-cJZwTbZ9.js";import{p as m}from"./treemap-75Q7IDZK-C7SvBlQy.js";import"./index-BBv5Z4wg.js";import"./transform-B8bpuzxV.js";import"./timer-BwIYMJWC.js";import"./step-BwsUM5iJ.js";import"./_baseEach-DP0Vk5cM.js";import"./_baseUniq-eozUAmg_.js";import"./min-r-SnuZKs.js";import"./_baseMap-DIl28WvO.js";import"./clone-D8gzUlmC.js";import"./_createAggregator-ChEFQPgY.js";var d={parse:a(async r=>{const t=await m("info",r);i.debug(t)},"parse")},g={version:n.version+""},v={parser:d,db:{getVersion:a(()=>g.version,"getVersion")},renderer:{draw:a((r,t,o)=>{i.debug(`rendering info diagram
-`+r);const e=s(t);p(e,100,400,!0),e.append("g").append("text").attr("x",100).attr("y",40).attr("class","version").attr("font-size",32).style("text-anchor","middle").text(`v${o}`)},"draw")}};export{v as diagram};

package/dist/assets/stateDiagram-v2-5AN5P6BG-BBRvUdQr.js

@@ -1 +0,0 @@
-import{s as t,b as a,a as e,S as o}from"./chunk-OW32GOEJ-BSjpZvcs.js";import{_ as s}from"./mermaid-cJZwTbZ9.js";import"./transform-B8bpuzxV.js";import"./chunk-BFAMUDN2-DASBJWoB.js";import"./chunk-SKB7J2MH-0Ry0z6Th.js";import"./index-BBv5Z4wg.js";import"./step-BwsUM5iJ.js";import"./timer-BwIYMJWC.js";var i={parser:e,get db(){return new o(2)},renderer:a,styles:t,init:s(r=>{r.state||(r.state={}),r.state.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{i as diagram};