@ai-react-markdown/core 1.4.4 → 1.4.6
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 +38 -9
- package/dist/index.cjs +156 -156
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +62 -16
- package/dist/index.d.ts +62 -16
- package/dist/index.js +157 -157
- package/dist/index.js.map +1 -1
- package/dist/typography/all.css +34 -29
- package/dist/typography/all.css.map +1 -1
- package/dist/typography/default.css +34 -29
- package/dist/typography/default.css.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -325,15 +325,16 @@ function CustomCodeBlock({ children }: PropsWithChildren) {
|
|
|
325
325
|
|
|
326
326
|
**Returns** `AIMarkdownRenderState<TConfig>`:
|
|
327
327
|
|
|
328
|
-
| Field
|
|
329
|
-
|
|
|
330
|
-
| `streaming`
|
|
331
|
-
| `fontSize`
|
|
332
|
-
| `variant`
|
|
333
|
-
| `colorScheme`
|
|
334
|
-
| `documentId`
|
|
335
|
-
| `
|
|
336
|
-
| `
|
|
328
|
+
| Field | Type | Description |
|
|
329
|
+
| -------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
330
|
+
| `streaming` | `boolean` | Whether content is being streamed. |
|
|
331
|
+
| `fontSize` | `string` | Resolved CSS font-size value. |
|
|
332
|
+
| `variant` | `AIMarkdownVariant` | Active typography variant. |
|
|
333
|
+
| `colorScheme` | `AIMarkdownColorScheme` | Active color scheme. |
|
|
334
|
+
| `documentId` | `string` | Stable id for the logical markdown document — caller-supplied or auto-generated via `useId()`. |
|
|
335
|
+
| `documentIdExplicit` | `boolean` (optional) | Whether `documentId` was explicitly supplied by the caller (vs. auto-generated). Internal coordination signal — `useDocumentRegistry` uses it so an auto-generated id never opts a standalone chunk into cross-chunk coordination. Most custom components can ignore this. |
|
|
336
|
+
| `clobberPrefix` | `string` | URI-safe id prefix derived from `documentId` (with MurmurHash3 → Base62 shortening applied for >16-char ids), used by every clobberable HTML attribute (`id=…` / `href="#…"`). Read this from the render state rather than recomputing locally when writing components that emit anchors — the prefix's exact byte form is not part of the stability contract and may shift across versions. |
|
|
337
|
+
| `config` | `TConfig` | Active render configuration (merged with defaults). |
|
|
337
338
|
|
|
338
339
|
### `useAIMarkdownMetadata<TMetadata>()`
|
|
339
340
|
|
|
@@ -391,6 +392,32 @@ Import the corresponding CSS to activate styles:
|
|
|
391
392
|
import '@ai-react-markdown/core/typography/default.css';
|
|
392
393
|
```
|
|
393
394
|
|
|
395
|
+
#### Customization tokens
|
|
396
|
+
|
|
397
|
+
All `default`-variant styles are driven by CSS custom properties declared on `.aim-typography-root.default`. Spacing, font-size, and heading tokens are **anchored to `--aim-font-size-root`** (injected by the renderer from the `fontSize` prop), so changing `fontSize` proportionally scales every dimension. To customize, override any token in your own stylesheet:
|
|
398
|
+
|
|
399
|
+
```css
|
|
400
|
+
.aim-typography-root.default {
|
|
401
|
+
--aim-spacing-md: calc(var(--aim-font-size-root) * 1.2); /* roomier paragraphs */
|
|
402
|
+
--aim-h1-font-size: calc(var(--aim-font-size-root) * 2.5); /* bigger H1 */
|
|
403
|
+
--aim-font-weight-strong: 600; /* lighter headings + th */
|
|
404
|
+
--aim-color-anchor: #ff6b6b; /* red links */
|
|
405
|
+
}
|
|
406
|
+
```
|
|
407
|
+
|
|
408
|
+
| Group | Tokens | Notes |
|
|
409
|
+
| ------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
410
|
+
| Spacing | `--aim-spacing-{xs,sm,md,lg,xl}` | `calc(var(--aim-font-size-root) * k)` where `k ∈ {0.625, 0.75, 1, 1.25, 1.5}` |
|
|
411
|
+
| Font size | `--aim-font-size-{xs,sm,md,lg,xl}` | `k ∈ {0.75, 0.875, 1, 1.125, 1.25}` |
|
|
412
|
+
| Heading sizes | `--aim-h{1..6}-font-size` | Multipliers mirror Mantine's heading scale (`{2.125, 1.625, 1.375, 1.125, 1, 0.875}`) |
|
|
413
|
+
| Heading meta | `--aim-h{1..6}-line-height`, `--aim-h{1..6}-font-weight` | line-heights are unitless; weights default to `var(--aim-font-weight-strong)` |
|
|
414
|
+
| Weight | `--aim-font-weight-strong` | Shared by all headings and `<th>`. Default `700`. |
|
|
415
|
+
| KaTeX | `--aim-katex-font-size` | Defaults to `var(--aim-font-size-root)`, so formulas stay at the component-root size regardless of parent context (blockquote, heading). Override to `1em` if you want parent-relative. |
|
|
416
|
+
| Misc | `--aim-line-height`, `--aim-radius-sm`, `--aim-font-family-{monospace,headings}` | Unitless / rem / font-stack constants. |
|
|
417
|
+
| Color (light) | `--aim-color-{text,dimmed,anchor,border,code-bg,code-text,blockquote-bg,mark-bg,mark-text}` | Declared on `.aim-typography-root.light`; dark variants on `.aim-typography-root.dark`. |
|
|
418
|
+
|
|
419
|
+
> **Stability contract:** the _names_ and _roles_ of these tokens follow semver. The exact default _values_ (multipliers, colors) may shift under minor bumps as the visual design evolves — override the token if you need a specific value to be locked.
|
|
420
|
+
|
|
394
421
|
### Custom Typography Component
|
|
395
422
|
|
|
396
423
|
Replace the typography wrapper by passing a custom component. The `style` prop carries CSS custom properties injected by the core renderer — **merge it onto your root element** so that descendant CSS can reference these variables:
|
|
@@ -419,6 +446,8 @@ The core renderer injects the following CSS custom properties via the Typography
|
|
|
419
446
|
|
|
420
447
|
**Why `--aim-font-size-root`?** Markdown content frequently nests elements that use relative `em` units — blockquotes, lists, code blocks. Each nesting level compounds the effective size: a `0.875em` code span inside a `1.125em` blockquote resolves to `0.984em` of the parent, not `0.875em` of the root. This variable provides a stable, absolute reference that inner CSS rules can use to opt out of compounding when a fixed size is needed.
|
|
421
448
|
|
|
449
|
+
The built-in `default` variant already consumes this variable — all of its spacing, font-size, and heading tokens are defined as `calc(var(--aim-font-size-root) * k)`, so changing the `fontSize` prop on `<AIMarkdown>` proportionally scales every rendered dimension. See [Customization tokens](#customization-tokens) above for the full surface.
|
|
450
|
+
|
|
422
451
|
### Extra Styles Wrapper
|
|
423
452
|
|
|
424
453
|
The `ExtraStyles` prop accepts a component rendered between the typography wrapper and the markdown content. Useful for injecting additional CSS scope or theme providers:
|