diff --git a/src/Markdown/demos/renderComponets.tsx b/src/Markdown/demos/renderComponets.tsx new file mode 100644 index 00000000..cf625f62 --- /dev/null +++ b/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 ( + ( + + )), + }} + > + {` +This is [an example](http://example.com/ "Title") inline link. + + +`} + + ); +}; diff --git a/src/Markdown/index.en-US.md b/src/Markdown/index.en-US.md index 2460302c..30d96a9c 100644 --- a/src/Markdown/index.en-US.md +++ b/src/Markdown/index.en-US.md @@ -17,6 +17,8 @@ Markdown is a React component used to render Markdown text. It supports various + + ## APIs | Property | Type | Description | diff --git a/src/Markdown/index.tsx b/src/Markdown/index.tsx index 05dfb552..7088178e 100644 --- a/src/Markdown/index.tsx +++ b/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,6 +20,7 @@ export interface MarkdownProps { style?: CSSProperties; rehypePlugins?: PluggableList; remarkPlugins?: PluggableList; + components?: Components; } const MemoHr = memo((props) => ( @@ -27,7 +28,11 @@ const MemoHr = memo((props) => ( )); const MemoDetails = memo((props) => ); const MemoImage = memo((props) => ); -const MemoAlink = memo((props) => ); +const MemoAlink = memo((props) => { + console.log(props); + + return ; +}); const Markdown = memo( ({ @@ -37,6 +42,7 @@ const Markdown = memo( onDoubleClick, rehypePlugins: outRehypePlugins, remarkPlugins: outRemarkPlugins, + components: outComponents, ...rest }) => { const { styles } = useStyles(); @@ -46,10 +52,15 @@ const Markdown = memo( 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 ( diff --git a/src/Markdown/index.zh-CN.md b/src/Markdown/index.zh-CN.md index d0dee140..5b066cdf 100644 --- a/src/Markdown/index.zh-CN.md +++ b/src/Markdown/index.zh-CN.md @@ -18,6 +18,8 @@ Markdown 是一个用于渲染 Markdown 文本的 React 组件。它支持各种 + + ## APIs | 属性名 | 类型 | 描述 | diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap index 7dec2564..7da68a4c 100644 --- a/tests/__snapshots__/demo.test.tsx.snap +++ b/tests/__snapshots__/demo.test.tsx.snap @@ -19029,6 +19029,199 @@ import { useDropNodeOnCanvas } from './useDropNodeOnCanvas'; `; +exports[` > renders renderComponets.tsx correctly 1`] = ` +.emotion-0 { + color: rgba(0, 0, 0, 0.88); +} + +.emotion-0 h1, +.emotion-0 h2, +.emotion-0 h3, +.emotion-0 h4, +.emotion-0 h5 { + font-weight: 600; +} + +.emotion-0 p { + margin-block-start: 0; + margin-block-end: 0; + font-size: 14px; + line-height: 1.8; + color: rgba(0, 0, 0, 0.88); + word-break: break-all; + word-wrap: break-word; +} + +.emotion-0 p+* { + margin-block-end: 0.5em; +} + +.emotion-0>*:last-child { + margin-bottom: 0!important; +} + +.emotion-0 blockquote { + margin: 16px 0; + padding: 0 12px; +} + +.emotion-0 blockquote p { + font-style: italic; + color: rgba(0, 0, 0, 0.45); +} + +.emotion-0 p:not(:last-child) { + margin-bottom: 1em; +} + +.emotion-0 a { + color: #1677ff; +} + +.emotion-0 a:hover { + color: #69b1ff; +} + +.emotion-0 a:active { + color: #0958d9; +} + +.emotion-0 img { + max-width: 100%; +} + +.emotion-0 pre, +.emotion-0 [data-code-type='highlighter'] { + border: none; + border-radius: 6px; +} + +.emotion-0 pre>code, +.emotion-0 [data-code-type='highlighter']>code { + padding: 0!important; + border: none!important; +} + +.emotion-0>:not([data-code-type='highlighter']) code { + padding: 2px 6px; + font-size: 10px; + border-radius: 4px; +} + +.emotion-0 table { + border-spacing: 0; + width: 100%; + margin-block-start: 1em; + margin-block-end: 1em; + -webkit-margin-start: 0; + margin-inline-start: 0; + -webkit-margin-end: 0; + margin-inline-end: 0; + padding: 8px; + border: 1px solid #f0f0f0; + border-radius: 6px; +} + +.emotion-0 table code { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.emotion-0 th, +.emotion-0 td { + padding-block-start: 10px; + padding-block-end: 10px; + -webkit-padding-start: 16px; + padding-inline-start: 16px; + -webkit-padding-end: 16px; + padding-inline-end: 16px; +} + +.emotion-0 thead tr th { + background: rgba(0, 0, 0, 0.04); +} + +.emotion-0 thead tr th:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.emotion-0 thead tr th:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.emotion-0>ol>li::marker { + color: #1677ff!important; +} + +.emotion-0>ul>li { + line-height: 1.8; + list-style-type: disc; +} + +.emotion-0>ul>li::marker { + color: #1677ff!important; +} + +.emotion-0 ol>li::marker, +.emotion-0 ul>li::marker { + color: rgba(0, 0, 0, 0.45); +} + +.emotion-0 details { + margin-bottom: 1em; + padding: 12px 16px; + background: rgba(0, 0, 0, 0.04); + border: 1px solid #f0f0f0; + border-radius: 8px; + -webkit-transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1); + transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1); +} + +.emotion-0 details[open] summary { + padding-bottom: 12px; + border-bottom: 1px solid #d9d9d9; +} + +
+
+
+

+ This is + + inline link. +

+ + +

+ +

+
+
+
+`; + exports[` > renders index.tsx correctly 1`] = ` .emotion-0 { background-color: transparent;