forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 1
/
MarkdownElement.tsx
55 lines (49 loc) · 1.7 KB
/
MarkdownElement.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import * as React from 'react';
import clsx from 'clsx';
import {
// alpha,
// darken,
styled,
} from '@mui/material/styles';
const Root = styled('div')(({ theme }) => ({
...theme.typography.caption,
color: theme.palette.text.primary,
'& pre': {
backgroundColor: theme.palette.primaryDark[800],
color: '#f8f8f2', // fallback color until Prism's theme is loaded
direction: 'ltr',
overflow: 'auto',
margin: 0,
WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
maxWidth: 'calc(100vw - 32px)',
[theme.breakpoints.up('md')]: {
maxWidth: 'calc(100vw - 32px - 16px)',
},
},
'& code': {
// Avoid layout jump after hydration (style injected by prism)
...theme.typography.caption,
fontFamily: theme.typography.fontFamilyCode,
fontWeight: 400,
WebkitFontSmoothing: 'subpixel-antialiased',
// Reset for Safari
// https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
fontSize: '1em',
},
}));
type MarkdownElementProps = {
renderedMarkdown: string;
} & Omit<JSX.IntrinsicElements['div'], 'ref'>;
const MarkdownElement = React.forwardRef<HTMLDivElement, MarkdownElementProps>(
function MarkdownElement(props, ref) {
const { className, renderedMarkdown, ...other } = props;
const more: Record<string, unknown> = {};
if (typeof renderedMarkdown === 'string') {
// workaround for https://github.com/facebook/react/issues/17170
// otherwise we could just set `dangerouslySetInnerHTML={undefined}`
more.dangerouslySetInnerHTML = { __html: renderedMarkdown };
}
return <Root className={clsx('markdown-body', className)} {...more} {...other} ref={ref} />;
},
);
export default MarkdownElement;