290 lines
7.7 KiB
TypeScript
290 lines
7.7 KiB
TypeScript
|
import { Fragment, type ReactNode } from "react";
|
|||
|
|
|
|||
|
|
type Props = {
|
|||
|
|
text: string;
|
|||
|
|
className?: string;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 聊天泡泡用輕量 markdown（不引入 react-markdown）。
|
|||
|
|
* 一般回覆：每個實際換行都獨立成行，不會擠成一團。
|
|||
|
|
* 另支援：標題、粗斜體、刪除線、行內/區塊 code、清單、引用、連結。
|
|||
|
|
* HTML 一律當純文字，連結僅允許 http(s)/mailto。
|
|||
|
|
*/
|
|||
|
|
export function MarkdownText({ text, className = "" }: Props) {
|
|||
|
|
const source = normalizeNewlines(text ?? "");
|
|||
|
|
if (!source.trim()) {
|
|||
|
|
return <div className={`hb-md ${className}`.trim()} />;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const blocks = parseBlocks(source);
|
|||
|
|
return (
|
|||
|
|
<div className={`hb-md ${className}`.trim()}>
|
|||
|
|
{blocks.map((block, i) => (
|
|||
|
|
<Fragment key={i}>{renderBlock(block)}</Fragment>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type Block =
|
|||
|
|
| { type: "line"; text: string }
|
|||
|
|
| { type: "gap" }
|
|||
|
|
| { type: "h"; level: 1 | 2 | 3; text: string }
|
|||
|
|
| { type: "ul"; items: string[] }
|
|||
|
|
| { type: "ol"; items: string[] }
|
|||
|
|
| { type: "quote"; lines: string[] }
|
|||
|
|
| { type: "code"; lang: string; code: string }
|
|||
|
|
| { type: "hr" };
|
|||
|
|
|
|||
|
|
function normalizeNewlines(source: string): string {
|
|||
|
|
return source
|
|||
|
|
.replace(/\r\n/g, "\n")
|
|||
|
|
.replace(/\r/g, "\n")
|
|||
|
|
.replace(/\u2028/g, "\n")
|
|||
|
|
.replace(/\u2029/g, "\n\n");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function parseBlocks(source: string): Block[] {
|
|||
|
|
const lines = source.split("\n");
|
|||
|
|
const blocks: Block[] = [];
|
|||
|
|
let i = 0;
|
|||
|
|
/** 連續空行只算一段落間距一次，開頭不插 gap */
|
|||
|
|
let pendingGap = false;
|
|||
|
|
let sawContent = false;
|
|||
|
|
|
|||
|
|
const flushGap = () => {
|
|||
|
|
if (pendingGap && sawContent) {
|
|||
|
|
blocks.push({ type: "gap" });
|
|||
|
|
}
|
|||
|
|
pendingGap = false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
while (i < lines.length) {
|
|||
|
|
const line = lines[i] ?? "";
|
|||
|
|
|
|||
|
|
// fenced code
|
|||
|
|
const fence = line.match(/^```([\w-]*)\s*$/);
|
|||
|
|
if (fence) {
|
|||
|
|
flushGap();
|
|||
|
|
const lang = fence[1] || "";
|
|||
|
|
const body: string[] = [];
|
|||
|
|
i += 1;
|
|||
|
|
while (i < lines.length && !/^```\s*$/.test(lines[i] ?? "")) {
|
|||
|
|
body.push(lines[i] ?? "");
|
|||
|
|
i += 1;
|
|||
|
|
}
|
|||
|
|
if (i < lines.length) i += 1; // closing ```
|
|||
|
|
blocks.push({ type: "code", lang, code: body.join("\n") });
|
|||
|
|
sawContent = true;
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
|
|||
|
|
flushGap();
|
|||
|
|
blocks.push({ type: "hr" });
|
|||
|
|
sawContent = true;
|
|||
|
|
i += 1;
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const heading = line.match(/^(#{1,3})\s+(.+)$/);
|
|||
|
|
if (heading) {
|
|||
|
|
flushGap();
|
|||
|
|
const level = heading[1]!.length as 1 | 2 | 3;
|
|||
|
|
blocks.push({ type: "h", level, text: heading[2]!.trim() });
|
|||
|
|
sawContent = true;
|
|||
|
|
i += 1;
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (/^>\s?/.test(line)) {
|
|||
|
|
flushGap();
|
|||
|
|
const quoteLines: string[] = [];
|
|||
|
|
while (i < lines.length && /^>\s?/.test(lines[i] ?? "")) {
|
|||
|
|
quoteLines.push((lines[i] ?? "").replace(/^>\s?/, ""));
|
|||
|
|
i += 1;
|
|||
|
|
}
|
|||
|
|
blocks.push({ type: "quote", lines: quoteLines });
|
|||
|
|
sawContent = true;
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (/^\s*[-*+]\s+/.test(line)) {
|
|||
|
|
flushGap();
|
|||
|
|
const items: string[] = [];
|
|||
|
|
while (i < lines.length && /^\s*[-*+]\s+/.test(lines[i] ?? "")) {
|
|||
|
|
items.push((lines[i] ?? "").replace(/^\s*[-*+]\s+/, ""));
|
|||
|
|
i += 1;
|
|||
|
|
}
|
|||
|
|
blocks.push({ type: "ul", items });
|
|||
|
|
sawContent = true;
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (/^\s*\d+\.\s+/.test(line)) {
|
|||
|
|
flushGap();
|
|||
|
|
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({ type: "ol", items });
|
|||
|
|
sawContent = true;
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 空行 → 段落間距（普通回覆的「空一行」）
|
|||
|
|
if (!line.trim()) {
|
|||
|
|
pendingGap = true;
|
|||
|
|
i += 1;
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 一般文字：每一行獨立成行（聊天最重要）
|
|||
|
|
flushGap();
|
|||
|
|
blocks.push({ type: "line", text: line });
|
|||
|
|
sawContent = true;
|
|||
|
|
i += 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return blocks;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderBlock(block: Block): ReactNode {
|
|||
|
|
switch (block.type) {
|
|||
|
|
case "line":
|
|||
|
|
return (
|
|||
|
|
<div className="hb-md__line">
|
|||
|
|
{block.text ? renderInline(block.text) : "\u00a0"}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
case "gap":
|
|||
|
|
return <div className="hb-md__gap" aria-hidden />;
|
|||
|
|
case "h": {
|
|||
|
|
const Tag = `h${block.level}` as "h1" | "h2" | "h3";
|
|||
|
|
return (
|
|||
|
|
<Tag className={`hb-md__h hb-md__h--${block.level}`}>
|
|||
|
|
{renderInline(block.text)}
|
|||
|
|
</Tag>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
case "ul":
|
|||
|
|
return (
|
|||
|
|
<ul className="hb-md__ul">
|
|||
|
|
{block.items.map((item, j) => (
|
|||
|
|
<li key={j}>{renderInline(item)}</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
);
|
|||
|
|
case "ol":
|
|||
|
|
return (
|
|||
|
|
<ol className="hb-md__ol">
|
|||
|
|
{block.items.map((item, j) => (
|
|||
|
|
<li key={j}>{renderInline(item)}</li>
|
|||
|
|
))}
|
|||
|
|
</ol>
|
|||
|
|
);
|
|||
|
|
case "quote":
|
|||
|
|
return (
|
|||
|
|
<blockquote className="hb-md__quote">
|
|||
|
|
{block.lines.map((line, j) => (
|
|||
|
|
<div key={j} className="hb-md__line">
|
|||
|
|
{line ? renderInline(line) : "\u00a0"}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</blockquote>
|
|||
|
|
);
|
|||
|
|
case "code":
|
|||
|
|
return (
|
|||
|
|
<pre className="hb-md__pre" data-lang={block.lang || undefined}>
|
|||
|
|
<code>{block.code}</code>
|
|||
|
|
</pre>
|
|||
|
|
);
|
|||
|
|
case "hr":
|
|||
|
|
return <hr className="hb-md__hr" />;
|
|||
|
|
default:
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 行內：code → bold/italic/strike → links → plain */
|
|||
|
|
function renderInline(text: string): ReactNode[] {
|
|||
|
|
const nodes: ReactNode[] = [];
|
|||
|
|
const codeSplit = text.split(/(`[^`\n]+`)/g);
|
|||
|
|
codeSplit.forEach((chunk, ci) => {
|
|||
|
|
if (!chunk) return;
|
|||
|
|
if (chunk.startsWith("`") && chunk.endsWith("`") && chunk.length >= 2) {
|
|||
|
|
nodes.push(
|
|||
|
|
<code key={`c${ci}`} className="hb-md__code">
|
|||
|
|
{chunk.slice(1, -1)}
|
|||
|
|
</code>,
|
|||
|
|
);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
nodes.push(...renderInlineDecorated(chunk, `t${ci}`));
|
|||
|
|
});
|
|||
|
|
return nodes;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderInlineDecorated(text: string, keyPrefix: string): ReactNode[] {
|
|||
|
|
const nodes: ReactNode[] = [];
|
|||
|
|
const re =
|
|||
|
|
/(\*\*[^*]+\*\*|\*[^*\n]+\*|~~[^~]+~~|\[([^\]]+)\]\(([^)\s]+)\))/g;
|
|||
|
|
let last = 0;
|
|||
|
|
let m: RegExpExecArray | null;
|
|||
|
|
let idx = 0;
|
|||
|
|
while ((m = re.exec(text)) !== null) {
|
|||
|
|
if (m.index > last) {
|
|||
|
|
nodes.push(
|
|||
|
|
<Fragment key={`${keyPrefix}-p${idx++}`}>{text.slice(last, m.index)}</Fragment>,
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
const token = m[0];
|
|||
|
|
if (token.startsWith("**") && token.endsWith("**")) {
|
|||
|
|
nodes.push(
|
|||
|
|
<strong key={`${keyPrefix}-b${idx++}`}>{token.slice(2, -2)}</strong>,
|
|||
|
|
);
|
|||
|
|
} else if (token.startsWith("~~") && token.endsWith("~~")) {
|
|||
|
|
nodes.push(
|
|||
|
|
<del key={`${keyPrefix}-d${idx++}`}>{token.slice(2, -2)}</del>,
|
|||
|
|
);
|
|||
|
|
} else if (token.startsWith("*") && token.endsWith("*")) {
|
|||
|
|
nodes.push(
|
|||
|
|
<em key={`${keyPrefix}-i${idx++}`}>{token.slice(1, -1)}</em>,
|
|||
|
|
);
|
|||
|
|
} else if (m[2] != null && m[3] != null) {
|
|||
|
|
const href = sanitizeHref(m[3]);
|
|||
|
|
if (href) {
|
|||
|
|
nodes.push(
|
|||
|
|
<a
|
|||
|
|
key={`${keyPrefix}-a${idx++}`}
|
|||
|
|
href={href}
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="hb-md__a"
|
|||
|
|
>
|
|||
|
|
{m[2]}
|
|||
|
|
</a>,
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
nodes.push(
|
|||
|
|
<Fragment key={`${keyPrefix}-al${idx++}`}>{m[2]}</Fragment>,
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
last = m.index + token.length;
|
|||
|
|
}
|
|||
|
|
if (last < text.length) {
|
|||
|
|
nodes.push(<Fragment key={`${keyPrefix}-e`}>{text.slice(last)}</Fragment>);
|
|||
|
|
}
|
|||
|
|
return nodes;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function sanitizeHref(raw: string): string | null {
|
|||
|
|
const href = raw.trim();
|
|||
|
|
if (/^https?:\/\//i.test(href)) return href;
|
|||
|
|
if (/^mailto:/i.test(href)) return href;
|
|||
|
|
return null;
|
|||
|
|
}
|