fix: fallback to older copy method for Safari markdown copying

Author: jamiehenson

src/components/Layout/mdx/PageHeader.tsx

@@ -44,6 +44,27 @@ export const PageHeader: React.FC<PageHeaderProps> = ({ title, intro }) => {
     [activePage.languages, product],
   );
 
+  // This sucks, but is necessary to support Safari
+  const fallbackCopyToClipboard = (text: string): boolean => {
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    textArea.style.top = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    try {
+      const successful = document.execCommand('copy');
+      document.body.removeChild(textArea);
+      return successful;
+    } catch (err) {
+      document.body.removeChild(textArea);
+      return false;
+    }
+  };
+
   const handleCopyMarkdown = useCallback(async () => {
     try {
       const response = await fetch(`${location.pathname}.md`);
@@ -58,17 +79,31 @@ export const PageHeader: React.FC<PageHeaderProps> = ({ title, intro }) => {
       }
 
       const content = await response.text();
-      await navigator.clipboard.writeText(content);
-      setCopyTooltipContent('Copied!');
-      setCopyTooltipOpen(true);
-      setTimeout(() => {
-        setCopyTooltipOpen(false);
-        setTimeout(() => setCopyTooltipContent('Copy'), 150);
-      }, 2000);
 
-      track('markdown_copy_link_clicked', {
-        location: location.pathname,
-      });
+      // Try modern clipboard API first, fallback to execCommand for Safari
+      let copySuccessful = false;
+      try {
+        await navigator.clipboard.writeText(content);
+        copySuccessful = true;
+      } catch (clipboardError) {
+        // Safari or other browsers that block clipboard access after async operations
+        copySuccessful = fallbackCopyToClipboard(content);
+      }
+
+      if (copySuccessful) {
+        setCopyTooltipContent('Copied!');
+        setCopyTooltipOpen(true);
+        setTimeout(() => {
+          setCopyTooltipOpen(false);
+          setTimeout(() => setCopyTooltipContent('Copy'), 150);
+        }, 2000);
+
+        track('markdown_copy_link_clicked', {
+          location: location.pathname,
+        });
+      } else {
+        throw new Error('Both clipboard methods failed');
+      }
     } catch (error) {
       console.error('Failed to copy markdown:', error);
       setCopyTooltipContent('Error!');