Merge pull request #27 from BeyteFlow/copilot/sub-pr-24-another-one

Add HTML sanitization and error handling to MarkdownPreview

Author: naheel0

package-lock.json

@@ -18,6 +18,7 @@
     "react-dom": "19.2.4",
     "react-markdown": "^10.1.0",
     "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {

package.json

@@ -3,17 +3,23 @@
 import React, { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import rehypeRaw from 'rehype-raw'; // Add this
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
 import { Copy, Check, FileCode,  } from 'lucide-react';
 
 export const MarkdownPreview = ({ content }: { content: string }) => {
   const [view, setView] = useState<'code' | 'preview'>('preview');
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async () => {
-    await navigator.clipboard.writeText(content);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('Failed to copy to clipboard:', error);
+      setCopied(false);
+    }
   };
 
   if (!content) return null;
@@ -70,7 +76,7 @@ export const MarkdownPreview = ({ content }: { content: string }) => {
           <div className="preview-content">
             <ReactMarkdown 
               remarkPlugins={[remarkGfm]} 
-              rehypePlugins={[rehypeRaw]} 
+              rehypePlugins={[rehypeRaw, rehypeSanitize]} 
             >
               {content}
             </ReactMarkdown>