// Article.jsx — article reader with markdown features + highlight/comment + gifts const Article = ({ posts, postId, session, onSignIn, onBack }) => { const post = posts.find((p) => p.id === postId) || posts[0]; const cat = CATEGORIES[post.cat]; const scrollerRef = React.useRef(null); const proseRef = React.useRef(null); const isMobile = useIsMobile(); const [highlights, setHighlights] = React.useState([]); const [gifts, setGifts] = React.useState({ ...post.gifts }); const [activeSlug, setActiveSlug] = React.useState(null); // Scrollspy: highlight the TOC entry for the section currently in view React.useEffect(() => { const scroller = scrollerRef.current; const container = proseRef.current; if (!scroller || !container) return; const headings = [...container.querySelectorAll("h1[id], h2[id], h3[id]")]; if (!headings.length) return; const onScroll = () => { const offset = 140; let current = headings[0].id; for (const h of headings) { if (h.getBoundingClientRect().top - offset <= 0) current = h.id; else break; } setActiveSlug(current); }; onScroll(); scroller.addEventListener("scroll", onScroll, { passive: true }); return () => scroller.removeEventListener("scroll", onScroll); }, [post.id, post.body]); // Load highlights from server on mount React.useEffect(() => { API.get(`/posts/${post.id}/highlights`).then(arr => { if (Array.isArray(arr)) setHighlights(arr.map(normalizeHL)); }).catch(() => {}); }, [post.id]); // Floating selection toolbar const [tool, setTool] = React.useState(null); // { x, y, text, range } const [pendingHL, setPendingHL] = React.useState(null); // text awaiting a comment const onMouseUp = () => { setTimeout(() => { const sel = window.getSelection(); if (!sel || sel.isCollapsed) { setTool(null); return; } const text = sel.toString().trim(); if (text.length < 3) { setTool(null); return; } const r = sel.getRangeAt(0).getBoundingClientRect(); const containerRect = proseRef.current?.getBoundingClientRect(); if (!containerRect) return; setTool({ text, x: r.left + r.width / 2, y: r.top - 8, }); }, 10); }; const sendGift = (kind) => { // Optimistic update, then persist setGifts((g) => ({ ...g, [kind]: (g[kind] || 0) + 1 })); if (session) { API.post(`/posts/${post.id}/gifts/${kind}`, {}, { nickname: session.nickname }) .then(d => { if (d && d.gifts) setGifts(d.gifts); }) .catch(() => {}); } }; const addHighlight = (color) => { if (!tool || !session) { if (!session) onSignIn(); setTool(null); return; } const anchor = tool.text; setTool(null); window.getSelection().removeAllRanges(); API.post(`/posts/${post.id}/highlights`, { anchor, color, text: "" }, { nickname: session.nickname }) .then(h => { if (h && h.id) setHighlights(arr => [...arr, normalizeHL(h)]); }) .catch(() => {}); }; const startComment = () => { if (!session) { onSignIn(); return; } setPendingHL({ anchor: tool.text, color: "yellow", text: "" }); setTool(null); window.getSelection().removeAllRanges(); }; const saveComment = () => { const { anchor, color, text } = pendingHL; setPendingHL(null); API.post(`/posts/${post.id}/highlights`, { anchor, color, text: text.trim() }, { nickname: session.nickname }) .then(h => { if (h && h.id) setHighlights(arr => [...arr, normalizeHL(h)]); }) .catch(() => {}); }; const normalizeHL = (h) => ({ id: h.id, postId: post.id, anchor: h.anchor, color: h.color || "yellow", user: h.user, initial: (h.user || "?")[0].toUpperCase(), avatarColor: h.avatarColor || "pine", time: h.time || h.createdAt || "now", text: h.text || "", }); // Build a map: anchor text → { color, isCommented } const hlMap = React.useMemo(() => { const m = new Map(); for (const h of highlights) { const existing = m.get(h.anchor); if (!existing || h.text) m.set(h.anchor, h); } return m; }, [highlights]); return (
{/* sticky chrome */}
{post.no} · {post.readTime}
{/* Article hero cover (if any) */} {post.cover && (
)} {/* Header */}
{cat.cn}
{cat.en}

