React-draft-wysiwyg: how to add math formula support in Editor

[gmchaturvedi1]

Hi,

your module is awesome and fulfil my most requirements but i am new to draftjs and want help to add math formula support for my app as it is for educational domain.

thanks & Regards
gmchaturvedi

[jpuri]

Hi @gmchaturvedi1: You requirement is not very clear. How exactly do you want to add math formula. May be if you can share design it would help me understand.

[gmchaturvedi1]

We just want that our user can add math formula in editor .I just saw a
plugin in draftjs plugin editor katex and ma5hjax. Can we add those plug8ns
here .kindly suggest?
On 13 May 2017 19:49, "Jyoti Puri" [e-mail] wrote:

Hi @gmchaturvedi1 https://github.com/gmchaturvedi1: You requirement is
not very clear. How exactly do you want to add math formula. May be if you
can share design it would help me understand.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jpuri/react-draft-wysiwyg/issues/322#issuecomment-301251225,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AKWBKZtfC8fAju-TxZvG8BI_faiQcOf-ks5r5bv5gaJpZM4NZQUF
.

[jpuri]

@gmchaturvedi1 : it will be hard to use these plugins as such. But react-draft-wysiwyg does allows customization. You can write custom block types and custom toolbar options.

[jpuri]

Closing the issue as its not in scope for wysiwyg.

[NikhilP99]

@jpuri Can you please tell me how to use/integrate these plugins in the editor? I want to add a custom option which will take LaTeX/MathML as input and render the mathematical equation in the editor box.

[danya870]

@NikhilP99 Tell me, did you manage to add the opportunity input and edit LaTeX in this editor?

[NikhilP99]

@NikhilP99 Tell me, did you manage to add the opportunity input and edit LaTeX in this editor?

I did manage to add an option in editor which opened a separate input box where you can type in LaTeX or MathML. This did not render inside the editor box but a different section on the webpage.

[danya870]

@NikhilP99 Is there a code to see how you did?

[NikhilP99]

@NikhilP99 Is there a code to see how you did?

Sorry, that was during an internship, company has the ownership of the code now.

[danya870]

@NikhilP99 Got it. Thanks for the info.

[NorweskiDrwal]

@danya870 I will be looking into adding this to the editor
poke me in a month and I'll let you know how it's going

[mohit497]

@NorweskiDrwal were you able to add the math extension in the editor

[huangruzhe]

@NorweskiDrwal can you tell me how to add add the math extension? it it bother me a lot, thank you.

[vrajpal-jhala]

Hi everyone,

I've implemented an easy workaround to add math formula support in react-draft-wysiwyg. I've added MathJax custom toolbar button which appends LaTex syntax in the editor, which can be rendered as math symbols using MathJax library. You can check out the demo here. It doesn't add direct support of editing math equation, but it's an easy workaround if anyone is looking for something similar. Hope it helps you guys!

For the advance use case, one can add presets/macros having predefined formulas in the MathJax toolbar.

Thanks @jpuri and the contributors for working on this awesome project!