forked from zhangyonghao/minimap
first commit
This commit is contained in:
278
frontend/components/MarkdownMessage.tsx
Normal file
278
frontend/components/MarkdownMessage.tsx
Normal file
@@ -0,0 +1,278 @@
|
||||
import React from "react";
|
||||
|
||||
type MarkdownMessageProps = {
|
||||
content: string;
|
||||
};
|
||||
|
||||
type MarkdownBlock =
|
||||
| { type: "paragraph"; content: string }
|
||||
| { type: "heading"; level: number; content: string }
|
||||
| { type: "unordered-list"; items: string[] }
|
||||
| { type: "ordered-list"; items: string[] }
|
||||
| { type: "blockquote"; content: string }
|
||||
| { type: "code"; language: string; content: string };
|
||||
|
||||
export default function MarkdownMessage({ content }: MarkdownMessageProps) {
|
||||
const blocks = parseMarkdown(content);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{blocks.map((block, index) => renderBlock(block, index))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function parseMarkdown(source: string): MarkdownBlock[] {
|
||||
const normalized = source.replace(/\r\n/g, "\n");
|
||||
const lines = normalized.split("\n");
|
||||
const blocks: MarkdownBlock[] = [];
|
||||
let paragraphLines: string[] = [];
|
||||
|
||||
const flushParagraph = () => {
|
||||
if (!paragraphLines.length) return;
|
||||
blocks.push({
|
||||
type: "paragraph",
|
||||
content: paragraphLines.join("\n").trim(),
|
||||
});
|
||||
paragraphLines = [];
|
||||
};
|
||||
|
||||
for (let index = 0; index < lines.length; index += 1) {
|
||||
const line = lines[index];
|
||||
const trimmed = line.trim();
|
||||
|
||||
if (!trimmed) {
|
||||
flushParagraph();
|
||||
continue;
|
||||
}
|
||||
|
||||
const codeFenceMatch = trimmed.match(/^```([^`]*)$/);
|
||||
if (codeFenceMatch) {
|
||||
flushParagraph();
|
||||
const codeLines: string[] = [];
|
||||
let cursor = index + 1;
|
||||
while (cursor < lines.length && !lines[cursor].trim().startsWith("```")) {
|
||||
codeLines.push(lines[cursor]);
|
||||
cursor += 1;
|
||||
}
|
||||
blocks.push({
|
||||
type: "code",
|
||||
language: codeFenceMatch[1].trim(),
|
||||
content: codeLines.join("\n"),
|
||||
});
|
||||
index = cursor;
|
||||
continue;
|
||||
}
|
||||
|
||||
const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
|
||||
if (headingMatch) {
|
||||
flushParagraph();
|
||||
blocks.push({
|
||||
type: "heading",
|
||||
level: headingMatch[1].length,
|
||||
content: headingMatch[2].trim(),
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
const blockquoteMatch = line.match(/^>\s?(.*)$/);
|
||||
if (blockquoteMatch) {
|
||||
flushParagraph();
|
||||
const quoteLines = [blockquoteMatch[1]];
|
||||
let cursor = index + 1;
|
||||
while (cursor < lines.length) {
|
||||
const nextMatch = lines[cursor].match(/^>\s?(.*)$/);
|
||||
if (!nextMatch) break;
|
||||
quoteLines.push(nextMatch[1]);
|
||||
cursor += 1;
|
||||
}
|
||||
blocks.push({
|
||||
type: "blockquote",
|
||||
content: quoteLines.join("\n").trim(),
|
||||
});
|
||||
index = cursor - 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
const unorderedMatch = line.match(/^[-*+]\s+(.+)$/);
|
||||
if (unorderedMatch) {
|
||||
flushParagraph();
|
||||
const items = [unorderedMatch[1].trim()];
|
||||
let cursor = index + 1;
|
||||
while (cursor < lines.length) {
|
||||
const nextMatch = lines[cursor].match(/^[-*+]\s+(.+)$/);
|
||||
if (!nextMatch) break;
|
||||
items.push(nextMatch[1].trim());
|
||||
cursor += 1;
|
||||
}
|
||||
blocks.push({ type: "unordered-list", items });
|
||||
index = cursor - 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
const orderedMatch = line.match(/^\d+\.\s+(.+)$/);
|
||||
if (orderedMatch) {
|
||||
flushParagraph();
|
||||
const items = [orderedMatch[1].trim()];
|
||||
let cursor = index + 1;
|
||||
while (cursor < lines.length) {
|
||||
const nextMatch = lines[cursor].match(/^\d+\.\s+(.+)$/);
|
||||
if (!nextMatch) break;
|
||||
items.push(nextMatch[1].trim());
|
||||
cursor += 1;
|
||||
}
|
||||
blocks.push({ type: "ordered-list", items });
|
||||
index = cursor - 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
paragraphLines.push(line);
|
||||
}
|
||||
|
||||
flushParagraph();
|
||||
return blocks;
|
||||
}
|
||||
|
||||
function renderBlock(block: MarkdownBlock, index: number) {
|
||||
if (block.type === "paragraph") {
|
||||
return (
|
||||
<p key={index} className="whitespace-pre-wrap leading-7 text-inherit">
|
||||
{renderInline(block.content, `p-${index}`)}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "heading") {
|
||||
const sizeClass =
|
||||
block.level === 1
|
||||
? "text-xl font-bold"
|
||||
: block.level === 2
|
||||
? "text-lg font-bold"
|
||||
: "text-base font-semibold";
|
||||
return (
|
||||
<div key={index} className={`${sizeClass} leading-7 text-slate-900`}>
|
||||
{renderInline(block.content, `h-${index}`)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "unordered-list") {
|
||||
return (
|
||||
<ul key={index} className="list-disc space-y-1 pl-5 leading-7 text-inherit">
|
||||
{block.items.map((item, itemIndex) => (
|
||||
<li key={`${index}-${itemIndex}`}>{renderInline(item, `ul-${index}-${itemIndex}`)}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "ordered-list") {
|
||||
return (
|
||||
<ol key={index} className="list-decimal space-y-1 pl-5 leading-7 text-inherit">
|
||||
{block.items.map((item, itemIndex) => (
|
||||
<li key={`${index}-${itemIndex}`}>{renderInline(item, `ol-${index}-${itemIndex}`)}</li>
|
||||
))}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "blockquote") {
|
||||
return (
|
||||
<blockquote
|
||||
key={index}
|
||||
className="border-l-4 border-slate-300 bg-slate-50/80 px-4 py-2 text-slate-600"
|
||||
>
|
||||
<div className="whitespace-pre-wrap leading-7">
|
||||
{renderInline(block.content, `q-${index}`)}
|
||||
</div>
|
||||
</blockquote>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={index} className="overflow-hidden rounded-xl border border-slate-200 bg-slate-950">
|
||||
{block.language && (
|
||||
<div className="border-b border-slate-800 px-3 py-2 text-xs uppercase tracking-[0.18em] text-slate-400">
|
||||
{block.language}
|
||||
</div>
|
||||
)}
|
||||
<pre className="overflow-x-auto px-4 py-3 text-sm leading-6 text-slate-100">
|
||||
<code>{block.content}</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderInline(text: string, keyPrefix: string): React.ReactNode[] {
|
||||
const pattern = /(\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)|`([^`]+)`|\*\*([^*]+)\*\*|__([^_]+)__|\*([^*]+)\*|_([^_]+)_)/g;
|
||||
const nodes: React.ReactNode[] = [];
|
||||
let lastIndex = 0;
|
||||
let matchIndex = 0;
|
||||
let match: RegExpExecArray | null;
|
||||
|
||||
while ((match = pattern.exec(text)) !== null) {
|
||||
const plainText = text.slice(lastIndex, match.index);
|
||||
if (plainText) {
|
||||
nodes.push(...renderPlainText(plainText, `${keyPrefix}-plain-${matchIndex}`));
|
||||
}
|
||||
|
||||
if (match[2] && match[3]) {
|
||||
nodes.push(
|
||||
<a
|
||||
key={`${keyPrefix}-link-${matchIndex}`}
|
||||
href={match[3]}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="font-medium text-blue-600 underline decoration-blue-300 underline-offset-2"
|
||||
>
|
||||
{match[2]}
|
||||
</a>,
|
||||
);
|
||||
} else if (match[4]) {
|
||||
nodes.push(
|
||||
<code
|
||||
key={`${keyPrefix}-code-${matchIndex}`}
|
||||
className="rounded bg-slate-900/90 px-1.5 py-0.5 font-mono text-[0.92em] text-amber-200"
|
||||
>
|
||||
{match[4]}
|
||||
</code>,
|
||||
);
|
||||
} else if (match[5] || match[6]) {
|
||||
nodes.push(
|
||||
<strong key={`${keyPrefix}-strong-${matchIndex}`} className="font-semibold text-slate-900">
|
||||
{match[5] ?? match[6]}
|
||||
</strong>,
|
||||
);
|
||||
} else if (match[7] || match[8]) {
|
||||
nodes.push(
|
||||
<em key={`${keyPrefix}-em-${matchIndex}`} className="italic">
|
||||
{match[7] ?? match[8]}
|
||||
</em>,
|
||||
);
|
||||
}
|
||||
|
||||
lastIndex = match.index + match[0].length;
|
||||
matchIndex += 1;
|
||||
}
|
||||
|
||||
const trailingText = text.slice(lastIndex);
|
||||
if (trailingText) {
|
||||
nodes.push(...renderPlainText(trailingText, `${keyPrefix}-tail`));
|
||||
}
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
function renderPlainText(text: string, keyPrefix: string): React.ReactNode[] {
|
||||
return text.split("\n").flatMap((segment, index, array) => {
|
||||
const nodes: React.ReactNode[] = [
|
||||
<React.Fragment key={`${keyPrefix}-${index}`}>{segment}</React.Fragment>,
|
||||
];
|
||||
|
||||
if (index < array.length - 1) {
|
||||
nodes.push(<br key={`${keyPrefix}-br-${index}`} />);
|
||||
}
|
||||
|
||||
return nodes;
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user