markstream-react 0.0.43 → 0.0.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -74,6 +74,28 @@ Notes:
|
|
|
74
74
|
- These props are forwarded to the built-in Mermaid / D2 / Infographic blocks and to custom `mermaid` / `d2` / `infographic` overrides registered with `setCustomComponents(...)`.
|
|
75
75
|
- `viewportPriority` applies to those heavy nodes too, so offscreen graphs will not keep doing background work while the text stream is still updating.
|
|
76
76
|
|
|
77
|
+
## Language-specific code block overrides
|
|
78
|
+
|
|
79
|
+
You can register a custom component under a fenced language key without wrapping the generic `code_block` renderer:
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
import type { NodeComponentProps } from 'markstream-react'
|
|
83
|
+
import { setCustomComponents } from 'markstream-react'
|
|
84
|
+
|
|
85
|
+
function EChartsBlockNode(props: NodeComponentProps<any>) {
|
|
86
|
+
return <div data-language={String(props.node?.language)}>{String(props.node?.code || '')}</div>
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
setCustomComponents('docs', {
|
|
90
|
+
echarts: EChartsBlockNode,
|
|
91
|
+
})
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
Notes:
|
|
95
|
+
- `echarts` only catches fences whose language is `echarts`.
|
|
96
|
+
- Code block routing priority is exact language key -> built-in `mermaid` / `d2` / `infographic` routes -> `code_block`.
|
|
97
|
+
- Custom `mermaid` / `d2` / `infographic` overrides keep their specialized top-level props; other custom language keys use the normal custom component contract (`node`, `ctx`, `renderNode`, and friends).
|
|
98
|
+
|
|
77
99
|
## Mermaid tuning
|
|
78
100
|
|
|
79
101
|
Common `mermaidProps` keys for streaming scenarios:
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "markstream-react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.45",
|
|
5
5
|
"description": "React Markdown renderer optimized for large documents with progressive Mermaid rendering, streaming diff code blocks, and fast real-time preview. Built on stream-markdown AST for consistent rendering across frameworks. Perfect for documentation sites, AI chat interfaces, and content management systems.",
|
|
6
6
|
"author": "Simon He",
|
|
7
7
|
"license": "MIT",
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
"dependencies": {
|
|
117
117
|
"@floating-ui/dom": "^1.7.6",
|
|
118
118
|
"clsx": "^2.1.1",
|
|
119
|
-
"stream-markdown-parser": "0.0.
|
|
119
|
+
"stream-markdown-parser": "0.0.90"
|
|
120
120
|
},
|
|
121
121
|
"devDependencies": {
|
|
122
122
|
"@types/react": "^18.3.28",
|