feat(markdown): add MarkdownRenderer with code/Mermaid/CSV/Survey/HtmlPreview blocks by rajkumargaramie · Pull Request #233 · mieweb/ui

rajkumargaramie · 2026-05-14T23:37:34Z

Adds a self-contained Markdown rendering component so consumer apps (e.g. ozwell-workspace) don't have to re-implement the marked + DOMPurify + highlight.js pipeline themselves.

What's included

MarkdownRenderer — full pipeline (marked GFM + DOMPurify sanitisation + hljs highlighting + React portals for special blocks)
FenceBlock — base wrapper (copy button, raw/rendered toggle, error state)
MermaidBlock — sandboxed Mermaid diagram rendering
CsvBlock — sortable / exportable CSV table
SurveyBlock — JSON/YAML survey preview
HtmlPreviewBlock — sandboxed iframe HTML preview with expand
useMarkdown — hook (render / renderAsync / clearCache)
atom-one-light / atom-one-dark themes bundled and scoped via [data-theme]
Copy-to-clipboard button on every fenced code block

Exports

@mieweb/ui — all of the above (named exports)
@mieweb/ui/components/Markdown — tree-shakeable subpath
@mieweb/ui/markdown.css — bundled hljs themes + fence-block styles

Dependencies

Hard deps (added): marked, dompurify, highlight.js — small, always-needed for the markdown pipeline
Optional peer deps: mermaid, papaparse, js-yaml — only loaded when the matching block type is used. Apps that never render Mermaid/CSV/Survey blocks don't pay the bundle cost.

Why

Originally landed in ozwell-workspace; centralising here so other products consuming @mieweb/ui's AIChat (via renderTextContent) can get full Markdown + code-block rendering for free.

Usage

import { MarkdownRenderer } from '@mieweb/ui';
import '@mieweb/ui/markdown.css';

<AIChat
  renderTextContent={(text, { messageId, streaming }) => (
    <MarkdownRenderer text={text} streaming={streaming} cacheKey={messageId} />
  )}
/>

cloudflare-workers-and-pages · 2026-05-14T23:42:32Z

Deploying ui with Cloudflare Pages

Latest commit:	`3a55f97`
Status:	✅ Deploy successful!
Preview URL:	https://61a1b55c.ui-6d0.pages.dev
Branch Preview URL:	https://markdown-components.ui-6d0.pages.dev

View logs

Copilot

Pull request overview

Adds a new Markdown rendering subsystem to @mieweb/ui that converts markdown to sanitized HTML, highlights code blocks, and mounts React-powered “special fence blocks” (Mermaid/CSV/Survey/HTML preview) via portals—plus a separate exported stylesheet (@mieweb/ui/markdown.css) for highlight.js + fence styling.

Changes:

Introduces MarkdownRenderer + useMarkdown pipeline using marked + DOMPurify + highlight.js, including placeholder emission for special fenced blocks.
Adds block components (FenceBlock, MermaidBlock, CsvBlock, SurveyBlock, HtmlPreviewBlock) and bundled highlight/fence CSS.
Updates build/package exports and dependency config to ship a tree-shakeable Markdown subpath and a dedicated markdown.css export.

Reviewed changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
tsup.config.ts	Adds a tree-shakeable Markdown entry point and marks optional block deps as externals.
src/index.ts	Re-exports Markdown components from the package root.
src/components/Markdown/useMarkdown.ts	Implements marked→sanitized HTML rendering, highlight.js integration, caching, placeholder emission, and delegated copy handler.
src/components/Markdown/MarkdownRenderer.tsx	Renders sanitized HTML and mounts block components into placeholders via portals.
src/components/Markdown/FenceBlock.tsx	Provides a reusable UI wrapper for fenced blocks (copy + raw/rendered toggle + error state).
src/components/Markdown/MermaidBlock.tsx	Adds Mermaid diagram rendering (dynamic import) into FenceBlock.
src/components/Markdown/CsvBlock.tsx	Adds CSV parsing + sortable/exportable table block.
src/components/Markdown/SurveyBlock.tsx	Adds JSON/YAML survey preview block.
src/components/Markdown/HtmlPreviewBlock.tsx	Adds sandboxed iframe HTML preview with expand-to-modal behavior.
src/components/Markdown/styles.css	Bundles/scopes highlight.js themes and fence-block styles; exported as `@mieweb/ui/markdown.css`.
src/components/Markdown/index.ts	Exposes the Markdown module’s public exports.
package.json	Adds `markdown.css` export + build copy step; adds hard deps (marked/dompurify/highlight.js) and optional peer deps metadata.
pnpm-lock.yaml	Locks new dependencies introduced by the Markdown feature.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

