feat(editor): add hover-revealed copy button to fenced code blocks

Overlays a copy-to-clipboard button inside the code well's top-right
corner, hidden until the block is hovered or the button is
keyboard-focused. Copies via CodeNode.getTextContent() (not the DOM's
own textContent, which would drop line breaks).

Extracts the clipboard-write + success/failure toast shape into a
shared useCopyToClipboard hook and switches every existing hand-rolled
copy affordance (CodeBlock, TaskContextMenu, TaskDetailDialog,
McpServerSection) over to it.

Author: koki-develop

src/components/molecules/CodeBlock.tsx

@@ -1,6 +1,7 @@
 import { Copy } from "lucide-react";
 import { useCallback } from "react";
-import { toast } from "sonner";
+
+import { useCopyToClipboard } from "@/hooks/ui/useCopyToClipboard";
 
 import { IconButton } from "./IconButton";
 
@@ -17,17 +18,11 @@ export function CodeBlock({
   ariaLabel,
   className,
 }: CodeBlockProps) {
+  const copyToClipboard = useCopyToClipboard();
   const handleCopy = useCallback(() => {
     if (!code) return;
-    navigator.clipboard
-      .writeText(code)
-      .then(() => {
-        toast.success(copyToast);
-      })
-      .catch(() => {
-        toast.error("Failed to copy to clipboard");
-      });
-  }, [code, copyToast]);
+    copyToClipboard(code, { success: copyToast, failure: "Failed to copy to clipboard" });
+  }, [code, copyToast, copyToClipboard]);
 
   return (
     <div className={`relative ${className ?? ""}`}>

src/components/molecules/MarkdownEditor/AGENTS.md

@@ -0,0 +1,79 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { fencedCodeBlock, renderTestEditor } from "./__tests__/utils";
+import { CodeBlockCopyPlugin } from "./CodeBlockCopyPlugin";
+
+describe("CodeBlockCopyPlugin", () => {
+  let writeText: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    writeText = vi.spyOn(navigator.clipboard, "writeText").mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    writeText.mockRestore();
+  });
+
+  // The button sits INSIDE the code well itself (its `.cork-code-block-code-area`
+  // container, alongside `<code>`) — not in a header row above it like the
+  // language tab, per the task spec ("inside the dark background, not
+  // outside it"). It must NOT be nested inside the tab (buttons can't nest)
+  // and the wrapper's other direct child must still be the tab itself.
+  test("renders a copy button inside the code well, alongside <code>", async () => {
+    const { screen } = await renderTestEditor({
+      initialValue: "```js\nconsole.log(1)\n```",
+      plugins: <CodeBlockCopyPlugin />,
+    });
+
+    const textbox = screen.getByRole("textbox");
+    const wrapper = textbox.element().querySelector(".cork-code-block-wrapper");
+    expect(wrapper).not.toBeNull();
+
+    const codeArea = wrapper?.querySelector(".cork-code-block-code-area");
+    expect(codeArea).not.toBeNull();
+
+    const button = codeArea?.querySelector("button.cork-code-block-copy");
+    expect(button).not.toBeNull();
+    expect(button?.getAttribute("aria-label")).toBe("Copy code block");
+    expect(codeArea?.querySelector("code")).not.toBeNull();
+
+    // The tab is a separate direct child of the wrapper, not nested with the
+    // copy button inside the code area.
+    expect(wrapper?.querySelector(":scope > button.cork-code-block-tab")).not.toBeNull();
+    expect(codeArea?.querySelector("button.cork-code-block-tab")).toBeNull();
+  });
+
+  // The regression this plugin exists to avoid: reading `Element.textContent`
+  // instead of `codeNode.getTextContent()` would silently squash every line
+  // together, since `<br>` (LineBreakNode's rendered element) contributes no
+  // "\n" to `textContent`. A multi-line block must copy with real newlines.
+  test("clicking the button copies the block's exact multi-line source", async () => {
+    const source = fencedCodeBlock("js", 3);
+    const expectedCode = source.split("\n").slice(1, -1).join("\n");
+
+    const { screen, user } = await renderTestEditor({
+      initialValue: source,
+      plugins: <CodeBlockCopyPlugin />,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Copy code block" }));
+
+    expect(writeText).toHaveBeenCalledExactlyOnceWith(expectedCode);
+  });
+
+  // A doc with more than one code block: clicking one block's button must
+  // never copy a different block's text — confirms the click delegation
+  // resolves the CLICKED button's own nearest CodeNode, not e.g. the first
+  // code block in the document.
+  test("clicking a specific block's button copies only that block's text", async () => {
+    const { screen, user } = await renderTestEditor({
+      initialValue: "```js\nfirst\n```\n\n```py\nsecond\n```",
+      plugins: <CodeBlockCopyPlugin />,
+    });
+
+    const buttons = screen.getByRole("button", { name: "Copy code block" });
+    await user.click(buttons.nth(1));
+
+    expect(writeText).toHaveBeenCalledExactlyOnceWith("second");
+  });
+});

src/components/molecules/MarkdownEditor/CodeBlockCopyPlugin.spec.tsx

@@ -0,0 +1,79 @@
+import { $isCodeNode } from "@lexical/code";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getNearestNodeFromDOMNode, isDOMNode } from "lexical";
+import { useEffect, useEffectEvent } from "react";
+
+import { useCopyToClipboard } from "@/hooks/ui/useCopyToClipboard";
+
+import { COPY_BUTTON_CLASS } from "./CorkCodeNode";
+
+// Click-triggered copy-to-clipboard for the button `CorkCodeNode` overlays
+// inside the dark code well's top-right corner (see `.cork-code-block-code-area`
+// in `CorkCodeNode.ts`'s header comment). Delegated on the editor root by
+// class name — mirroring `FloatingCodeLanguageEditorPlugin`'s language tab —
+// rather than a listener attached inside `CorkCodeNode.createDOM`: that file
+// only describes DOM *shape*, plugins own *behavior* (see its header
+// comment).
+//
+// `codeNode.getTextContent()` (NOT the DOM's `Element.textContent`) is the
+// only correct source for the copied string. A code block's line breaks are
+// represented as `LineBreakNode` children (or, pre-highlight, literal "\n"
+// inside a single TextNode) — never as literal "\n" characters next to a
+// `<br>` — and `<br>` elements contribute nothing to `Element.textContent`.
+// Reading the live DOM directly would silently concatenate every line into
+// one, losing every line break. `getTextContent()` normalizes all of that to
+// real "\n" characters (see `CodeBlockEscapePlugin.ts`'s own comment on the
+// exact same fact, verified against `@lexical/code-core`'s own test suite),
+// so it always returns the exact source text, however the lines happen to
+// be represented at the moment of the click.
+export function CodeBlockCopyPlugin(): null {
+  const [editor] = useLexicalComposerContext();
+  const copyToClipboard = useCopyToClipboard();
+
+  // `preventDefault` on mousedown so clicking the button doesn't shift native
+  // focus/selection into the editor first — same reason the tab's own click
+  // handling does this in `FloatingCodeLanguageEditorPlugin`.
+  const onMouseDown = useEffectEvent((e: MouseEvent) => {
+    const target = e.target;
+    if (!isDOMNode(target) || !(target instanceof Element)) return;
+    if (target.closest(`.${COPY_BUTTON_CLASS}`) != null) {
+      e.preventDefault();
+    }
+  });
+
+  const onClick = useEffectEvent((e: MouseEvent) => {
+    const target = e.target;
+    if (!isDOMNode(target) || !(target instanceof Element)) return;
+    const button = target.closest(`.${COPY_BUTTON_CLASS}`);
+    if (button == null) return;
+    e.preventDefault();
+
+    const text = editor.read(() => {
+      const node = $getNearestNodeFromDOMNode(button);
+      return $isCodeNode(node) ? node.getTextContent() : null;
+    });
+    if (text == null) return;
+
+    copyToClipboard(text, {
+      success: "Copied code block to clipboard",
+      failure: "Failed to copy code block to clipboard",
+    });
+  });
+
+  useEffect(() => {
+    return editor.registerRootListener((rootElement) => {
+      if (rootElement != null) {
+        const down = (e: MouseEvent) => onMouseDown(e);
+        const click = (e: MouseEvent) => onClick(e);
+        rootElement.addEventListener("mousedown", down);
+        rootElement.addEventListener("click", click);
+        return () => {
+          rootElement.removeEventListener("mousedown", down);
+          rootElement.removeEventListener("click", click);
+        };
+      }
+    });
+  }, [editor]);
+
+  return null;
+}

