md

src/components/ui/MarkdownText/MarkdownText.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown, { type Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 
 import styles from "./MarkdownText.module.scss";
@@ -14,35 +14,35 @@ export default function MarkdownText({
   content,
   className,
 }: MarkdownTextProps) {
+  const components: Components = {
+    h1: ({ ...props }) => <h1 className={styles.h1} {...props} />,
+    h2: ({ ...props }) => <h2 className={styles.h2} {...props} />,
+    h3: ({ ...props }) => <h3 className={styles.h3} {...props} />,
+    h4: ({ ...props }) => <h4 className={styles.h4} {...props} />,
+    h5: ({ ...props }) => <h5 className={styles.h5} {...props} />,
+    h6: ({ ...props }) => <h6 className={styles.h6} {...props} />,
+    p: ({ ...props }) => <p className={styles.paragraph} {...props} />,
+    li: ({ ...props }) => <li className={styles.listItem} {...props} />,
+    strong: ({ ...props }) => <strong className={styles.bold} {...props} />,
+    em: ({ ...props }) => <em className={styles.italic} {...props} />,
+    pre: ({ ...props }) => <pre className={styles.codeBlock} {...props} />,
+    // @ts-expect-error - inline prop is provided by react-markdown
+    code: ({ inline, ...props }) =>
+      inline ? (
+        <code className={styles.inlineCode} {...props} />
+      ) : (
+        <code className={styles.code} {...props} />
+      ),
+    blockquote: ({ ...props }) => <blockquote className={styles.blockquote} {...props} />,
+    hr: ({ ...props }) => <hr className={styles.hr} {...props} />,
+    a: ({ ...props }) => (
+      <a className={styles.link} target="_blank" rel="noopener noreferrer" {...props} />
+    ),
+  };
+
   return (
     <div className={`${styles.markdown} ${className || ""}`}>
-      <ReactMarkdown
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
-        remarkPlugins={[remarkGfm]}
-        components={{
-          h1: ({ ...props }) => <h1 className={styles.h1} {...props} />,
-          h2: ({ ...props }) => <h2 className={styles.h2} {...props} />,
-          h3: ({ ...props }) => <h3 className={styles.h3} {...props} />,
-          h4: ({ ...props }) => <h4 className={styles.h4} {...props} />,
-          h5: ({ ...props }) => <h5 className={styles.h5} {...props} />,
-          h6: ({ ...props }) => <h6 className={styles.h6} {...props} />,
-          p: ({ ...props }) => <p className={styles.paragraph} {...props} />,
-          li: ({ ...props }) => <li className={styles.listItem} {...props} />,
-          strong: ({ ...props }) => <strong className={styles.bold} {...props} />,
-          em: ({ ...props }) => <em className={styles.italic} {...props} />,
-          pre: ({ ...props }) => <pre className={styles.codeBlock} {...props} />,
-          code: ({ inline, ...props }: any) =>
-            inline ? (
-              <code className={styles.inlineCode} {...props} />
-            ) : (
-              <code className={styles.code} {...props} />
-            ),
-          blockquote: ({ ...props }) => <blockquote className={styles.blockquote} {...props} />,
-          hr: ({ ...props }) => <hr className={styles.hr} {...props} />,
-          a: ({ ...props }) => (
-            <a className={styles.link} target="_blank" rel="noopener noreferrer" {...props} />
-          ),
-        }}
-      >
         {content}
       </ReactMarkdown>
     </div>