src/components/Markdown/MermaidBlock.tsx:76

dangerouslySetInnerHTML is used to inject Mermaid’s generated SVG. Even with a safer securityLevel, it’s worth sanitizing/validating the SVG string (or rendering via a DOM API) before injection to reduce XSS risk from malformed output or upstream changes.

        <div
          ref={containerRef}
          className="flex justify-center p-4"
          dangerouslySetInnerHTML={{ __html: svg }}
        />

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 15 out of 16 changed files in this pull request and generated 15 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Copilot

Pull request overview

Copilot reviewed 15 out of 16 changed files in this pull request and generated 12 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

garrity-miepub

Rebase needed

10 PRs have landed on main since this branch was cut (May 14). Merging as-is will silently revert #240, #241, #242, #245, and 6bfe832. Please rebase on origin/main and force-push.

Post-rebase nits

HTML Preview — consider dropping allow-scripts from the iframe sandbox if interactive JS isn't needed
SSR — guard DOMPurify.addHook() in useMarkdown.ts with typeof document !== 'undefined'
A11y — add aria-sort on CsvBlock <th> and role="img" aria-label="..." on Mermaid SVG container

Otherwise the markdown work looks solid — sanitization, lazy loading, and caching are all well done.

garrity-miepub

Looks good. Only thing that needs to be addressed are the handful of a11y issues that are showing up.

Make sure to test it in both dark and light mode.

…lPreview blocks Adds a self-contained Markdown rendering component with: - marked + DOMPurify pipeline - highlight.js syntax highlighting (eager: js/ts/py/json/xml/css/bash/sql/yaml/md; lazy: java/cpp/c/csharp/php/ruby/go/rust/perl/r/makefile/dockerfile) - Copy-to-clipboard button on fenced code blocks - React-portal blocks for mermaid diagrams, CSV tables, survey previews, and sandboxed HTML previews - atom-one-light / atom-one-dark theme bundled and scoped via [data-theme] Exports: - '@mieweb/ui' — { MarkdownRenderer, FenceBlock, MermaidBlock, CsvBlock, SurveyBlock, HtmlPreviewBlock, useMarkdown } - '@mieweb/ui/components/Markdown' — same, as tree-shakeable subpath - '@mieweb/ui/markdown.css' — bundled hljs themes + fence block styles mermaid, papaparse, and js-yaml are optional peer dependencies so consumers that don't use those block types don't pay the bundle cost.

- Render plain code fences via React portal + FenceBlock (new CodeBlock component) instead of injecting raw HTML + a global click listener. Removes COPY_BTN_HTML, the document-level click handler, and the .fence-block / .fence-copy-btn CSS — code blocks now use the same copy/raw-toggle UX as Mermaid/CSV/Survey/HTML blocks. - useMarkdown: bound the render cache (LRU, 200 entries), reset the block-id counter per render, use marked's RendererThis instead of unsafe `unknown` casts, register js/ts/sh hljs aliases. - MermaidBlock: drop unused containerRef. - HtmlPreviewBlock: drop unused iframeRef and unreachable Escape branch in handleCloseExpanded. - Export CodeBlock and highlightCode helper.

…act 19 portal fix, stories

…s, Mermaid dark mode, clipboard fallback

…header), fix prettier formatting

…, SSR guard - styles.css: darken light-mode (title/subst/string/literal/built_in/comment) and lighten dark-mode (subst/comment) hljs tokens to meet 4.5:1 contrast - CsvBlock: make sort headers real buttons with scope=col + aria-sort - MermaidBlock: add role=img and derived aria-label to SVG container - useMarkdown: guard DOMPurify.addHook with typeof document for SSR - HtmlPreviewBlock: document sandbox security posture (allow-scripts in null origin)

Copilot

Pull request overview

Copilot reviewed 16 out of 17 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

… in CodeBlock and FenceBlock components

…overrides

…ence-block CSS

garrity-miepub

Looks like the Survey Block still has accessibility errors

…color contrast

…bles override

garrity-miepub

looks good! thanks for fixing the a11y issues!

Copilot AI review requested due to automatic review settings May 14, 2026 23:37

Copilot started reviewing on behalf of rajkumargaramie May 14, 2026 23:38 View session

rajkumargaramie review requested due to automatic review settings May 14, 2026 23:39

rajkumargaramie self-assigned this May 14, 2026

Copilot AI review requested due to automatic review settings May 15, 2026 00:18

Copilot started reviewing on behalf of rajkumargaramie May 15, 2026 00:19 View session

Copilot AI reviewed May 15, 2026

View reviewed changes

rajkumargaramie force-pushed the markdown-components branch from 7ff2d4f to ffb15f2 Compare May 15, 2026 00:28

