@marimo-team/islands 0.25.3-dev192 → 0.25.3-dev193

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

@@ -2,7 +2,9 @@
 
 import { beforeEach, describe, expect, it } from "vitest";
 import { cellId } from "@/__tests__/branded";
-import { MultiColumn } from "@/utils/id-tree";
+import type { CellId } from "@/core/cells/ids";
+import type { Layout } from "@/core/cells/layout";
+import type { CellColumnId } from "@/utils/id-tree";
 import type { CellSelectionState } from "../selection";
 import { exportedForTesting } from "../selection";
 
@@ -16,6 +18,14 @@ const CellIds = {
   e: cellId("e"),
 };
 
+/** A one-column page of `ids`, with `hidden` folded away under the cell before them. */
+function page(ids: CellId[], hidden: CellId[] = []): Layout {
+  const visible = ids.filter((id) => !hidden.includes(id));
+  return {
+    columns: [{ id: "column" as CellColumnId, ids, visible, folds: new Map() }],
+  };
+}
+
 describe("cell selection reducer", () => {
   let state: CellSelectionState;
 
@@ -57,15 +67,13 @@ describe("cell selection reducer", () => {
   });
 
   it("should extend selection forward", () => {
-    const allCellIds = MultiColumn.from([
-      [CellIds.a, CellIds.b, CellIds.c, CellIds.d],
-    ]);
+    const layout = page([CellIds.a, CellIds.b, CellIds.c, CellIds.d]);
 
     // First select cell a
     actions.select({ cellId: CellIds.a });
 
     // Then extend to cell c
-    actions.extend({ cellId: CellIds.c, allCellIds });
+    actions.extend({ cellId: CellIds.c, layout });
 
     expect(state).toEqual({
       selectionStart: CellIds.a,
@@ -75,15 +83,13 @@ describe("cell selection reducer", () => {
   });
 
   it("should extend selection backward", () => {
-    const allCellIds = MultiColumn.from([
-      [CellIds.a, CellIds.b, CellIds.c, CellIds.d],
-    ]);
+    const layout = page([CellIds.a, CellIds.b, CellIds.c, CellIds.d]);
 
     // First select cell c
     actions.select({ cellId: CellIds.c });
 
     // Then extend to cell a (backward)
-    actions.extend({ cellId: CellIds.a, allCellIds });
+    actions.extend({ cellId: CellIds.a, layout });
 
     expect(state).toEqual({
       selectionStart: CellIds.c,
@@ -93,13 +99,13 @@ describe("cell selection reducer", () => {
   });
 
   it("should extend selection to same cell", () => {
-    const allCellIds = MultiColumn.from([[CellIds.a, CellIds.b, CellIds.c]]);
+    const layout = page([CellIds.a, CellIds.b, CellIds.c]);
 
     // First select cell b
     actions.select({ cellId: CellIds.b });
 
     // Then extend to same cell
-    actions.extend({ cellId: CellIds.b, allCellIds });
+    actions.extend({ cellId: CellIds.b, layout });
 
     expect(state).toEqual({
       selectionStart: CellIds.b,
@@ -109,10 +115,10 @@ describe("cell selection reducer", () => {
   });
 
   it("should fallback to single select when extending without selectionStart", () => {
-    const allCellIds = MultiColumn.from([[CellIds.a, CellIds.b, CellIds.c]]);
+    const layout = page([CellIds.a, CellIds.b, CellIds.c]);
 
     // Try to extend without any previous selection
-    actions.extend({ cellId: CellIds.b, allCellIds });
+    actions.extend({ cellId: CellIds.b, layout });
 
     expect(state).toEqual({
       selectionStart: CellIds.b,
@@ -122,11 +128,11 @@ describe("cell selection reducer", () => {
   });
 
   it("should fallback to single select when extending with invalid cell ids", () => {
-    const allCellIds = MultiColumn.from([[CellIds.a, CellIds.b, CellIds.c]]);
+    const layout = page([CellIds.a, CellIds.b, CellIds.c]);
 
-    // Create a state with invalid selection start (not in allCellIds)
+    // Create a state with invalid selection start (not on the page)
     const invalidState = {
-      selectionStart: CellIds.d, // not in allCellIds
+      selectionStart: CellIds.d, // not on the page
       selectionEnd: CellIds.d,
       selected: new Set([CellIds.d]),
     };
@@ -134,7 +140,7 @@ describe("cell selection reducer", () => {
     // Test reducer directly since we need to start with custom state
     const result = reducer(invalidState, {
       type: "extend",
-      payload: { cellId: CellIds.b, allCellIds },
+      payload: { cellId: CellIds.b, layout },
     });
 
     expect(result).toEqual({
@@ -144,6 +150,19 @@ describe("cell selection reducer", () => {
     });
   });
 
+  it("steps over the cells a fold hides", () => {
+    const layout = page(
+      [CellIds.a, CellIds.b, CellIds.c, CellIds.d, CellIds.e],
+      [CellIds.b, CellIds.c],
+    );
+
+    actions.select({ cellId: CellIds.a });
+    actions.extend({ cellId: CellIds.d, layout });
+
+    expect(state.selected).toEqual(new Set([CellIds.a, CellIds.d]));
+    expect(state.selectionEnd).toBe(CellIds.d);
+  });
+
   it("should clear selection", () => {
     // First select some cells
     actions.select({ cellId: CellIds.a });
@@ -171,19 +190,23 @@ describe("cell selection reducer", () => {
   });
 
   it("should handle complex selection scenarios", () => {
-    const allCellIds = MultiColumn.from([
-      [CellIds.a, CellIds.b, CellIds.c, CellIds.d, CellIds.e],
+    const layout = page([
+      CellIds.a,
+      CellIds.b,
+      CellIds.c,
+      CellIds.d,
+      CellIds.e,
     ]);
 
     // Select middle cell
     actions.select({ cellId: CellIds.c });
 
     // Extend to end
-    actions.extend({ cellId: CellIds.e, allCellIds });
+    actions.extend({ cellId: CellIds.e, layout });
     expect(state.selected).toEqual(new Set([CellIds.c, CellIds.d, CellIds.e]));
 
     // Extend to beginning (should reverse)
-    actions.extend({ cellId: CellIds.a, allCellIds });
+    actions.extend({ cellId: CellIds.a, layout });
     expect(state.selected).toEqual(new Set([CellIds.a, CellIds.b, CellIds.c]));
     expect(state.selectionStart).toBe(CellIds.c);
     expect(state.selectionEnd).toBe(CellIds.a);

package/src/components/editor/navigation/focus-utils.ts

@@ -3,6 +3,7 @@
 import type { createStore } from "jotai";
 import { getCellEditorView } from "@/core/cells/cells";
 import { type CellId, HTMLCellId } from "@/core/cells/ids";
+import { scrollCellIntoView } from "@/core/cells/scrollCellIntoView";
 import { Logger } from "@/utils/Logger";
 
 export function focusCellEditor(
@@ -38,6 +39,24 @@ export function raf2(callback: () => void): void {
   });
 }
 
+/**
+ * Keep the focused cell in view after a layout shift, such as its code being
+ * hidden again.
+ */
+export function keepFocusedCellInView(): void {
+  raf2(() => {
+    const activeElement = document.activeElement;
+    if (!activeElement) {
+      return;
+    }
+    const focusedCell = HTMLCellId.findElementThroughShadowDOMs(activeElement);
+    if (!focusedCell) {
+      return;
+    }
+    scrollCellIntoView(HTMLCellId.parse(focusedCell.id));
+  });
+}
+
 /**
  * Checks if the cell is focused at the top level.
  */

package/src/components/editor/navigation/multi-cell-action-toolbar.tsx

@@ -30,12 +30,9 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import {
-  getCellEditorView,
-  hasOnlyOneCellAtom,
-  notebookAtom,
-} from "@/core/cells/cells";
+import { getCellEditorView, hasOnlyOneCellAtom } from "@/core/cells/cells";
 import { useCellActions } from "@/core/cells/actions";
+import { columnOf, layoutAtom } from "@/core/cells/layout";
 import { useNotebookDocumentEdit } from "@/core/notebook/document";
 import type { CellId } from "@/core/cells/ids";
 import { usePendingDeleteService } from "@/core/cells/pending-delete-service";
@@ -142,10 +139,8 @@ export function useMultiCellActionButtons(cellIds: CellId[]) {
       /// If moving down, make sure the last cell is not at the bottom of the notebook
       if (direction === "down") {
         const lastCellId = cellIds[cellIds.length - 1];
-        const notebook = store.get(notebookAtom);
-        const isLast =
-          notebook.cellIds.findWithId(lastCellId).last() === lastCellId;
-        if (isLast) {
+        const layout = store.get(layoutAtom);
+        if (columnOf(layout, lastCellId).visible.at(-1) === lastCellId) {
           return;
         }
       }
@@ -153,10 +148,8 @@ export function useMultiCellActionButtons(cellIds: CellId[]) {
       // If moving up, make sure the first cell is not at the top of the notebook
       if (direction === "up") {
         const firstCellId = cellIds[0];
-        const notebook = store.get(notebookAtom);
-        const isFirst =
-          notebook.cellIds.findWithId(firstCellId).first() === firstCellId;
-        if (isFirst) {
+        const layout = store.get(layoutAtom);
+        if (columnOf(layout, firstCellId).visible[0] === firstCellId) {
           return;
         }
       }

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

@@ -13,7 +13,14 @@ import { mergeProps, useFocusWithin, useKeyboard } from "react-aria";
 import { DATA_FOR_CELL_ID } from "@/components/data-table/cell-utils";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
-import { cellIdsAtom, notebookAtom } from "@/core/cells/cells";
+import { notebookAtom } from "@/core/cells/cells";
+import { hideShownCodeAtom, showHiddenCodeAtom } from "@/core/cells/editor";
+import {
+  columnOf,
+  type LayoutColumn,
+  layoutAtom,
+  visibleNeighbor,
+} from "@/core/cells/layout";
 import { useCellActions } from "@/core/cells/actions";
 import { useNotebookDocumentEdit } from "@/core/notebook/document";
 import { useCellFocusActions } from "@/core/cells/focus";
@@ -40,18 +47,21 @@ import type { HotkeyAction } from "@/core/hotkeys/hotkeys";
 import { parseShortcut } from "@/core/hotkeys/shortcuts";
 import { useSaveNotebook } from "@/core/saving/save-component";
 import { Events } from "@/utils/events";
-import type { CollapsibleTree } from "@/utils/id-tree";
 import type { CellActionsDropdownHandle } from "../cell/cell-actions";
 import { useDeleteManyCellsCallback } from "../cell/useDeleteCell";
 import { useRunCells } from "../cell/useRunCells";
 import { useCellClipboard } from "./clipboard";
-import { focusCell, focusCellEditor, raf2 } from "./focus-utils";
+import {
+  focusCell,
+  focusCellEditor,
+  keepFocusedCellInView,
+  raf2,
+} from "./focus-utils";
 import {
   getSelectedCells,
   useCellSelectionActions,
   useIsCellSelected,
 } from "./selection";
-import { useTemporarilyShownCodeActions } from "./state";
 import { handleVimKeybinding } from "./vim-bindings";
 
 interface HotkeyHandler {
@@ -105,8 +115,7 @@ function useCellFocusProps(
   editorView: React.RefObject<EditorView | null>,
 ) {
   const focusActions = useCellFocusActions();
-  const actions = useCellActions();
-  const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
+  const hideShownCode = useSetAtom(hideShownCodeAtom);
 
   // This occurs at the cell level and descedants.
   const { focusWithinProps } = useFocusWithin({
@@ -131,9 +140,11 @@ function useCellFocusProps(
         return;
       }
 
-      // On blur, hide the code if it was temporarily shown.
-      temporarilyShownCodeActions.remove(cellId);
-      actions.markTouched({ cellId });
+      // On blur, hide the code if it was showing for now. That shifts the
+      // layout, so the cell that took the focus is kept in view.
+      if (hideShownCode({ cellId })) {
+        keepFocusedCellInView();
+      }
       focusActions.blurCell();
       // Close signature help when clicking outside the cell
       if (editorView.current) {
@@ -195,7 +206,7 @@ export function useCellNavigationProps(
   const actions = useCellActions();
   const { createCell, moveToNextCell } = useCellActions();
   const store = useStore();
-  const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
+  const showHiddenCode = useSetAtom(showHiddenCodeAtom);
   const runCells = useRunCells();
   const keymapPreset = useAtomValue(keymapPresetAtom);
   const { copyCells, pasteAtCell, cutCells } = useCellClipboard();
@@ -268,12 +279,13 @@ export function useCellNavigationProps(
         // Move left across columns
         ArrowLeft: () => {
           if (canMoveX) {
-            const notebook = store.get(notebookAtom);
-            const column = notebook.cellIds.findWithId(cellId);
-            const columnIndex = notebook.cellIds.indexOf(column);
-            const leftColumn = notebook.cellIds.at(columnIndex - 1);
+            const layout = store.get(layoutAtom);
+            const columnIndex = layout.columns.indexOf(
+              columnOf(layout, cellId),
+            );
+            const leftColumn = layout.columns[columnIndex - 1];
 
-            if (leftColumn && leftColumn.length > 0) {
+            if (leftColumn && leftColumn.visible.length > 0) {
               const leftCellId = findClosestAdjacentCell(cellId, leftColumn);
               actions.focusCell({ cellId: leftCellId, where: "exact" });
 
@@ -286,12 +298,13 @@ export function useCellNavigationProps(
         // Move right across columns
         ArrowRight: () => {
           if (canMoveX) {
-            const notebook = store.get(notebookAtom);
-            const column = notebook.cellIds.findWithId(cellId);
-            const columnIndex = notebook.cellIds.indexOf(column);
-            const rightColumn = notebook.cellIds.at(columnIndex + 1);
+            const layout = store.get(layoutAtom);
+            const columnIndex = layout.columns.indexOf(
+              columnOf(layout, cellId),
+            );
+            const rightColumn = layout.columns[columnIndex + 1];
 
-            if (rightColumn && rightColumn.length > 0) {
+            if (rightColumn && rightColumn.visible.length > 0) {
               const rightCellId = findClosestAdjacentCell(cellId, rightColumn);
               actions.focusCell({ cellId: rightCellId, where: "exact" });
 
@@ -304,12 +317,12 @@ export function useCellNavigationProps(
         // Select up
         "Shift+ArrowUp": () => {
           // Select self
-          const allCellIds = store.get(cellIdsAtom);
-          selectionActions.extend({ cellId, allCellIds });
+          const layout = store.get(layoutAtom);
+          selectionActions.extend({ cellId, layout });
           // Select to where focus is going
-          const beforeCellId = allCellIds.findWithId(cellId).before(cellId);
+          const beforeCellId = visibleNeighbor(layout, cellId, -1);
           if (beforeCellId) {
-            selectionActions.extend({ cellId: beforeCellId, allCellIds });
+            selectionActions.extend({ cellId: beforeCellId, layout });
           }
           // Focus the cell
           actions.focusCell({ cellId, where: "before" });
@@ -318,12 +331,12 @@ export function useCellNavigationProps(
         // Select down
         "Shift+ArrowDown": () => {
           // Select self
-          const allCellIds = store.get(cellIdsAtom);
-          selectionActions.extend({ cellId, allCellIds });
+          const layout = store.get(layoutAtom);
+          selectionActions.extend({ cellId, layout });
           // Select to where focus is going
-          const afterCellId = allCellIds.findWithId(cellId).after(cellId);
+          const afterCellId = visibleNeighbor(layout, cellId, 1);
           if (afterCellId) {
-            selectionActions.extend({ cellId: afterCellId, allCellIds });
+            selectionActions.extend({ cellId: afterCellId, layout });
           }
           // Focus the cell
           actions.focusCell({ cellId, where: "after" });
@@ -345,7 +358,7 @@ export function useCellNavigationProps(
         },
         // Enter will focus the cell editor.
         Enter: () => {
-          temporarilyShownCodeActions.add(cellId);
+          showHiddenCode({ cellId });
           focusCellEditor(store, cellId);
           selectionActions.clear();
           return true;
@@ -398,10 +411,8 @@ export function useCellNavigationProps(
         "cell.moveUp": addSingleHandler((cellIds) => {
           // If moving up, make sure the first cell is not at the top of the notebook
           const firstCellId = cellIds[0];
-          const notebook = store.get(notebookAtom);
-          const isFirst =
-            notebook.cellIds.findWithId(firstCellId).first() === firstCellId;
-          if (isFirst) {
+          const layout = store.get(layoutAtom);
+          if (columnOf(layout, firstCellId).visible[0] === firstCellId) {
             return false;
           }
 
@@ -413,10 +424,8 @@ export function useCellNavigationProps(
         "cell.moveDown": addSingleHandler((cellIds) => {
           // If moving down, make sure the last cell is not at the bottom of the notebook
           const lastCellId = cellIds[cellIds.length - 1];
-          const notebook = store.get(notebookAtom);
-          const isLast =
-            notebook.cellIds.findWithId(lastCellId).last() === lastCellId;
-          if (isLast) {
+          const layout = store.get(layoutAtom);
+          if (columnOf(layout, lastCellId).visible.at(-1) === lastCellId) {
             return false;
           }
 
@@ -693,7 +702,7 @@ export function useCellEditorNavigationProps(
   cellId: CellId,
   editorView: React.RefObject<EditorView | null>,
 ) {
-  const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
+  const hideShownCode = useSetAtom(hideShownCodeAtom);
   const keymapPreset = useAtomValue(keymapPresetAtom);
   const hotkeys = useAtomValue(hotkeysAtom);
 
@@ -703,7 +712,7 @@ export function useCellEditorNavigationProps(
   }, [hotkeys]);
 
   const exitToCommandMode = () => {
-    temporarilyShownCodeActions.remove(cellId);
+    hideShownCode({ cellId });
     focusCell(cellId);
     // Scroll to cell in case it is not in view because of layout shifts.
     raf2(() => {
@@ -770,18 +779,18 @@ export function useCellEditorNavigationProps(
 
 function findClosestAdjacentCell(
   currentCellId: CellId,
-  adjacentColumn: CollapsibleTree<CellId>,
+  adjacentColumn: LayoutColumn,
 ): CellId {
   const current = document.getElementById(HTMLCellId.create(currentCellId));
 
   if (!current) {
     // fallback to first
-    return adjacentColumn.first();
+    return adjacentColumn.visible[0];
   }
 
   const currentRect = current.getBoundingClientRect();
   // first to to either overlap or contain the current cell's top edge
-  for (const candidateId of adjacentColumn.topLevelIds) {
+  for (const candidateId of adjacentColumn.visible) {
     const candidate = document.getElementById(HTMLCellId.create(candidateId));
     if (candidate) {
       const candidateRect = candidate.getBoundingClientRect();
@@ -795,7 +804,7 @@ function findClosestAdjacentCell(
   }
 
   // no aligned cells (column beyond other), jump to last element
-  return adjacentColumn.last();
+  return adjacentColumn.visible[adjacentColumn.visible.length - 1];
 }
 
 export function closeSignatureHelp(view: EditorView) {

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

@@ -2,8 +2,8 @@
 import { atom, type createStore, useAtomValue } from "jotai";
 import { useMemo } from "react";
 import type { CellId } from "@/core/cells/ids";
+import type { Layout } from "@/core/cells/layout";
 import { createReducerAndAtoms } from "@/utils/createReducer";
-import type { MultiColumn } from "@/utils/id-tree";
 
 export interface CellSelectionState {
   selectionStart: CellId | null;
@@ -34,43 +34,44 @@ const {
     selected: new Set([payload.cellId]),
   }),
 
+  /**
+   * Extend the selection from where it started to `cellId`, over the cells
+   * the page shows between them. Cells a fold hides are stepped over, as
+   * the focus steps over them.
+   */
   extend: (
     state: CellSelectionState,
-    payload: {
-      cellId: CellId;
-      allCellIds: MultiColumn<CellId>;
-    },
+    payload: { cellId: CellId; layout: Layout },
   ): CellSelectionState => {
-    if (!state.selectionStart) {
-      // fallback to single select
-      return {
-        selectionStart: payload.cellId,
-        selectionEnd: payload.cellId,
-        selected: new Set([payload.cellId]),
-      };
-    }
-    const { cellId, allCellIds } = payload;
-
-    try {
-      const column = allCellIds.findWithId(state.selectionStart);
-      const startIdx = column.indexOfOrThrow(state.selectionStart);
-      const endIdx = column.indexOfOrThrow(cellId);
-      const [from, to] =
-        startIdx < endIdx ? [startIdx, endIdx] : [endIdx, startIdx];
-      const selected = column.slice(from, to + 1);
-      return {
-        selectionStart: state.selectionStart,
-        selectionEnd: cellId,
-        selected: new Set(selected),
-      };
-    } catch {
-      // fallback to single select
+    const { cellId, layout } = payload;
+    const start = state.selectionStart;
+    const column =
+      start === null
+        ? undefined
+        : layout.columns.find((column) => column.visible.includes(start));
+    const startIdx =
+      start === null ? -1 : (column?.visible.indexOf(start) ?? -1);
+    const endIdx = column?.visible.indexOf(cellId) ?? -1;
+    if (
+      start === null ||
+      column === undefined ||
+      startIdx === -1 ||
+      endIdx === -1
+    ) {
+      // Nothing to extend from, or the cells are not on the page together.
       return {
         selectionStart: cellId,
         selectionEnd: cellId,
         selected: new Set([cellId]),
       };
     }
+    const [from, to] =
+      startIdx < endIdx ? [startIdx, endIdx] : [endIdx, startIdx];
+    return {
+      selectionStart: start,
+      selectionEnd: cellId,
+      selected: new Set(column.visible.slice(from, to + 1)),
+    };
   },
 
   clear: (state: CellSelectionState): CellSelectionState => {

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

@@ -16,7 +16,6 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useMemo,
   useRef,
   useState,
 } from "react";
@@ -43,12 +42,15 @@ import { useResizeObserver } from "@/hooks/useResizeObserver";
 import { cn } from "@/utils/cn";
 import type { Milliseconds, Seconds } from "@/utils/time";
 import {
-  createUntouchedCellAtom,
   useCellData,
   useCellHandle,
   useCellRuntime,
 } from "../../core/cells/cells";
 import { type CellActions, useCellActions } from "../../core/cells/actions";
+import {
+  showHiddenCodeAtom,
+  useShowsHiddenCode,
+} from "../../core/cells/editor";
 import { type CellId, SETUP_CELL_ID } from "../../core/cells/ids";
 import {
   cellNeedsRun,
@@ -85,10 +87,6 @@ import { useRunCell } from "./cell/useRunCells";
 import { cellDomProps } from "./common";
 import { SqlValidationErrorBanner } from "./errors/sql-validation-errors";
 import { useCellNavigationProps } from "./navigation/navigation";
-import {
-  useTemporarilyShownCode,
-  useTemporarilyShownCodeActions,
-} from "./navigation/state";
 import { type OnRefactorWithAI, OutputArea } from "./Output";
 import { ConsoleOutput } from "./output/console/ConsoleOutput";
 import { CellDragHandle, SortableCell } from "./SortableCell";
@@ -167,15 +165,12 @@ function useCellHiddenLogic({
   editorView: React.RefObject<EditorView | null>;
   editorViewParentRef: React.RefObject<HTMLDivElement | null>;
 }) {
-  const temporarilyVisible = useTemporarilyShownCode(cellId);
-  const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
-  const isUntouched = useAtomValue(
-    useMemo(() => createUntouchedCellAtom(cellId), [cellId]),
-  );
+  const showsHiddenCode = useShowsHiddenCode(cellId);
+  const showHiddenCodeNow = useSetAtom(showHiddenCodeAtom);
 
-  // The cell code is shown if the cell is not configured to be hidden or if the code is temporarily visible (i.e. when focused).
-  const isCellCodeShown =
-    !cellConfig.hide_code || temporarilyVisible || isUntouched;
+  // The code is shown unless the cell hides it, and then still while it is
+  // being edited or was just created.
+  const isCellCodeShown = !cellConfig.hide_code || showsHiddenCode;
   const isMarkdown = languageAdapter === "markdown";
   const isMarkdownCodeHidden = isMarkdown && !isCellCodeShown;
 
@@ -188,7 +183,7 @@ function useCellHiddenLogic({
 
     // Default to true
     const focus = opts?.focus ?? true;
-    temporarilyShownCodeActions.add(cellId);
+    showHiddenCodeNow({ cellId });
 
     if (focus) {
       editorView.current?.focus();
@@ -219,7 +214,6 @@ export type CellComponentActions = Pick<
   | "moveCell"
   | "collapseCell"
   | "expandCell"
-  | "clearSerializedEditorState"
   | "setStdinResponse"
   | "clearCellConsoleOutput"
   | "sendToBottom"
@@ -704,7 +698,6 @@ const EditableCellComponent = ({
                 code={cellData.code}
                 config={cellData.config}
                 status={cellRuntime.status}
-                serializedEditorState={cellData.serializedEditorState}
                 runCell={runCell}
                 setEditorView={setEditorView}
                 userConfig={userConfig}
@@ -1233,7 +1226,6 @@ const SetupCellComponent = ({
                 code={cellData.code}
                 config={cellData.config}
                 status={cellRuntime.status}
-                serializedEditorState={cellData.serializedEditorState}
                 runCell={runCell}
                 setEditorView={setEditorView}
                 userConfig={userConfig}