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" >