$1'), }}/>
{post.date}·{post.readTime} · {highlights.length} highlight{highlights.length === 1 ? "" : "s"}

{/* Prose body */}
{(post.body || []).map((b, i) => ( ))}
{/* End of post — gifts + signature */}
Enjoyed it? · send a little something
— Xu Wang, {post.date}
{/* Margin notes (anchored to highlights) */}
Margin notes · {highlights.length}
{highlights.length === 0 && (
还没有评论。第一个高亮往往最有意思。
)} {highlights.map((c, i) => )}
{/* Standalone Comments section */}
{/* Right rail — TOC + marginalia preview — hidden on mobile */}
{/* Floating selection toolbar */} {tool && ( )} {/* Comment composer */} {pendingHL && ( setPendingHL({ ...pendingHL, ...v })} onCancel={() => setPendingHL(null)} onSave={saveComment} /> )}
); }; // — Prose block — const ProseBlock = ({ block, hlMap }) => { const isMobile = useIsMobile(); const renderText = (text) => { // Wrap any anchor in hlMap with const anchors = [...hlMap.keys()].sort((a, b) => b.length - a.length); let nodes = [text]; for (const a of anchors) { const next = []; for (const n of nodes) { if (typeof n !== "string") { next.push(n); continue; } const idx = n.indexOf(a); if (idx === -1) { next.push(n); continue; } const h = hlMap.get(a); next.push(n.slice(0, idx)); next.push( {a} ); next.push(n.slice(idx + a.length)); } nodes = next; } // inline bold / italic / code / links — single combined pass to avoid clashes const INLINE_RE = /(\*\*\*(.+?)\*\*\*|\*\*(.+?)\*\*|`([^`]+?)`|\$([^$\n]+?)\$|\[([^\]]+)\]\((https?:\/\/[^)]+)\)|(https?:\/\/[^\s一-鿿，。；！？、："'（）【】《》]+)|\*([^*]+?)\*)/g; const formatted = []; nodes.forEach((n, ni) => { if (typeof n !== "string") { formatted.push(n); return; } let last = 0, m, ki = 0; while ((m = INLINE_RE.exec(n))) { if (m.index > last) formatted.push(n.slice(last, m.index)); const key = `i${ni}-${ki++}`; if (m[2] !== undefined) formatted.push({m[2]}); else if (m[3] !== undefined) formatted.push({m[3]}); else if (m[4] !== undefined) formatted.push( {m[4]} ); else if (m[5] !== undefined) formatted.push(); else if (m[6] !== undefined) formatted.push( {m[6]} ); else if (m[8] !== undefined) formatted.push( {m[8]} ); else if (m[9] !== undefined) formatted.push({m[9]}); last = INLINE_RE.lastIndex; } if (last < n.length) formatted.push(n.slice(last)); }); return formatted; }; if (block.type === "drop") { const t = block.text; const first = t[0]; return (

{first} {renderText(t.slice(1))}

); } if (block.type === "p") return

{renderText(block.text)}

