@clipboard

Copy text to the clipboard. Returns the promise from navigator.clipboard.writeText, so you can react when the copy has landed.

Syntax

@clipboard('plain text')
@clipboard($code)
@clipboard('SGVsbG8=', true)   // base64, decoded first

Copy a signal

copy and confirm

Copy copied!

<div data-signals="{ code: 'SIGMX-2026', copied: false }" class="row">
  <input data-bind:code>
  <button data-on:click="@clipboard($code).then(() => $copied = true); setTimeout(() => $copied = false, 1200)">Copy</button>
  <span data-show="$copied">copied!</span>
</div>

Copy an element’s text

Read the text from the DOM with data-ref, so the button and the content stay decoupled.

copy a code block

npm install sigmx

copy command

<div data-signals="{ done: false }">
  <pre data-ref:snippet style="padding:.5rem;border:1px solid var(--sl-color-hairline);border-radius:.4rem">npm install sigmx</pre>
  <button data-on:click="@clipboard($snippet.textContent).then(() => $done = true)" data-text="$done ? 'copied ✓' : 'copy command'">copy command</button>
</div>

Base64 for awkward text

Text with quotes, newlines or markup is easier to embed in an attribute as base64; the second argument decodes it before copying.

base64

copy a two-line quote then paste somewhere

<div class="row">
  <button data-on:click="@clipboard('SGUgc2FpZCAiaGkiLA0KdGhlbiBsZWZ0Lg==', true)">copy a two-line quote</button> <span class="muted">then paste somewhere</span>
</div>

Notes

The clipboard API needs a secure context (HTTPS or localhost) and a user gesture; call it from an event handler.

Register

import { clipboard } from 'sigmx/plugins'

Registering clipboard adds 96 bytes brotli (119 gzip, 200 minified) on top of the core. See bundle sizes.