Add markdown support for Q&A (#2324)

src/components/QuestionAndAnswer/Answer/AnswerBody/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable i18next/no-literal-string */
 import React, { useEffect, useState } from 'react';
 
+import { MilkdownProvider } from '@milkdown/react';
 import clipboardCopy from 'clipboard-copy';
 import useTranslation from 'next-translate/useTranslation';
 import {
@@ -13,6 +14,7 @@ import {
 
 import styles from './AnswerBody.module.scss';
 
+import MarkdownEditor from '@/components/MarkdownEditor';
 import Button, { ButtonSize, ButtonVariant } from '@/dls/Button/Button';
 import CopyLinkIcon from '@/icons/copy-link-new.svg';
 import FacebookIcon from '@/icons/fb.svg';
@@ -76,11 +78,15 @@ const AnswerBody: React.FC<Props> = ({ question }) => {
     <>
       <div className={styles.answerBody}>
         <p className={styles.header}>{t('q-and-a.answer')}</p>
-        <div className={styles.text}>{question?.answers[0]?.body}</div>
+        <MilkdownProvider>
+          <MarkdownEditor isEditable={false} defaultValue={question?.answers[0]?.body} />
+        </MilkdownProvider>
         {question?.summary && (
           <>
             <p className={styles.header}>{t('q-and-a.summary')}</p>
-            <div className={styles.text}>{question?.summary}</div>
+            <MilkdownProvider>
+              <MarkdownEditor isEditable={false} defaultValue={question?.summary} />
+            </MilkdownProvider>
           </>
         )}
         {question?.references && (