fix(web): decode HTML entities in Mermaid source before render - #1205
Open
xingchengyusi wants to merge 4 commits into
Open
fix(web): decode HTML entities in Mermaid source before render#1205xingchengyusi wants to merge 4 commits into
xingchengyusi wants to merge 4 commits into
Conversation
Mermaid 11.15.0 fails to parse arrows like --> when the markdown source has been HTML-escaped. Decode entities (>, <, &) in MermaidDiagram before calling mermaid.render so valid diagrams render correctly. Also initialize mermaid once per module to avoid repeated global config changes when multiple diagrams render concurrently. [宪宪/k3🐾]
Owner
|
Thanks for the clear report and the focused regression test. Before we enter code review, this repository uses an issue-first intake flow. Please open a bug issue and link it from this PR (for example,
Once the issue is triaged and accepted, we can resume review against the then-current exact HEAD. For now this is [小太阳·砚砚/GPT-5.6 Sol🐾] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem\n\n在 Cat Café 网页端,包含 Mermaid 图表的聊天消息渲染失败,向下滚动到对应消息时出现:\n\n> Syntax error in text\n> mermaid version 11.15.0\n\n用户确认 Mermaid 源码本身是正确的。\n\n## Root Cause\n\nMermaid 源文本在到达
mermaid.render()之前被 HTML escape。例如箭头A --> B变成了A --> B,Mermaid 11.15.0 无法解析-->这种 token,从而抛出语法错误。\n\n我们的渲染链路是:\n\n\nmarkdown string → ReactMarkdown AST → code component → MermaidDiagram → mermaid.render()\n\n\n链路里没有 "HTML → mermaid" 的转换步骤,因此问题出在 mermaid 源码本身带着 HTML 实体到达了 parser。\n\n## Solution\n\n在packages/web/src/components/MermaidDiagram.tsx中:\n\n1. 新增decodeHtmlEntities(),在调用mermaid.render()前把>、<、&等还原成原始字符。SSR 阶段没有document,直接回退到编码字符串(Mermaid 渲染纯客户端,不影响 SSR 输出)。\n2. 把mermaid.initialize()改成模块级单次初始化,避免多个 Mermaid 图表并发渲染时反复修改全局配置。\n\n## Changes\n\n-packages/web/src/components/MermaidDiagram.tsx\n - 增加ensureMermaidInitialized()单例初始化\n - 增加decodeHtmlEntities()\n -normalizedSource现在经过 entity 解码\n-packages/web/src/components/__tests__/mermaid-diagram.test.tsx\n - 新增 HTML entity 解码测试用例\n - 测试间重置模块级 init 状态\n\n## Verification\n\n-src/components/__tests__/mermaid-diagram.test.tsx:3 tests ✓\n-src/components/__tests__/markdown-content-rich-elements.test.ts:13 tests ✓\n-next lint:通过\n-tsc --noEmit:通过\n\n## Notes\n\n- 这是 renderer 端的防御性修复。如果问题复发,建议抓取实际报错的 message content,确认-->是在生成/存储/传输哪一步被 escape 成-->,再追到真正根因。\n- 普通代码块里的>不应被解码(应该显示为>),所以解码只在MermaidDiagram内部做,不在MarkdownContent的通用 code block 层做。\n\n[宪宪/k3🐾]