markstream-react 0.0.56-beta.2 → 0.0.56-beta.4

package/README.md

@@ -128,7 +128,8 @@ export default function Page() {
 | Feature | Package |
 | --- | --- |
 | Shiki code blocks | `stream-markdown` |
-| Monaco editor code blocks | `stream-monaco` |
+| Enhanced code blocks (recommended) | `stream-diffs` |
+| Monaco editor code blocks | `stream-monaco` (fallback) |
 | Mermaid diagrams | `mermaid` |
 | KaTeX math | `katex` |
 | D2 diagrams | `@terrastruct/d2` |
@@ -140,6 +141,51 @@ KaTeX still needs its CSS in your app when math rendering is enabled:
 import 'katex/dist/katex.min.css'
 ```
 
+## Enhanced Code Blocks
+
+Code blocks use a dual-runtime loader across all Markstream packages: `stream-diffs` is preferred (smaller, no `monaco-editor`), `stream-monaco` is the automatic fallback, and a plain `<pre>` is rendered when neither is installed.
+
+Install the recommended runtime:
+
+```bash
+pnpm add stream-diffs
+# or, to keep the legacy Monaco surface as the fallback:
+pnpm add stream-monaco
+```
+
+`CodeBlockNode` renders a single code block with the header, toolbar, and a `stream-diffs` File / FileDiff surface. Use it directly for one-off blocks, or let `MarkdownRender` resolve it automatically for code blocks in your Markdown:
+
+```tsx
+import type { CodeBlockMonacoOptions } from 'markstream-react'
+import { CodeBlockNode } from 'markstream-react'
+
+const node = {
+  type: 'code_block',
+  language: 'ts',
+  code: 'const answer = 42',
+  raw: 'const answer = 42',
+}
+
+// fontSize / lineHeight / tabSize also drive the streaming <pre> fallback so
+// the enhanced surface swaps in without a visual jump.
+const monacoOptions: CodeBlockMonacoOptions = {
+  fontSize: 14,
+  lineHeight: 21,
+  tabSize: 4,
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  wordWrap: 'off',
+  theme: 'vitesse-dark',
+  renderSideBySide: true,
+  MAX_HEIGHT: 640,
+}
+
+export function CodeBlock() {
+  return <CodeBlockNode node={node} monacoOptions={monacoOptions} isDark />
+}
+```
+
+Component-level options: `isDark` / `darkTheme` / `lightTheme` for theming, `showLineNumbers`, `showHeader`, and `stream` / `loading` for streaming states. `monacoOptions` also covers diff blocks (`renderSideBySide`, `diffHunkActionsOnHover`, `onDiffHunkAction`, `diffHideUnchangedRegions`).
+
 ## Tailwind
 
 Non-Tailwind projects should import the precompiled CSS: