Support entering math using MathType

[ronaldtse]

This was a request from Peter Godwin of IEC.

It should be possible to integrate their "Offline JavaScript JDK" in Glossarist:

• https://www.npmjs.com/package/@wiris/mathtype-integration-js-dev
• https://github.com/wiris/mathtype-integration-js-dev/

The text editing module of Glossarist currently allows entering AsciiMath, but does not provide a WYSIWYG editor for entering math formulas.

This work is to integrate JavaScript WIRIS MathType into Glossarist as an option for people to use.

WIRIS MathType is a licensed software, and therefore cannot be "freely available" to all Glossarist users. For organizations that have licensed MathType, they should be able to "turn on" MathType in Glossarist, and use MathType to enter math formulas in the Glossarist text editing module. (e.g. in the Settings pane).

Glossarist stores math in MathML; MathType has an ability to store and read math in MathML.

You should investigate other MathType integrations for reference, i.e. plugins to Moodle, CKEditor, TinyMCE.

WIRIS MathType Web: https://docs.wiris.com/en/mathtype/mathtype_web/start

[bravedragon331]

Which text editor do you want to change into WIRIS editor? Destination? Example?

[ronaldtse]

Both Definition and EXAMPLE/NOTEs should support entering math equations using MathType.

Ping @strogonoff

[strogonoff]

Accidental close.

To see where we support MathJax currently, see uses of MathJax.Text in .tsx files. @ronaldtse is right but we also have math in designations.

[strogonoff]

@bravedragon331 Essentially, as a deliverable, we could use a React component that “wraps” another React component, and adds MathType features to the component it wraps. What do you think?

In this scenario, your component will not be wrapping “native” DOM nodes directly[0]. Please let us know right away if you stumble across major hurdles such as

• you need to wrap a textarea or input node directly
• you must wrap a textarea and cannot wrap single-line inputs because of MathType limitations

then we could rethink the integration.

[0] Your component would wrap our widget input, e.g. AutoSizedTextArea, which in turn wraps some Blueprint’s input component.

[strogonoff]

(@ronaldtse for us it means we could use a flag whether MathType is to be enabled or not; if flag is on we would dynamically import() and render the new component, if off we would render what we render now. We should be able to install at runtime the new component as a dependency for users with license only, avoiding inclusion of proprietary code in the distributed binary.)

[ronaldtse]

Agree, thanks @strogonoff!

[strogonoff]

Can push the component to this repo: https://github.com/glossarist/mathtype-input

[bravedragon331]

let's suppose I have integrated wiris for Definition. But normal textarea text is not compatible with mathML format. So it is not displayed correctly (non-displayed). What shall i do?

[ronaldtse]

@bravedragon331 I'll let @strogonoff answer you here 😉

I imagine we should have a separate "markup mode" and "editor mode":

• In "markup mode", the MathML is shown in raw.
• In "editor mode", it is kind of like a WYSIWYG mode where you can edit MathML using MathType if enabled.

[ronaldtse]

From @bravedragon331

it is really difficult to find document for coulomb is it fine to use native Electron functionality to update your app? I am going to use to save "flag" variable which is used to switch modes also, it is impossible to add settings in the position i showed because it is embeded in coulob. so i am going to create like this

[strogonoff]

@bravedragon331

The idea is to implement a reusable React component supporting MathType—Coulomb, Electron should not enter your scope. Are there problems with this implementation?

[strogonoff]

See this comment for more details. No need to use units from Coulomb or Glossarist. All that’s needed is a reusable component that can wrap a text input and add MathType to it.

[bravedragon331]

https://github.com/bravedragon331/glossarist-desktop

I don't have access to your repository, so I have pushed my work here... anyway, the newly created component is WirisMathType, WirisScriptInsert from widgets.tsx Please run this app and check how it looks like.

thank you

[ronaldtse]

@bravedragon331 Thanks. I noticed that your repository is not a fork. Can you make it a fork and place your commits on top so we can make a Pull Request?

[strogonoff]

@bravedragon331 @ronaldtse No need to fork the repo. The deliverable is supposed to be an independent component not importing anything from Glossarist or Coulomb.

[strogonoff]

Can push the component to this repo: https://github.com/glossarist/mathtype-input

Please push your component to this repo

[bravedragon331]

https://github.com/glossarist/mathtype-input

Please invite me to this repo

[ronaldtse]

@bravedragon331 you have access to that repo now.

[bravedragon331]

https://github.com/glossarist/mathtype-input/commit/6c43ae4f73dd4e9c99bbb655b94ec92cf17655f9 This is math-type component which is wrapped wiris editor

https://github.com/bravedragon331/glossarist-desktop/commit/feae278157a2cc3ea75c5cbd015da4d63199e2bc This is component usage for glossarist-desktop

[strogonoff]

Thanks! Taking a look, I believe https://github.com/glossarist/mathtype-input/blob/master/src/components/widget.tsx is where the core component is

[bravedragon331]

Thanks! Taking a look, I believe https://github.com/glossarist/mathtype-input/blob/master/src/components/widget.tsx is where the core component is

yes

[bravedragon331]

@strogonoff did you take a look?

[bravedragon331]

hi @ronaldtse Could you please email to jjoshuahong31@gmail.com? i have something to discuss with you. thank you.

[strogonoff]

@strogonoff did you take a look?

@bravedragon331 I did. I am looking into improving math type integration in a way that works in smaller single-line fields like designations, and making fields support arbitrary surrounding text (possibly RTL for Arabic).

[strogonoff]

There may be a further task along this topic in a couple days, will let you know ASAP

[bravedragon331]

yes, that's possible. I have checked code before and I can make props, 🔢

[ronaldtse]

@bravedragon331 we have already paid you. Did you not see? If that's the case we need to revoke the payment.