Jason Woltje
f208f72dc0
Some checks failed
ci/woodpecker/push/ci Pipeline failed
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
interface PrdViewerProps {
|
|
content: string;
|
|
}
|
|
|
|
/**
|
|
* Lightweight markdown-to-HTML renderer for PRD content.
|
|
* Supports headings, bold, italic, inline code, code blocks, and lists.
|
|
* No external dependency — keeps bundle size minimal.
|
|
*/
|
|
function renderMarkdown(md: string): string {
|
|
let html = md
|
|
// Escape HTML entities first to prevent XSS
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>');
|
|
|
|
// Code blocks (must run before inline code)
|
|
html = html.replace(/```[\w]*\n?([\s\S]*?)```/g, (_match, code: string) => {
|
|
return `<pre class="overflow-x-auto rounded-lg bg-surface-elevated p-4 my-4"><code class="text-xs text-text-secondary whitespace-pre">${code.trim()}</code></pre>`;
|
|
});
|
|
|
|
// Headings
|
|
html = html.replace(
|
|
/^#### (.+)$/gm,
|
|
'<h4 class="text-sm font-semibold text-text-primary mt-4 mb-1">$1</h4>',
|
|
);
|
|
html = html.replace(
|
|
/^### (.+)$/gm,
|
|
'<h3 class="text-base font-semibold text-text-primary mt-6 mb-2">$1</h3>',
|
|
);
|
|
html = html.replace(
|
|
/^## (.+)$/gm,
|
|
'<h2 class="text-lg font-semibold text-text-primary mt-8 mb-3">$1</h2>',
|
|
);
|
|
html = html.replace(
|
|
/^# (.+)$/gm,
|
|
'<h1 class="text-xl font-bold text-text-primary mt-8 mb-4">$1</h1>',
|
|
);
|
|
|
|
// Horizontal rule
|
|
html = html.replace(/^---$/gm, '<hr class="my-6 border-surface-border" />');
|
|
|
|
// Unordered list items
|
|
html = html.replace(
|
|
/^[-*] (.+)$/gm,
|
|
'<li class="ml-4 text-sm text-text-secondary list-disc">$1</li>',
|
|
);
|
|
|
|
// Ordered list items
|
|
html = html.replace(
|
|
/^\d+\. (.+)$/gm,
|
|
'<li class="ml-4 text-sm text-text-secondary list-decimal">$1</li>',
|
|
);
|
|
|
|
// Bold + italic
|
|
html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
|
|
// Bold
|
|
html = html.replace(
|
|
/\*\*(.+?)\*\*/g,
|
|
'<strong class="font-semibold text-text-primary">$1</strong>',
|
|
);
|
|
// Italic
|
|
html = html.replace(/\*(.+?)\*/g, '<em class="italic text-text-secondary">$1</em>');
|
|
|
|
// Inline code
|
|
html = html.replace(
|
|
/`([^`]+)`/g,
|
|
'<code class="rounded bg-surface-elevated px-1 py-0.5 text-xs text-text-secondary">$1</code>',
|
|
);
|
|
|
|
// Paragraphs — wrap lines that aren't already wrapped in a block element
|
|
const lines = html.split('\n');
|
|
const result: string[] = [];
|
|
for (const line of lines) {
|
|
const trimmed = line.trim();
|
|
if (trimmed === '') {
|
|
result.push('');
|
|
} else if (
|
|
trimmed.startsWith('<h') ||
|
|
trimmed.startsWith('<pre') ||
|
|
trimmed.startsWith('<li') ||
|
|
trimmed.startsWith('<hr')
|
|
) {
|
|
result.push(trimmed);
|
|
} else {
|
|
result.push(`<p class="text-sm text-text-secondary leading-relaxed my-2">${trimmed}</p>`);
|
|
}
|
|
}
|
|
|
|
return result.join('\n');
|
|
}
|
|
|
|
export function PrdViewer({ content }: PrdViewerProps): React.ReactElement {
|
|
const html = renderMarkdown(content);
|
|
|
|
return <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: html }} />;
|
|
}
|