Skip to content

Commit c93ba2f

Browse files
authored
docs: Improve clipboard handling for Safari in LLMButtons component (#1755)
Copy to clipboard in Safari is not working correctly with async content. https://wolfgangrittner.dev/how-to-use-clipboard-api-in-safari/
1 parent 7663404 commit c93ba2f

File tree

1 file changed

+15
-6
lines changed

1 file changed

+15
-6
lines changed

website/src/components/LLMButtons.jsx

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -311,14 +311,23 @@ const onCopyAsMarkdownClick = async ({ setCopyingStatus, currentUrl }) => {
311311
try {
312312
setCopyingStatus('loading');
313313

314-
const response = await fetch(markdownUrl);
314+
// Safari requires clipboard writes to be created synchronously inside the user gesture.
315+
// We therefore pass a Promise that resolves to a Blob into ClipboardItem instead of
316+
// awaiting fetch first — otherwise Safari would reject the clipboard operation.
317+
const markdownContent = new ClipboardItem({
318+
'text/plain': fetch(markdownUrl)
319+
.then((response) => {
320+
if (!response.ok) {
321+
throw new Error(`Failed to fetch markdown: ${response.status}`);
322+
}
323+
return response.text();
324+
})
325+
.then((content) => new Blob([content], { type: 'text/plain' })),
326+
});
315327

316-
if (!response.ok) {
317-
throw new Error(`Failed to fetch markdown: ${response.status}`);
318-
}
328+
await navigator.clipboard.write([markdownContent]);
319329

320-
const markdownContent = await response.text();
321-
await navigator.clipboard.writeText(markdownContent);
330+
// Show success feedback
322331
setCopyingStatus('copied');
323332
} catch (error) {
324333
console.error('Failed to copy markdown content:', error);

0 commit comments

Comments
 (0)