Fix copy buttons on non-secure (plain http) deployments

`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.
This commit is contained in:
2026-10-21 15:22:16 +01:00
parent d9f5367270
commit 2a74c1e3e6
5 changed files with 451 additions and 6 deletions
+13
View File
@@ -0,0 +1,13 @@
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();
}, []);
}