improvement: markdown code to be completely hidden upon 'Hide Code' (#2974)

## 📝 Summary

<!--
Provide a concise summary of what this pull request is addressing.

If this PR fixes any issues, list them here by number (e.g., Fixes
#123).
-->
Fixes #2678 . Markdown code will be completely hidden to offer less
distraction. This PR adds Double click / Enter as shortcuts to display
markdown code, similar to Jupyter notebooks.


https://github.com/user-attachments/assets/8fd832de-14cf-4835-a31a-87c6843bca50

<img width="806" alt="Screenshot 2024-12-01 at 12 47 36 AM"
src="https://github.com/user-attachments/assets/42290d9f-e5b6-457d-9918-84026526a28b">

- Had to make some design compromises (widening the gap btwn left
buttons when there is a Collapse toggle, rly hard to get this right with
various markdown sizes). If you have another idea in mind, let me know.

## 🔍 Description of Changes

<!--
Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->
- attach a resizeObserver for markdown cells, when the cell is too
short, the icons on the right will overlap. A resize observer is used to
add a css class to make the icon inline
- changed some props to be optional so that scratchpad will work fine
- some refactors, including `temporarilyShowCode` function change from
async to sync

## 📋 Checklist

- [X] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] I have added tests for the changes made.
- [X] I have run the code and verified that it works as expected.

## 📜 Reviewers

<!--
Tag potential reviewers from the community or maintainers who might be
interested in reviewing this pull request.

Your PR will be reviewed more quickly if you can figure out the right
person to tag with @ -->

@akshayka OR @mscolnick

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: Light2Dark

CONTRIBUTING.md

@@ -213,6 +213,8 @@ dependencies; follow those instructions.)
 For best practices on writing end-to-end tests, check out the [Best Practices
 doc](https://playwright.dev/docs/best-practices).
 
+For frontend tests, you want to build the frontend first with `make fe` so that Playwright works on your latest changes.
+
 **Run end-to-end tests.**
 
 In the root directory, run:

frontend/e2e-tests/helper.ts

@@ -1,5 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import { type Page, expect } from "@playwright/test";
+import { type Locator, type Page, expect } from "@playwright/test";
 import { HotkeyProvider, type HotkeyAction } from "../src/core/hotkeys/hotkeys";
 import path from "node:path";
 
@@ -35,6 +35,15 @@ export async function createCellBelow(opts: {
   }
 }
 
+export async function openCellActions(page: Page, element: Locator) {
+  await element.hover();
+  await page
+    .getByTestId("cell-actions-button")
+    .locator(":visible")
+    .first()
+    .click();
+}
+
 export async function runCell(opts: { page: Page; cellSelector: string }) {
   const { page, cellSelector } = opts;
 

frontend/e2e-tests/toggle-cell-language.spec.ts

@@ -0,0 +1,51 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { test, expect } from "@playwright/test";
+import { getAppUrl, resetFile } from "../playwright.config";
+import { openCellActions } from "./helper";
+
+const appUrl = getAppUrl("title.py");
+
+test.beforeEach(async ({ page }, info) => {
+  await page.goto(appUrl);
+  if (info.retry) {
+    await page.reload();
+  }
+});
+
+test.afterEach(async () => {
+  // Need to reset the file because this test modifies it
+  await resetFile("title.py");
+});
+
+test("change the cell to a markdown cell and toggle hide code", async ({
+  page,
+}) => {
+  const title = page.getByText("Hello Marimo!", { exact: true });
+  await expect(title).toBeVisible();
+
+  // Convert to Markdown
+  await openCellActions(page, title);
+  await page.getByText("Convert to Markdown").click();
+  await expect(title).toBeVisible();
+
+  // Verify markdown content
+  const markdown = page.getByText("import marimo as mo");
+  await expect(markdown).toBeVisible();
+
+  // Hide code
+  await openCellActions(page, title);
+  await page.getByText("Hide code").click();
+  await expect(title).toBeVisible();
+
+  // Verify code editor is hidden
+  const cellEditor = page.getByTestId("cell-editor");
+  await expect(cellEditor).toBeHidden();
+
+  // Unhide code
+  await openCellActions(page, title);
+  await page.getByText("Show code").click();
+  await expect(title).toBeVisible();
+
+  // Verify code editor is visible
+  await expect(cellEditor).toBeVisible();
+});

frontend/src/components/editor/Cell.tsx

@@ -55,6 +55,9 @@ import { Toolbar, ToolbarItem } from "@/components/editor/cell/toolbar";
 import { cn } from "@/utils/cn";
 import { isErrorMime } from "@/core/mime";
 import { getCurrentLanguageAdapter } from "@/core/codemirror/language/commands";
+import { HideCodeButton } from "./code/readonly-python-code";
+import { useResizeObserver } from "@/hooks/useResizeObserver";
+import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 
 /**
  * Imperative interface of the cell.
@@ -183,6 +186,8 @@ const CellComponent = (
   const setAiCompletionCell = useSetAtom(aiCompletionCellAtom);
   const [temporarilyVisible, setTemporarilyVisible] = useState(false);
 
+  const [languageAdapter, setLanguageAdapter] = useState<LanguageAdapterType>();
+
   const disabledOrAncestorDisabled =
     cellConfig.disabled || status === "disabled-transitively";
 
@@ -311,10 +316,84 @@ const CellComponent = (
     [cellRef, editorView],
   );
 
+  const isCellCodeShown = !cellConfig.hide_code || temporarilyVisible;
+  const isMarkdown = languageAdapter === "markdown";
+  const isMarkdownCodeHidden = isMarkdown && !isCellCodeShown;
+
+  const cellContainerRef = useRef<HTMLDivElement>(null);
+  const canCollapse = canCollapseOutline(outline);
+
+  // If the cell is too short, we need to position some icons inline to prevent overlaps.
+  // This can only happen to markdown cells when the code is hidden completely
+  const [isCellStatusInline, setIsCellStatusInline] = useState(false);
+  const [isCellButtonsInline, setIsCellButtonsInline] = useState(false);
+
+  useResizeObserver({
+    ref: cellContainerRef,
+    skip: !isMarkdown,
+    onResize: (size) => {
+      const shouldBeInline =
+        (size.height && size.height < 68 && hasOutput) || false;
+      setIsCellStatusInline(shouldBeInline);
+
+      if (canCollapse && shouldBeInline) {
+        setIsCellButtonsInline(shouldBeInline);
+      } else if (isCellButtonsInline) {
+        setIsCellButtonsInline(false);
+      }
+    },
+  });
+
+  // DOM node where the editorView will be mounted
+  const editorViewParentRef = useRef<HTMLDivElement>(null);
+
+  // if the cell is hidden, show the code editor temporarily
+  const temporarilyShowCode = useCallback(() => {
+    if (!isCellCodeShown) {
+      setTemporarilyVisible(true);
+      editorView.current?.focus();
+      // Reach one parent up
+      const parent = editorViewParentRef.current?.parentElement;
+
+      const handleFocusOut = () => {
+        requestAnimationFrame(() => {
+          if (!parent?.contains(document.activeElement)) {
+            // Hide the code editor
+            setTemporarilyVisible(false);
+            editorView.current?.dom.blur();
+            parent?.removeEventListener("focusout", handleFocusOut);
+          }
+        });
+      };
+      parent?.addEventListener("focusout", handleFocusOut);
+    }
+  }, [isCellCodeShown, editorView]);
+
+  const showHiddenMarkdownCode = () => {
+    if (isMarkdownCodeHidden) {
+      temporarilyShowCode();
+    }
+  };
+
   const hasOutput = !isOutputEmpty(output);
 
+  const unhideCode = useEvent(() => {
+    // Fire-and-forget save
+    void saveCellConfig({ configs: { [cellId]: { hide_code: false } } });
+    updateCellConfig({ cellId, config: { hide_code: false } });
+
+    // focus the editor
+    editorView.current?.focus();
+    return false;
+  });
+
+  // When markdown cell is hidden & output is cleared, show the code editor
+  if (isMarkdownCodeHidden && !hasOutput) {
+    unhideCode();
+  }
+
   const outputArea = hasOutput && (
-    <div className="relative">
+    <div className="relative" onDoubleClick={showHiddenMarkdownCode}>
       <div className="absolute top-5 -left-8 z-10 print:hidden">
         <CollapseToggle
           isCollapsed={isCollapsed}
@@ -325,7 +404,7 @@ const CellComponent = (
               collapseCell({ cellId });
             }
           }}
-          canCollapse={canCollapseOutline(outline)}
+          canCollapse={canCollapse}
         />
       </div>
       <OutputArea
@@ -335,6 +414,12 @@ const CellComponent = (
         cellId={cellId}
         stale={outputStale}
       />
+      {isMarkdownCodeHidden && (
+        <HideCodeButton
+          className="z-20 relative -top-3"
+          onClick={temporarilyShowCode}
+        />
+      )}
     </div>
   );
 
@@ -350,8 +435,6 @@ const CellComponent = (
 
   const HTMLId = HTMLCellId.create(cellId);
 
-  const isCellCodeShown = !cellConfig.hide_code || temporarilyVisible;
-
   // Register hotkeys on the cell instead of the code editor
   // This is in case the code editor is hidden
   useHotkeysOnElement(editing ? cellRef : null, {
@@ -416,6 +499,10 @@ const CellComponent = (
       moveToNextCell({ cellId, before: true, noCreate: true });
       return true;
     },
+    Enter: () => {
+      showHiddenMarkdownCode();
+      return false;
+    },
     // only register j/k movement if the cell is hidden, so as to not
     // interfere with editing
     ...(userConfig.keymap.preset === "vim" && !isCellCodeShown
@@ -462,6 +549,21 @@ const CellComponent = (
     setAiCompletionCell({ cellId, initialPrompt: opts.prompt });
   };
 
+  const cellStatusComponent = (
+    <CellStatusComponent
+      status={status}
+      staleInputs={staleInputs}
+      interrupted={interrupted}
+      editing={editing}
+      edited={edited}
+      disabled={cellConfig.disabled ?? false}
+      elapsedTime={runElapsedTimeMs}
+      runStartTimestamp={runStartTimestamp}
+      uninstantiated={uninstantiated}
+      lastRunStartTimestamp={lastRunStartTimestamp}
+    />
+  );
+
   return (
     <CellActionsContextMenu
       cellId={cellId}
@@ -481,9 +583,9 @@ const CellComponent = (
         canMoveX={canMoveX}
         title={cellTitle()}
       >
-        <div className={className} id={HTMLId}>
+        <div className={className} id={HTMLId} ref={cellContainerRef}>
           {userConfig.display.cell_output === "above" && outputArea}
-          <div className="tray">
+          <div className={cn("tray", isMarkdownCodeHidden && "!border-t-0")}>
             <div className="absolute right-2 -top-4 z-10">
               <CellToolbar
                 edited={edited}
@@ -499,7 +601,13 @@ const CellComponent = (
                 onRun={handleRun}
               />
             </div>
-            <div className="absolute flex flex-col gap-[2px] justify-center h-full left-[-34px] z-20">
+            <div
+              className={cn(
+                "absolute flex flex-col gap-[2px] justify-center h-full left-[-34px] z-20",
+                isMarkdownCodeHidden && "-top-7",
+                isMarkdownCodeHidden && isCellButtonsInline && "-left-[3.8rem]",
+              )}
+            >
               <CreateCellButton
                 tooltipContent={renderShortcut("cell.createAbove")}
                 appClosed={appClosed}
@@ -532,24 +640,17 @@ const CellComponent = (
               clearSerializedEditorState={clearSerializedEditorState}
               userConfig={userConfig}
               editorViewRef={editorView}
+              editorViewParentRef={editorViewParentRef}
               hidden={!isCellCodeShown}
-              setTemporarilyVisible={setTemporarilyVisible}
+              temporarilyShowCode={temporarilyShowCode}
+              languageAdapter={languageAdapter}
+              setLanguageAdapter={setLanguageAdapter}
             />
-            <div className="shoulder-right z-20">
-              <CellStatusComponent
-                status={status}
-                staleInputs={staleInputs}
-                interrupted={interrupted}
-                editing={editing}
-                edited={edited}
-                disabled={cellConfig.disabled ?? false}
-                elapsedTime={runElapsedTimeMs}
-                runStartTimestamp={runStartTimestamp}
-                uninstantiated={uninstantiated}
-                lastRunStartTimestamp={lastRunStartTimestamp}
-              />
+            <div className="shoulder-right">
+              {!isCellStatusInline && cellStatusComponent}
               <div className="flex gap-2 items-end">
                 <CellDragHandle />
+                {isCellStatusInline && cellStatusComponent}
               </div>
             </div>
             <div className="shoulder-bottom hover-action">
@@ -644,7 +745,11 @@ const CellToolbar = ({
         config={cellConfig}
         hasOutput={hasOutput}
       >
-        <ToolbarItem variant={"green"} tooltip={null}>
+        <ToolbarItem
+          variant={"green"}
+          tooltip={null}
+          data-testid="cell-actions-button"
+        >
           <MoreHorizontalIcon strokeWidth={1.5} />
         </ToolbarItem>
       </CellActionsDropdown>