markdown-to-jsx 9.5.7 → 9.6.1

package/README.md

@@ -45,6 +45,7 @@ Some special features of the library:
     - [options.wrapperProps](#optionswrapperprops)
   - [Syntax highlighting](#syntax-highlighting)
   - [Handling shortcodes](#handling-shortcodes)
+  - [Streaming Markdown](#streaming-markdown)
   - [Usage with Preact](#usage-with-preact)
   - [AST Anatomy](#ast-anatomy)
     - [Node Types](#node-types)
@@ -430,6 +431,7 @@ const normalizedMarkdown2 = astToMarkdown(ast)
 | `renderRule`                    | `function`                    | -        | Custom rendering for AST rules. See [renderRule](#optionsrenderrule) for details.                                                 |
 | `sanitizer`                     | `function`                    | built-in | Custom URL sanitizer function. See [sanitizer](#optionssanitizer) for details.                                                    |
 | `slugify`                       | `function`                    | built-in | Custom slug generation for heading IDs. See [slugify](#optionsslugify) for details.                                               |
+| `optimizeForStreaming`          | `boolean`                     | `false`  | Suppress rendering of incomplete markdown syntax for streaming. See [Streaming Markdown](#streaming-markdown) for details.        |
 | `tagfilter`                     | `boolean`                     | `true`   | Escape dangerous HTML tags (`script`, `iframe`, `style`, etc.) to prevent XSS.                                                    |
 | `wrapper`                       | `string \| component \| null` | `'div'`  | Wrapper element for multiple children (React/React Native/Vue only). See [wrapper](#optionswrapper) for details.                  |
 | `wrapperProps`                  | `object`                      | -        | Props for wrapper element (React/React Native/Vue only). See [wrapperProps](#optionswrapperprops) for details.                    |
@@ -835,6 +837,35 @@ function Example() {
 
 When you use `options.renderRule`, any React-renderable JSX may be returned including images and GIFs. Ensure you benchmark your solution as the `text` rule is one of the hottest paths in the system!
 
+### Streaming Markdown
+
+When rendering markdown content that arrives incrementally (e.g., from an AI/LLM API, WebSocket, or Server-Sent Events), you may notice raw markdown syntax briefly appearing before it renders properly. This happens because incomplete syntax like `**bold text` or `<CustomComponent>partial content` gets rendered as text before the closing delimiter arrives.
+
+The `optimizeForStreaming` option solves this by detecting incomplete markdown structures and returning `null` (React) or empty string (HTML) until the content is complete:
+
+```tsx
+import Markdown from 'markdown-to-jsx/react'
+
+function StreamingMarkdown({ content }) {
+  return <Markdown options={{ optimizeForStreaming: true }}>{content}</Markdown>
+}
+```
+
+**What it suppresses:**
+
+- Unclosed HTML tags (`<div>content` without `</div>`)
+- Incomplete tag syntax (`<div attr="value` without closing `>`)
+- Unclosed HTML comments (`<!-- comment` without `-->`)
+- Unclosed inline code (`` `code `` without closing backtick)
+- Unclosed bold/italic (`**text` or `*text` without closing)
+- Unclosed strikethrough (`~~text` without closing `~~`)
+- Unclosed links (`[text](url` without closing `)`)
+- Incomplete tables (header and separator row without any data rows)
+
+**What renders normally (content visible as it streams):**
+
+- Fenced code blocks - content is displayed as it arrives, waiting for closing fence
+
 ### Usage with Preact
 
 Everything will work just fine! Simply [Alias `react` to `preact/compat`](https://preactjs.com/guide/v10/switching-to-preact#setting-up-compat) like you probably already are doing.