-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #100 from ant-design/feat/Markdown
✨ feat: add Markdown new Components
- Loading branch information
Showing
13 changed files
with
3,336 additions
and
320 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
import { createStyles } from 'antd-style'; | ||
import { memo } from 'react'; | ||
|
||
import { Highlight, Snippet } from '@ant-design/pro-editor'; | ||
|
||
const useStyles = createStyles(({ css }) => ({ | ||
container: css` | ||
:not(:last-child) { | ||
margin-block-start: 1em; | ||
margin-block-end: 1em; | ||
margin-inline-start: 0; | ||
margin-inline-end: 0; | ||
} | ||
`, | ||
highlight: css` | ||
pre { | ||
padding: 12px !important; | ||
} | ||
`, | ||
snippet: css` | ||
display: flex; | ||
`, | ||
})); | ||
|
||
const countLines = (str: string): number => { | ||
const regex = /\n/g; | ||
const matches = str.match(regex); | ||
return matches ? matches.length : 1; | ||
}; | ||
|
||
const Code = memo(({ highlight, snippet, ...properties }: any) => { | ||
const { styles, cx } = useStyles(); | ||
|
||
if (!properties.children[0]) return; | ||
|
||
const { children, className } = properties.children[0].props; | ||
|
||
if (!children) return; | ||
|
||
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 | ||
className={cx(styles.container, styles.snippet)} | ||
data-code-type="highlighter" | ||
language={lang} | ||
symbol={''} | ||
type={'block'} | ||
{...snippet} | ||
> | ||
{content} | ||
</Snippet> | ||
); | ||
} | ||
|
||
return ( | ||
<Highlight | ||
className={cx(styles.container, styles.highlight)} | ||
language={lang} | ||
type="block" | ||
{...highlight} | ||
> | ||
{content} | ||
</Highlight> | ||
); | ||
}); | ||
|
||
export { Code }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
export const content = `# This is an H1 | ||
## This is an H2 | ||
### This is an H3 | ||
#### This is an H4 | ||
##### This is an H5 | ||
The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw \`HTML\`, it’s 234 characters. In the raw \`HTML\`, there’s more markup than there is text. | ||
--- | ||
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, | ||
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. | ||
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. | ||
> | ||
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse | ||
> id sem consectetuer libero luctus adipiscing. | ||
--- | ||
an example | *an example* | **an example** | ||
--- | ||
1. Bird | ||
1. McHale | ||
1. Parish | ||
1. Bird | ||
1. McHale | ||
1. Parish | ||
--- | ||
- Red | ||
- Green | ||
- Blue | ||
- Red | ||
- Green | ||
- Blue | ||
--- | ||
This is [an example](http://example.com/ "Title") inline link. | ||
<http://example.com/> | ||
| title | title | title | | ||
| --- | --- | --- | | ||
| content | content | content | | ||
\`\`\`bash | ||
$ pnpm install | ||
\`\`\` | ||
\`\`\`javascript | ||
import { renderHook } from '@testing-library/react-hooks'; | ||
import { act } from 'react-dom/test-utils'; | ||
import { useDropNodeOnCanvas } from './useDropNodeOnCanvas'; | ||
\`\`\` | ||
--- | ||
以下是一段Markdown格式的LaTeX数学公式: | ||
我是一个行内公式:$E=mc^2$ | ||
我是一个独立公式: | ||
$$ | ||
\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\ldots + x_n | ||
$$ | ||
我是一个带有分式的公式: | ||
$$ | ||
\\frac{{n!}}{{k!(n-k)!}} = \\binom{n}{k} | ||
$$ | ||
我是一个带有上下标的公式: | ||
$$ | ||
x^{2} + y^{2} = r^{2} | ||
$$ | ||
我是一个带有积分符号的公式: | ||
$$ | ||
\\int_{a}^{b} f(x) \\, dx | ||
$$ | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { Markdown } from '@ant-design/pro-editor'; | ||
|
||
import { content } from './data'; | ||
|
||
export default () => { | ||
return ( | ||
<Markdown | ||
highlight={{ | ||
containerWrapper: true, | ||
}} | ||
> | ||
{content} | ||
</Markdown> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
--- | ||
nav: 组件 | ||
group: 基础组件 | ||
title: Markdown 文档展示 | ||
atomId: Markdown | ||
description: Markdown是一个用于渲染Markdown文本的React组件。它支持各种Markdown语法,如标题、列表、链接、图片、代码块等。它通常用于文档、博客和其他文本密集型应用中。 | ||
--- | ||
|
||
## Default | ||
|
||
ProEditor 内置了一个默认的 Markdown 渲染器,使用 React-Markdown,使用我们自己的 Highlight 和 Snippet 进行代码块的渲染 | ||
|
||
你也可以通过自己传入 components 等 React-Markdown 的 Props 来进行自定义,多余的会透传过去。 | ||
|
||
<code src="./demos/index.tsx" nopadding></code> | ||
|
||
## APIs | ||
|
||
| 属性名 | 类型 | 描述 | | ||
| ------------- | --------------- | ------------------------------ | | ||
| children | string | 要渲染的 Markdown 内容。 | | ||
| className | string | Markdown 组件的类名。 | | ||
| onDoubleClick | () => void | 双击事件处理函数。 | | ||
| style | CSSProperties | Markdown 组件的样式。 | | ||
| highlight | Highlight Props | Highlight 的配置,会默认透传。 | | ||
| snippet | snippet Props | Snippet 的配置,会默认透传 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import { Collapse, Divider, Image, Typography } from 'antd'; | ||
import { CSSProperties, memo } from 'react'; | ||
import ReactMarkdown from 'react-markdown'; | ||
import rehypeKatex from 'rehype-katex'; | ||
import remarkGfm from 'remark-gfm'; | ||
import remarkMath from 'remark-math'; | ||
|
||
import { HighlightProps, SnippetProps } from '@ant-design/pro-editor'; | ||
import { Code } from './CodeBlock'; | ||
import { useStyles } from './style'; | ||
|
||
export interface MarkdownProps { | ||
children: string; | ||
/** | ||
* @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> | ||
); | ||
}, | ||
}; | ||
|
||
return ( | ||
<Typography className={className} onDoubleClick={onDoubleClick} style={style}> | ||
<ReactMarkdown | ||
className={styles.markdown} | ||
components={components} | ||
rehypePlugins={[rehypeKatex]} | ||
remarkPlugins={[remarkGfm, remarkMath]} | ||
{...rest} | ||
> | ||
{children} | ||
</ReactMarkdown> | ||
</Typography> | ||
); | ||
}, | ||
); | ||
|
||
export default Markdown; |
Oops, something went wrong.