[root-wrapper] feat(ui): Add copy-to-clipboard button on hover for inline code snippets in blog posts

[akshatsinghai6682-sketch]

Description
This PR fixes #7790

Added a copy-to-clipboard button that appears on hover for inline code snippets in blog posts.

Changes

• Added InlineCode component in root-wrapper.js
• Copy icon 📋 appears on hover using opacity transition
• Shows ✅ confirmation for 2 seconds after copying
• Uses navigator.clipboard.writeText() API
• No change to existing inline code styling

Screenshots/Demo

Screen.Recording.2026-06-14.at.4.40.48.PM.mov

Notes for Reviewers
The InlineCode component is added to the MDXProvider components in root-wrapper.js. It wraps the existing <code> tag without modifying its styles, so all existing styling is preserved.

Signed commits

• Yes, I signed my commits.

[github-actions]

🚀 Preview deployment: https://layer5.io/pr-preview/pr-7791/

Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment here

[hortison]

Thanks!

[KatalKavya96]

@akshatsinghai6682-sketch Thanks for working on this.

I noticed two things while reviewing/testing this:

1. The emoji icons for copy/success should be replaced with the projects existing icon component or a proper SVG icon so the UI remains consistent across browsers and themes.

2. The current copy logic uses children directly, but it does not seem to copy all inline code text reliably in some cases. A better approach would be to attach a ref to the rendered <code> element and copy codeRef.current.textContent, so the copied value matches the actual visible inline code.

Could you please update the implementation accordingly and also confirm that inline code copying works across blog/docs MDX pages without affecting existing code block rendering?

[akshatsinghai6682-sketch]

Sure @KatalKavya96 thanks for the feedback

[Bhumikagarggg]

@akshatsinghai6682-sketch Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

[akshatsinghai6682-sketch]

Sure @Bhumikagarggg i have added it is an agenda item please verify and can u plz clarify what is this meeting about and where can I get the access to its links

[akshatsinghai6682-sketch]

@KatalKavya96 Thank you for the feedback! I have addressed both the review comments:

1. Replaced emoji icons (📋 ✅) with IoIosCopy and IoIosCheckmark from @react-icons/all-files which is already used in the project for consistency.
2. Added a ref to the <code> element and using codeRef.current?.textContent for copying the actual visible text instead of children.

Screen.Recording.2026-06-14.at.4.40.48.PM.mov

Please take a look!