nice-ui/lib/markdown/components/katex/KatexDisplay/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 KatexDisplay = ({ 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.
        try {
            katex.render(source, ref.current, {
                displayMode: true,
                throwOnError: true,
            });
        }
        catch (error) {
            katex.render(source, ref.current, {
                displayMode: false,
                throwOnError: false,
            });
        }
        return () => {
            while (div.firstChild)
                div.removeChild(div.firstChild);
        };
    }, [katex, ref.current, source]);
    return React.createElement("div", { ref: ref, style: { textAlign: 'center' } });
};
exports.default = KatexDisplay;