nice-ui/lib/markdown/components/katex/KatexInline/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const useAsync_1 = require("react-use/lib/useAsync");
const loadKatex_1 = require("../loadKatex");
const { useRef, useEffect } = React;
const KatexInline = ({ source }) => {
    const ref = useRef(null);
    const { value: katex } = (0, useAsync_1.default)(loadKatex_1.default);
    useEffect(() => {
        if (!katex)
            return;
        const div = ref.current;
        if (!div)
            return;
        // First render in display mode, if throws, try rendering in inline mode.
        div.innerHTML = '';
        katex.render(source, ref.current, {
            displayMode: false,
            throwOnError: false,
        });
        return () => {
            while (div.firstChild)
                div.removeChild(div.firstChild);
        };
    }, [katex, ref.current, source]);
    return React.createElement("span", { ref: ref });
};
exports.default = KatexInline;