Merge branch 'ui-v0.3' into 'test'

fix: abstract escape character handling

See merge request opensource/answer!221

ui/config-overrides.js

@@ -35,12 +35,12 @@ module.exports = {
       const config = configFunction(proxy, allowedHost);
       config.proxy = {
         "/answer": {
-          target: "http://10.0.20.88:8080/",
+          target: "http://10.0.10.98:2060",
           changeOrigin: true,
           secure: false
         },
         "/installation": {
-          target: "http://10.0.20.88:8080/",
+          target: "http://10.0.10.98:2060",
           changeOrigin: true,
           secure: false
         }

ui/src/pages/Admin/Answers/index.tsx

@@ -16,6 +16,7 @@ import { ADMIN_LIST_STATUS } from '@/common/constants';
 import { useEditStatusModal } from '@/hooks';
 import * as Type from '@/common/interface';
 import { useAnswerSearch, changeAnswerStatus } from '@/services';
+import { escapeRemove } from '@/utils';
 
 import '../index.scss';
 
@@ -140,12 +141,10 @@ const Answers: FC = () => {
                       )}
                     </Stack>
                     <div
-                      dangerouslySetInnerHTML={{
+                      className="text-truncate-2 fs-14"
-                        __html: li.description,
+                      style={{ maxWidth: '30rem' }}>
-                      }}
+                      {escapeRemove(li.description)}
-                      className="last-p text-truncate-2 fs-14"
+                    </div>
-                      style={{ maxWidth: '30rem' }}
-                    />
                   </Stack>
                 </td>
                 <td>{li.vote_count}</td>

ui/src/pages/Admin/Flags/index.tsx

@@ -13,6 +13,7 @@ import {
 import { useReportModal } from '@/hooks';
 import * as Type from '@/common/interface';
 import { useFlagSearch } from '@/services';
+import { escapeRemove } from '@/utils';
 
 import '../index.scss';
 
@@ -107,7 +108,7 @@ const Flags: FC = () => {
                       {li.title}
                     </a>
                     <small className="text-break text-wrap word">
-                      {li.excerpt}
+                      {escapeRemove(li.excerpt)}
                     </small>
                   </Stack>
                 </td>

ui/src/pages/Search/components/Head/index.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { following } from '@/services';
 import { tryNormalLogged } from '@/utils/guard';
+import { escapeRemove } from '@/utils';
 
 interface Props {
   data;
@@ -51,7 +52,7 @@ const Index: FC<Props> = ({ data }) => {
         <>
           {data.excerpt && (
             <p className="text-break">
-              {data.excerpt}
+              {escapeRemove(data.excerpt)}
               <Link to={`/tags/${data.slug_name}/info`}> [{t('more')}]</Link>
             </p>
           )}

ui/src/pages/Search/components/SearchItem/index.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Icon, Tag, FormatTime, BaseUserCard } from '@/components';
 import type { SearchResItem } from '@/common/interface';
+import { escapeRemove } from '@/utils';
 
 interface Props {
   data: SearchResItem;
@@ -61,7 +62,7 @@ const Index: FC<Props> = ({ data }) => {
 
       {data.object?.excerpt && (
         <p className="fs-14 text-truncate-2 mb-2 last-p text-break">
-          {data.object.excerpt}
+          {escapeRemove(data.object.excerpt)}
         </p>
       )}
 

ui/src/pages/Tags/Detail/index.tsx

@@ -8,6 +8,7 @@ import { PageTitle, FollowingTags } from '@/components';
 import { useTagInfo, useFollow } from '@/services';
 import QuestionList from '@/components/QuestionList';
 import HotQuestions from '@/components/HotQuestions';
+import { escapeRemove } from '@/utils';
 
 const Questions: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'tags' });
@@ -69,7 +70,7 @@ const Questions: FC = () => {
               </h3>
 
               <p className="text-break">
-                {tagInfo.excerpt || t('no_description')}
+                {escapeRemove(tagInfo.excerpt) || t('no_description')}
                 <Link to={`/tags/${curTagName}/info`}> [{t('more')}]</Link>
               </p>
 

ui/src/utils/common.ts

@@ -86,6 +86,22 @@ function formatUptime(value) {
   return `< 1 ${t('dates.hour')}`;
 }
 
+function escapeRemove(str) {
+  if (!str || typeof str !== 'string') return str;
+  const arrEntities = {
+    lt: '<',
+    gt: '>',
+    nbsp: ' ',
+    amp: '&',
+    quot: '"',
+    '#39': "'",
+  };
+
+  return str.replace(/&(lt|gt|nbsp|amp|quot|#39);/gi, function (all, t) {
+    return arrEntities[t];
+  });
+}
+
 export {
   getQueryString,
   thousandthDivision,
@@ -94,4 +110,5 @@ export {
   matchedUsers,
   parseUserInfo,
   formatUptime,
+  escapeRemove,
 };