62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
|
'use client'
|
||
|
|
|
||
|
|
import PropTypes from 'prop-types'
|
||
|
|
import dynamic from 'next/dynamic'
|
||
|
|
import Typography from '@mui/material/Typography'
|
||
|
|
import {useTheme} from '@mui/material/styles'
|
||
|
|
|
||
|
|
const MarkdownPreview = dynamic(
|
||
|
|
() => import('@uiw/react-markdown-preview').then(mod => mod.default),
|
||
|
|
{ssr: false}
|
||
|
|
)
|
||
|
|
|
||
|
|
export default function MarkdownRenderer({content, color, fallbackComponent: FallbackComponent = Typography}) {
|
||
|
|
const theme = useTheme()
|
||
|
|
|
||
|
|
// Check if content contains markdown syntax
|
||
|
|
const hasMarkdown = content && (
|
||
|
|
content.includes('**')
|
||
|
|
|| content.includes('*')
|
||
|
|
|| content.includes('#')
|
||
|
|
|| content.includes('[')
|
||
|
|
|| content.includes('`')
|
||
|
|
|| content.includes('> ')
|
||
|
|
|| content.includes('- ')
|
||
|
|
|| content.includes('1. ')
|
||
|
|
)
|
||
|
|
|
||
|
|
if (!hasMarkdown) {
|
||
|
|
// Fallback to original rendering for plain text
|
||
|
|
const formattedContent = content.replaceAll('\n', '<br />')
|
||
|
|
return <FallbackComponent dangerouslySetInnerHTML={{__html: formattedContent}} />
|
||
|
|
}
|
||
|
|
|
||
|
|
const textColor = color || theme.palette.text.primary
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
color: textColor
|
||
|
|
}}
|
||
|
|
data-color-mode={theme.palette.mode}
|
||
|
|
>
|
||
|
|
<MarkdownPreview
|
||
|
|
source={content}
|
||
|
|
style={{
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
color: textColor,
|
||
|
|
fontSize: 'inherit',
|
||
|
|
fontFamily: 'inherit'
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
MarkdownRenderer.propTypes = {
|
||
|
|
content: PropTypes.string.isRequired,
|
||
|
|
color: PropTypes.string,
|
||
|
|
fallbackComponent: PropTypes.elementType
|
||
|
|
}
|