@marimo-team/frontend 0.23.7-dev16 → 0.23.7-dev17

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

@@ -5,15 +5,22 @@ import { z } from "zod";
 import { toast } from "@/components/ui/use-toast";
 import { getNotebook, useCellActions } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
+import {
+  usePendingCutActions,
+  usePendingCutState,
+} from "@/core/cells/pending-cut-service";
+import type { CellConfig } from "@/core/network/types";
 import { copyToClipboard } from "@/utils/copy";
 import { Logger } from "@/utils/Logger";
 
 // According to MDN, custom mimetypes should start with "web "
 const MARIMO_CELL_MIMETYPE = "web application/x-marimo-cell";
 
-interface ClipboardCellData {
+export interface ClipboardCellData {
   cells: {
     code: string;
+    name?: string;
+    config?: CellConfig;
   }[];
   version: "1.0";
 }
@@ -22,19 +29,49 @@ const ClipboardCellDataSchema = z.object({
   cells: z.array(
     z.object({
       code: z.string(),
+      name: z.string().optional(),
+      config: z
+        .object({
+          column: z.union([z.number(), z.null()]).optional(),
+          disabled: z.boolean().optional(),
+          hide_code: z.boolean().optional(),
+        })
+        .optional(),
     }),
   ),
   version: z.literal("1.0"),
 });
 
-// NOTE: We don't support Cut yet. We can wait for feedback before implementing.
-// It is a bit more complex as will need to:
-// - include id, outputs, and name
-// - delete the existing cell, but don't place on the undo stack
-// - don't want to invalidate downstream cells
+function buildClipboardPayload(
+  cells: Array<{ code: string; name?: string; config?: CellConfig }>,
+): { clipboardData: ClipboardCellData; plainText: string } {
+  const clipboardData: ClipboardCellData = {
+    cells: cells.map((cell) => ({
+      code: cell.code,
+      name: cell.name,
+      config: cell.config,
+    })),
+    version: "1.0",
+  };
+  const plainText = cells.map((cell) => cell.code).join("\n\n");
+  return { clipboardData, plainText };
+}
+
+async function writeCellsToClipboard(
+  clipboardData: ClipboardCellData,
+  plainText: string,
+): Promise<void> {
+  const clipboardItem = new ClipboardItemBuilder()
+    .add(MARIMO_CELL_MIMETYPE, clipboardData)
+    .add("text/plain", plainText)
+    .build();
+  await navigator.clipboard.write([clipboardItem]);
+}
 
 export function useCellClipboard() {
   const actions = useCellActions();
+  const pendingCutActions = usePendingCutActions();
+  const pendingCutState = usePendingCutState();
 
   const copyCells = useEvent(async (cellIds: CellId[]) => {
     const notebook = getNotebook();
@@ -47,31 +84,19 @@ export function useCellClipboard() {
       return;
     }
 
-    try {
-      const clipboardData: ClipboardCellData = {
-        cells: cells.map((cell) => ({ code: cell.code })),
-        version: "1.0",
-      };
-
-      // Create plain text representation (joined by newlines)
-      const plainText = cells.map((cell) => cell.code).join("\n\n");
-
-      // Create clipboard item with both custom mimetype and plain text
-      const clipboardItem = new ClipboardItemBuilder()
-        .add(MARIMO_CELL_MIMETYPE, clipboardData)
-        .add("text/plain", plainText)
-        .build();
-
-      await navigator.clipboard.write([clipboardItem]);
+    const { clipboardData, plainText } = buildClipboardPayload(cells);
 
+    try {
+      await writeCellsToClipboard(clipboardData, plainText);
+      pendingCutActions.clear();
       toastSuccess(cells.length);
     } catch (error) {
       Logger.error("Failed to copy cells to clipboard", error);
 
       // Fallback to simple text copy
       try {
-        const plainText = cells.map((cell) => cell.code).join("\n\n");
         await copyToClipboard(plainText);
+        pendingCutActions.clear();
         toastSuccess(cells.length);
       } catch {
         toastError();
@@ -79,12 +104,60 @@ export function useCellClipboard() {
     }
   });
 
+  const cutCells = useEvent(async (cellIds: CellId[]) => {
+    const notebook = getNotebook();
+    const validCellIds = cellIds.filter((cellId) => notebook.cellData[cellId]);
+    const cells = validCellIds.map((cellId) => notebook.cellData[cellId]);
+
+    if (cells.length === 0) {
+      // No cells to cut
+      return;
+    }
+
+    const { clipboardData, plainText } = buildClipboardPayload(cells);
+
+    try {
+      await writeCellsToClipboard(clipboardData, plainText);
+      pendingCutActions.markForCut({ cellIds: validCellIds, clipboardData });
+    } catch (error) {
+      Logger.error("Failed to cut cells to clipboard", error);
+      try {
+        await copyToClipboard(plainText);
+        // Mark cells as pending cut instead of deleting immediately
+        pendingCutActions.markForCut({ cellIds: validCellIds, clipboardData });
+      } catch {
+        toastError();
+      }
+    }
+  });
+
   interface PasteOptions {
     before?: boolean;
   }
 
   const pasteAtCell = useEvent(async (cellId: CellId, opts?: PasteOptions) => {
     const { before = false } = opts ?? {};
+
+    // Check if we have pending cut cells (internal move)
+    if (pendingCutState.cellIds.size > 0) {
+      const pendingCellIds = [...pendingCutState.cellIds];
+      const notebook = getNotebook();
+      const previousPlacements = pendingCellIds.map((id) => {
+        const column = notebook.cellIds.findWithId(id);
+        return { columnId: column.id, index: column.indexOfOrThrow(id) };
+      });
+
+      actions.moveCellsRelativeTo({
+        cellIds: pendingCellIds,
+        targetCellId: cellId,
+        position: before ? "before" : "after",
+        previousPlacements,
+      });
+
+      pendingCutActions.clear();
+      return;
+    }
+
     try {
       const clipboardItems = await navigator.clipboard.read();
 
@@ -112,6 +185,9 @@ export function useCellClipboard() {
                 cellId: currentCellId,
                 before,
                 code: cell.code,
+                name: cell.name,
+                config: cell.config,
+                hideCode: cell.config?.hide_code,
                 autoFocus: true,
               });
             }
@@ -143,7 +219,9 @@ export function useCellClipboard() {
 
   return {
     copyCells,
+    cutCells,
     pasteAtCell,
+    clearPendingCut: pendingCutActions.clear,
   };
 }
 

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

@@ -16,6 +16,10 @@ import { cellIdsAtom, notebookAtom, useCellActions } from "@/core/cells/cells";
 import { useCellFocusActions } from "@/core/cells/focus";
 import type { CellId } from "@/core/cells/ids";
 import { HTMLCellId } from "@/core/cells/ids";
+import {
+  clearPendingCutAtom,
+  pendingCutCellIdsAtom,
+} from "@/core/cells/pending-cut-service";
 import { usePendingDeleteService } from "@/core/cells/pending-delete-service";
 import { scrollCellIntoView } from "@/core/cells/scrollCellIntoView";
 import {
@@ -185,7 +189,7 @@ export function useCellNavigationProps(
   const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
   const runCells = useRunCells();
   const keymapPreset = useAtomValue(keymapPresetAtom);
-  const { copyCells, pasteAtCell } = useCellClipboard();
+  const { copyCells, pasteAtCell, cutCells } = useCellClipboard();
   const rawSelectionActions = useCellSelectionActions();
   const isSelected = useIsCellSelected(cellId);
   const pendingDeleteService = usePendingDeleteService();
@@ -317,6 +321,12 @@ export function useCellNavigationProps(
         },
         // Clear selection
         Escape: () => {
+          // Clear pending cut state if any
+          const pendingCutCellIds = store.get(pendingCutCellIdsAtom);
+          if (pendingCutCellIds.size > 0) {
+            store.set(clearPendingCutAtom);
+            return true;
+          }
           if (isSelected) {
             selectionActions.clear();
             return true;
@@ -510,6 +520,10 @@ export function useCellNavigationProps(
           copyCells(cellIds);
           return true;
         }),
+        "command.cutCell": addSingleHandler((cellIds) => {
+          cutCells(cellIds);
+          return true;
+        }),
         "command.pasteCell": (cellIds) => {
           pasteAtCell(cellIds);
           return true;

package/src/components/editor/notebook-cell.tsx

@@ -27,6 +27,7 @@ import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import { outputIsLoading, outputIsStale } from "@/core/cells/cell";
 import { isOutputEmpty } from "@/core/cells/outputs";
+import { useIsPendingCut } from "@/core/cells/pending-cut-service";
 import { autocompletionKeymap } from "@/core/codemirror/cm";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import { CSSClasses } from "@/core/constants";
@@ -391,6 +392,7 @@ const EditableCellComponent = ({
   const deleteCell = useDeleteCellCallback();
   const runCell = useRunCell(cellId);
   const { sendStdin } = useRequestClient();
+  const isPendingCut = useIsPendingCut(cellId);
 
   const [languageAdapter, setLanguageAdapter] = useState<LanguageAdapterType>();
 
@@ -545,6 +547,7 @@ const EditableCellComponent = ({
     }),
     borderless:
       isMarkdownCodeHidden && hasOutput && !navigationProps["data-selected"],
+    "pending-cut": isPendingCut,
   });
 
   const handleRefactorWithAI: OnRefactorWithAI = useEvent(

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

@@ -212,6 +212,20 @@ describe("cell reducer", () => {
     `);
   });
 
+  it("can add a cell with name and config", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+      code: "x = 1",
+      name: "My Cell",
+      config: { hide_code: true, disabled: false },
+    });
+    const newCellId = state.cellIds.inOrderIds[1];
+    expect(state.cellData[newCellId].name).toBe("My Cell");
+    expect(state.cellData[newCellId].config.hide_code).toBe(true);
+    expect(state.cellData[newCellId].config.disabled).toBe(false);
+  });
+
   it("can delete a Python cell and undo delete", () => {
     actions.createNewCell({
       cellId: firstCellId,
@@ -602,6 +616,179 @@ describe("cell reducer", () => {
     expect(formatCells(state)).toBe(before);
   });
 
+  it("can move multiple cells relative to target", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+    actions.createNewCell({
+      cellId: "1" as CellId,
+      before: false,
+    });
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [0] ''
+
+      [1] ''
+
+      [2] ''
+      "
+    `);
+
+    // Move first two cells after the third
+    actions.moveCellsRelativeTo({
+      cellIds: [firstCellId, "1" as CellId],
+      targetCellId: "2" as CellId,
+      position: "after",
+    });
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [2] ''
+
+      [0] ''
+
+      [1] ''
+      "
+    `);
+  });
+
+  it("can undo cut-paste (move with previousPlacements)", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+    actions.createNewCell({
+      cellId: "1" as CellId,
+      before: false,
+    });
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [0] ''
+
+      [1] ''
+
+      [2] ''
+      "
+    `);
+
+    const col = state.cellIds.findWithId(firstCellId);
+    const previousPlacements = [
+      {
+        columnId: col.id,
+        index: col.indexOfOrThrow(
+          firstCellId,
+        ) as import("@/utils/id-tree").CellIndex,
+      },
+      {
+        columnId: col.id,
+        index: col.indexOfOrThrow(
+          "1" as CellId,
+        ) as import("@/utils/id-tree").CellIndex,
+      },
+    ];
+
+    actions.moveCellsRelativeTo({
+      cellIds: [firstCellId, "1" as CellId],
+      targetCellId: "2" as CellId,
+      position: "after",
+      previousPlacements,
+    });
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [2] ''
+
+      [0] ''
+
+      [1] ''
+      "
+    `);
+
+    actions.undoDeleteCell();
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [0] ''
+
+      [1] ''
+
+      [2] ''
+      "
+    `);
+  });
+
+  it("undo order: cut-paste then delete — first undo restores delete, second undo undoes move", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+    actions.createNewCell({
+      cellId: "1" as CellId,
+      before: false,
+    });
+
+    const col = state.cellIds.findWithId(firstCellId);
+    const previousPlacements = [
+      {
+        columnId: col.id,
+        index: col.indexOfOrThrow(
+          firstCellId,
+        ) as import("@/utils/id-tree").CellIndex,
+      },
+      {
+        columnId: col.id,
+        index: col.indexOfOrThrow(
+          "1" as CellId,
+        ) as import("@/utils/id-tree").CellIndex,
+      },
+    ];
+
+    actions.moveCellsRelativeTo({
+      cellIds: [firstCellId, "1" as CellId],
+      targetCellId: "2" as CellId,
+      position: "after",
+      previousPlacements,
+    });
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [2] ''
+
+      [0] ''
+
+      [1] ''
+      "
+    `);
+
+    actions.deleteCell({ cellId: "2" as CellId });
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [0] ''
+
+      [1] ''
+      "
+    `);
+
+    actions.undoDeleteCell();
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [3] ''
+
+      [0] ''
+
+      [1] ''
+      "
+    `);
+
+    actions.undoDeleteCell();
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [0] ''
+
+      [1] ''
+
+      [3] ''
+      "
+    `);
+  });
+
   it("can run cell and receive cell messages", () => {
     // HAPPY PATH
     /////////////////

package/src/core/cells/__tests__/pending-cut-service.test.tsx

@@ -0,0 +1,145 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it } from "vitest";
+import type { CellId } from "@/core/cells/ids";
+import {
+  pendingCutStateAtom,
+  useHasPendingCut,
+  useIsPendingCut,
+  usePendingCutActions,
+  usePendingCutState,
+} from "../pending-cut-service";
+
+function createTestWrapper() {
+  const store = createStore();
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+  return { wrapper, store };
+}
+
+const mockClipboardData = {
+  cells: [{ code: "x = 1", name: "cell1" }],
+  version: "1.0" as const,
+};
+
+describe("pending-cut-service", () => {
+  it("markForCut sets cellIds and clipboardData", () => {
+    const { wrapper, store } = createTestWrapper();
+    const cellIds: CellId[] = ["cell-1" as CellId, "cell-2" as CellId];
+
+    const { result } = renderHook(
+      () => ({
+        actions: usePendingCutActions(),
+        state: usePendingCutState(),
+      }),
+      { wrapper },
+    );
+
+    act(() => {
+      result.current.actions.markForCut({
+        cellIds,
+        clipboardData: mockClipboardData,
+      });
+    });
+
+    const state = store.get(pendingCutStateAtom);
+    expect(state.cellIds).toEqual(new Set(cellIds));
+    expect(state.clipboardData).toEqual(mockClipboardData);
+  });
+
+  it("clear resets to initial state", () => {
+    const { wrapper, store } = createTestWrapper();
+    const cellIds: CellId[] = ["cell-1" as CellId];
+
+    const { result } = renderHook(
+      () => ({
+        actions: usePendingCutActions(),
+        state: usePendingCutState(),
+      }),
+      { wrapper },
+    );
+
+    act(() => {
+      result.current.actions.markForCut({
+        cellIds,
+        clipboardData: mockClipboardData,
+      });
+    });
+    expect(store.get(pendingCutStateAtom).cellIds.size).toBe(1);
+
+    act(() => {
+      result.current.actions.clear();
+    });
+    const state = store.get(pendingCutStateAtom);
+    expect(state.cellIds.size).toBe(0);
+    expect(state.clipboardData).toBeNull();
+  });
+
+  it("useIsPendingCut returns true when cellId is marked for cut", () => {
+    const { wrapper } = createTestWrapper();
+    const cellId = "cell-1" as CellId;
+
+    const { result: actionsResult } = renderHook(() => usePendingCutActions(), {
+      wrapper,
+    });
+    const { result: isPendingResult } = renderHook(
+      () => useIsPendingCut(cellId),
+      { wrapper },
+    );
+
+    expect(isPendingResult.current).toBe(false);
+
+    act(() => {
+      actionsResult.current.markForCut({
+        cellIds: [cellId],
+        clipboardData: mockClipboardData,
+      });
+    });
+
+    expect(isPendingResult.current).toBe(true);
+  });
+
+  it("useIsPendingCut returns false when cellId is not marked for cut", () => {
+    const { wrapper } = createTestWrapper();
+    const { result } = renderHook(
+      () => useIsPendingCut("other-cell" as CellId),
+      { wrapper },
+    );
+
+    const { result: actionsResult } = renderHook(() => usePendingCutActions(), {
+      wrapper,
+    });
+    act(() => {
+      actionsResult.current.markForCut({
+        cellIds: ["cell-1" as CellId],
+        clipboardData: mockClipboardData,
+      });
+    });
+
+    expect(result.current).toBe(false);
+  });
+
+  it("useHasPendingCut returns true when any cells are marked for cut", () => {
+    const { wrapper } = createTestWrapper();
+    const { result: hasPendingResult } = renderHook(() => useHasPendingCut(), {
+      wrapper,
+    });
+    const { result: actionsResult } = renderHook(() => usePendingCutActions(), {
+      wrapper,
+    });
+
+    expect(hasPendingResult.current).toBe(false);
+
+    act(() => {
+      actionsResult.current.markForCut({
+        cellIds: ["cell-1" as CellId],
+        clipboardData: mockClipboardData,
+      });
+    });
+
+    expect(hasPendingResult.current).toBe(true);
+  });
+});