fix: playground edit message

src/components/markdown-viewer/index.less

@@ -18,7 +18,7 @@
   h4 {
     font-weight: 700;
     font-weight: var(--font-weight-bold);
-    font-size: 14px;
+    font-size: var(--font-size-small);
   }
 
   .hj-wrapper {
@@ -50,12 +50,14 @@
       line-height: 2;
       padding-inline: 6px;
       border-bottom: 1px solid var(--ant-color-split);
+      word-break: break-word;
     }
 
     td {
       line-height: 2;
       padding-inline: 6px;
       border-bottom: 1px solid var(--ant-color-split);
+      word-break: break-word;
     }
 
     div {

src/components/markdown-viewer/index.tsx

@@ -1,7 +1,8 @@
 import { EyeOutlined } from '@ant-design/icons';
 import { Image, Typography } from 'antd';
+import { unescape } from 'lodash';
 import { TokensList, marked } from 'marked';
-import React, { Fragment } from 'react';
+import React, { Fragment, useCallback } from 'react';
 import HighlightCode from '../highlight-code';
 import './index.less';
 
@@ -34,12 +35,13 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
     'list',
     'list_item',
     'br',
-    'html'
+    'html',
+    'escape'
   ];
 
-  const renderItem = (token: any, render: any) => {
-    // console.log('token======66==', token.raw, token.type);
+  const renderItem = useCallback((token: any, render: any) => {
     if (!reDefineTypes.includes(token.type)) {
+      console.log('token======66==', token.type, token);
       return (
         <span
           dangerouslySetInnerHTML={{
@@ -53,7 +55,11 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
     if (token.tokens?.length) {
       child = render?.(token.tokens as TokensList, render);
     }
-    const text = child ? child : token.text;
+    const text = child ? child : unescape(token.text);
+
+    if (token.type === 'escape') {
+      htmlstr = text;
+    }
 
     if (token.type === 'html') {
       htmlstr = <div dangerouslySetInnerHTML={{ __html: token.text }} />;
@@ -125,7 +131,7 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
     }
 
     return htmlstr;
-  };
+  }, []);
   const renderTokens = (tokens: TokensList): any => {
     return tokens?.map((token: any, index: number) => {
       return <Fragment key={index}>{renderItem(token, renderTokens)}</Fragment>;

src/components/markdown-viewer/utils.ts

@@ -0,0 +1,16 @@
+const htmlUnescapes: Record<string, string> = {
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&#39;': "'"
+};
+
+const reEscapedHtml = /&(?:amp|lt|gt|quot|#(?:0+)?39);/g;
+const reHasEscapedHtml = RegExp(reEscapedHtml.source);
+
+export const unescape = (str = '') => {
+  return reHasEscapedHtml.test(str)
+    ? str.replace(reEscapedHtml, (entity) => htmlUnescapes[entity] || "'")
+    : str;
+};