Skip to content

feat(web): one-click copy button on response-viewer code blocks#98

Merged
Ark0N merged 1 commit into
Ark0N:masterfrom
TeigenZhang:feat/code-block-copy-button
May 25, 2026
Merged

feat(web): one-click copy button on response-viewer code blocks#98
Ark0N merged 1 commit into
Ark0N:masterfrom
TeigenZhang:feat/code-block-copy-button

Conversation

@TeigenZhang
Copy link
Copy Markdown
Contributor

Adds a one-click copy button to every fenced code block in the response viewer.

  • Each code block is wrapped in a positioned .rv-code-wrap toolbar pinned top-right, outside the <pre> scroll container so the buttons stay put during horizontal scroll. All blocks get a copy button; ASCII diagrams keep their existing line-wrap toggle alongside it.
  • _copyText() prefers the async Clipboard API and falls back to a hidden-textarea + execCommand path, so copy works over plain HTTP too.
  • The button shows a 1.5s ✓ / ✕ feedback state after each attempt.

Test plan

  • esbuild parses app.js / styles.css cleanly
  • Verified in the UI: copy button appears on code blocks, copies the raw source, shows ✓ on success (both HTTPS and plain HTTP)

🤖 Generated with Claude Code

Wrap every fenced code block in the response viewer with a positioned
.rv-code-wrap toolbar (outside the <pre> scroll container so buttons stay put
during horizontal scroll). All blocks get a copy button; ASCII diagrams keep
their existing line-wrap toggle alongside it.

_copyText() prefers the async Clipboard API and falls back to a hidden-textarea
+ execCommand path, so copy works over plain HTTP too. The button shows a 1.5s
✓ / ✕ feedback state after each attempt.
@Ark0N
Copy link
Copy Markdown
Owner

Ark0N commented May 25, 2026

Thank you very much for this — really clean, well-scoped contribution! 🙏

I reviewed it end to end and everything checks out:

  • The DOM restructure preserves the existing diagram line-wrap toggle: diagrams keep the rv-diagram-wrap class, so the delegated handler's closest('.rv-diagram-wrap') / querySelector('pre.rv-diagram') still resolve.
  • CSS specificity is correct — the new .rv-code-wrap.rv-diagram-wrap > pre.rv-diagram rule properly widens the padding reserve to 76px for the two-button case, and .rv-code-actions .rv-wrap-toggle { position: static } neatly re-flows the toggle into the flex toolbar.
  • The execCommand fallback in _copyText() is a nice touch — copy works over plain HTTP (tunnel) too.
  • Reusing the glyph keeps it visually consistent with the file-preview copy button.

CI is green (Typecheck & Lint). Merging now. Thanks again! 🎉

@Ark0N Ark0N merged commit 196646a into Ark0N:master May 25, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants