diff --git a/src/Highlight/components/HighLightJS/index.tsx b/src/Highlight/components/HighLightJS/index.tsx index 1cf44b05..31557f4e 100644 --- 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 = (props) => { +const HighLighJS: React.FC = 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 = (props) => { ); -}; +}); export default HighLighJS; diff --git a/src/Highlight/components/HighLighter/index.tsx b/src/Highlight/components/HighLighter/index.tsx index 72e6d1bf..35a8874f 100644 --- 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 = (props) => { +const HighLighter: React.FC = memo((props) => { const { children, lineNumber = false, @@ -52,6 +53,6 @@ const HighLighter: React.FC = (props) => { ) : null} ); -}; +}); export default HighLighter; diff --git a/src/Highlight/defalut.tsx b/src/Highlight/defalut.tsx index 952d6457..33122589 100644 --- 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 = (props) => { +const HighlightBase: React.FC = memo((props) => { const { children, style, @@ -118,6 +118,6 @@ const HighlightBase: React.FC = (props) => { ); -}; +}); export { HighlightBase }; diff --git a/src/Highlight/index.tsx b/src/Highlight/index.tsx index 11e46026..534fc654 100644 --- 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((props: HighlightProps) => { const { prefixCls, type, theme, containerWrapper } = props; const { theme: token } = useStyles({ prefixCls, @@ -28,7 +29,7 @@ const Highlight = (props: HighlightProps) => { {containerWrapper ? : } ); -}; +}); export * from './defalut'; export * from './wrapper'; diff --git a/src/Markdown/CodeBlock.tsx b/src/Markdown/CodeBlock.tsx index d2fb8631..b4a95800 100644 --- 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 ( { language={lang} symbol={''} type={'block'} - {...snippet} > {content} @@ -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} ); }); - -export { Code }; diff --git a/src/Markdown/demos/index.tsx b/src/Markdown/demos/index.tsx index 008f091a..a14a0b0f 100644 --- 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 ( - - {content} - - ); + return {content}; }; diff --git a/src/Markdown/index.en-US.md b/src/Markdown/index.en-US.md index 2301c6e4..ef968150 100644 --- 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 index 25fdf72c..67cdff73 100644 --- 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( - ({ children, className, style, onDoubleClick, highlight = {}, snippet = {}, ...rest }) => { - const { styles } = useStyles(); - const components: any = { - a: Typography.Link, - details: Collapse, - hr: () => , - img: Image, - pre: (props) => { - const { children, ...rest } = props; - return ( - - {children} - - ); - }, - }; +const Markdown = memo(({ children, className, style, onDoubleClick, ...rest }) => { + const { styles } = useStyles(); + const components: any = { + a: Typography.Link, + details: Collapse, + hr: () => , + img: Image, + pre: Code, + }; - return ( - - - {children} - - - ); - }, -); + return ( + + + {children} + + + ); +}); export default Markdown; diff --git a/src/Markdown/index.zh-CN.md b/src/Markdown/index.zh-CN.md index 80e488f0..6d4402dc 100644 --- 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 组件的样式。 |