From d39aad353e372601fba9516deecf0b1d17ed0002 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Fri, 24 Apr 2026 09:03:10 -0500
Subject: [PATCH] PAP-2118 make markdown preview keyboard editable

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/InlineEditor.test.tsx | 24 ++++++++++++++++++++++++
 ui/src/components/InlineEditor.tsx      |  6 ++++++
 2 files changed, 30 insertions(+)

diff --git a/ui/src/components/InlineEditor.test.tsx b/ui/src/components/InlineEditor.test.tsx
index 5977733d141..d5f70dd922d 100644
--- a/ui/src/components/InlineEditor.test.tsx
+++ b/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();
diff --git a/ui/src/components/InlineEditor.tsx b/ui/src/components/InlineEditor.tsx
index 40f93624c46..1d0866a9b7a 100644
--- a/ui/src/components/InlineEditor.tsx
+++ b/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}