Spaces:
Paused
Paused
| /** Minimal markdown renderer for PRD docs (headings, lists, tables, | |
| * fenced code blocks, bold, inline code). No external dependencies. */ | |
| import Box from '@mui/material/Box'; | |
| import Typography from '@mui/material/Typography'; | |
| function Inline({ text }: { text: string }) { | |
| const parts = text.split(/(\*\*[^*]+\*\*|`[^`]+`)/g).filter(Boolean); | |
| return ( | |
| <> | |
| {parts.map((p, i) => { | |
| if (p.startsWith('**') && p.endsWith('**')) { | |
| return <strong key={i}>{p.slice(2, -2)}</strong>; | |
| } | |
| if (p.startsWith('`') && p.endsWith('`')) { | |
| return ( | |
| <Box | |
| key={i} | |
| component="code" | |
| sx={{ bgcolor: '#232a31', px: 0.5, borderRadius: 0.5, fontFamily: 'monospace', fontSize: '0.9em' }} | |
| > | |
| {p.slice(1, -1)} | |
| </Box> | |
| ); | |
| } | |
| return <span key={i}>{p}</span>; | |
| })} | |
| </> | |
| ); | |
| } | |
| export default function Markdown({ source }: { source: string }) { | |
| const lines = source.split('\n'); | |
| const blocks: React.ReactNode[] = []; | |
| let i = 0; | |
| let key = 0; | |
| while (i < lines.length) { | |
| const line = lines[i]; | |
| if (line.startsWith('```')) { | |
| const code: string[] = []; | |
| i += 1; | |
| while (i < lines.length && !lines[i].startsWith('```')) { | |
| code.push(lines[i]); | |
| i += 1; | |
| } | |
| i += 1; | |
| blocks.push( | |
| <Box | |
| key={key++} | |
| component="pre" | |
| sx={{ | |
| bgcolor: '#0d1117', | |
| border: '1px solid #232a31', | |
| borderRadius: 1, | |
| p: 1.5, | |
| overflowX: 'auto', | |
| fontSize: 11.5, | |
| fontFamily: 'monospace', | |
| lineHeight: 1.35, | |
| my: 1, | |
| }} | |
| > | |
| {code.join('\n')} | |
| </Box> | |
| ); | |
| continue; | |
| } | |
| const h = line.match(/^(#{1,4})\s+(.*)$/); | |
| if (h) { | |
| const level = h[1].length; | |
| blocks.push( | |
| <Typography | |
| key={key++} | |
| variant={level === 1 ? 'h5' : level === 2 ? 'h6' : 'subtitle1'} | |
| sx={{ fontWeight: 800, mt: level === 1 ? 0.5 : 2, mb: 0.75 }} | |
| > | |
| <Inline text={h[2]} /> | |
| </Typography> | |
| ); | |
| i += 1; | |
| continue; | |
| } | |
| if (/^\s*[-*]\s+/.test(line)) { | |
| const items: string[] = []; | |
| while (i < lines.length && /^\s*[-*]\s+/.test(lines[i])) { | |
| items.push(lines[i].replace(/^\s*[-*]\s+/, '')); | |
| i += 1; | |
| } | |
| blocks.push( | |
| <Box key={key++} component="ul" sx={{ my: 0.5, pl: 3 }}> | |
| {items.map((it, j) => ( | |
| <Typography key={j} component="li" variant="body2" sx={{ mb: 0.25, color: '#c7ccd1' }}> | |
| <Inline text={it} /> | |
| </Typography> | |
| ))} | |
| </Box> | |
| ); | |
| continue; | |
| } | |
| if (/^\s*\d+\.\s+/.test(line)) { | |
| const items: string[] = []; | |
| while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) { | |
| items.push(lines[i].replace(/^\s*\d+\.\s+/, '')); | |
| i += 1; | |
| } | |
| blocks.push( | |
| <Box key={key++} component="ol" sx={{ my: 0.5, pl: 3 }}> | |
| {items.map((it, j) => ( | |
| <Typography key={j} component="li" variant="body2" sx={{ mb: 0.25, color: '#c7ccd1' }}> | |
| <Inline text={it} /> | |
| </Typography> | |
| ))} | |
| </Box> | |
| ); | |
| continue; | |
| } | |
| if (line.trim() === '') { | |
| i += 1; | |
| continue; | |
| } | |
| const para: string[] = [line]; | |
| i += 1; | |
| while (i < lines.length && lines[i].trim() !== '' && !/^(#{1,4}\s|```|\s*[-*]\s|\s*\d+\.\s)/.test(lines[i])) { | |
| para.push(lines[i]); | |
| i += 1; | |
| } | |
| blocks.push( | |
| <Typography key={key++} variant="body2" sx={{ mb: 1, color: '#c7ccd1', lineHeight: 1.55 }}> | |
| <Inline text={para.join(' ')} /> | |
| </Typography> | |
| ); | |
| } | |
| return <Box>{blocks}</Box>; | |
| } | |