0

I am trying to use the Wiris mathematics editor within a React component. I am initialising the editor within the "componentDidMount" function:

componentDidMount() {
 var script = document.createElement("script");
 script.src = "https://www.wiris.net/demo/editor/editor";

 var callback = function() {
    var editor = com.wiris.jsEditor.JsEditor.newInstance({
        language: "en"
        });

     editor.insertInto(document.getElementById("editorContainer"));
 };

 script.onload = callback;

 document.head.appendChild(script);
}

However when the editor gets rendered it has an issue where many of the symbols are missing. See below:

enter image description here

I am not sure what is causing this issue. Is it because of the way I am referencing the external script, or is it an issue with the way that React is rendering the content?

I've recreated the issue in a CodePen here.

Note that if you open that CodePen in Chrome (Version 59.0.3071.115 (Official Build) (64-bit)) or IE 11 (11.0.14393.0) you will see the problem. However it does appear to work in Firefox 54.0.1.

Ben Smith
  • 19,589
  • 6
  • 65
  • 93
  • Unfortunately, we haven't been able to reproduce the issue in the CodePen sample you provide. The way you are calling the script is correct. – Wiris Support Jul 14 '17 at 08:22
  • @WIRISMATHsupportteam If you open that code pen in Chrome (Version 59.0.3071.115 (Official Build) (64-bit)) or IE 11 (11.0.14393.0) you will see the problem. However it does appear to work in Firefox 54.0.1. – Ben Smith Jul 14 '17 at 09:13
  • 1
    We can see that commenting the reset.min.css in Chrome works too. We have passed this on to our development team so they can investigate further and eventually prevent this behaviour for similar reset CSS. – Wiris Support Aug 04 '17 at 16:10
  • Thanks for getting back to me. I can confirm that if I disable the rules set by reset.min.css the Wiris editor gets rendered correctly. Looking forward to seeing a fix for this issue! – Ben Smith Aug 07 '17 at 08:32
  • 1
    This issue is fixed on our latest WIRIS EDITOR release. – Wiris Support Nov 10 '17 at 09:28
  • @WIRISMATHsupportteam That is great news. – Ben Smith Nov 10 '17 at 09:29

1 Answers1

0

The Wiris developers fixed this issue in Nov '17.

I've left the question open as the CodePen might be useful to React developers investigating Wiris!

Ben Smith
  • 19,589
  • 6
  • 65
  • 93