69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
import { Component } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import PageMinimap from '../../PageMinimap';
|
|
|
|
function PanelHtmlValue({ html }) {
|
|
if (html == null || html === '') return null;
|
|
return (
|
|
<Box sx={{ mb: 1.5 }}>
|
|
<Box
|
|
sx={(theme) => ({
|
|
p: 1.5,
|
|
borderRadius: 1.5,
|
|
bgcolor:
|
|
theme.palette.mode === 'dark'
|
|
? 'rgba(255, 255, 255, 0.08)'
|
|
: 'rgba(255, 255, 255, 0.85)',
|
|
border: '1px solid',
|
|
borderColor:
|
|
theme.palette.mode === 'dark'
|
|
? 'rgba(255, 255, 255, 0.12)'
|
|
: 'rgba(255, 255, 255, 0.95)',
|
|
boxShadow:
|
|
theme.palette.mode === 'dark'
|
|
? 'none'
|
|
: '0 1px 3px rgba(0, 0, 0, 0.04)',
|
|
fontSize: '0.875rem',
|
|
lineHeight: 1.55,
|
|
color: 'text.primary',
|
|
wordBreak: 'break-word',
|
|
'& h1, & h2, & h3, & h4, & h5, & h6': {
|
|
fontSize: '1rem',
|
|
fontWeight: 600,
|
|
mt: 1.25,
|
|
mb: 0.5,
|
|
'&:first-child': { mt: 0 },
|
|
},
|
|
'& p': {
|
|
my: 0.5,
|
|
'&:first-child': { mt: 0 },
|
|
'&:last-child': { mb: 0 },
|
|
},
|
|
'& ul, & ol': {
|
|
pl: 2.5,
|
|
my: 0.5,
|
|
},
|
|
'& a': {
|
|
color: 'primary.main',
|
|
textDecoration: 'underline',
|
|
},
|
|
})}
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default class ArticleDescTab extends Component {
|
|
render() {
|
|
const { article: articleData } = this.props;
|
|
const desc = articleData.desc ?? articleData.description;
|
|
return (
|
|
<>
|
|
<PanelHtmlValue html={desc} />
|
|
<PageMinimap />
|
|
</>
|
|
);
|
|
}
|
|
}
|