Copilot AI review requested due to automatic review settings June 1, 2026 20:28

Copilot started reviewing on behalf of rajkumargaramie June 1, 2026 20:28 View session

github-code-quality Bot found potential problems Jun 1, 2026

View reviewed changes

Copilot AI reviewed Jun 1, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings June 1, 2026 21:01

Copilot started reviewing on behalf of rajkumargaramie June 1, 2026 21:01 View session

rajkumargaramie requested review from Copilot and removed request for Copilot June 1, 2026 21:02

Copilot started reviewing on behalf of rajkumargaramie June 1, 2026 21:05 View session

rajkumargaramie requested review from Copilot and removed request for Copilot June 1, 2026 21:05

Copilot started reviewing on behalf of rajkumargaramie June 2, 2026 14:07 View session

Copilot AI reviewed Jun 2, 2026

View reviewed changes

rajkumargaramie requested a review from garrity-miepub June 2, 2026 16:16

garrity-miepub reviewed Jun 3, 2026

View reviewed changes

garrity-miepub reviewed Jun 4, 2026

View reviewed changes

rajkumargaramie added 5 commits June 8, 2026 13:54

fix(markdown): address Copilot PR review — security, lazy loading, Re…

444409a

…act 19 portal fix, stories

fix(markdown): export highlightCode, globalThis guards, marked option…

997fb7d

…s, Mermaid dark mode, clipboard fallback

fix(markdown): render code blocks via React CodeBlock (fixes garbled …

4f8213f

…header), fix prettier formatting

rajkumargaramie review requested due to automatic review settings June 8, 2026 17:57

Copilot AI review requested due to automatic review settings June 8, 2026 18:09

Copilot started reviewing on behalf of rajkumargaramie June 8, 2026 18:09 View session

Copilot AI reviewed Jun 8, 2026

View reviewed changes

Comment thread src/components/Markdown/MarkdownRenderer.tsx

Comment thread src/components/Markdown/styles.css Outdated

Comment thread src/components/Markdown/README.md

rajkumargaramie added 2 commits June 8, 2026 14:34

fix(markdown): update styles for dark theme, adjust background colors…

5f1f994

… in CodeBlock and FenceBlock components

fix(markdown): remove unused fenced code block styles and dark theme …

1c3078e

…overrides

rajkumargaramie requested review from Copilot and removed request for Copilot June 8, 2026 18:45

Copilot started reviewing on behalf of rajkumargaramie June 8, 2026 18:45 View session

style(markdown): fix Prettier formatting in FenceBlock; remove dead f…

b1adf78

…ence-block CSS

Copilot AI review requested due to automatic review settings June 8, 2026 19:10

Copilot started reviewing on behalf of rajkumargaramie June 8, 2026 19:11 View session

rajkumargaramie requested review from garrity-miepub and removed request for Copilot June 8, 2026 19:16

garrity-miepub reviewed Jun 8, 2026

View reviewed changes

fix(markdown): fix SurveyBlock a11y — label/id linkage, select name, …

0dbdeb2

…color contrast

Copilot AI review requested due to automatic review settings June 8, 2026 19:33

Copilot started reviewing on behalf of rajkumargaramie June 8, 2026 19:34 View session

fix(markdown): add role=img to rating div to allow aria-label

60b1783

rajkumargaramie requested review from garrity-miepub and removed request for Copilot June 8, 2026 19:36

fix(markdown): fix Mermaid dark theme WCAG AA contrast via themeVaria…

3a55f97

…bles override

Copilot AI review requested due to automatic review settings June 8, 2026 19:39

Copilot started reviewing on behalf of rajkumargaramie June 8, 2026 19:39 View session

rajkumargaramie review requested due to automatic review settings June 8, 2026 19:40

garrity-miepub approved these changes Jun 8, 2026

View reviewed changes

rajkumargaramie merged commit d83e9fb into main Jun 8, 2026
11 checks passed

rajkumargaramie deleted the markdown-components branch June 8, 2026 20:00

horner mentioned this pull request Jun 9, 2026

feat(SuperChat): multi-participant chat with pluggable markdown render pipeline #259

Open

Conversation

rajkumargaramie commented May 14, 2026

What's included

Exports

Dependencies

Why

Usage

Uh oh!

cloudflare-workers-and-pages Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying ui with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

garrity-miepub left a comment

Choose a reason for hiding this comment

Rebase needed

Post-rebase nits

Uh oh!

garrity-miepub left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

garrity-miepub left a comment

Choose a reason for hiding this comment

Uh oh!

garrity-miepub left a comment

Choose a reason for hiding this comment

cloudflare-workers-and-pages Bot commented May 14, 2026 •

edited

Loading