@ai-matrx/rich-content

The AI Matrx formatted-text engine as portable React: the one markdown renderer (GFM, math, directives, wikilinks, mentions, footnotes, streaming heal), the block splitter (static and streaming), and — as the extraction completes — the block renderer and generic blocks, <RichContent> levels, the rich-document action registry and menus, copy, and the selection toolbar. The editor is the sibling package @ai-matrx/rich-content/editor.

Install

pnpm add @ai-matrx/rich-content

Peers: react, react-dom (>= 19). Tailwind consumers add the package's dist to their content sources (@source "../node_modules/@ai-matrx/rich-content/dist";).

Use

Import modules by path — one specifier is one module, so client/server boundaries and lazy chunks stay intact:

import MarkdownCore from "@ai-matrx/rich-content/markdown-core/MarkdownCore";
import { splitContentIntoBlocksV2 } from "@ai-matrx/rich-content/display/markdown-classification/processors/utils/content-splitter-v2";

<RichContent> options for a narrow, plain-GFM host (the Chrome extension side panel). Every one is optional and its absence renders exactly as before (types in levels/rich-content-types.ts): density="compact", codeTheme="github", customTags={{ reflection: MyBlock }} (standard level), remoteImages="always", dataImages="allow" (draw data:image svg/png/jpeg/gif/webp as <img src>, ≤4M chars; default refuses), math={false} / rawHtml={false} (inline and standard levels, client render only; ignored with a dev warning at full; fenced ```html stays code), codeHeader="compact" (one-line language + copy header on every fence, code text capped at 12px, no TooltipProvider needed), themeMode="light" | "dark" (overrides the host's useThemeMode binding for everything drawn).

Host

The engine renders with no host at all. Every capability it can ask for has a default that announces itself once on the console and marks degraded elements data-rich-content-host="bare". Configure once at the app root:

import { configureRichContent } from "@ai-matrx/rich-content/host";

configureRichContent({
  toast,                 // your toast (structural: success/error/info/warning/loading/dismiss)
  captureError,          // your error sink
  ErrorActions,          // extra actions beside an error message
  NestedContent,         // nested markdown renderer (standard level)
  wikilinks,             // { resolve, create, loadBody } against your records
  resolvePerson,         // @mentions
  ResourcePeek,          // your record peek
  splitterEnvelopes,     // content-IR envelope hooks for complete regions
  useOpenSaveToTable,    // "save these rows as a table"
});

MIT licensed.

The editor section

Visual (Tiptap), Source (CodeMirror), Preview, the markdown formatting command layer and edit-in-place — imported as @ai-matrx/rich-content/editor/<core|in-place|format|islands|panels|source|visual|editor>/<module>, stylesheet @ai-matrx/rich-content/editor.css. Render-only imports never load it. See src/editor/README.md.