fix: pending review and flag review show parsed_text

ui/src/common/interface.ts

@@ -620,6 +620,8 @@ export interface BaseReviewItem {
   answer_count: number;
   answer_accepted?: boolean;
   flag_id: string;
+  url_title: string;
+  parsed_text: string;
 }
 
 export interface FlagReviewItem extends BaseReviewItem {

ui/src/pages/Review/components/FlagContent/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useState, useRef } from 'react';
 import { Card, Alert, Stack, Button } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -6,7 +6,13 @@ import { Link } from 'react-router-dom';
 import classNames from 'classnames';
 
 import { getFlagReviewPostList, putFlagReviewAction } from '@/services';
-import { BaseUserCard, Tag, FormatTime } from '@/components';
+import {
+  BaseUserCard,
+  Tag,
+  FormatTime,
+  ImgViewer,
+  htmlRender,
+} from '@/components';
 import { scrollToDocTop } from '@/utils';
 import type * as Type from '@/common/interface';
 import { ADMIN_LIST_STATUS } from '@/common/constants';
@@ -19,6 +25,7 @@ interface IProps {
 
 const Index: FC<IProps> = ({ refreshCount }) => {
   const { t } = useTranslation('translation', { keyPrefix: 'page_review' });
+  const ref = useRef<HTMLDivElement>(null);
   const [noTasks, setNoTasks] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [page, setPage] = useState(1);
@@ -86,6 +93,14 @@ const Index: FC<IProps> = ({ refreshCount }) => {
       });
   };
 
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    htmlRender(ref.current);
+  }, [ref.current]);
+
   const {
     object_type,
     submitter_user,
@@ -155,7 +170,13 @@ const Index: FC<IProps> = ({ refreshCount }) => {
             </>
           )}
           <div className="small font-monospace">
-            {flagItemData?.original_text}
+            <ImgViewer>
+              <article
+                ref={ref}
+                className="fmt text-break text-wrap"
+                dangerouslySetInnerHTML={{ __html: flagItemData?.parsed_text }}
+              />
+            </ImgViewer>
           </div>
           <div className="d-flex flex-wrap align-items-center justify-content-between mt-4">
             <div>

ui/src/pages/Review/components/QueuedContent/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useState, useRef } from 'react';
 import { Card, Alert, Stack, Button } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { Link, useSearchParams } from 'react-router-dom';
@@ -6,7 +6,14 @@ import { Link, useSearchParams } from 'react-router-dom';
 import classNames from 'classnames';
 
 import { getPendingReviewPostList, putPendingReviewAction } from '@/services';
-import { BaseUserCard, Tag, FormatTime, Icon } from '@/components';
+import {
+  BaseUserCard,
+  Tag,
+  FormatTime,
+  Icon,
+  ImgViewer,
+  htmlRender,
+} from '@/components';
 import { scrollToDocTop } from '@/utils';
 import type * as Type from '@/common/interface';
 import { ADMIN_LIST_STATUS } from '@/common/constants';
@@ -20,6 +27,7 @@ const Index: FC<IProps> = ({ refreshCount }) => {
   const [urlSearch, setUrlSearchParams] = useSearchParams();
   const objectId = urlSearch.get('objectId') || '';
   const { t } = useTranslation('translation', { keyPrefix: 'page_review' });
+  const ref = useRef<HTMLDivElement>(null);
   const [noTasks, setNoTasks] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [page, setPage] = useState(1);
@@ -56,6 +64,14 @@ const Index: FC<IProps> = ({ refreshCount }) => {
     });
   };
 
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    htmlRender(ref.current);
+  }, [ref.current]);
+
   useEffect(() => {
     queryNextOne(page, objectId);
   }, []);
@@ -140,7 +156,13 @@ const Index: FC<IProps> = ({ refreshCount }) => {
             </>
           )}
           <div className="small font-monospace">
-            {flagItemData?.original_text}
+            <ImgViewer>
+              <article
+                ref={ref}
+                className="fmt text-break text-wrap"
+                dangerouslySetInnerHTML={{ __html: flagItemData?.parsed_text }}
+              />
+            </ImgViewer>
           </div>
           <div className="d-flex flex-wrap align-items-center justify-content-between mt-4">
             <div>

ui/src/pages/Review/utils/generateData.ts

@@ -15,21 +15,21 @@ export default (data: any) => {
     question_id = '',
     answer_id = '',
     comment_id = '',
-    title = '',
+    url_title = '',
   } = data;
   let itemLink = '';
   let itemId = '';
   let itemTimePrefix = '';
 
   if (object_type === 'question') {
-    itemLink = pathFactory.questionLanding(String(object_id), title);
+    itemLink = pathFactory.questionLanding(String(object_id), url_title);
     itemId = String(question_id);
     itemTimePrefix = 'asked';
   } else if (object_type === 'answer') {
     itemLink = pathFactory.answerLanding({
       // @ts-ignore
       questionId: question_id,
-      slugTitle: title,
+      slugTitle: url_title,
       answerId: String(object_id),
     });
     itemId = String(object_id);
@@ -43,7 +43,7 @@ export default (data: any) => {
     } else {
       itemLink = `${pathFactory.questionLanding(
         String(question_id),
-        title,
+        url_title,
       )}?commentId=${comment_id}`;
     }
     itemId = String(comment_id);