phx-react
Version:
PHX REACT
28 lines • 1.25 kB
JavaScript
import katex from 'katex';
import * as React from 'react';
import { useEffect, useRef } from 'react';
export default function KatexRenderer({ equation, inline, onDoubleClick, }) {
const katexElementRef = useRef(null);
useEffect(() => {
const katexElement = katexElementRef.current;
if (katexElement !== null) {
katex.render(equation, katexElement, {
displayMode: !inline, // true === block display //
errorColor: '#cc0000',
output: 'html',
strict: 'warn',
throwOnError: false,
trust: false,
});
}
}, [equation, inline]);
return (
// We use an empty image tag either side to ensure Android doesn't try and compose from the
// inner text from Katex. There didn't seem to be any other way of making this work,
// without having a physical space.
React.createElement(React.Fragment, null,
React.createElement("img", { alt: '', src: '#' }),
React.createElement("span", { ref: katexElementRef, onDoubleClick: onDoubleClick, role: 'button', tabIndex: -1 }),
React.createElement("img", { alt: '', src: '#' })));
}
//# sourceMappingURL=KatexRenderer.js.map