mirror of
https://github.com/backnotprop/plannotator.git
synced 2026-09-14 14:17:26 +08:00
Michael Ramos
0b167cc478
Bundle-weight optimization of @plannotator/ui for multi-chunk hosts, requested by Workspaces: the Mermaid runtime and Graphviz engine load inside the render effect, the username dictionary sits behind a synchronous identity generator slot, and KaTeX sits behind a math renderer slot with a loader seam on configurePlannotatorUI. Plannotator's own apps import eager entries (math, identity, and Mermaid for the plan editor) so their behavior is unchanged: single-file builds within noise of main, math typeset on first paint, identities from the full dictionary, and the share portal keeps Mermaid in its entry chunk so its failure surface matches main. Built-HTML registration markers guard the eager imports. Hosts that omit the eager entries get the lazy paths, a one-shot automatic re-attempt, and a Retry affordance on the diagram error panel; the module-map limitation of in-page retries is documented. AI-assisted (Claude) under maintainer direction.
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import type { Block } from '../../types';
|
|
import { normalizeMathTex, renderMathToHtml } from '../../utils/math';
|
|
import { useMathRenderer } from '../../hooks/useMathRenderer';
|
|
|
|
// Kept as re-exports: InlineMarkdown and older consumers import them from here.
|
|
export { normalizeMathTex, renderMathToHtml };
|
|
|
|
type MathBlockProps = {
|
|
block: Block;
|
|
};
|
|
|
|
export const MathBlock: React.FC<MathBlockProps> = ({ block }) => {
|
|
const tex = normalizeMathTex(block.content);
|
|
const renderer = useMathRenderer();
|
|
const html = useMemo(() => renderMathToHtml(tex, true, renderer), [tex, renderer]);
|
|
|
|
// The wrapper (class names, data-* anchors, aria-label) is identical in both
|
|
// branches: block targeting and math-annotation restore key on these
|
|
// attributes, so a placeholder must be addressable exactly like the typeset
|
|
// block. The placeholder's child is a React text node, never markup.
|
|
if (html === null) {
|
|
return (
|
|
<div
|
|
className="math-block math-annotatable my-5 overflow-x-auto py-2 text-foreground"
|
|
data-block-id={block.id}
|
|
data-block-type="math"
|
|
data-math-tex={tex}
|
|
data-math-display="true"
|
|
aria-label={tex}
|
|
>
|
|
{tex}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="math-block math-annotatable my-5 overflow-x-auto py-2 text-foreground"
|
|
data-block-id={block.id}
|
|
data-block-type="math"
|
|
data-math-tex={tex}
|
|
data-math-display="true"
|
|
aria-label={tex}
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
/>
|
|
);
|
|
};
|