Bohdan Triapitsyn
4d506fba4e
Replace the react-markdown/Prism component tree with an HTML-string pipeline (marked -> KaTeX -> Shiki -> DOMPurify -> DOM decorators) patched into the DOM via morphdom, with per-block reconciliation and a paced streaming reveal. Cuts streaming CPU versus the previous renderer while preserving file-reference links, mermaid diagrams, table export, and agent/skill/favicon link handling. Public MarkdownRenderer/ SimpleMarkdownRenderer props are unchanged (drop-in).
33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { lazyWithChunkRecovery } from '@/lib/chunkLoadRecovery';
|
|
|
|
// Thin lazy wrapper around the MarkdownRenderer implementation.
|
|
// The full implementation (marked + Shiki highlighting + KaTeX + morphdom
|
|
// DOM morphing, plus beautiful-mermaid) is loaded on demand, keeping the
|
|
// initial bundle lean.
|
|
|
|
export type { MarkdownVariant } from './MarkdownRendererImpl';
|
|
|
|
|
|
const MarkdownRendererLazy = lazyWithChunkRecovery(() =>
|
|
import('./MarkdownRendererImpl').then((m) => ({ default: m.MarkdownRenderer }))
|
|
);
|
|
|
|
const SimpleMarkdownRendererLazy = lazyWithChunkRecovery(() =>
|
|
import('./MarkdownRendererImpl').then((m) => ({ default: m.SimpleMarkdownRenderer }))
|
|
);
|
|
|
|
const fallback = <div className="break-words w-full min-w-0" />;
|
|
|
|
export const MarkdownRenderer: React.FC<React.ComponentPropsWithoutRef<typeof MarkdownRendererLazy>> = (props) => (
|
|
<React.Suspense fallback={fallback}>
|
|
<MarkdownRendererLazy {...props} />
|
|
</React.Suspense>
|
|
);
|
|
|
|
export const SimpleMarkdownRenderer: React.FC<React.ComponentPropsWithoutRef<typeof SimpleMarkdownRendererLazy>> = (props) => (
|
|
<React.Suspense fallback={fallback}>
|
|
<SimpleMarkdownRendererLazy {...props} />
|
|
</React.Suspense>
|
|
);
|