CleanCopy: Smart Clipboard for Code Blocks

The Problem

You've seen it happen. Someone copies a terminal command from your docs:

$ npm install react
$ npm run dev

They paste it. Terminal chokes on the literal $ character. Now they think your docs are broken and you get the support ticket.

Same story with syntax highlighters that show line numbers. Users paste 1 | const x = 5 into their editor and spend five minutes wondering why it doesn't run.

Why AI Gets This Wrong

Ask for a "copy to clipboard" button and you'll get a tidy five-line snippet back. It works in a demo. It breaks the moment it touches a real codebase:

• No prompt cleaning -- $ npm install copies verbatim, dollar sign and all
• No line number stripping -- 1 | const x lands in the editor as-is
• Inline tooltip -- clips behind any overflow: hidden container or modal
• No accessibility -- keyboard-only users can't reach the button
• Hydration errors -- checking navigator.clipboard during SSR crashes Next.js
• No reduced motion -- fails WCAG for users with vestibular disorders

This component handles all of that so you don't have to.

This vs a Basic Copy Button

At a Glance

• 🔗 Two peer dependencies -- React + Lucide React (for icons)
• ♿ Accessible -- keyboard navigation, screen reader announcements, aria-live regions
• ⚛️ React 19 Strict Mode safe -- uses useSyncExternalStore for hydration-safe mounting
• 🖥️ SSR-safe -- no hydration errors in Next.js App Router
• 🔄 HTTP fallback -- document.execCommand('copy') when navigator.clipboard is unavailable

How To Use

Basic usage

import { CopyCode } from "@/components/CopyCode";
 
const code = `const greeting = "Hello!";
console.log(greeting);`;
 
<CopyCode code={code} language="typescript">
  <code>{code}</code>
</CopyCode>;

Terminal commands

Shell prompts are detected automatically from the language prop (bash, sh, zsh, shell, terminal) or by scanning the content with detectShellPrompts(). No config needed.

const terminalCode = `$ npm install next react react-dom
$ npm run dev`;
 
<CopyCode code={terminalCode} language="bash">
  <code>{terminalCode}</code>
</CopyCode>;

With a filename

<CopyCode code={code} filename="components/Button.tsx">
  <code>{code}</code>
</CopyCode>

With rehype-pretty-code

Pass the raw code string to code and the highlighted output as children. The component copies the raw string, not the rendered HTML.

pre: ({ children, ...props }) => {
  const rawCode = extractRawCode(children);
  return (
    <CopyCode code={rawCode} language={props["data-language"]}>
      {children}
    </CopyCode>
  );
};

Exported utilities

Both cleaning functions are exported for use outside the component:

import { cleanCodeForCopy, detectShellPrompts } from "@/components/CopyCode";
 
const cleaned = cleanCodeForCopy("$ npm install react", true);
// "npm install react"
 
const hasPrompts = detectShellPrompts("$ npm run dev");
// true

API Reference

Prompt cleaning reference

Line number stripping

Under the Hood

How prompt detection works

A multi-pass regex scan runs across all lines. It catches standard Unix prompts ($, >, #, %), user@host patterns (user@host:~$), and virtual environment wrappers ((venv) $). Detection is per-line, so mixed-content blocks where some lines have prompts and others are output get handled correctly. Only prompt-prefixed lines are cleaned.

Why the tooltip uses fixed positioning

Most copy buttons render their tooltip inline. Works fine until your code block sits inside a modal, sidebar, or any container with overflow: hidden. The tooltip gets clipped. Here, the tooltip renders with position: fixed and positions itself using getBoundingClientRect(). It repositions on scroll and resize via event listeners.

SSR hydration safety

navigator.clipboard doesn't exist on the server. The usual workaround, checking for it during render, causes hydration mismatches in Next.js. Instead, useSyncExternalStore safely detects client-side mounting: the server always returns false, the client returns true after hydration. The tooltip only renders client-side. The initial render always matches server output.

HTTP fallback

When navigator.clipboard isn't available (HTTP contexts, older browsers), the component creates a temporary <textarea>, selects its contents, and runs document.execCommand('copy'). The fallback is wrapped in try/catch with proper cleanup.

Keyboard interaction model

Follows WAI-ARIA button patterns. Enter and Space trigger copy. Escape dismisses the tooltip and blurs the button. Tab moves focus naturally. The tooltip uses role="tooltip" and a separate aria-live="polite" region announces the copy result to screen readers.

Accessibility

• Keyboard navigable -- Tab, Enter/Space, Escape all wired up
• aria-label updates with state ("Copy code" then "Copied!")
• aria-live="polite" region announces copy result to screen readers
• focus-visible ring for keyboard users only (no click rings)
• motion-reduce:animate-none respects reduced motion preferences

Keyboard reference

Compatibility

Who Is This For

• SaaS founders -- drop this into your app's code examples. No more support tickets about broken copy-paste.
• Documentation writers -- give readers terminal commands that work on the first paste.
• Dev bloggers -- your tutorials look sharper when the copy button handles edge cases for you.
• Course creators -- students paste clean code on the first try. Fewer "it doesn't work" messages in your inbox.
• Indie hackers -- ship a polished code block without spending a day on clipboard quirks.

FAQ

Why I Built This

I got tired of watching users paste $ npm install react and file bug reports because the terminal errored out. Every copy button I found online was the same basic navigator.clipboard.writeText wrapper -- no prompt cleaning, no line number handling, no thought given to what actually lands in the clipboard.

So I built one that handles every prompt format I've run into, strips line numbers from any major syntax highlighter, and still works over plain HTTP with a clean fallback.