Skip to content

feat(frontend): Add copy button to code blocks#13458

Merged
hieptl merged 3 commits intoOpenHands:mainfrom
VascoSch92:vasco-copy-button
Mar 20, 2026
Merged

feat(frontend): Add copy button to code blocks#13458
hieptl merged 3 commits intoOpenHands:mainfrom
VascoSch92:vasco-copy-button

Conversation

@VascoSch92
Copy link
Copy Markdown
Contributor

@VascoSch92 VascoSch92 commented Mar 18, 2026 •
edited
Loading

Summary of PR

When OH prints some code or a command in the console, it would be nice to have the option to copy it with just a button click.

Demo Screenshots/Videos

Screenshot 2026-03-18 at 11 32 16

Change Type

  • Bug fix
  • New feature
  • Breaking change
  • Refactor
  • Other (dependency update, docs, typo fixes, etc.)

Checklist

  • I have read and reviewed the code and I understand what the code is doing.
  • I have tested the code to the best of my ability and ensured it works as expected.

Fixes

Resolves #(issue)

Release Notes

  • Include this change in the Release Notes.

@openhands-agent
Add copy button to code blocks in markdown
ce7670b 
Co-authored-by: openhands <openhands@all-hands.dev>
hieptl
hieptl reviewed Mar 18, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@hieptl hieptl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello @VascoSch92,

Thank you for creating this pull request.

Could you please add tests to cover the front-end changes? That would help ensure everything is well validated.

Thank you very much! 🙏

Comment thread frontend/src/components/features/markdown/code.tsx Outdated
Comment thread frontend/src/components/features/markdown/code.tsx Outdated
@VascoSch92
Copy link
Copy Markdown
Contributor Author

VascoSch92 commented Mar 18, 2026 •
edited
Loading

Hey @hieptl

  1. Extracted CopyButton to a reusable CopyableContentWrapper
  • Moved the copy button logic out of code.tsx into frontend/src/components/shared/buttons/copyable-content-wrapper.tsx
  • Reuses the existing CopyToClipboardButton component, so both code blocks and message-level copy buttons now share the same button (consistent icon, i18n, and "copied" checkmark feedback)
  1. Show copy button only on hover
  • The copy button in code blocks is hidden by default and appears when hovering over the block
  1. Tests
  • Added copyable-content-wrapper.test.tsx — covers hidden by default, visible on hover, clipboard copy, and copied state
  • Added code.test.tsx — covers inline code (no copy button), multiline blocks, syntax-highlighted blocks, and clipboard copy

Let me know if you need/want something other.

EDIT: there is a frontend test which is failing. But I'm not sure it is because of my changes. Locally the tests are passing.

@VascoSch92 VascoSch92 requested a review from hieptl March 18, 2026 13:01
@VascoSch92 VascoSch92 changed the title feat(GUI): Add copy button to code blocks feat(frontend): Add copy button to code blocks Mar 20, 2026
hieptl
hieptl approved these changes Mar 20, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@hieptl hieptl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! 🙏

@hieptl hieptl merged commit fb776ef into OpenHands:main Mar 20, 2026
20 of 21 checks passed
@VascoSch92
Copy link
Copy Markdown
Contributor Author

VascoSch92 commented Mar 20, 2026

Thanks :-D

@mamoodi mamoodi added the release:cloud-1.18.0 Released in Cloud 1.18.0 label Mar 26, 2026 — with OpenHands AI
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@hieptl hieptl hieptl approved these changes

@amanape amanape Awaiting requested review from amanape

Assignees

No one assigned

Labels

release:cloud-1.18.0 Released in Cloud 1.18.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@VascoSch92 @hieptl @mamoodi @openhands-agent