PAP-2118 make markdown preview keyboard editable

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/InlineEditor.test.tsx

@@ -218,6 +218,30 @@ describe("InlineEditor", () => {
     const preview = container.querySelector<HTMLElement>('[role="textbox"]');
     expect(preview).not.toBeNull();
     expect(preview?.getAttribute("aria-multiline")).toBe("true");
+    expect(preview?.tabIndex).toBe(0);
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
+  it("enters multiline edit mode from the keyboard preview surface", () => {
+    const onSave = vi.fn().mockResolvedValue(undefined);
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(<InlineEditor value="Hello world" multiline onSave={onSave} />);
+    });
+
+    const preview = container.querySelector<HTMLElement>('[role="textbox"]');
+    expect(preview).not.toBeNull();
+
+    act(() => {
+      preview!.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: "Enter" }));
+    });
+
+    expect(container.querySelector('[data-testid="multiline-md-mock"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="multiline-md-preview"]')).toBeNull();
 
     act(() => {
       root.unmount();

ui/src/components/InlineEditor.tsx

@@ -272,9 +272,15 @@ export function InlineEditor({
             enterEditMode();
           }}
           onDragEnter={() => enterEditMode()}
+          onKeyDown={(event) => {
+            if (event.key !== "Enter" && event.key !== " ") return;
+            event.preventDefault();
+            enterEditMode();
+          }}
           role="textbox"
           aria-multiline="true"
           aria-label={placeholder}
+          tabIndex={0}
         >
           <MarkdownBody className={cn("paperclip-edit-in-place-content", className)}>
             {previewValue}