PreProcess isn't always applied correctly

Just filing this so potential users are aware ... I'm still working on debugging exactly what's going on here.

The issue is if you use a Text node to wrap text in delimiters specified in the options configuration, e.g.:

<Text text="$$x * y$$">

asciimath2jax: {
              useMathMLspacing: true,
              delimiters: [["$$","$$"]],
              preview: "none",
            }

For some reason, the call to PreProcess and Typeset do not always execute correctly and the text remains unchanged. I believe this is because MathJax performs DOM manipulation in its own Queue structure and we're hitting some sort of race condition where it's operating on elements that React has removed.

This is a bit tricky to debug, but various fixes/workarounds I've tried include:

forcing unique keys on each Text object, in hopes that React will not re-use Text components
calling PreProcess and Typeset without providing a reference to the dom element, thus forcing a reprocess of every HTML element on the page
using setTimeout to force a PreProcess + Typeset in the future ...
capturing errors via a MessageHook on "Math Processing Error" and forcing a reprocess

I'll be reaching out to the MathJax developers, but it looks like their primary use case is static webpages.

I've also tried figuring out exactly what's going on in MathJax land, but the intermingling of DOM manipulation code with parsing the asciimath syntax seems pretty convoluted in the v2 source code (see here)

wko27 / react-mathjax

PreProcess isn't always applied correctly #1