fix(file-manager): restore text selection and copying in Markdown previews (#1518)

plugins/file-manager/src/frontend/components/MarkdownRenderer.tsx

@@ -48,6 +48,15 @@ export function MarkdownRenderer({
     : "px-4 py-2 text-foreground";
 
   return (
+    <div
+      className="select-text"
+      tabIndex={0}
+      onKeyDown={(event) => {
+        // Keep native text copying out of the file grid's global shortcuts.
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "c")
+          event.stopPropagation();
+      }}
+    >
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{
@@ -97,7 +106,9 @@ export function MarkdownRenderer({
               <table className={tableClass}>{children}</table>
             </div>
           ),
-        thead: ({ children }) => <thead className="bg-muted">{children}</thead>,
+          thead: ({ children }) => (
+            <thead className="bg-muted">{children}</thead>
+          ),
           tbody: ({ children }) => <tbody>{children}</tbody>,
           tr: ({ children }) => (
             <tr className="border-b border-border">{children}</tr>
@@ -118,5 +129,6 @@ export function MarkdownRenderer({
       >
         {content}
       </ReactMarkdown>
+    </div>
   );
 }

plugins/file-manager/tests/frontend/components/MarkdownRenderer.test.tsx

@@ -0,0 +1,43 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { MarkdownRenderer } from "../../../src/frontend/components/MarkdownRenderer";
+
+afterEach(cleanup);
+
+describe("Markdown preview text copying", () => {
+  it.each([false, true])(
+    "supports copying in compact=%s previews",
+    (compact) => {
+      const fileShortcut = vi.fn();
+      document.addEventListener("keydown", fileShortcut);
+      try {
+        const { container } = render(
+          <div className="select-none">
+            <MarkdownRenderer
+              compact={compact}
+              content={"# Preview\n\nCopy this text."}
+            />
+          </div>,
+        );
+        const preview = container.querySelector<HTMLElement>(".select-text")!;
+        preview.focus();
+        expect(preview).toHaveFocus();
+        expect(
+          screen.getByRole("heading", { name: "Preview" }),
+        ).toBeInTheDocument();
+        for (const modifier of [{ ctrlKey: true }, { metaKey: true }]) {
+          expect(fireEvent.keyDown(preview, { key: "c", ...modifier })).toBe(
+            true,
+          );
+        }
+        expect(fileShortcut).not.toHaveBeenCalled();
+        fireEvent.keyDown(preview, { key: "Escape" });
+        expect(fileShortcut).toHaveBeenCalledTimes(1);
+        expect(fireEvent.contextMenu(preview)).toBe(true);
+      } finally {
+        document.removeEventListener("keydown", fileShortcut);
+      }
+    },
+  );
+});