fix: playground edit message

src/components/highlight-code/code-viewer.tsx

@@ -60,11 +60,14 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
 
   return (
     <pre
-      className={classNames('code-pre custome-scrollbar ', {
-        dark: props.theme === 'dark',
-        light: props.theme === 'light',
-        copyable: copyable
-      })}
+      className={classNames(
+        'code-pre custome-scrollbar custom-scrollbar-horizontal ',
+        {
+          dark: props.theme === 'dark',
+          light: props.theme === 'light',
+          copyable: copyable
+        }
+      )}
       style={{
         height: height
       }}

src/components/highlight-code/styles/index.less

@@ -12,17 +12,20 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background-color: rgba(211, 211, 220, 50%);
-      border-radius: 6px;
-
-      &:hover {
-        background-color: rgba(190, 190, 190, 100%);
-      }
+      background-color: transparent;
+      border-radius: 4px;
     }
 
     &::-webkit-scrollbar-track {
       background-color: transparent;
     }
+
+    &:hover {
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar-thumb);
+        border-radius: 4px;
+      }
+    }
   }
 
   .code-pre {
@@ -30,6 +33,10 @@
     position: relative;
     border-radius: var(--border-radius-mini);
 
+    code {
+      line-height: 1.5;
+    }
+
     &.copyable {
       padding-inline: 12px 32px;
     }

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;
+};

src/components/seal-form/auto-complete.tsx

@@ -5,7 +5,7 @@ import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
 
 const SealAutoComplete: React.FC<
-  AutoCompleteProps & SealFormItemProps & { onInput: (e: Event) => void }
+  AutoCompleteProps & SealFormItemProps & { onInput?: (e: Event) => void }
 > = (props) => {
   const {
     label,