✨ feat: markdown support add custom render

src/Markdown/demos/renderComponets.tsx

@@ -0,0 +1,27 @@
+import { Markdown } from '@ant-design/pro-editor';
+import { Button } from 'antd';
+import { memo } from 'react';
+
+export default () => {
+  return (
+    <Markdown
+      components={{
+        a: memo((props) => (
+          <Button
+            onClick={() => {
+              console.log(props.href);
+            }}
+          >
+            该链接不允许点击跳转！{props.href}
+          </Button>
+        )),
+      }}
+    >
+      {`
+This is [an example](http://example.com/ "Title") inline link.
+
+<http://example.com/>
+`}
+    </Markdown>
+  );
+};

src/Markdown/index.en-US.md

@@ -17,6 +17,8 @@ Markdown is a React component used to render Markdown text. It supports various
 
 <code src="./demos/htmlPlugin.tsx" nopadding title="Custom Plugins Input" description="We have built-in some plugins for Markdown conversion, but if you have other requirements, you can customize the input of `rehypePlugins` and `remarkPlugins` to enhance the current rendering capabilities. The example is a sample input of rehypeRaw for rendering HTML capabilities. It is worth noting that there may be parsing conflicts between different plugins, which may need to be resolved by the user."></code>
 
+<code src="./demos/renderComponets.tsx" nopadding title="Custom Partial Components" description="You can customize the rendering of some React-Markdown components through the Components property. For example, here is a case where the current A tag is modified"></code>
+
 ## APIs
 
 | Property      | Type                              | Description                               |

src/Markdown/index.tsx

@@ -1,6 +1,6 @@
 import { Collapse, Divider, Typography } from 'antd';
 import { CSSProperties, memo } from 'react';
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown, { Components } from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
@@ -20,14 +20,19 @@ export interface MarkdownProps {
   style?: CSSProperties;
   rehypePlugins?: PluggableList;
   remarkPlugins?: PluggableList;
+  components?: Components;
 }
 
 const MemoHr = memo((props) => (
   <Divider style={{ marginBottom: '1em', marginTop: 0 }} {...props} />
 ));
 const MemoDetails = memo((props) => <Collapse style={{ marginBottom: '1em' }} {...props} />);
 const MemoImage = memo((props) => <img {...props} />);
-const MemoAlink = memo((props) => <Typography.Link {...props} />);
+const MemoAlink = memo((props) => {
+  console.log(props);
+
+  return <Typography.Link {...props} />;
+});
 
 const Markdown = memo<MarkdownProps>(
   ({
@@ -37,6 +42,7 @@ const Markdown = memo<MarkdownProps>(
     onDoubleClick,
     rehypePlugins: outRehypePlugins,
     remarkPlugins: outRemarkPlugins,
+    components: outComponents,
     ...rest
   }) => {
     const { styles } = useStyles();
@@ -46,10 +52,15 @@ const Markdown = memo<MarkdownProps>(
       a: MemoAlink,
       img: MemoImage,
       pre: Code,
+      ...outComponents,
     };
 
     const rehypePlugins = [rehypeKatex, ...(outRehypePlugins || [])];
-    const remarkPlugins = [[remarkGfm,{singleTilde: false}], remarkMath, ...(outRemarkPlugins || [])];
+    const remarkPlugins = [
+      [remarkGfm, { singleTilde: false }],
+      remarkMath,
+      ...(outRemarkPlugins || []),
+    ];
 
     return (
       <Typography className={className} onDoubleClick={onDoubleClick} style={style}>

src/Markdown/index.zh-CN.md

@@ -18,6 +18,8 @@ Markdown 是一个用于渲染 Markdown 文本的 React 组件。它支持各种
 
 <code src="./demos/htmlPlugin.tsx" nopadding title="自定义传入 Plugins" description="我们内置了一些对于 Markdown 转换的 Plugins，但是如果你有别的需求，你可以自定义传入 `rehypePlugins` 和 `remarkPlugins` 来扩充当前的渲染能力。例子是一个传入 rehypeRaw 用来渲染 Html 能力的样例。需要注意的是，不同的插件之间可能会出现解析冲突的问题，这个可能需要用户自己解决。"></code>
 
+<code src="./demos/renderComponets.tsx" nopadding title="自定义部分组件" description="可以通过 Components 属性来自定义渲染一些 React-Markdown 的渲染组件，例如这里是一个魔改当前 A 标签的案例"></code>
+
 ## APIs
 
 | 属性名        | 类型                              | 描述                     |