From 8640a747aaee63930eb4e9853fe6b7df3e4301c0 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Mon, 22 Jun 2026 11:08:25 -0700 Subject: [PATCH] feat(dashboard): shared markdown renders embedded HTML (sanitized) + mermaid diagrams MailboxMessageContent pipeline gains rehype-raw -> rehype-sanitize (GitHub-like allow list: details/summary/kbd/tables/etc; strips script/style/iframe/on*/javascript:) so raw HTML in markdown renders and HTML comments are dropped. Fenced ```mermaid blocks render via a lazy-loaded MermaidDiagram component (dynamic import keeps mermaid out of the main bundle; theme-aware; falls back to the raw block on parse error). Co-Authored-By: Claude Opus 4.8 (1M context) --- .changeset/markdown-raw-html-and-mermaid.md | 5 + .../app/components/MailboxMessageContent.tsx | 82 +- .../dashboard/app/components/MailboxModal.css | 29 + .../app/components/MermaidDiagram.tsx | 95 +++ .../__tests__/MailboxMessageContent.test.tsx | 64 +- packages/dashboard/package.json | 3 + pnpm-lock.yaml | 706 ++++++++++++++++++ 7 files changed, 974 insertions(+), 10 deletions(-) create mode 100644 .changeset/markdown-raw-html-and-mermaid.md create mode 100644 packages/dashboard/app/components/MermaidDiagram.tsx diff --git a/.changeset/markdown-raw-html-and-mermaid.md b/.changeset/markdown-raw-html-and-mermaid.md new file mode 100644 index 0000000000..d855a5427b --- /dev/null +++ b/.changeset/markdown-raw-html-and-mermaid.md @@ -0,0 +1,5 @@ +--- +"@runfusion/fusion": minor +--- + +The shared markdown renderer (GitHub PR/issue bodies + comments, mailbox, chat) now renders embedded raw HTML and mermaid diagrams. Raw HTML (`
`/``, ``, ``, tables) renders as real elements via `rehype-raw`, with `rehype-sanitize` stripping XSS (script/style/iframe, event handlers, `javascript:` URLs) since these bodies come from GitHub; HTML comments (``) are dropped. Fenced ```mermaid blocks render as actual diagrams via a lazy-loaded `mermaid` import (kept out of the main bundle, loaded only when a diagram is present), falling back to the raw code block on parse error and following the dashboard theme. diff --git a/packages/dashboard/app/components/MailboxMessageContent.tsx b/packages/dashboard/app/components/MailboxMessageContent.tsx index b665d04d69..61b1d865a5 100644 --- a/packages/dashboard/app/components/MailboxMessageContent.tsx +++ b/packages/dashboard/app/components/MailboxMessageContent.tsx @@ -1,8 +1,51 @@ import { memo } from "react"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; +import rehypeRaw from "rehype-raw"; +import rehypeSanitize, { defaultSchema } from "rehype-sanitize"; +import type { Options as SanitizeSchema } from "rehype-sanitize"; import type { Components } from "react-markdown"; +import type { PluggableList } from "unified"; import { linkifyReactChildren } from "../utils/filePathLinkify"; +import { MermaidDiagram } from "./MermaidDiagram"; + +/* +FNXC:Markdown 2026-06-23-03:15: +GitHub PR/issue bodies + comments (and mailbox/chat) embed raw HTML (`
`, +``, ``, ``, tables), HTML comments (``), and ```mermaid +blocks. Previously raw HTML was escaped to literal text and mermaid showed as code. + +Pipeline (ORDER MATTERS): remark-gfm -> rehype-raw -> rehype-sanitize. +- rehype-raw parses embedded HTML into the hast tree so it renders as real elements. + It also DROPS HTML comments by default, so `` never appears in output. +- rehype-sanitize runs AFTER raw to strip XSS: Hello"; const { container } = render(); - // ReactMarkdown defaults disallow raw HTML — the