32 lines
834 B
TypeScript
32 lines
834 B
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { MathJax, MathJaxContext } from 'better-react-mathjax';
|
|
|
|
const MathMLPreview = () => {
|
|
const [mathML, setMathML] = useState('<math xmlns="http://www.w3.org/1998/Math/MathML"><mi>x</mi><mo>=</mo><mn>5</mn></math>');
|
|
|
|
useEffect(() => {
|
|
// Any logic to handle input updates and preview refresh can be added here
|
|
}, [mathML]);
|
|
|
|
return (
|
|
<div>
|
|
<textarea
|
|
value={mathML}
|
|
onChange={(e) => setMathML(e.target.value)}
|
|
rows={5}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
<MathJaxContext>
|
|
<div>
|
|
<h3>Preview:</h3>
|
|
<MathJax dynamic>
|
|
<div dangerouslySetInnerHTML={{ __html: mathML }} />
|
|
</MathJax>
|
|
</div>
|
|
</MathJaxContext>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MathMLPreview;
|