react-mathjax-preview/dist/index.js

The MathJax React component you were looking for.

var $VjlY2$react = require("react");
var $VjlY2$proptypes = require("prop-types");
var $VjlY2$dompurify = require("dompurify");

function $parcel$interopDefault(a) {
  return a && a.__esModule ? a.default : a;
}
function $parcel$defineInteropFlag(a) {
  Object.defineProperty(a, '__esModule', {value: true, configurable: true});
}
function $parcel$export(e, n, v, s) {
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}

$parcel$defineInteropFlag(module.exports);

$parcel$export(module.exports, "default", () => $366f189997649a4c$export$2e2bcd8739ae039);



const $366f189997649a4c$var$baseConfig = {
    showMathMenu: true,
    tex2jax: {
        inlineMath: [
            [
                "$",
                "$"
            ],
            [
                "\\(",
                "\\)"
            ], 
        ]
    },
    skipStartupTypeset: true
};
const $366f189997649a4c$var$defaultSanitizeOptions = {
    USE_PROFILES: {
        mathMl: true
    },
    ADD_ATTR: [
        'columnalign'
    ]
};
const $366f189997649a4c$var$MathJaxPreview = /*#__PURE__*/ ($parcel$interopDefault($VjlY2$react)).forwardRef(({ script: script , config: config , className: className , math: math , id: id , style: style , wrapperTag: wrapperTag , msDelayDisplay: msDelayDisplay , onDisplay: onDisplay , onLoad: onLoad , onError: onError , sanitizeOptions: sanitizeOptions ,  }, ref)=>{
    const sanitizedMath = ($parcel$interopDefault($VjlY2$dompurify)).sanitize(math, {
        ...$366f189997649a4c$var$defaultSanitizeOptions,
        ...sanitizeOptions
    });
    const previewRef = $VjlY2$react.useRef();
    const [display, setDisplay] = $VjlY2$react.useState("none"); //prevent display during processing
    const [loadingState, setLoadingState] = $VjlY2$react.useState(window.MathJax ? "loaded" : "loading");
    $VjlY2$react.useEffect(()=>{
        let mathjaxScriptTag = document.querySelector(`script[src="${script}"]`);
        if (!mathjaxScriptTag) {
            mathjaxScriptTag = document.createElement("script");
            mathjaxScriptTag.async = true;
            mathjaxScriptTag.src = script;
            for (const [k, v] of Object.entries(config || {
            }))mathjaxScriptTag.setAttribute(k, v);
            const node = document.head || document.getElementsByTagName("head")[0];
            node.appendChild(mathjaxScriptTag);
        }
        const onloadHandler = ()=>{
            setLoadingState("loaded");
            window.MathJax.Hub.Config({
                ...$366f189997649a4c$var$baseConfig,
                ...config
            });
            onLoad && onLoad();
        };
        const onerrorHandler = ()=>{
            setLoadingState("failed");
            onError && onError();
        };
        mathjaxScriptTag.addEventListener("load", onloadHandler);
        mathjaxScriptTag.addEventListener("error", onerrorHandler);
        return ()=>{
            mathjaxScriptTag.removeEventListener("load", onloadHandler);
            mathjaxScriptTag.removeEventListener("error", onloadHandler);
        };
    }, [
        setLoadingState,
        config,
        $366f189997649a4c$var$baseConfig
    ]);
    $VjlY2$react.useEffect(()=>{
        if (loadingState !== "loaded") return;
        previewRef.current.innerHTML = sanitizedMath;
        window.MathJax.Hub.Queue([
            "Typeset",
            window.MathJax.Hub,
            previewRef.current, 
        ]);
        //delay display of div
        var msDelay;
        if (msDelayDisplay !== null && !isNaN(+msDelayDisplay) && +msDelayDisplay >= 0 && +msDelayDisplay < 10000) msDelay = +msDelayDisplay;
        else msDelay = 300; // default 300ms delay
        const timeout = setTimeout(()=>{
            setDisplay("inline"); //display div after delay, hopefully typeset has finished
            onDisplay && onDisplay();
        }, msDelay);
        return ()=>{
            setDisplay("none");
            clearTimeout(timeout);
        };
    }, [
        sanitizedMath,
        loadingState,
        previewRef
    ]);
    return(/*#__PURE__*/ ($parcel$interopDefault($VjlY2$react)).createElement(wrapperTag, {
        className: className,
        id: id,
        style: {
            display: display,
            ...style
        },
        ref: ref
    }, /*#__PURE__*/ ($parcel$interopDefault($VjlY2$react)).createElement(($parcel$interopDefault($VjlY2$react)).Fragment, null, loadingState === "failed" && /*#__PURE__*/ ($parcel$interopDefault($VjlY2$react)).createElement("span", null, "fail loading mathjax lib"), /*#__PURE__*/ ($parcel$interopDefault($VjlY2$react)).createElement(wrapperTag, {
        className: "react-mathjax-preview-result",
        ref: previewRef
    }))));
});
$366f189997649a4c$var$MathJaxPreview.displayName = 'MathJaxPreview';
$366f189997649a4c$var$MathJaxPreview.propTypes = {
    script: ($parcel$interopDefault($VjlY2$proptypes)).string,
    config: ($parcel$interopDefault($VjlY2$proptypes)).object,
    className: ($parcel$interopDefault($VjlY2$proptypes)).string,
    math: ($parcel$interopDefault($VjlY2$proptypes)).string,
    style: ($parcel$interopDefault($VjlY2$proptypes)).object,
    wrapperTag: ($parcel$interopDefault($VjlY2$proptypes)).string,
    id: ($parcel$interopDefault($VjlY2$proptypes)).string,
    onLoad: ($parcel$interopDefault($VjlY2$proptypes)).func,
    onError: ($parcel$interopDefault($VjlY2$proptypes)).func,
    onDisplay: ($parcel$interopDefault($VjlY2$proptypes)).func,
    sanitizeOptions: ($parcel$interopDefault($VjlY2$proptypes)).object
};
$366f189997649a4c$var$MathJaxPreview.defaultProps = {
    script: "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-MML-AM_HTMLorMML",
    id: "react-mathjax-preview",
    sanitizeOptions: {
    },
    wrapperTag: "div"
};
var $366f189997649a4c$export$2e2bcd8739ae039 = $366f189997649a4c$var$MathJaxPreview;


//# sourceMappingURL=index.js.map