vdots hline array{c|c} (vertical lines) do not render about mermaid HOT 2 OPEN

One of the issues is caused by DOMPurify sanitizing the mi tags. Apparently, its removing everything inside the outer mi. In this example,

<mi><mi mathvariant="normal">⋮</mi><mpadded height="0em" voffset="0em"><mspace mathbackground="black" width="0em" height="1.5em"></mspace></mpadded></mi>

is reduced to just

<mi></mi>

So the vdots disappear.

Related cure53/DOMPurify#847

I have not yet looked into the vertical and horizontal lines yet.

from mermaid.

cure53/DOMPurify#673
It looks like a lot more tags are being removed by DOMPurify, although, I don't think there is much effect on the final render of it. I still couldn't figure out why the rendering of the lines are different for Chrome and Firefox, even though the html output is the same. My guess is that Chrome does not yet support it.

Solution

My suggestion would be to use config.legacyMathML instead of isMathMLSupported() for choosing rendering output.

would become,

 katex 
   .renderToString(c, { 
     throwOnError: true, 
     displayMode: true, 
     output: !config.legacyMathML ? 'mathml' : 'htmlAndMathml', 
   }) 

After doing so, the rendering issues are fixed (after also including the KaTeX css as well)

Below picture is my testing on Chrome.

The drawback of this would be if the user instead wanted fallback to htmlAndMathml, it wouldn't work. Perhaps we can expose isMathMLSupported() to the user and let them decide?

Or maybe that's not necessary either, since if they wish to support legacy, they will include the css, and at that point its just better to use the legacy to maintain a consistent output on all the platforms.

Alternative (partial) solution

I tried to add a DOMPurify hook, and if an mi element had children, delete it and add it to the parent. It works, but not optimal.

DOMPurify.addHook('uponSanitizeElement', (node: Element) => {
    if (node.localName === 'mi' && node.childElementCount > 0) {
      const parent = node.parentElement;
      if (!parent) {
        return;
      }
      node.childNodes.forEach((child) => {
        parent.insertBefore(child, node);
      });
      parent.removeChild(node);
    }
  });

Chrome

Firefox

The dots are very obviously different and there is some weird spacing issues only on Chrome. This, however, does not address the issue of the invisible lines.

Let me know if you'd like me to make a PR.

from mermaid.