customHTMLElementModels not working with 'math' tags about react-native-render-html HOT 11 OPEN

@BenzterBit Yes, clearly there are two approaches:

1. Define non-opaque custom models and renderers for each MathML tag.
2. Define an opaque custom model for the math tag, and provide a custom renderer. This custom renderer can either use tnode.domNode; which is an object from htmlparser2 library (refer to this lib documentation to walk the tree); or transform the domNode to an HTML string with domNodeToHTMLString and use a third-party library to render it.

I'm sorry as I don't have much time to provide a snack.

from react-native-render-html.

@jsamr sure, please check the following 2 snacks

1. where i have defined a custom model to render all the supported math tags via mathjax https://snack.expo.dev/@arnab_bit/allmathmltagsrenderers

2. where i have only defined a custom model for the 'math' tag specifically and tried to render it via mathjax
   https://snack.expo.dev/@arnab_bit/singlemathtagcustommodelrenderer

from react-native-render-html.

@BenzterBit It is actually working but since you're extending the default model, the opaque flag is set:
https://github.com/native-html/core/blob/4c37d2915feb8c071d060b08d54f5ef5fd9c9afc/packages/transient-render-engine/src/model/defaultHTMLElementModels.ts#L614C1-L619

Instead, extend the div model if you want something similar to div. On the other hand, the opaque flag means it won't render inner nodes (so tnode.children will be empty), but you still have access to the dom node. To do this, use the tnode.domNode prop and you'll be able to use a recursive renderer to render all descendants.

from react-native-render-html.

@jsamr From what i am able to understand of what you are saying is that since the opaque flag is set, i won't be able to render the children and say using the other approach of custom rendering using renderers, I have to recursively render all the tags inside of mathml using MathJax individually?
Also its too much to ask, but if you could provide a snack, which renders the html content above, that would make my doubts much clearer

from react-native-render-html.

@jsamr I tried the second approach. I did what you said, and now atleast i can see the mathjax or some of it, that i am wiritng. But still it can't render the tags like say . For eg. for equation n/100 *x it will print n100 *x.

It could've been due to me not specifying isOpaque: false, so i did it for each tag supported by mathml and rendered it through MathJax but even that didn't help, it gave the same 'n100 * x'

Can you tell me how to proceed from here? So that i can render the entire equation

from react-native-render-html.

@BenzterBit If you could provide snacks with the two approaches I'd be happy to help.

from react-native-render-html.

@jsamr also the rendered elements above are in a new line, can you tell me how to make them inline with the rest of the content

from react-native-render-html.

@BenzterBit Inlining may or may not work because it basically relies on embedding View into Text, which support has been inconsistent and ill-specified in RN, but this may have changed recently with Fabric which I haven't worked with yet.

To force inlining, you can use HTMLContentModel.textual or HTMLContentModel.mixed in your models. I suggest to first try to see if you can achieve the desired outcome with vanilla React Native + MathJax, and if you manage it, try to tweak these models.

from react-native-render-html.

@jsamr couldn't do it through Mathjax, i converted the mathml incoming which is used a custom renderer using rnrh and converted it to latex using a library mathml-to-latex npm library. I used HTMLContentModel.textual and it did inline though, the styling is a bit off, which i am still figuring, if you do have any ideas on that. I will let you know after a few more tries

from react-native-render-html.

@BenzterBit hi! could you share your changes with the rest of us? I think what you are trying to solve is in my usecase, it would be helpul to see a bit of code. We may have a common ground in what we are trying to do :)

from react-native-render-html.

Thank @BenzterBit for the snack example, I also found a solution seems good for you @ihojmanb, I hope it is useful:

https://medium.com/@nutanbhogendrasharma/how-to-implement-latex-in-react-native-mobile-app-6433a7726954

from react-native-render-html.