highlight background color changes is not be saved for math equation creating by MathType

[ruirui19]

What is the current behavior? Describe the bug Adding a Mathtype plugin into TinyMCE editor to allow adding math equation into the editor. The math equation is inserted as an image and when trying to add the background color by using the default button (backcolor), sometimes the onEditorChange event is not be triggered. Although I can see the image tag is wrapped by a span tag with background stying

Please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tiny.cloud or similar.

1. add this as an initial value <p><span style="background-color: #e03e2d;"><math xmlns="http://www.w3.org/1998/Math/MathML"><mfrac><mn>233</mn><mn>4444</mn></mfrac></math></span> <span style="background-color: #e67e23;"><math xmlns="http://www.w3.org/1998/Math/MathML"><msup><mn>333</mn><mn>44</mn></msup></math><math xmlns="http://www.w3.org/1998/Math/MathML"><mi>n</mi><mi>m</mi><mi>n</mi><mi>m</mi><mi>n</mi><mspace linebreak="newline"></mspace></math></span></p>
2. try to change a background color to any math equation
3. the onEditorChange is not triggered

What is the expected behavior? onEditorChange is triggered and the changes can be saved

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE? "@tinymce/tinymce-react": "^3.12.6"

[lnewson]

HI @ruirui19,

I'm afraid that we do not maintain the MathType plugin you've linked, that's maintained by Wiris so I would suggest contacting them first as we cannot help diagnose issues in that plugin.

In saying that though, it's possible that there might be some event that's not being handled by the React integration which in turn is preventing the onEditorChange callback to fire so I'm going to transfer this over to the tinymce-react repo to see if our integrations team might be able to provide any suggestions.

[exalate-issue-sync[bot]]

Ref: INT-2807

[ruirui19]

Hi @lnewson

Thanks for your reply. It is not necessary to use the MathType plugin but it is ok to use the tag I provided above to test. It is not related directly related to the MathType plugin. Yeah and I agree it may be an issue that some event that's not being handled by the React integration. Appreciated any feedbacks.

Thanks

[tiny-james]

So the TinyMCE events: change, input, compositionend, setcontent, keypress, NewBlock are what could trigger the onEditorChanged callback (assuming the content was actually changed by them). Maybe I should include FormatApply and FormatRemove though I haven't seen any problems with applying formats before.

[tiny-james]

I've tried to replicate this problem but I'm not having any success getting the same result as you.

Here's my replication: https://codesandbox.io/s/applying-highlight-mathml-o71hhx

I'm using extended_valid_elements to allow the mathml elements which I assume is what MathType does under the hood, though probably with much more sophistication.

So far I can change the highlight on the first equation and it triggers the onEditorChange handler without any problems. For some reason I don't understand I can't change the highlight on the second two equations at all. As the source code does not change the onEditorChange handler does not fire.

I believe that the react integration is working as intended here but there might be a TinyMCE bug after-all so I am going to pass this back to the tinymce repository for further investigation.