From f9cf8a2b131ac89699bb07ec474058b7d99024fe Mon Sep 17 00:00:00 2001
From: shuai <lishuailing@sifou.com>
Date: Tue, 28 Mar 2023 15:05:03 +0800
Subject: [PATCH] fix: html render

---
 ui/src/pages/Legal/Privacy/index.tsx               | 10 ++++------
 ui/src/pages/Legal/Tos/index.tsx                   | 14 ++++++--------
 .../Questions/Detail/components/Answer/index.tsx   | 11 +++++------
 .../Questions/Detail/components/Question/index.tsx | 10 ++++------
 ui/src/pages/Questions/EditAnswer/index.tsx        |  8 ++++----
 ui/src/pages/Tags/Info/index.tsx                   |  8 ++++----
 6 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/ui/src/pages/Legal/Privacy/index.tsx b/ui/src/pages/Legal/Privacy/index.tsx
index f8fc2ace..eb36de32 100644
--- a/ui/src/pages/Legal/Privacy/index.tsx
+++ b/ui/src/pages/Legal/Privacy/index.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
 import { useLegalPrivacy } from '@/services';
+import { htmlToReact } from '@/utils';
 
 const Index: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'nav_menus' });
@@ -25,12 +26,9 @@ const Index: FC = () => {
   return (
     <>
       <h3 className="mb-4">{t('privacy')}</h3>
-      <div
-        className="fmt"
-        dangerouslySetInnerHTML={{
-          __html: privacy?.privacy_policy_parsed_text || '',
-        }}
-      />
+      <div className="fmt">
+        {htmlToReact(privacy?.privacy_policy_parsed_text || '')}
+      </div>
     </>
   );
 };
diff --git a/ui/src/pages/Legal/Tos/index.tsx b/ui/src/pages/Legal/Tos/index.tsx
index bbac2b50..1b02d74d 100644
--- a/ui/src/pages/Legal/Tos/index.tsx
+++ b/ui/src/pages/Legal/Tos/index.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
 import { useLegalTos } from '@/services';
+import { htmlToReact } from '@/utils';
 
 const Index: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'nav_menus' });
@@ -23,15 +24,12 @@ const Index: FC = () => {
     return null;
   }
   return (
-    <>
+    <div>
       <h3 className="mb-4">{t('tos')}</h3>
-      <div
-        className="fmt"
-        dangerouslySetInnerHTML={{
-          __html: tos?.terms_of_service_parsed_text || '',
-        }}
-      />
-    </>
+      <div className="fmt">
+        {htmlToReact(tos?.terms_of_service_parsed_text || '')}
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/src/pages/Questions/Detail/components/Answer/index.tsx b/ui/src/pages/Questions/Detail/components/Answer/index.tsx
index dfbefa3d..ba1a7d50 100644
--- a/ui/src/pages/Questions/Detail/components/Answer/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/Answer/index.tsx
@@ -12,7 +12,7 @@ import {
   FormatTime,
   htmlRender,
 } from '@/components';
-import { scrollToElementTop, bgFadeOut } from '@/utils';
+import { scrollToElementTop, bgFadeOut, htmlToReact } from '@/utils';
 import { AnswerItem } from '@/common/interface';
 import { acceptanceAnswer } from '@/services';
 
@@ -77,17 +77,16 @@ const Index: FC<Props> = ({
         </Alert>
       )}
       {data?.accepted === 2 && (
-        <div style={{ lineHeight: '20px' }} className="mb-3">
+        <div className="mb-3 lh-1">
           <Badge bg="success" pill>
             <Icon name="check-circle-fill me-1" />
             Best answer
           </Badge>
         </div>
       )}
-      <article
-        dangerouslySetInnerHTML={{ __html: data?.html }}
-        className="fmt text-break text-wrap"
-      />
+      <article className="fmt text-break text-wrap">
+        {htmlToReact(data?.html)}
+      </article>
       <div className="d-flex align-items-center mt-4">
         <Actions
           source="answer"
diff --git a/ui/src/pages/Questions/Detail/components/Question/index.tsx b/ui/src/pages/Questions/Detail/components/Question/index.tsx
index 254d2779..8726c5a8 100644
--- a/ui/src/pages/Questions/Detail/components/Question/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/Question/index.tsx
@@ -12,7 +12,7 @@ import {
   FormatTime,
   htmlRender,
 } from '@/components';
-import { formatCount, guard } from '@/utils';
+import { formatCount, guard, htmlToReact } from '@/utils';
 import { following } from '@/services';
 import { pathFactory } from '@/router/pathFactory';
 
@@ -106,11 +106,9 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer, isLogged }) => {
           return <Tag className="m-1" key={item.slug_name} data={item} />;
         })}
       </div>
-      <article
-        ref={ref}
-        dangerouslySetInnerHTML={{ __html: data?.html }}
-        className="fmt text-break text-wrap mt-4"
-      />
+      <article ref={ref} className="fmt text-break text-wrap mt-4">
+        {htmlToReact(data?.html)}
+      </article>
 
       <Actions
         className="mt-4"
diff --git a/ui/src/pages/Questions/EditAnswer/index.tsx b/ui/src/pages/Questions/EditAnswer/index.tsx
index 6fca48d3..92d1677c 100644
--- a/ui/src/pages/Questions/EditAnswer/index.tsx
+++ b/ui/src/pages/Questions/EditAnswer/index.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 import classNames from 'classnames';
 
-import { handleFormError, scrollToDocTop } from '@/utils';
+import { handleFormError, scrollToDocTop, htmlToReact } from '@/utils';
 import { usePageTags, usePromptWithUnload } from '@/hooks';
 import { pathFactory } from '@/router/pathFactory';
 import { Editor, EditorRef, Icon } from '@/components';
@@ -195,9 +195,9 @@ const Index = () => {
           <div className="question-content-wrap">
             <div
               ref={questionContentRef}
-              className="content position-absolute top-0 w-100"
-              dangerouslySetInnerHTML={{ __html: data?.question.html }}
-            />
+              className="content position-absolute top-0 w-100">
+              {htmlToReact(data?.question.html)}
+            </div>
             <div
               className="resize-bottom"
               style={{ maxHeight: questionContentRef?.current?.scrollHeight }}
diff --git a/ui/src/pages/Tags/Info/index.tsx b/ui/src/pages/Tags/Info/index.tsx
index 54e717c1..9ab1e112 100644
--- a/ui/src/pages/Tags/Info/index.tsx
+++ b/ui/src/pages/Tags/Info/index.tsx
@@ -16,6 +16,7 @@ import {
 } from '@/services';
 import { pathFactory } from '@/router/pathFactory';
 import { loggedUserInfoStore, toastStore } from '@/stores';
+import { htmlToReact } from '@/utils';
 
 const TagIntroduction = () => {
   const userInfo = loggedUserInfoStore((state) => state.user);
@@ -144,10 +145,9 @@ const TagIntroduction = () => {
             />
           </div>
 
-          <div
-            className="content text-break"
-            dangerouslySetInnerHTML={{ __html: tagInfo?.parsed_text }}
-          />
+          <div className="content text-break">
+            {htmlToReact(tagInfo?.parsed_text)}
+          </div>
           <div className="mt-4">
             {tagInfo?.member_actions.map((action, index) => {
               return (