; if (block.type === "h1") { const slug = block.text.replace(/\s+/g, "-").replace(/[^\w一-龥-]/g, "").toLowerCase(); return (

{block.text}

); } if (block.type === "h2") { const slug = block.text.replace(/\s+/g, "-").replace(/[^\w一-龥-]/g, "").toLowerCase(); return

{block.text}

; } if (block.type === "h3") { const slug = block.text.replace(/\s+/g, "-").replace(/[^\w一-龥-]/g, "").toLowerCase(); return (

{block.text}

); } if (block.type === "list") return ; if (block.type === "table") return ; if (block.type === "aside") return ; if (block.type === "math") return ; if (block.type === "mermaid") return ; if (block.type === "quote") return (
{renderText(block.text)}
); if (block.type === "code") return ; if (block.type === "link") return ; if (block.type === "video") return ; if (block.type === "hr") return
; if (block.type === "image") return ; return null; }; // — Lists (supports nested lists / asides / paragraphs inside items) — const ProseList = ({ block, renderText, isMobile, depth = 0 }) => { const Tag = block.ordered ? "ol" : "ul"; return ( {block.items.map((item, i) => (
  • {renderText(item.text)} {item.children && item.children.map((child, ci) => ( child.type === "list" ? : child.type === "aside" ? : child.type === "image" ? : child.type === "code" ? : child.type === "mermaid" ? :

    {renderText(child.text)}

    ))}
    • ))}     ); }; // — Tables — const ProseTable = ({ block, renderText, isMobile }) => (
    {block.header.map((h, i) => ( ))} {block.rows.map((row, ri) => ( {row.map((cell, ci) => ( ))} ))}
    {renderText(h)}
    {renderText(cell)}
    ); // — Asides / callouts — const ProseAside = ({ block, renderText, isMobile }) => (
    💡
    {(block.paragraphs || []).map((p, i) => (

    {renderText(p)}

    ))}
    ); // — Math (KaTeX) — const InlineMath = ({ tex }) => { const ref = React.useRef(null); React.useEffect(() => { if (ref.current && window.katex) { try { window.katex.render(tex, ref.current, { displayMode: false, throwOnError: false }); } catch (e) { ref.current.textContent = tex; } } }, [tex]); return {tex}; }; const MathBlock = ({ tex }) => { const ref = React.useRef(null); React.useEffect(() => { if (ref.current && window.katex) { try { window.katex.render(tex, ref.current, { displayMode: true, throwOnError: false }); } catch (e) { ref.current.textContent = tex; } } }, [tex]); return
    {tex}
    ; }; // — Mermaid diagrams — let mermaidSeq = 0; const MermaidBlock = ({ code }) => { const ref = React.useRef(null); const [svg, setSvg] = React.useState(null); React.useEffect(() => { let cancelled = false; if (window.mermaid) { try { window.mermaid.initialize({ startOnLoad: false, theme: "neutral", themeVariables: { fontFamily: "var(--font-sans)", primaryColor: "#EFD5C8", primaryBorderColor: "#A03A1F", lineColor: "#6B6258" } }); const id = `mermaid-${++mermaidSeq}`; window.mermaid.render(id, code).then(({ svg }) => { if (!cancelled) setSvg(svg); }).catch(() => {}); } catch (e) {} } return () => { cancelled = true; }; }, [code]); return (
    {svg ?
    : 
    {code}
    }
    ); }; const ArticleImage = ({ src, motif, tint, caption, alt }) => (
    {src ? ( {alt ) : ( )} {caption && (
    {caption}
    )}
    ); const pStyle = { fontFamily: "var(--font-serif)", fontSize: 19, lineHeight: 1.65, color: "var(--ink)", margin: "0 0 22px", textWrap: "pretty", }; const h2Style = { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 24, lineHeight: 1.2, color: "var(--ink)", margin: "44px 0 18px", letterSpacing: "0", }; const pStyleMobile = { fontFamily: "var(--font-serif)", fontSize: 18, lineHeight: 1.7, color: "var(--ink)", margin: "0 0 20px", textWrap: "pretty", }; const h2StyleMobile = { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 19, lineHeight: 1.25, color: "var(--ink)", margin: "32px 0 14px", letterSpacing: "0", }; const CodeBlock = ({ block }) => { const lines = block.code.split("\n"); return (
    router.py{block.lang} 
            {lines.map((ln, i) => (
          
    
            {i + 1}
            
          
    
        ))}
    ); }; const highlightLine = (ln) => { const esc = (s) => s.replace(/&/g, "&").replace(//g, ">"); let out = esc(ln); out = out.replace(/(#.*)$/g, '$1'); out = out.replace(/("[^&]*?"|'[^&]*?'|"[^"]*")/g, '$1'); out = out.replace(/\b(def|return|if|in|else|elif|for|while|import|from|as|class)\b/g, '$1'); out = out.replace(/\b(str|int|float|bool|list|dict|Tool)\b/g, '$1'); return out; }; const SelectionToolbar = ({ tool, onHighlight, onComment }) => (
    {["yellow", "pink", "mint", "blue"].map((c) => (
    ); const CommentComposer = ({ hl, onChange, onCancel, onSave }) => (
    e.stopPropagation()} style={{ width: 540, background: "var(--paper)", borderRadius: 8, boxShadow: "var(--shadow-4)", padding: "26px 28px", animation: "modalIn 280ms var(--ease-out)", }}> Comment on highlight
    {hl.anchor}
    {["yellow", "pink", "mint", "blue"].map((c) => (