77 lines
1.9 KiB
JavaScript
77 lines
1.9 KiB
JavaScript
import ReactMarkdown from 'react-markdown'
|
|
import remarkGfm from 'remark-gfm'
|
|
import { Typography, Space } from 'antd'
|
|
import PropTypes from 'prop-types'
|
|
|
|
const { Title, Paragraph, Text } = Typography
|
|
|
|
const UlComponent = ({ children }) => (
|
|
<ul style={{ paddingLeft: '20px', margin: 0 }}>{children}</ul>
|
|
)
|
|
UlComponent.propTypes = {
|
|
children: PropTypes.node
|
|
}
|
|
|
|
const OlComponent = ({ children }) => (
|
|
<ol style={{ paddingLeft: '20px', margin: 0 }}>{children}</ol>
|
|
)
|
|
OlComponent.propTypes = {
|
|
children: PropTypes.node
|
|
}
|
|
|
|
const LiComponent = ({ children }) => <li>{children}</li>
|
|
LiComponent.propTypes = {
|
|
children: PropTypes.node
|
|
}
|
|
|
|
const BlockquoteComponent = ({ children }) => (
|
|
<Paragraph>
|
|
<blockquote>{children}</blockquote>
|
|
</Paragraph>
|
|
)
|
|
BlockquoteComponent.propTypes = { children: PropTypes.node }
|
|
|
|
const MarkdownDisplay = ({ content }) => {
|
|
const components = {
|
|
h1: (props) => <Title level={1} {...props} />,
|
|
h2: (props) => <Title level={2} {...props} />,
|
|
h3: (props) => <Title level={3} {...props} />,
|
|
h4: (props) => <Title level={4} {...props} />,
|
|
h5: (props) => <Title level={5} {...props} />,
|
|
h6: (props) => <Title level={6} {...props} />,
|
|
p: (props) => <Paragraph {...props} />,
|
|
ul: UlComponent,
|
|
ol: OlComponent,
|
|
li: LiComponent,
|
|
strong: (props) => <Text strong {...props} />,
|
|
em: (props) => <Text italic {...props} />,
|
|
code: ({ inline, ...props }) =>
|
|
inline ? (
|
|
<Text code {...props} />
|
|
) : (
|
|
<Paragraph>
|
|
<pre {...props} />
|
|
</Paragraph>
|
|
),
|
|
blockquote: BlockquoteComponent
|
|
}
|
|
|
|
return (
|
|
<Space
|
|
direction='vertical'
|
|
style={{ width: '100%' }}
|
|
className={'markdown-display'}
|
|
>
|
|
<ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
|
|
{content}
|
|
</ReactMarkdown>
|
|
</Space>
|
|
)
|
|
}
|
|
|
|
MarkdownDisplay.propTypes = {
|
|
content: PropTypes.string.isRequired
|
|
}
|
|
|
|
export default MarkdownDisplay
|