Merge pull request #122 from ant-design/fix/MarkdownMemo

🐛 fix: fix markdown & highlight not support memo
ant-design · Dec 18, 2023 · 4b62051 · 4b62051
2 parents b618cda + fd9ff8c
commit 4b62051
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 78 deletions.
diff --git a/src/Highlight/components/HighLightJS/index.tsx b/src/Highlight/components/HighLightJS/index.tsx
@@ -5,7 +5,7 @@
  * 优先支持主流语言，没有import在代码中使用的不会打包
  */
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { HighlightProps } from '../../defalut';
 import { useHighlight } from '../../hooks/useHighlight';
 import { THEME_LIGHT } from '../../theme';
@@ -17,7 +17,7 @@ export type HighLighJSProps = Pick<
   'language' | 'children' | 'theme' | 'prefixCls' | 'lineNumber'
 >;
 
-const HighLighJS: React.FC<HighLighJSProps> = (props) => {
+const HighLighJS: React.FC<HighLighJSProps> = memo((props) => {
   const { children, lineNumber = false, theme = THEME_LIGHT, language, prefixCls } = props;
   const [codeBlock, setCodeBlock] = useState(null);
   const { styles } = useStyles(theme);
@@ -60,6 +60,6 @@ const HighLighJS: React.FC<HighLighJSProps> = (props) => {
       </table>
     </pre>
   );
-};
+});
 
 export default HighLighJS;
diff --git a/src/Highlight/components/HighLighter/index.tsx b/src/Highlight/components/HighLighter/index.tsx
@@ -8,6 +8,7 @@ import { THEME_LIGHT } from '@/Highlight/theme';
 import { STUDIO_UI_PREFIX } from '@/theme';
 import { Loading3QuartersOutlined as Loading } from '@ant-design/icons';
 import classNames from 'classnames';
+import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 import { HighlightProps } from '../../defalut';
 import { useShiki } from '../../hooks/useShiki';
@@ -19,7 +20,7 @@ export type ShikiProps = Pick<
   'language' | 'children' | 'theme' | 'prefixCls' | 'lineNumber'
 >;
 
-const HighLighter: React.FC<ShikiProps> = (props) => {
+const HighLighter: React.FC<ShikiProps> = memo((props) => {
   const {
     children,
     lineNumber = false,
@@ -52,6 +53,6 @@ const HighLighter: React.FC<ShikiProps> = (props) => {
       ) : null}
     </>
   );
-};
+});
 
 export default HighLighter;
diff --git a/src/Highlight/defalut.tsx b/src/Highlight/defalut.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { createRef } from 'react';
+import { createRef, memo } from 'react';
 import { getPrefixCls } from '../theme';
 import CopyButton from './components/CopyButton';
 import HighLighter from './components/HighLighter';
@@ -72,7 +72,7 @@ export interface HighlightProps {
   showLanguage?: boolean;
 }
 
