fix(web): replace default markdown renderer and expand syntax support

[QuentinHsu]

⚠️ 提交说明 / PR Notice

Important

• 请提供人工撰写的简洁摘要，避免直接粘贴未经整理的 AI 输出。

📝 变更描述 / Description

(简述：做了什么？为什么这样改能生效？请基于你对代码逻辑的理解来写，避免粘贴未经整理的内容)

问题描述

• default 前端原 Markdown 渲染链路依赖 remark-gfm，相关依赖会在首屏 bundle 中引入旧 WebKit 无法解析的 lookbehind 正则字面量，可能导致 iOS 16.1 等环境白屏。
• 替换为 marked 后，部分 Markdown Extra 风格内容仍需要补充支持，例如公式、分页符、 emoji 短码、 时序图和流程图。

修复方式

• 将 default 的 Markdown 组件从 react-markdown + remark-gfm + rehype-raw 替换为 marked。
• 使用 DOMPurify 清理 marked 生成的 HTML，并继续为链接补充 target="_blank" 和 rel="noopener noreferrer"。
• 增加 KaTeX 渲染，支持 $$...$$ 以及 math/katex/latex 代码块。
• 增加 [========] 分页符、常见 emoji 短码、 时序图和流程图支持。
• 避免覆写 marked text renderer，改用 walkTokens 处理 emoji，保留列表和内联解析的内部上下文。
• remark-gfm 更新频率相对较低，marked 更新更活跃。
• classic 前端保持不变。

测试说明

• 已在 web/default 执行 bun run typecheck。
• 已在 web/default 执行 bun run build。
• 已用包含 task list、emoji、HTML entity、公式、分页符、 时序图和流程图的样例做渲染检查。

🚀 变更类型 / Type of change

• 🐛 Bug 修复 (Bug fix) - 请关联对应 Issue，避免将设计取舍、理解偏差或预期不一致直接归类为 bug
• ✨ 新功能 (New feature) - 重大特性建议先通过 Issue 沟通
• ⚡ 性能优化 / 重构 (Refactor)
• 📝 文档更新 (Documentation)

🔗 关联任务 / Related Issue

• Closes iOS 16.1 WebKit 白屏：前端 bundle 包含不兼容的 RegExp lookbehind #5550 (如有)

✅ 提交前检查项 / Checklist

• 人工确认: 我已亲自整理并撰写此描述，没有直接粘贴未经处理的 AI 输出。
• 非重复提交: 我已搜索现有的 Issues 与 PRs，确认不是重复提交。
• Bug fix 说明: 若此 PR 标记为 Bug fix，我已提交或关联对应 Issue，且不会将设计取舍、预期不一致或理解偏差直接归类为 bug。
• 变更理解: 我已理解这些更改的工作原理及可能影响。
• 范围聚焦: 本 PR 未包含任何与当前任务无关的代码改动。
• 本地验证: 已在本地运行并通过测试或手动验证，维护者可以据此复核结果。
• 安全合规: 代码中无敏感凭据，且符合项目代码规范。

📸 运行证明 / Proof of Work

(请在此粘贴截图、关键日志或测试报告，以证明变更生效)

Summary by CodeRabbit

• New Features
  • Enhanced markdown rendering with support for flow and sequence diagrams
  • Added LaTeX/KaTeX mathematical formula support
  • Introduced page break syntax and emoji shortcode conversion
  • Improved link security with new tab handling and HTML sanitization

[coderabbitai]

Walkthrough

Replaces the markdown rendering stack in web/default: removes react-markdown, rehype-raw, and remark-gfm from package.json and adds marked, katex, and dompurify. The Markdown component is rewritten to use a marked-based pipeline with custom renderers for math, flow/sequence diagrams, emoji shortcodes, and DOMPurify sanitization, rendering via dangerouslySetInnerHTML.

Changes

Markdown Rendering Pipeline Rewrite

Layer / File(s)	Summary
Dependency swap and renderMarkdown pipeline web/default/package.json, web/default/src/components/ui/markdown.tsx	Removes react-markdown, rehype-raw, remark-gfm; adds dompurify, katex, marked. Introduces MarkdownProps, renderMarkdown with a configured Marked instance, custom code-block handlers for math/katex/latex, flow and seq SVG diagram generators, page-break and $$ block/inline math extensions, emoji shortcode replacement, and DOMPurify sanitization with external-link post-processing.
Component JSX output web/default/src/components/ui/markdown.tsx	Removes the ReactMarkdown render tree; renders the memoized sanitized HTML via dangerouslySetInnerHTML. Updates props.className concatenation in the Tailwind class list.

Sequence Diagram(s)

