How do I use the mathML tag in the text editor

Show
1

I’ve added these “mi, mrow, msqrt, math, mfrac, munderover, mo, mtd, mtr, mtable, mtext, mmultiscripts” mathml tag to my custom schema list.

These tags are parsed and added in the html content but its styles are not appaplied. The styles for those tags are comes form the browser by default.

I don’t no why the browser default style are not being applied for the mathMl tags

2

Is your styling correctly applied to mathml elements outside of ProseMirror ?

3

Yes outside the ProseMirror It’s works fine.

4

Did you find a solution ?

I run into the exact same problem : the MathML element and descendants is correctly parsed to my prosemirror model, correctly rendered by toDOM, including mathml xml namespace attribute, but is not rendered as MathML : the text content of mathml elements is rendered as plain text. The exact same MathML copied anywhere in the same page but outside prosemirror document is displayed correctly as math.

Any help or pointer would be appreciated !

If something is missing in the question that prevents you from answering, let me know, and I’ll be happy to provide details.

5

I finally figured out how to make MathML display correctly.

The issue of the browser misinterpreting MathML was caused by the namespace. I wrongly was defining toDOM to output an xmlns="http://www.w3.org/1998/Math/MathML" attribute in the outer math element hoping it would act as a default namespace for its children, but it was not the case.

I still couldn’t find a way to add a default namespace to the math element. However, by prefixing every MathML element in the model created by toDOM with its namespace, the formula displays correctly.

Here is the relevant part of the model

nodes = {
...
  math : {
    ...
    toDOM : node => ["http://www.w3.org/1998/Math/MathML math",{...},0],
    ...
  },
  mi: { 
   ... 
   toDOM: node => ["http://www.w3.org/1998/Math/MathML mi", {}, 0],
   ...
  },
  // and so on for each mathml element, semantics, mrow, mo, mn,...
}
``
2 Likes
6

Woo, super! Thank you so much for solving this problem.