From f6fa583496da57d3dce994a70bec12704904e1d8 Mon Sep 17 00:00:00 2001
From: Jeremy lewi <jeremy@lewi.us>
Date: Thu, 14 May 2026 18:02:00 -0700
Subject: [PATCH] Support Escape on rendered HTML cells

Signed-off-by: Jeremy lewi <jeremy@lewi.us>
---
 app/src/components/Actions/Actions.test.tsx | 19 +++++++++++++++++++
 app/src/components/Actions/HtmlCell.tsx     |  4 ++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/app/src/components/Actions/Actions.test.tsx b/app/src/components/Actions/Actions.test.tsx
index 00d0fe9..27e9a61 100644
--- a/app/src/components/Actions/Actions.test.tsx
+++ b/app/src/components/Actions/Actions.test.tsx
@@ -324,6 +324,25 @@ describe("Action component", () => {
     expect(screen.queryByLabelText("Run code")).toBeNull();
   });
 
+  it("switches rendered html cells back to edit mode on Escape", () => {
+    const cell = create(parser_pb.CellSchema, {
+      refId: "cell-html-escape",
+      kind: parser_pb.CellKind.CODE,
+      languageId: "html",
+      outputs: [],
+      metadata: {},
+      value: "<div><strong>Hello HTML</strong></div>",
+    });
+    const stub = new StubCellData(cell);
+
+    render(<Action cellData={stub as unknown as CellData} isFirst={false} />);
+
+    const rendered = screen.getByTestId("html-rendered");
+    fireEvent.keyDown(rendered, { key: "Escape" });
+
+    expect(screen.getByTestId("html-editor")).toBeTruthy();
+  });
+
   it("shows browser/sandbox runner selector for javascript cells", () => {
     const cell = create(parser_pb.CellSchema, {
       refId: "cell-runner-select",
diff --git a/app/src/components/Actions/HtmlCell.tsx b/app/src/components/Actions/HtmlCell.tsx
index 6a0c2dc..3d194dd 100644
--- a/app/src/components/Actions/HtmlCell.tsx
+++ b/app/src/components/Actions/HtmlCell.tsx
@@ -67,7 +67,7 @@ const HtmlCell = memo(
         if (event.target !== event.currentTarget) {
           return;
         }
-        if (event.key === "Enter" || event.key === " ") {
+        if (event.key === "Enter" || event.key === " " || event.key === "Escape") {
           event.preventDefault();
           setRendered(false);
         }
@@ -146,7 +146,7 @@ const HtmlCell = memo(
             onKeyDown={handleRenderedKeyDown}
             tabIndex={0}
             role="button"
-            aria-label="Press Enter to edit HTML"
+            aria-label="Press Enter, Space, or Escape to edit HTML"
             data-testid="html-rendered"
           >
             <div className="flex items-center justify-between border-b border-nb-border bg-nb-surface-2 px-3 py-2">