fix(copy-code): improve error handling and button feedback

Author: javatcoding1

src/utils/MarkdownRenderer.tsx

@@ -9,6 +9,7 @@ import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import { h } from 'hastscript';
+import { initCodeCopy } from '@/utils/copy-code';
 
 // Type definitions
 interface MarkdownRendererProps {
@@ -226,35 +227,7 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
     }
   }, []);
 
-  const handleCopyClick = useCallback(async (e: MouseEvent) => {
-    const button = (e.target as HTMLElement).closest(
-      '.copy-code-btn',
-    ) as HTMLButtonElement | null;
-    if (!button) return;
-
-    const code = button.getAttribute('data-code') || '';
-
-    try {
-      await navigator.clipboard.writeText(code);
-      const successMessage = button.nextElementSibling as HTMLElement;
-      if (successMessage) {
-        successMessage.classList.remove('hidden');
-        successMessage.classList.add('flex');
-        setTimeout(() => {
-          successMessage.classList.add('hidden');
-          successMessage.classList.remove('flex');
-        }, 2000);
-      }
-    } catch {
-      const textArea = document.createElement('textarea');
-      textArea.value = code;
-      textArea.style.cssText = 'position:fixed;opacity:0;';
-      document.body.appendChild(textArea);
-      textArea.select();
-      document.execCommand('copy');
-      document.body.removeChild(textArea);
-    }
-  }, []);
+
 
   const handleAnchorClick = useCallback((e: MouseEvent) => {
     const target = e.target as HTMLElement;
@@ -281,13 +254,11 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
   }, []);
 
   useEffect(() => {
-    document.addEventListener('click', handleCopyClick);
     document.addEventListener('click', handleAnchorClick);
     return () => {
-      document.removeEventListener('click', handleCopyClick);
       document.removeEventListener('click', handleAnchorClick);
     };
-  }, [handleCopyClick, handleAnchorClick]);
+  }, [handleAnchorClick]);
 
   useEffect(() => {
     if (setZoomableImages) {
@@ -296,6 +267,15 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
     }
   }, [processedContent, setZoomableImages]);
 
+  // Initialize copy functionality when content changes
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      initCodeCopy();
+    }, 100); // Small delay to ensure DOM is updated
+
+    return () => clearTimeout(timeoutId);
+  }, [processedContent]);
+
   useEffect(() => {
     scrollToAnchor();
     const handlePopState = () => {
@@ -403,9 +383,9 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
                 {language}
               </span>
             </div>
-            <div className="flex items-center space-x-2">
+            <div className="flex items-center">
               <button
-                className="copy-code-btn bg-gray-200 hover:bg-gray-300 text-gray-700  text-xs px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-2 hover:scale-105 shadow-sm hover:shadow-md"
+                className="copy-code-btn bg-gray-200 hover:bg-gray-300 text-gray-700 text-xs px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-2 hover:scale-105 shadow-sm hover:shadow-md"
                 data-code={codeText}
                 aria-label="Copy code to clipboard"
               >
@@ -424,9 +404,6 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
                 </svg>
                 <span className="font-medium">Copy</span>
               </button>
-              <div className="copy-success-message hidden items-center space-x-2 bg-green-100 text-green-800 text-xs px-4 py-2 rounded-lg border border-green-200">
-                <span className="font-medium">Copied!</span>
-              </div>
             </div>
           </div>
           <div className="overflow-x-auto">

src/utils/copy-code.ts

@@ -1,10 +1,10 @@
 /**
- * Copy code functionality for code blocks
- * Simplified and optimized version
+ * Copy code functionality for code blocks with user-friendly feedback
  */
 
 /**
  * Handle click on copy button with unified clipboard handling
+ * @param event - The click event from the copy button
  */
 function handleCopyClick(event: Event): void {
   event.preventDefault();
@@ -13,55 +13,76 @@ function handleCopyClick(event: Event): void {
   const button = event.currentTarget as HTMLElement;
   const codeContent = button.getAttribute('data-code');
 
-  if (!codeContent) {
-    console.error('No code content found to copy');
+  if (!codeContent || codeContent.trim() === '') {
+    showErrorMessage(button);
     return;
   }
 
   copyToClipboard(codeContent, button);
 }
 
-/**
- * Unified clipboard copy with fallback
- */
-async function copyToClipboard(
-  text: string,
-  button: HTMLElement,
-): Promise<void> {
+async function copyToClipboard(text: string, button: HTMLElement): Promise<void> {
   try {
     await navigator.clipboard.writeText(text);
     showSuccessMessage(button);
   } catch {
     // Fallback for older browsers
     const textarea = document.createElement('textarea');
     textarea.value = text;
-    textarea.style.cssText =
-      'position:fixed;left:-999999px;top:-999999px;opacity:0;';
-
+    textarea.style.cssText = 'position:fixed;left:-999999px;top:-999999px;opacity:0;';
     document.body.appendChild(textarea);
     textarea.select();
-
     const success = document.execCommand('copy');
     document.body.removeChild(textarea);
-
-    if (success) showSuccessMessage(button);
+    
+    if (success) {
+      showSuccessMessage(button);
+    } else {
+      showErrorMessage(button);
+    }
   }
 }
 
-/**
- * Show success message
- */
 function showSuccessMessage(button: HTMLElement): void {
-  const successMessage = button.nextElementSibling as HTMLElement;
-  if (successMessage?.classList.contains('copy-success-message')) {
-    successMessage.classList.remove('hidden');
-    setTimeout(() => successMessage.classList.add('hidden'), 2000);
-  }
+  const originalContent = button.innerHTML;
+  const originalClasses = button.className;
+  
+  button.className = 'copy-code-btn bg-green-100 text-green-800 text-xs px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-2 shadow-sm border border-green-200';
+  button.innerHTML = `
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+    </svg>
+    <span class="font-medium">Copied!</span>
+  `;
+  button.setAttribute('disabled', 'true');
+  
+  setTimeout(() => {
+    button.className = originalClasses;
+    button.innerHTML = originalContent;
+    button.removeAttribute('disabled');
+  }, 2000);
+}
+
+function showErrorMessage(button: HTMLElement): void {
+  const originalContent = button.innerHTML;
+  const originalClasses = button.className;
+  
+  button.className = 'copy-code-btn bg-red-100 text-red-800 text-xs px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-2 shadow-sm border border-red-200';
+  button.innerHTML = `
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+    </svg>
+    <span class="font-medium">Failed!</span>
+  `;
+  button.setAttribute('disabled', 'true');
+  
+  setTimeout(() => {
+    button.className = originalClasses;
+    button.innerHTML = originalContent;
+    button.removeAttribute('disabled');
+  }, 2500);
 }
 
-/**
- * Initialize copy code functionality
- */
 export function initCodeCopy(): void {
   document.querySelectorAll('.copy-code-btn').forEach((button) => {
     if (button instanceof HTMLElement) {
@@ -71,18 +92,11 @@ export function initCodeCopy(): void {
   });
 }
 
-// Auto-initialize when available
+// Auto-initialize
 if (typeof window !== 'undefined') {
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', initCodeCopy);
   } else {
     initCodeCopy();
   }
-
-  // Re-initialize for dynamic content
-  let timeoutId: number;
-  document.addEventListener('click', () => {
-    clearTimeout(timeoutId);
-    timeoutId = window.setTimeout(initCodeCopy, 100);
-  });
 }