fixed double rendering

bounswe · Dec 10, 2024 · 9e1c125 · 9e1c125
1 parent 72a49b1
commit 9e1c125
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 25 deletions.
diff --git a/frontend/src/components/ContentWithSnippets.tsx b/frontend/src/components/ContentWithSnippets.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown, { Components } from "react-markdown";
 import { CodeSnippet } from "./CodeSnippet";
+import CustomAnchor from "./CustomAnchor";
 
 interface ContentWithSnippetsProps {
   content: string;
@@ -11,7 +12,11 @@ export const ContentWithSnippets: React.FC<ContentWithSnippetsProps> = ({
 }) => {
   const parseContent = (text: string) => {
     const codeBlockRegex = /```(\w+(?:-exec)?)\n([\s\S]*?)```/g;
-    const parts = [];
+    const parts: {
+      type: "text" | "code";
+      content: string;
+      language?: string;
+    }[] = [];
     let lastIndex = 0;
     let match;
 
@@ -27,18 +32,24 @@ export const ContentWithSnippets: React.FC<ContentWithSnippetsProps> = ({
       if (lang.endsWith("-exec")) {
         parts.push({
           type: "code",
+          content: code.trim(),
           language: lang.replace("-exec", ""),
-          code: code.trim(),
         });
       } else {
-        parts.push({ type: "text", content: match[0] });
+        parts.push({
+          type: "text",
+          content: match[0],
+        });
       }
 
       lastIndex = match.index + match[0].length;
     }
 
     if (lastIndex < text.length) {
-      parts.push({ type: "text", content: text.slice(lastIndex) });
+      parts.push({
+        type: "text",
+        content: text.slice(lastIndex),
+      });
     }
 
     return parts;
@@ -48,10 +59,25 @@ export const ContentWithSnippets: React.FC<ContentWithSnippetsProps> = ({
     return parseContent(content).map((part, index) => {
       if (part.type === "code" && part.language) {
         return (
-          <CodeSnippet key={index} code={part.code} language={part.language} />
+          <CodeSnippet
+            key={index}
+            code={part.content}
+            language={part.language}
+          />
         );
       }
-      return <ReactMarkdown key={index}>{part.content}</ReactMarkdown>;
+      return (
+        <ReactMarkdown
+          key={index}
+          components={
+            {
+              a: CustomAnchor,
+            } as Components
+          }
+        >
+          {part.content}
+        </ReactMarkdown>
+      );
     });
   }, [content]);
 

diff --git a/frontend/src/components/CreateAnswerForm.tsx b/frontend/src/components/CreateAnswerForm.tsx
@@ -114,18 +114,7 @@ export function CreateAnswerForm({ questionId }: CreateAnswerFormProps) {
 
       {isPreviewMode ? (
         <div className="min-h-[200px] rounded-lg border border-gray-300 bg-white p-4">
-          <div>
-            {" "}
-            <ContentWithSnippets content={content} />
-          </div>
-          {/* Render ReactMarkdown for the rest of the content */}
-          <ReactMarkdown
-            components={{
-              a: CustomAnchor,
-            }}
-          >
-            {content}
-          </ReactMarkdown>
+          <ContentWithSnippets content={content} />
         </div>
       ) : (
         <Textarea

diff --git a/frontend/src/components/CustomAnchor.tsx b/frontend/src/components/CustomAnchor.tsx
@@ -1,12 +1,17 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
 
-interface CustomAnchorProps {
+interface CustomAnchorProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   href?: string;
-  children: React.ReactNode;
+  children?: React.ReactNode; // Make children optional
 }
 
-const CustomAnchor: React.FC<CustomAnchorProps> = ({ href, children }) => {
+const CustomAnchor: React.FC<CustomAnchorProps> = ({
+  href,
+  children,
+  ...rest
+}) => {
   const navigate = useNavigate();
 
   // Return a plain span if href is not provided
@@ -28,17 +33,23 @@ const CustomAnchor: React.FC<CustomAnchorProps> = ({ href, children }) => {
     }
   };
 
-  // Display tooltip as title directly on the anchor for now, without async fetching
   return (
     <a
       href={href}
       onClick={handleClick}
       className="text-blue-500 underline"
-      title={tagMatch ? `Tag: ${tagMatch[1]}` : questionMatch ? `Question: ${questionMatch[1]}` : "Loading..."}
+      title={
+        tagMatch
+          ? `Tag: ${tagMatch[1]}`
+          : questionMatch
+            ? `Question: ${questionMatch[1]}`
+            : "Loading..."
+      }
+      {...rest} // Spread additional props
     >
       {children}
     </a>
   );
 };
 
-export default CustomAnchor;
+export default CustomAnchor;