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: "
Hello HTML
",
+ });
+ const stub = new StubCellData(cell);
+
+ render();
+
+ 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"
>