<!-- source-hash: cb258dc120396ef8c715487b0cdc1022 -->
Client-side React component that renders LLM-generated markdown safely, combining `react-markdown` with a custom XSS sanitization pipeline and support for GitHub-flavored markdown, syntax highlighting, and embedded media.

## Key Components

### Security Pipeline
- **`rehypeStripUnsafe()`** — Custom rehype plugin that strips dangerous HAST nodes after `rehype-raw` parsing. Removes `<script>`, `<style>`, `<object>`, event handler attributes (`on*`), `javascript:` / `data:` URIs, and `iframe srcdoc` vectors.
- **`srcsetHasUnsafeCandidate()`** — Inspects every candidate URL in `srcset` attributes (not just the first), preventing multi-candidate injection attacks.
- **`escapeUnknownHtmlTags()`** — Pre-processes markdown text to escape HTML tags not in the `SAFE_HTML_TAGS` allowlist, preventing LLM-emitted XML-style tags (e.g., `<ticket>`, `<their>`) from reaching React as unrecognized custom elements. Preserves code blocks and inline code spans.
- **`cardAwareUrlTransform()`** — Extends `react-markdown`'s default URL sanitizer to allow the internal `card://` scheme for chat-card markers while keeping all other unsafe schemes blocked.

### Constants & Regexes
| Export | Purpose |
|--------|---------|
| `SAFE_HTML_TAGS` | Allowlist of permitted HTML5 tags forwarded to React |
| `STRIP_ELEMENTS` | Tags removed entirely at the HAST level |
| `EVENT_HANDLER_ATTR_RE` | Matches `on*` attribute names |
| `JAVASCRIPT_URL_RE` / `DATA_URL_RE` | Detect unsafe URL schemes |
| `TAG_LIKE_REGEX` | Parses HTML-like tags in markdown source |

### Mermaid Support
- `mermaidStyles` — Responsive CSS for Mermaid SVG diagrams using DM Sans font.

## Usage Example

```typescript
import { SimpleMarkdownRenderer } from './simple-markdown-renderer';

// Basic usage — content is sanitized automatically
<SimpleMarkdownRenderer
  content="## Hello\n\nThis is **LLM-generated** markdown with `code`."
/>

// The sanitizer prevents XSS from LLM output automatically:
// "<script>alert(1)</script>" → stripped
// "<their> tag" → escaped to &lt;their&gt;
// "javascript:alert(1)" href → removed
```

> **Note:** This renderer is designed specifically for untrusted LLM output. The sanitization pipeline runs in layers: text pre-processing → `rehype-raw` → `rehypeStripUnsafe` → `rehype-highlight`, ensuring no XSS vectors survive even if one layer is bypassed. Community support is available on the [OpenMSP Slack](https://join.slack.com/t/openmsp/shared_invite/zt-36bl7mx0h-3~U2nFH6nqHqoTPXMaHEHA).