"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = KatexRenderer;
const tslib_1 = require("tslib");
const katex_1 = tslib_1.__importDefault(require("katex"));
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
function KatexRenderer({ equation, inline, onDoubleClick, }) {
    const katexElementRef = (0, react_1.useRef)(null);
    (0, react_1.useEffect)(() => {
        const katexElement = katexElementRef.current;
        if (katexElement !== null) {
            katex_1.default.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