Clear the state

[fachu000]

I need a way to compile code without MathJax remembering the commands that I defined in previous compilations.

    async function printRenderedText(text: string) {
        const render = await window.MathJax.tex2chtmlPromise(text, { display: true });
        console.log(`For the code '${text}' the rendered HTML is: \n${render.outerHTML}\n\n`)
    }
    await printRenderedText("\\command")// Displays \command in red letters
    await printRenderedText("\\newcommand{\\command}{x+z} \\command ") // Displays x+z
    await printRenderedText("\\command")// I want it to display \command in red letters, but it displays x+z

Describe the solution you'd like
Something like window.MathJax.clear() so that MathJax forgets what I compiled before.

Describe alternatives you've considered
I tried enclosing the code in braces { } so that the command definition is local, I tried clearing the variables that I found that contained the new command:

window.MathJax.startup.document.menu.options.jax.CHTML.math.math = ""
window.MathJax.startup.document.menu.options.jax.CHTML.math.inputJax.latex = ""

and many other things.

Additional context
The output produced by the aforementioned code is

For the code '{\command}' the rendered HTML is: 
<mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" display="true" tabindex="0" ctxtmenu_counter="0" style="position: relative;"><mjx-math display="true" class="MJX-TEX" aria-hidden="true" style="margin-left: 0px; margin-right: 0px;"><mjx-texatom texclass="ORD"><mjx-mtext class="mjx-n" style="color: red;"><mjx-c class="mjx-c5C"></mjx-c><mjx-c class="mjx-c63"></mjx-c><mjx-c class="mjx-c6F"></mjx-c><mjx-c class="mjx-c6D"></mjx-c><mjx-c class="mjx-c6D"></mjx-c><mjx-c class="mjx-c61"></mjx-c><mjx-c class="mjx-c6E"></mjx-c><mjx-c class="mjx-c64"></mjx-c></mjx-mtext></mjx-texatom></mjx-math><mjx-assistive-mml unselectable="on" display="block"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mrow data-mjx-texclass="ORD"><mtext mathcolor="red">\command</mtext></mrow></math></mjx-assistive-mml></mjx-container>

For the code '{\newcommand{\command}{x+z} \command } ' the rendered HTML is: 
<mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" display="true" tabindex="0" ctxtmenu_counter="1" style="position: relative;"><mjx-math display="true" class="MJX-TEX" aria-hidden="true" style="margin-left: 0px; margin-right: 0px;"><mjx-texatom texclass="ORD"><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D465 TEX-I"></mjx-c></mjx-mi><mjx-mo class="mjx-n" space="3"><mjx-c class="mjx-c2B"></mjx-c></mjx-mo><mjx-mi class="mjx-i" space="3"><mjx-c class="mjx-c1D467 TEX-I"></mjx-c></mjx-mi></mjx-texatom></mjx-math><mjx-assistive-mml unselectable="on" display="block"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mrow data-mjx-texclass="ORD"><mi>x</mi><mo>+</mo><mi>z</mi></mrow></math></mjx-assistive-mml></mjx-container>

For the code '{\command}' the rendered HTML is: 
<mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" display="true" tabindex="0" ctxtmenu_counter="2" style="position: relative;"><mjx-math display="true" class="MJX-TEX" aria-hidden="true" style="margin-left: 0px; margin-right: 0px;"><mjx-texatom texclass="ORD"><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D465 TEX-I"></mjx-c></mjx-mi><mjx-mo class="mjx-n" space="3"><mjx-c class="mjx-c2B"></mjx-c></mjx-mo><mjx-mi class="mjx-i" space="3"><mjx-c class="mjx-c1D467 TEX-I"></mjx-c></mjx-mi></mjx-texatom></mjx-math><mjx-assistive-mml unselectable="on" display="block"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mrow data-mjx-texclass="ORD"><mi>x</mi><mo>+</mo><mi>z</mi></mrow></math></mjx-assistive-mml></mjx-container>

Help would be appreciated. Thanks!!

[dpvc]

Macros, once defined (either by hand, or by loading an extension, including by using \require) are permanent, and can't be removed from the TeX input jax. You would need to create a new instance of the TeX input jax in order to get one without the previous definitions (and labels, etc.). The easiest way to do that is probably just to call MathJax.startup.getComponents() which will re-instantiate all the components (input and output jax, DOM adapter, and MathDocument). Its a bit of overkill, but should be the easiest to do. Note, however, that you will lose the CHTML character cache, so the CSS generated will be just for the next expression processed, so won't include the CSS for the previous expressions. But that may be what you want (it is not clear from your example). If you need to keep the CSS for the previous expressions, then you would need to re-instantiate only the TeX input jax and hook it into the existing MathDocument. That takes a little more work, but can be done if necessary.

[fachu000]

Thanks for your answer. I tried MathJax.startup.getComponents() but then everything disappears, both the math that was rendered before and the math that is rendered after.

Could you explain how to reinstantiate only the TeX input jax and hook it into the existing MathDocument? Thanks!

[dpvc]

OK, here's what's happening: When the CHTML output jax is rebuilt, it ends up replacing the stylesheet that the original one had set up (and that included the CSS needed to display the character in the original math expressions). So the old expression disappear. A new stylesheet is created, but the information about what characters had already been used (the font cache information) is global, and so the new CHTML jax thinks those characters are already in the stylesheet, and so doesn't add them again. So the new expressions that use the same characters don't show up either.

One way around this is to attach the new CHTML output jax to the original stylesheet before typesetting its first equation. That would be done by using

MathJax.startup.getComponents();
MathJax.startup.document.outputJax.chtmlStyles = document.getElementById('MJX-CHTML-styles');

This may lead to some redundant CSS being added to the stylesheet, but at leas the original information isn't lost.

The other approach is to replace the input jax and hook it into the MathDocument, as you request. For that, you need to do

      const mathDocument = MathJax.startup.document;
      mathDocument.inputJax = MathJax.startup.getInputJax();
      mathDocument.inputJax.map((jax) => {
        jax.setAdaptor(mathDocument.adaptor);
        jax.setMmlFactory(mathDocument.mmlFactory);
        jax.initialize();
      });

This may be the better choice to avoid unneeded duplication in the stylesheet contents.