Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 3x | import React, { useRef, useEffect } from "react";
import ReadOnlyMathEditor from "@/utils/components/TinyMCETextEditorReadOnly";
/**
* MathContent component that renders HTML content with MathJax support.
* Automatically calls MathJax.typeset() after content is rendered to
* process LaTeX expressions like \(\frac{2}{9}\) into rendered math.
*
* @param {Object} props
* @param {string} props.content - HTML content that may contain LaTeX math
* @param {string} [props.backgroundColor] - Solid iframe background (matches parent surface)
*/
const MathContent = ({ content, sx = {}, backgroundColor, compact = false }) => {
const containerRef = useRef(null);
useEffect(() => {
if (!containerRef.current || !content) return;
// Trigger MathJax typesetting after content renders
const typesetMath = () => {
if (window.MathJax && window.MathJax.typeset) {
try {
window.MathJax.typeset([containerRef.current]);
} catch (err) {
console.error("MathJax typesetting failed:", err);
}
} else if (window.MathJax && window.MathJax.typesetPromise) {
// MathJax 3.x async API
window.MathJax.typesetPromise([containerRef.current]).catch((err) =>
console.error("MathJax typesetting failed:", err)
);
}
};
// Small delay to ensure DOM is ready
const timeoutId = setTimeout(typesetMath, 50);
return () => clearTimeout(timeoutId);
}, [content]);
return (
<span ref={containerRef} style={sx}>
<ReadOnlyMathEditor content={content} backgroundColor={backgroundColor} compact={compact} />
</span>
);
};
export default MathContent;
|