fix: handle clipboard error and add copy feedback in CodeBlock (#1670)

Author: UmakanthKaspa

frontend/src/components/layout/CodeBlock.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { EditorContent, useEditor } from '@tiptap/react'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import { common, createLowlight } from 'lowlight'
@@ -27,6 +28,7 @@ type Props = {
 }
 
 const CodeBlock = ({ code }: Props) => {
+    const [copied, setCopied] = useState(false)
 
     const editor = useEditor({
         editorProps: {
@@ -44,20 +46,38 @@ const CodeBlock = ({ code }: Props) => {
         content: `<pre><code>${code}</code></pre>`
     })
 
-    const onCopy = () => {
-        navigator.clipboard.writeText(code)
+    const onCopy = async () => {
+        try {
+          if (navigator?.clipboard?.writeText) {
+            await navigator.clipboard.writeText(code)
+          } else {
+            const textarea = document.createElement('textarea')
+            textarea.value = code
+            textarea.setAttribute('readonly', '')
+            textarea.style.position = 'absolute'
+            textarea.style.left = '-9999px'
+            document.body.appendChild(textarea)
+            textarea.select()
+            document.execCommand('copy')
+            document.body.removeChild(textarea)
+          }
+
+          setCopied(true)
+          toast.success('Copied to clipboard', { duration: 800 })
+          setTimeout(() => setCopied(false), 2500)
+        } catch (err) {
+          console.error('Copy failed:', err)
+          toast.error('Failed to copy')
+        }
+      }
 
-        toast.success('Copied to clipboard', {
-            duration: 800
-        })
-    }
 
     if (!editor) return null
 
     return (
         <div className='relative'>
             <EditorContent editor={editor} />
-            <Tooltip content='Copy'>
+            <Tooltip content={copied ? 'Copied' : 'Copy'}>
                 <IconButton
                     variant='ghost'
                     size='2'
@@ -66,7 +86,7 @@ const CodeBlock = ({ code }: Props) => {
                     className='absolute right-3 top-7 text-gray-8 hover:text-gray-1'
                     onClick={onCopy}
                 >
-                    <BiCopy />
+                    {copied ? <BiClipboard /> : <BiCopy />}
                 </IconButton>
             </Tooltip>
         </div>