src/components/molecules/MarkdownEditor/CodeBlockCopyPlugin.ts

@@ -1,8 +1,10 @@
 import { $createCodeNode } from "@lexical/code";
+import { Copy } from "lucide-react";
 import { describe, expect, test } from "vitest";
+import { render } from "vitest-browser-react";
 
 import { createTestHeadlessEditor, renderTestEditor } from "./__tests__/utils";
-import { CorkCodeNode } from "./CorkCodeNode";
+import { $createCopyIcon, CorkCodeNode } from "./CorkCodeNode";
 
 describe("CorkCodeNode (language chip)", () => {
   // ```js fence → wrapper <div> contains a <button> tab (the tab IS the
@@ -204,3 +206,47 @@ describe("CorkCodeNode (HTML export)", () => {
     );
   });
 });
+
+// `$createCopyIcon` hand-transcribes `lucide-react`'s `Copy` icon into raw DOM
+// (createDOM runs outside React, so the real component isn't directly usable
+// there) — this pins that transcription against the ACTUAL rendered output of
+// the real `lucide-react` `Copy` component, so a future `lucide-react` upgrade
+// that redraws the icon (changes the rect/path data) fails this test instead
+// of silently drifting the button's shape out of sync with every other
+// lucide-react icon in the app.
+describe("CorkCodeNode (copy icon fidelity)", () => {
+  test("$createCopyIcon's markup matches lucide-react's real Copy icon", async () => {
+    await render(<Copy />);
+    // `render` mounts into `document.body` (cleaned up between tests by
+    // `vitest-browser-react`'s own afterEach) — no other test in this file
+    // renders a bare `lucide-react` icon directly, so this is unambiguous.
+    const reference = document.querySelector("svg.lucide-copy");
+    if (!(reference instanceof SVGSVGElement)) {
+      throw new Error("expected lucide-react's Copy icon to render an <svg>");
+    }
+
+    const built = $createCopyIcon();
+
+    expect(built.getAttribute("viewBox")).toBe(reference.getAttribute("viewBox"));
+
+    const referenceChildren = Array.from(reference.children);
+    const builtChildren = Array.from(built.children);
+    expect(builtChildren).toHaveLength(referenceChildren.length);
+
+    // Only the geometry-defining attributes are compared — `class`,
+    // `aria-hidden`, and sizing (`width`/`height`, controlled by this app's
+    // own CSS rather than SVG attributes) are deliberate, cosmetic
+    // differences from the raw component output, not drift risks. `d` (path)
+    // and `width`/`height`/`x`/`y`/`rx`/`ry` (rect) are exactly what a
+    // lucide-react redraw would change.
+    const GEOMETRY_ATTRS = ["d", "x", "y", "width", "height", "rx", "ry"];
+    for (const [i, referenceChild] of referenceChildren.entries()) {
+      const builtChild = builtChildren[i];
+      expect(builtChild.tagName).toBe(referenceChild.tagName);
+      for (const attr of GEOMETRY_ATTRS) {
+        if (!referenceChild.hasAttribute(attr)) continue;
+        expect(builtChild.getAttribute(attr)).toBe(referenceChild.getAttribute(attr));
+      }
+    }
+  });
+});