flux-md 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -4,6 +4,30 @@ Notable changes to flux-md. Format based on
 [Keep a Changelog](https://keepachangelog.com/); this project aims to follow
 [Semantic Versioning](https://semver.org/).
 
+## 0.5.0 — 2026-05-27
+
+### Fixed
+
+- **Streaming GFM tables now render incrementally.** A table no longer waits for
+  the whole block to arrive: the header renders the moment the delimiter row
+  (`|---|`) streams in, and each body row appends as it arrives. Previously the
+  incremental paragraph fast-path kept extending the header line as a paragraph
+  and only formed the table on a full reparse, so a streaming table appeared all
+  at once. The fast-path now bails (like it does for a setext underline) when a
+  delimiter row forms a table with its preceding header. Output is unchanged for
+  one-shot parsing; streamed output now matches one-shot at every prefix.
+
+### Added
+
+- **`<FluxMarkdown sanitize={fn} />`** — an optional HTML sanitizer hook. When
+  provided, flux-md runs every block's HTML through it before injecting via
+  `innerHTML`, **including the streaming (open/speculative) tail** that the raw
+  fast path would otherwise expose. Bring your own sanitizer (e.g.
+  `DOMPurify.sanitize`) to render untrusted / LLM HTML with `unsafeHtml` on;
+  flux-md stays zero-dep. Built-in code/math renderers (already-escaped content)
+  are not run through it, so highlighting and math markup are preserved. Omitting
+  the prop is byte-identical and zero-cost.
+
 ## 0.4.0 — 2026-05-27
 
 ### Added

package/README.md

@@ -345,6 +345,28 @@ flux-md is XSS-safe by default — its HTML output is meant to be injected via
   third-party HTML, these guards are your only line of defense — prefer a
   dedicated HTML sanitizer for genuinely hostile input.
 
+### Rendering untrusted / LLM HTML safely
+
+If you enable `unsafeHtml` to render HTML from an untrusted source (e.g. an LLM
+that returns raw HTML), **bring a real sanitizer** and pass it via
+`<FluxMarkdown sanitize={…} />`. flux-md applies it to every block's HTML before
+injection — **including the streaming (open) tail**, which the raw-`innerHTML`
+fast path would otherwise expose. flux-md stays zero-dep; you choose the
+sanitizer:
+
+```tsx
+import DOMPurify from "dompurify";
+
+<FluxMarkdown client={client} sanitize={(html) => DOMPurify.sanitize(html)} />
+```
+
+The built-in code/math renderers operate on already-escaped content and are not
+run through `sanitize`, so syntax highlighting and math markup are preserved.
+With no `sanitize` prop, rendering is byte-identical and zero-cost. For
+genuinely hostile content where CSS-overlay/clickjacking matters, render inside
+a sandboxed `<iframe>` instead — sanitization stops injection, not every
+visual-overlay trick.
+
 ## Scaling
 
 `FluxClient`s share a **worker pool** (`getDefaultPool()`), so concurrency

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flux-md",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Zero-dep streaming markdown for the browser. Rust→WASM core, Web Worker per stream, incremental parse with speculative closure.",
   "type": "module",
   "main": "./src/index.ts",

package/src/react.tsx

@@ -65,9 +65,19 @@ interface FluxMarkdownProps {
    * up (and re-locks when they scroll back near the bottom). Off by default.
    */
   stickToBottom?: boolean;
+  /**
+   * Optional HTML sanitizer applied to every block's HTML before it is injected
+   * via `innerHTML` — **including the streaming (open/speculative) tail**, the
+   * path that raw `innerHTML` would otherwise expose. Pass a real sanitizer
+   * (e.g. DOMPurify's `sanitize`) when rendering untrusted / LLM HTML with
+   * `unsafeHtml` on. flux-md stays zero-dep — you bring the sanitizer. The
+   * built-in code/math renderers operate on already-escaped content and are not
+   * run through it. When omitted, rendering is byte-identical and zero-cost.
+   */
+  sanitize?: (html: string) => string;
 }
 
-function FluxMarkdownImpl({ client, components, virtualize, stickToBottom }: FluxMarkdownProps) {
+function FluxMarkdownImpl({ client, components, virtualize, stickToBottom, sanitize }: FluxMarkdownProps) {
   const blocks = useSyncExternalStore(client.subscribe, client.getSnapshot, client.getSnapshot);
   // Normalize "no overrides" to a stable `undefined` so memo comparisons and
   // the fast path don't churn on an empty object identity.
@@ -75,7 +85,7 @@ function FluxMarkdownImpl({ client, components, virtualize, stickToBottom }: Flu
   return (
     <div className="flux-md">
       {blocks.map((b) => (
-        <BlockView key={b.id} block={b} components={comps} virtualize={virtualize} />
+        <BlockView key={b.id} block={b} components={comps} virtualize={virtualize} sanitize={sanitize} />
       ))}
       {stickToBottom && <div aria-hidden="true" style={{ scrollSnapAlign: "end" }} className="flux-bottom-anchor" />}
     </div>
@@ -174,7 +184,12 @@ const INTRINSIC_PX: Record<string, number> = {
   Component: 120,
 };
 
-function BlockViewImpl(props: { block: Block; components?: Components; virtualize?: boolean }) {
+function BlockViewImpl(props: {
+  block: Block;
+  components?: Components;
+  virtualize?: boolean;
+  sanitize?: (html: string) => string;
+}) {
   const { block, virtualize } = props;
   const content = renderBlockContent(props);
   // Virtualize only *closed* blocks: the streaming tail (open/speculative) is
@@ -192,7 +207,15 @@ function BlockViewImpl(props: { block: Block; components?: Components; virtualiz
   return content;
 }
 
-function renderBlockContent({ block, components }: { block: Block; components?: Components }) {
+function renderBlockContent({
+  block,
+  components,
+  sanitize,
+}: {
+  block: Block;
+  components?: Components;
+  sanitize?: (html: string) => string;
+}) {
   const kind = block.kind.type;
 
   // Block-kind override replaces the entire renderer for this block. A
@@ -242,7 +265,12 @@ function renderBlockContent({ block, components }: { block: Block; components?:
     );
   }
 
-  return <div className={className} dangerouslySetInnerHTML={{ __html: block.html }} />;
+  return (
+    <div
+      className={className}
+      dangerouslySetInnerHTML={{ __html: sanitize ? sanitize(block.html) : block.html }}
+    />
+  );
 }
 
 // A block is the same render when its identity, HTML, open-state, and the
@@ -250,8 +278,8 @@ function renderBlockContent({ block, components }: { block: Block; components?:
 // is what stops a committed block from re-rendering (and thus re-parsing) on
 // every streaming patch.
 export function blocksEqual(
-  prev: { block: Block; components?: Components; virtualize?: boolean },
-  next: { block: Block; components?: Components; virtualize?: boolean },
+  prev: { block: Block; components?: Components; virtualize?: boolean; sanitize?: (html: string) => string },
+  next: { block: Block; components?: Components; virtualize?: boolean; sanitize?: (html: string) => string },
 ): boolean {
   return (
     prev.block.id === next.block.id &&
@@ -259,7 +287,8 @@ export function blocksEqual(
     prev.block.open === next.block.open &&
     prev.block.speculative === next.block.speculative &&
     prev.components === next.components &&
-    prev.virtualize === next.virtualize
+    prev.virtualize === next.virtualize &&
+    prev.sanitize === next.sanitize
   );
 }