Reload codemirror when fonts are loaded

Signed-off-by: Maxim Sukharev <[email protected]>

Author: smacker

frontend/src/components/QueryBox.js

@@ -22,6 +22,8 @@ class QueryBox extends Component {
       schema: undefined,
       codeMirrorTables: {}
     };
+
+    this.codemirror = React.createRef();
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -35,6 +37,18 @@ class QueryBox extends Component {
     };
   }
 
+  componentDidMount() {
+    // IE or old browsers
+    if (!document.fonts || !document.fonts.ready) {
+      return;
+    }
+
+    // we use custom font, codemirror needs refresh when the font is loaded
+    document.fonts.ready.then(() => {
+      this.codemirror.current.editor.refresh();
+    });
+  }
+
   static schemaToCodeMirror(schema) {
     if (!schema) {
       return {};
@@ -85,6 +99,7 @@ class QueryBox extends Component {
           <Row className="codemirror-row no-spacing">
             <Col xs={12} className="codemirror-col no-spacing">
               <CodeMirror
+                ref={this.codemirror}
                 value={this.props.sql}
                 options={options}
                 onBeforeChange={(editor, data, value) => {