-const HighlightBase: React.FC<HighlightProps> = (props) => {
+const HighlightBase: React.FC<HighlightProps> = memo((props) => {
   const {
     children,
     style,
@@ -118,6 +118,6 @@ const HighlightBase: React.FC<HighlightProps> = (props) => {
       </div>
     </>
   );
-};
+});
 
 export { HighlightBase };
diff --git a/src/Highlight/index.tsx b/src/Highlight/index.tsx
@@ -1,9 +1,10 @@
+import { memo } from 'react';
 import { ConfigProvider } from '../ConfigProvider';
 import { HighlightBase, HighlightProps } from './defalut';
 import { useStyles } from './style';
 import FullFeatureWrapper from './wrapper';
 
-const Highlight = (props: HighlightProps) => {
+const Highlight = memo<HighlightProps>((props: HighlightProps) => {
   const { prefixCls, type, theme, containerWrapper } = props;
   const { theme: token } = useStyles({
     prefixCls,
@@ -28,7 +29,7 @@ const Highlight = (props: HighlightProps) => {
       {containerWrapper ? <FullFeatureWrapper {...props} /> : <HighlightBase {...props} />}
     </ConfigProvider>
   );
-};
+});
 
 export * from './defalut';
 export * from './wrapper';

diff --git a/src/Markdown/CodeBlock.tsx b/src/Markdown/CodeBlock.tsx
@@ -28,7 +28,7 @@ const countLines = (str: string): number => {
   return matches ? matches.length : 1;
 };
 
-const Code = memo(({ highlight, snippet, ...properties }: any) => {
+export const Code = memo((properties: any) => {
   const { styles, cx } = useStyles();
 
   if (!properties.children[0]) return;
@@ -39,6 +39,7 @@ const Code = memo(({ highlight, snippet, ...properties }: any) => {
 
   const content = Array.isArray(children) ? (children[0] as string) : children;
   const lang = className?.replace('language-', '') || 'txt';
+
   if (countLines(content) === 1 && content.length <= 60) {
     return (
       <Snippet
@@ -47,7 +48,6 @@ const Code = memo(({ highlight, snippet, ...properties }: any) => {
         language={lang}
         symbol={''}
         type={'block'}
-        {...snippet}
       >
         {content}
       </Snippet>
@@ -59,11 +59,9 @@ const Code = memo(({ highlight, snippet, ...properties }: any) => {
       className={cx(styles.container, styles.highlight)}
       language={lang}
       type="block"
-      {...highlight}
+      containerWrapper={true}
     >
       {content}
     </Highlight>
   );
 });
-
-export { Code };
diff --git a/src/Markdown/demos/index.tsx b/src/Markdown/demos/index.tsx
@@ -3,13 +3,5 @@ import { Markdown } from '@ant-design/pro-editor';
 import { content } from './data';
 
 export default () => {
-  return (
-    <Markdown
-      highlight={{
-        containerWrapper: true,
-      }}
-    >
-      {content}
-    </Markdown>
-  );
+  return <Markdown>{content}</Markdown>;
 };
diff --git a/src/Markdown/index.en-US.md b/src/Markdown/index.en-US.md
@@ -14,11 +14,9 @@ You can also customize it by passing in props like components to React-Markdown,
 
 ## APIs
 
-| Property      | Type            | Description                                                     |
-| ------------- | --------------- | --------------------------------------------------------------- |
-| children      | string          | The Markdown content to render.                                 |
-| className     | string          | The class name of the Markdown component.                       |
-| onDoubleClick | () => void      | Double-click event handler.                                     |
-| style         | CSSProperties   | The style of the Markdown component.                            |
-| highlight     | Highlight Props | Configuration for Highlight, will be passed through by default. |
-| snippet       | Snippet Props   | Configuration for Snippet, will be passed through by default.   |
+| Property      | Type          | Description                               |
+| ------------- | ------------- | ----------------------------------------- |
+| children      | string        | The Markdown content to render.           |
+| className     | string        | The class name of the Markdown component. |
+| onDoubleClick | () => void    | Double-click event handler.               |
+| style         | CSSProperties | The style of the Markdown component.      |
diff --git a/src/Markdown/index.tsx b/src/Markdown/index.tsx
@@ -5,7 +5,6 @@ import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 
-import { HighlightProps, SnippetProps } from '@ant-design/pro-editor';
 import { PluggableList } from 'react-markdown/lib/react-markdown';
 import { Code } from './CodeBlock';
 import { useStyles } from './style';
@@ -16,47 +15,33 @@ export interface MarkdownProps {
    * @description ClassName
    */
   className?: string;
-  fullFeaturedCodeBlock?: boolean;
   onDoubleClick?: () => void;
   style?: CSSProperties;
-  // Highlight 的配置，会默认透传
-  highlight?: HighlightProps;
-  // Snippet 的配置，会默认透传
-  snippet?: SnippetProps;
 }
 
-const Markdown = memo<MarkdownProps>(
-  ({ children, className, style, onDoubleClick, highlight = {}, snippet = {}, ...rest }) => {
-    const { styles } = useStyles();
-    const components: any = {
-      a: Typography.Link,
-      details: Collapse,
-      hr: () => <Divider style={{ marginBottom: '1em', marginTop: 0 }} />,
-      img: Image,
-      pre: (props) => {
-        const { children, ...rest } = props;
-        return (
-          <Code highlight={highlight} snippet={snippet} {...rest}>
-            {children}
-          </Code>
-        );
-      },
-    };
+const Markdown = memo<MarkdownProps>(({ children, className, style, onDoubleClick, ...rest }) => {
+  const { styles } = useStyles();
+  const components: any = {
+    a: Typography.Link,
+    details: Collapse,
+    hr: () => <Divider style={{ marginBottom: '1em', marginTop: 0 }} />,
+    img: Image,
+    pre: Code,
+  };
 
-    return (
-      <Typography className={className} onDoubleClick={onDoubleClick} style={style}>
-        <ReactMarkdown
-          className={styles.markdown}
-          components={components}
-          rehypePlugins={[rehypeKatex] as PluggableList}
-          remarkPlugins={[remarkGfm, remarkMath]}
-          {...rest}
-        >
-          {children}
-        </ReactMarkdown>
-      </Typography>
-    );
-  },
-);
+  return (
+    <Typography className={className} onDoubleClick={onDoubleClick} style={style}>
+      <ReactMarkdown
+        className={styles.markdown}
+        components={components}
+        rehypePlugins={[rehypeKatex] as PluggableList}
+        remarkPlugins={[remarkGfm, remarkMath]}
+        {...rest}
+      >
+        {children}
+      </ReactMarkdown>
+    </Typography>
+  );
+});
 
 export default Markdown;
diff --git a/src/Markdown/index.zh-CN.md b/src/Markdown/index.zh-CN.md
@@ -16,11 +16,9 @@ ProEditor 内置了一个默认的 Markdown 渲染器，使用 React-Markdown，
 
 ## APIs
 
-| 属性名        | 类型            | 描述                           |
-| ------------- | --------------- | ------------------------------ |
-| children      | string          | 要渲染的 Markdown 内容。       |
-| className     | string          | Markdown 组件的类名。          |
-| onDoubleClick | () => void      | 双击事件处理函数。             |
-| style         | CSSProperties   | Markdown 组件的样式。          |
-| highlight     | Highlight Props | Highlight 的配置，会默认透传。 |
-| snippet       | snippet Props   | Snippet 的配置，会默认透传     |
+| 属性名        | 类型          | 描述                     |
+| ------------- | ------------- | ------------------------ |
+| children      | string        | 要渲染的 Markdown 内容。 |
+| className     | string        | Markdown 组件的类名。    |
+| onDoubleClick | () => void    | 双击事件处理函数。       |
+| style         | CSSProperties | Markdown 组件的样式。    |