sequenceDiagram
  participant Browser as Browser (iOS/Desktop)
  participant Markdown as Markdown Component
  participant renderMarkdown as renderMarkdown()
  participant Marked as Marked + Extensions
  participant DOMPurify as DOMPurify

  Browser->>Markdown: render(children)
  Markdown->>renderMarkdown: useMemo(children)
  renderMarkdown->>Marked: parse markdown string
  Marked-->>renderMarkdown: raw HTML (math/SVG/emoji expanded)
  renderMarkdown->>DOMPurify: sanitize(html, allowlist)
  DOMPurify-->>renderMarkdown: safe HTML string
  renderMarkdown->>renderMarkdown: augment external links (target/rel)
  renderMarkdown-->>Markdown: final HTML string
  Markdown-->>Browser: dangerouslySetInnerHTML output

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐇 Hop hop, the lookbehind is gone,
Old WebKit can load at the dawn!
With marked and pure DOM in sight,
No more white screens in the night.
The rabbit rewrote it — and it's right! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: replacing the markdown renderer from react-markdown to marked and expanding syntax support with KaTeX, page breaks, and diagrams.
Linked Issues check	✅ Passed	The PR directly addresses the iOS 16.1 WebKit compatibility issue [#5550] by removing remark-gfm (which contains the incompatible lookbehind regex) and replacing it with marked, while also expanding markdown syntax support as documented.
Out of Scope Changes check	✅ Passed	All changes are within scope: dependency updates remove incompatible packages and add required parsing/sanitization tools; markdown.tsx implements the new rendering pipeline with custom diagram/formula support and HTML sanitization.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/marked-markdown-renderer

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

web/default/src/components/ui/markdown.tsx (1)

426-430: 🩺 Stability & Availability | 🔵 Trivial | 💤 Low value

Duplicate id="markdown-diagram-arrow" when multiple diagrams render.

Both renderFlowDiagram (here) and renderSequenceDiagram (Lines 553-557) emit a <marker> with the same fixed id. When a page renders more than one diagram — or more than one <Markdown> instance (e.g. the notification popover maps over several announcements) — the document ends up with duplicate element IDs, and every marker-end="url(#markdown-diagram-arrow)" resolves to the first match in document order. This is invalid HTML and can cause arrowheads to disappear in some browsers/engines.

Consider generating a unique marker id per diagram (and referencing it in that diagram's edges).

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/default/src/components/ui/markdown.tsx` around lines 426 - 430, The
marker element in both renderFlowDiagram and renderSequenceDiagram functions
uses a hardcoded id="markdown-diagram-arrow", causing duplicate IDs when
multiple diagrams are rendered on the same page. Replace the fixed id with a
unique identifier generated for each diagram (using a UUID library or similar
approach), store this unique ID, and use it both in the marker's id attribute
and in all marker-end="url(#...)" references that belong to that specific
diagram to ensure each diagram references its own marker arrow.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/default/src/components/ui/markdown.tsx`:
- Around line 588-594: The walkTokens function currently only processes emoji
shortcodes in token.text for text-type tokens, but it ignores token.tokens which
contains nested inline formatting tokens (like bold, italic, links). When a
token has nested formatting like "**bold** :star:", the emoji shortcode exists
in a child token rather than the parent token.text. After the existing text
replacement for text-type tokens, add additional logic to recursively process
token.tokens if it exists by iterating through the array and calling the same
emoji replacement logic on each child token's text property, ensuring emoji
shortcodes are replaced regardless of surrounding inline formatting.

---

Nitpick comments:
In `@web/default/src/components/ui/markdown.tsx`:
- Around line 426-430: The marker element in both renderFlowDiagram and
renderSequenceDiagram functions uses a hardcoded id="markdown-diagram-arrow",
causing duplicate IDs when multiple diagrams are rendered on the same page.
Replace the fixed id with a unique identifier generated for each diagram (using
a UUID library or similar approach), store this unique ID, and use it both in
the marker's id attribute and in all marker-end="url(#...)" references that
belong to that specific diagram to ensure each diagram references its own marker
arrow.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a877da8e-12fb-4877-972b-b21c6557aa62

📥 Commits

Reviewing files that changed from the base of the PR and between 9fc9c8f and db67045.

⛔ Files ignored due to path filters (1)

• web/bun.lock is excluded by !**/*.lock

📒 Files selected for processing (2)

• web/default/package.json
• web/default/src/components/ui/markdown.tsx

[coderabbitai]

🎯 Functional Correctness | 🟠 Major

🧩 Analysis chain

🌐 Web query:

In marked v18, does the inline text token renderer use token.tokens or token.text when a text token has child tokens?

💡 Result:

In marked v18, when a text token contains child tokens, the renderer should use the tokens property, typically by passing it to the parser's parseInline method, rather than using the raw text property [1][2]. The Tokens.Text interface defines text as a string (the raw markdown text) and an optional tokens property (an array of child tokens) [3]. While the text property contains the unprocessed string, the tokens array contains the parsed child tokens (such as bold, italics, or code spans) that have already been lexed [4]. To render these child tokens correctly, you should use this.parser.parseInline(token.tokens) within your renderer function [1][2]. Relying solely on token.text would bypass the rendering of any formatting or nested elements contained within that text [1]. If a token's tokens property is undefined or empty, it effectively functions as plain text [3].

Citations:

• 1: Linking back to the source markedjs/marked#3591
• 2: Tell the parser to skip or alias specific tokens? markedjs/marked#2888
• 3: https://github.com/markedjs/marked/blob/0ccf4769/src/Tokens.ts
• 4: Inline tokens markedjs/marked#1627

---

Handle emoji shortcodes in mixed-formatting contexts.

walkTokens mutates token.text only for type === 'text' tokens, but in marked, inline text tokens containing nested formatting (like **bold** :star:) render from token.tokens rather than token.text. The current implementation will not replace emoji shortcodes in these mixed-formatting contexts. You need to also process token.tokens if it exists, or walk the token tree recursively to ensure shortcodes are replaced regardless of surrounding inline formatting.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/default/src/components/ui/markdown.tsx` around lines 588 - 594, The
walkTokens function currently only processes emoji shortcodes in token.text for
text-type tokens, but it ignores token.tokens which contains nested inline
formatting tokens (like bold, italic, links). When a token has nested formatting
like "**bold** :star:", the emoji shortcode exists in a child token rather than
the parent token.text. After the existing text replacement for text-type tokens,
add additional logic to recursively process token.tokens if it exists by
iterating through the array and calling the same emoji replacement logic on each
child token's text property, ensuring emoji shortcodes are replaced regardless
of surrounding inline formatting.

[Nitwizztor]

great