What exactly happens after renderMathInElement() changes the HTML?

[Kombat-Batyanya]

Hi,
I am trying to figure out if I will be able to use KaTeX in TIBCO Spotfire JSViz visualizations. For those who don't know what Spotfire is, it is a corporate BI platform that can use embedded Chromium to render graphic elements written in JavaScript (among many other nice things) .

As far as I can see my renderMathInElement() call successfully parses LaTeX content in my DIV and changes the HTML code, but when it tries to render the result on the screen it gets stuck and renders nothing. No errors are thrown.
This is my DIV just before and after the renderMathInElement() call:

https://drive.google.com/file/d/18q0dhtSqpAijTs1OkB3bhhZ204SyWJjv/view?usp=sharing

Hence the subject question, if the HTML is successfully replaced by renderMathInElement(), what could prevent Spotfire's Chromium to render it? Am I merely missing some additional libraries not disclosed in https://katex.org/docs/autorender.html ?
For example, what does this url http://www.w3.org/1998/Math/MathML do in the replaced code?

Thank you in advance.

[Kombat-Batyanya]

This issue seems to be a consequence of KaTeX not being able to render on SVG as described in #375

I managed to display a KaTeX content in a Spotfire JSViz that doesn't use SVGs.
Looks like I should try MathJax then.

[Kombat-Batyanya]

Erik,
Thank you for very interesting hints.

When I followed your suggestion, the generated HTML file shows the entire Spotfire interface with working buttons etc. but a greyed-out area of my chart bearing a note "it may have been moved, edited or deleted".

Investigating the issue further, the DOM that I obtained earlier by calling console.log(document.body) immediately after renderMathInElement(document.body) is clearly not the same DOM that is being rendered on my screen. Spotfire adds quite a bunch of its own stuff (menus, buttons, area dividers) on top of it and then includes the chart DOM in an iframe inside it. The html inside the iframe seems to keep all the katex spans as I shared in my original post.

So the question is whether KaTeX is supposed to work from within iframes.

I am thinking on a potential workaround implemented by Dr.M.Bourne in #375 (comment) but that would be a pain in the neck for me as I only started looking at JavaScript code a couple of weeks ago regardless of my 35 year amateur coding experience.

Regards
Dmitry

[edemaine]

Oops, looking again at your original screenshot, I see now that you're trying to render a formula that's inside a <text> element of an SVG. That won't work; KaTeX only supports math inside HTML. You might be able to get it to work by wrapping the KaTeX output in an SVG <foreignObject> but this hasn't been tested.

It might also be possible with MathJax using its SVG rendering mode, but not without significant additional code. (This project does something along those lines, but it wouldn't be easy to adapt to your setting.)

[Kombat-Batyanya]

Thank you, Erik, for such a quick diagnosis of my situation. I am impressed.
I will park the topic now and will try to approximate the desired outcome with simple multiple-line text elements.

In the modern copy-paste-link approach to software development "significant coding" is not encouraged.

All the best,
Dmitry

[Kombat-Batyanya]

Just to confirm that SVG <foreignObject> approach works with KaTeX as per the example found here:

https://drive.google.com/file/d/1iLOt7U05SY2NtyphwU7XE4SPR9Iz_Wil/view?usp=sharing

Will the default documented call to renderMathInElement() automatically replace text inside <foreignObject> or do I need to allow that in options?

[edemaine]

Cool! It should find them; the default ignoredClasses does not list foreignObject.