`navigator.clipboard` only exists in secure contexts, so every copy button
threw on plain-http LAN/IP deployments and falsely reported failure.
Add copyTextToClipboard(), which uses the Clipboard API on secure origins
and falls back to a hidden textarea + `execCommand("copy")` otherwise
(restoring focus/selection and always cleaning the element up). CopyButton
now reports success only when the text actually reached the clipboard.
installClipboardFallback() polyfills a working `navigator.clipboard` on
insecure pages so twui's CodeBlock/CopySlug/Input copy icons work too,
without editing twui sources. It is installed once from AppProviders.
14 lines
417 B
TypeScript
14 lines
417 B
TypeScript
import { useEffect } from "react";
|
|
import { installClipboardFallback } from "../utils/copy-text-to-clipboard";
|
|
|
|
/**
|
|
* Installs the insecure-context clipboard fallback once the app mounts, so
|
|
* twui components calling `navigator.clipboard` directly also work over plain
|
|
* http on a LAN IP.
|
|
*/
|
|
export default function useClipboardFallback() {
|
|
useEffect(() => {
|
|
installClipboardFallback();
|
|
}, []);
|
|
}
|