Wiris editor missing icons when used in React component

Question

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:

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.

Answer 1

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!