fast-reflexes / better-react-mathjax

MIT License
132 stars 16 forks source link

mfenced open='{' not working #23

Closed Veijar closed 2 years ago

Veijar commented 2 years ago

I am currently working with formulas in MathML (it is a requirement, the data comes this way from the backend) and when trying to use the render does not show opening tags when using the mfenced tag with its property open='{' any idea or solution? Thank you!

versions: "react": "^17.0.2", "better-react-mathjax": "^2.0.1",

image image

fast-reflexes commented 2 years ago

Hi!

Thanks for filing this issue!

First of all, mfenced is deprecated and you should use mrow and mo instead: https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mfenced

Nonetheless, you are absolutely right that this works with "natural" MathJax as can be seen here: https://codesandbox.io/s/23-mathjax-86ij8x

With React and better-react-mathjax it does not work as can be seen in the second example here (the part from your example which should be surrounded by [ and ]): https://codesandbox.io/s/23-better-react-mathjax-008v84. The first part however shows how it can be done with mo instead.

The problem lies in React which maps ANY values on the open attribute of any element to a truthy value, that is the attribute open="this is text" is mapped to open only on the element.

Fork both of the above sandboxes and try the following:

MathJax likely interprets the attribute open with no value as there should be no opening symbol at all and typesets in accordance with this.

What you can do is omit the open and close attributes altogether, then you end up with the default ( and ), but I understand if this is not what you want. My recommendation is to file a bug report with React or try to find out why React treats the open attribute this way. You can also process the input MathML and replace the mfenced with mrow's and mo's.

SInce this is not a problem residing in better-react-mathjax I will close this ticket. Let me know if you think this is wrong.

Best of luck! ...and also, next time you file a ticket, remember to add the input code as text and not just a picture, that makes it much easier to just copy and paste ;)

Veijar commented 2 years ago

Hello, I have been able to find a solution for my problem : 3

I would like to be able to contribute the code to contribute a new method for a possible solution that can be integrated with your library, please tell me how I can help you!.

fast-reflexes commented 2 years ago

Hi!

I'm glad to hear you've found a solution... Hmm... depending on the solution, it might be interesting to add it to the library but because mfenced is deprecated and because the problem really lies in React, I would be slightly restrictive with respect to how elaborate the fix is allowed to be (I don't want to add a hack to the library). I would also be interested to first find out what the view on this open attribute is from React's side... I assume you haven't filed a bug report with them? If so, I might do it to see what they say.

But describe the fix and it will be considered :)

fast-reflexes commented 2 years ago

I'm closing this again! Please feel free to reopen when you decide to be more active :)

Snouzy commented 2 years ago

Hello, I have been able to find a solution for my problem : 3

I would like to be able to contribute the code to contribute a new method for a possible solution that can be integrated with your library, please tell me how I can help you!.

Hey, could you share your code ? It will help me a lot. Thanks