206 lines
9.2 KiB
TypeScript
206 lines
9.2 KiB
TypeScript
import katex from 'katex';
|
|
import hljs from 'highlight.js';
|
|
|
|
export interface MediaInfo {
|
|
type: 'img' | 'video';
|
|
src: string;
|
|
alt?: string;
|
|
}
|
|
|
|
export interface RenderResult {
|
|
html: string;
|
|
media: MediaInfo[];
|
|
}
|
|
|
|
function escapeHtml(text: string): string {
|
|
return text
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"');
|
|
}
|
|
|
|
/**
|
|
* 将 Markdown 文本转为带占位符的 HTML 字符串。
|
|
*
|
|
* 设计契约（曾被线上 bug 击穿、用单测固化，见 markdown.test.ts）：
|
|
* - 段落内【单个 \n 转为空格】而非 <br/>，避免 AI 回复被强制大量换行；
|
|
* - 【3+ 连续空行压缩为 2 个】（/\n{3,}/ -> \n\n），避免多余空白把内容撑成多行；
|
|
* - 【表格在加粗/链接转换之后提取】，单元格内的 **xxx** / [文本](url) 才能被渲染；
|
|
* 且单元格内连续 <br> 被压缩为单个（normalizeCell）。
|
|
*
|
|
* 媒体(<img>/<video>)以 \x00MEDIA<n>\x00 占位符保留在返回的 html 中，
|
|
* 由调用方（ChatPage 的 MarkdownContent）切分后渲染为 React 组件。
|
|
*/
|
|
export function renderMarkdownToHtml(content: string): RenderResult {
|
|
let text = content;
|
|
|
|
// 1. Extract code blocks first (protect from other replacements)
|
|
const codeBlocks: string[] = [];
|
|
const mermaidBlocks: string[] = [];
|
|
text = text.replace(/```(\w*)\n?([\s\S]*?)```/g, (_m: string, _lang: string, code: string) => {
|
|
if (_lang === 'mermaid') {
|
|
const idx = mermaidBlocks.length;
|
|
mermaidBlocks.push('<div class="md-mermaid" data-code="' + escapeHtml(code.trim()) + '"></div>');
|
|
return '\x00MERMAID' + idx + '\x00';
|
|
}
|
|
const idx = codeBlocks.length;
|
|
codeBlocks.push('<pre class="md-code-block"><code class="md-code">' + escapeHtml(code.trim()) + '</code></pre>');
|
|
return '\x00CODEBLOCK' + idx + '\x00';
|
|
});
|
|
|
|
// 2. Extract inline code
|
|
const inlineCodes: string[] = [];
|
|
text = text.replace(/`([^`]+)`/g, (_m: string, code: string) => {
|
|
const idx = inlineCodes.length;
|
|
inlineCodes.push('<code class="md-inline-code">' + escapeHtml(code) + '</code>');
|
|
return '\x00INLINE' + idx + '\x00';
|
|
});
|
|
|
|
// 2.5 Extract media blocks (<img>/<video>) -> 结构化，后续渲染为 React 组件
|
|
const mediaBlocks: MediaInfo[] = [];
|
|
text = text.replace(/<(img|video)([^>]*?)\/?>/gi, (_m: string, tag: string, attrs: string) => {
|
|
const type = tag.toLowerCase() === 'img' ? 'img' : 'video';
|
|
const srcM = attrs.match(/src=["']([^"']+)["']/i);
|
|
const altM = attrs.match(/alt=["']([^"']*)["']/i);
|
|
mediaBlocks.push({ type, src: srcM ? srcM[1] : '', alt: altM ? altM[1] : '' });
|
|
return '\x00MEDIA' + (mediaBlocks.length - 1) + '\x00';
|
|
});
|
|
|
|
// 2.6 Normalize excessive blank lines in prose (code blocks already extracted)
|
|
text = text.replace(/\n{3,}/g, '\n\n').trim();
|
|
|
|
// 2.8 LaTeX 数学公式：$$...$$（块级）和 $...$（行内）
|
|
const mathBlocks: string[] = [];
|
|
text = text.replace(/\$\$([\s\S]+?)\$\$/g, (_m: string, formula: string) => {
|
|
try {
|
|
const rendered = katex.renderToString(formula.trim(), { displayMode: true, throwOnError: false });
|
|
const idx = mathBlocks.length;
|
|
mathBlocks.push(`<div class="md-math-block">${rendered}</div>`);
|
|
return '\x00MATHBLOCK' + idx + '\x00';
|
|
} catch { return _m; }
|
|
});
|
|
text = text.replace(/\$([^\s$][^$]*[^\s$])\$/g, (_m: string, formula: string) => {
|
|
try {
|
|
const rendered = katex.renderToString(formula.trim(), { displayMode: false, throwOnError: false });
|
|
const idx = mathBlocks.length;
|
|
mathBlocks.push(`<span class="md-math-inline">${rendered}</span>`);
|
|
return '\x00MATHBLOCK' + idx + '\x00';
|
|
} catch { return _m; }
|
|
});
|
|
|
|
// 2.9 Strikethrough: ~~text~~ -> <del>text</del>
|
|
text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
|
|
|
|
// 2.10 Auto-link bare URLs: http(s)://... -> <a>
|
|
text = text.replace(/(?<![="'>])https?:\/\/[^\s<>[\]()]+/g, (url: string) =>
|
|
`<a class="md-link" href="${url}" target="_blank" rel="noopener">${url}</a>`
|
|
);
|
|
|
|
// 3. Headers
|
|
text = text.replace(/^#### (.+)$/gm, '<h4 class="md-h4">$1</h4>');
|
|
text = text.replace(/^### (.+)$/gm, '<h4 class="md-h4">$1</h4>');
|
|
text = text.replace(/^## (.+)$/gm, '<h3 class="md-h3">$1</h3>');
|
|
text = text.replace(/^# (.+)$/gm, '<h2 class="md-h2">$1</h2>');
|
|
|
|
// 4. Horizontal rule
|
|
text = text.replace(/^---+$/gm, '<hr class="md-hr">');
|
|
|
|
// 5. Blockquotes
|
|
text = text.replace(/^> (.+)$/gm, '<blockquote class="md-blockquote">$1</blockquote>');
|
|
|
|
// 6. Links [text](url)
|
|
text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a class="md-link" href="$2" target="_blank" rel="noopener">$1</a>');
|
|
|
|
// 7. Bold and italic
|
|
text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
|
|
text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
|
text = text.replace(/(?<!\w)\*(?!\*)(.+?)(?<!\*)\*(?!\w)/g, '<em>$1</em>');
|
|
|
|
// 7.5 Extract Markdown tables after inline formatting so cells support bold/italic/links.
|
|
// 表格提取放在加粗/链接之后，避免单元格内 **xxx** 原样显示；同时压缩单元格内多余 <br>。
|
|
const tableBlocks: string[] = [];
|
|
text = text.replace(
|
|
/((?:^\|.+\|\r?\n)+^\|[\s\-:|]+\|\r?\n(?:^\|.+\|\r?\n?)+)/gm,
|
|
(_m: string, block: string) => {
|
|
const lines = block.trim().split(/\r?\n/).filter((l: string) => l.trim());
|
|
if (lines.length < 2) return block;
|
|
const headerCells = lines[0].split('|').slice(1, -1).map((c: string) => c.trim());
|
|
const alignCells = lines[1].split('|').slice(1, -1).map((c: string) => {
|
|
const t = c.trim();
|
|
const left = t.startsWith(':');
|
|
const right = t.endsWith(':');
|
|
if (left && right) return 'center';
|
|
if (right) return 'right';
|
|
if (left) return 'left';
|
|
return 'left';
|
|
});
|
|
const normalizeCell = (cell: string) => {
|
|
return cell
|
|
.replace(/<br\s*\/?>\s*/gi, '<br/>')
|
|
.replace(/\n/g, '<br/>')
|
|
.replace(/(<br\/>){2,}/g, '<br/>')
|
|
.replace(/^(<br\/>)+|(<br\/>)+$/g, '');
|
|
};
|
|
const bodyRows = lines.slice(2).map((row: string) =>
|
|
row.split('|').slice(1, -1).map((c: string) => normalizeCell(c.trim()))
|
|
);
|
|
const thead = headerCells.map((c: string, i: number) =>
|
|
`<th style="text-align:${alignCells[i] || 'left'}">${normalizeCell(c)}</th>`
|
|
).join('');
|
|
const tbody = bodyRows.map((r: string[]) =>
|
|
'<tr>' + r.map((c: string, i: number) =>
|
|
`<td style="text-align:${alignCells[i] || 'left'}">${c}</td>`
|
|
).join('') + '</tr>'
|
|
).join('');
|
|
const html = `<table class="md-table"><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table>`;
|
|
const idx = tableBlocks.length;
|
|
tableBlocks.push(html);
|
|
return '\x00TABLE' + idx + '\x00';
|
|
}
|
|
);
|
|
|
|
// 8. Lists
|
|
text = text.replace(/^\s*[-*] (.+)$/gm, '<li class="md-li">$1</li>');
|
|
text = text.replace(/^\s*\d+\. (.+)$/gm, '<li class="md-li">$1</li>');
|
|
// Wrap consecutive <li> in <ul>
|
|
text = text.replace(/((?:<li class="md-li">[\s\S]*?<\/li>\n?)+)/g, '<ul class="md-ul">$1</ul>');
|
|
|
|
// 9. Convert double newlines to paragraph breaks, single newlines to spaces
|
|
text = text.replace(/\n\n/g, '</p><p class="md-p">');
|
|
text = text.replace(/\n/g, ' ');
|
|
|
|
// 10. Restore code blocks and inline codes
|
|
text = text.replace(/\x00CODEBLOCK(\d+)\x00/g, (_m: string, idx: string) => codeBlocks[parseInt(idx)] || '');
|
|
text = text.replace(/\x00MERMAID(\d+)\x00/g, (_m: string, idx: string) => mermaidBlocks[parseInt(idx)] || '');
|
|
text = text.replace(/\x00INLINE(\d+)\x00/g, (_m: string, idx: string) => inlineCodes[parseInt(idx)] || '');
|
|
text = text.replace(/\x00TABLE(\d+)\x00/g, (_m: string, idx: string) => tableBlocks[parseInt(idx)] || '');
|
|
text = text.replace(/\x00MATHBLOCK(\d+)\x00/g, (_m: string, idx: string) => mathBlocks[parseInt(idx)] || '');
|
|
|
|
// 10.5 Apply syntax highlighting to code blocks + add copy button
|
|
text = text.replace(
|
|
/<pre class="md-code-block"><code class="md-code">([\s\S]*?)<\/code><\/pre>/g,
|
|
(_m: string, code: string) => {
|
|
const decoded = code.replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&');
|
|
let highlighted: string;
|
|
try { highlighted = hljs.highlightAuto(decoded).value; } catch { highlighted = code; }
|
|
return `<div class="md-code-wrapper">
|
|
<button class="md-code-copy" onclick="navigator.clipboard.writeText(this.parentElement.querySelector('code').textContent);this.textContent='已复制';setTimeout(()=>this.textContent='复制',2000)">复制</button>
|
|
<pre class="md-code-block"><code class="md-code hljs">${highlighted}</code></pre>
|
|
</div>`;
|
|
}
|
|
);
|
|
|
|
// 11. Wrap in paragraph and clean up
|
|
text = '<p class="md-p">' + text + '</p>';
|
|
text = text.replace(/<p class="md-p"><\/p>/g, '');
|
|
text = text.replace(/<p class="md-p">(<h[234][\s\S]*?<\/h[234]>)<\/p>/g, '$1');
|
|
text = text.replace(/<p class="md-p">(<pre[\s\S]*?<\/pre>)<\/p>/g, '$1');
|
|
text = text.replace(/<p class="md-p">(<ul[\s\S]*?<\/ul>)<\/p>/g, '$1');
|
|
text = text.replace(/<p class="md-p">(<hr[\s\S]*?)<\/p>/g, '$1');
|
|
text = text.replace(/<p class="md-p">(<blockquote[\s\S]*?<\/blockquote>)<\/p>/g, '$1');
|
|
text = text.replace(/<p class="md-p">(<table[\s\S]*?<\/table>)<\/p>/g, '$1');
|
|
|
|
return { html: text, media: mediaBlocks };
|
|
}
|