Clipboard - Lumora

Living Documentation

Clipboard patterns for fast copy actions, safe sanitization, and clear feedback

Clipboard UX should be explicit and predictable. This page documents practical copy patterns, payload cleanup, and fallback behavior so users always know what was copied and when it succeeded.

One-click copy Sanitized output Multi-format payloads Toast feedback

Catalog Blocks 6 Variants, playground, rules, sanitization, accessibility, snippets

Copy Modes 4 Plain text, HTML-safe text, JSON pretty, URL-safe

Interaction Toggles 2 Trim whitespace and completion feedback

Preview State Plain text · trim on Updated live from the playground

1. Variant Matrix

Reusable clipboard variants for admin workflows

User-facing copy actions

Developer payload modes

2. Clipboard Playground

Configure copy behavior on the left and inspect the final payload on the right

Copy mode

Source payload

Trim whitespace

Show success feedback

Plain text 0 chars

Plain payload with whitespace trimming enabled.

Live output

Ready

Processed value that will be copied:

Recent Copies

No copies yet.

3. Copy Rules

Make clipboard behavior deterministic and trustworthy

Action design

Label copy targets clearly: key, URL, token, JSON payload.
Preview transformed output before writing to clipboard.
Confirm success quickly with non-blocking feedback.

Failure handling

Handle rejected permission gracefully.
Offer legacy fallback when Clipboard API is unavailable.
Avoid silent failures in mission-critical workflows.

4. Sanitization

Normalize risky payloads before copying

HTML-safe mode

Script tags are stripped and only safe text is copied to reduce clipboard risk in admin surfaces.

JSON mode

Valid JSON is pretty-printed for readability. Invalid JSON stays unchanged so no user data is lost.

5. Accessibility & Keyboard

Copy actions should stay clear for keyboard and assistive tech

Announce status

Use short success/error messages and live regions so assistive technologies confirm copy completion.

Control clarity

Prefer labeled buttons instead of icon-only triggers for primary clipboard actions.

6. Real-use Snippets

Copy-ready clipboard utilities and fallback logic

Clipboard API

async function copyValue(value) {
  await navigator.clipboard.writeText(value);
}

Fallback Copy

function legacyCopy(value) {
  const input = document.createElement('textarea');
  input.value = value;
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  input.remove();
}

Sanitize HTML

function sanitizeHtml(value) {
  return value.replace(/]*>[\s\S]*?<\/script>/gi, '').trim();
}