[ @sdxc/ui/mixins ]
copyToClipboard
Copies text from an element a Message footer copy button's commandfor targets onto the system clipboard.
import { copyToClipboard } from "@sdxc/ui/mixins";Usage
Writes the text content of a Message footer copy button's commandfor
target onto the system clipboard, resolving the target fresh from the
button on every press so it stays correct even as the DOM changes.
Signature
copyToClipboard(): MixinDescriptor<HTMLButtonElement>Returns a mixin descriptor for a Message footer copy button's mix prop.
Examples
<div id="reply-1-content">{reply.text}</div>
<button
type="button"
commandfor="reply-1-content"
command={COPY_COMMAND}
aria-label={t("message.copy")}
mix={[
copyToClipboard(),
on("ui:copy", (event) => {
announce(event.success ? t("message.copied") : t("message.copyFailed"));
}),
]}
>
<CopyIcon />
</button>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
CopyEvent
Dispatched on a Message footer copy button by copyToClipboard once a clipboard write settles, carrying success and the attempted text so consumers can render their own feedback for either outcome.
new CopyEvent(success: boolean, text: string)| Property | Type | Description |
|---|---|---|
success | readonly boolean | true once the text reached the clipboard, false if the write was rejected or the platform API is unavailable. |
text | readonly string | The text copyToClipboard attempted to copy. |
COPY_COMMAND
Custom Invoker Command a Message footer copy button declares via
command={COPY_COMMAND} and commandfor, giving the pairing a genuine
invoker relationship in markup, read by copyToClipboard on click.
const COPY_COMMAND = "--copy" as const