Apply font loading mechanism for Monaco (codesandbox#975)

Author: CompuIves

packages/app/package.json

@@ -134,6 +134,7 @@
     "eslint-config-react-app": "^1.0.5",
     "eslint-plugin-vue": "^4.2.2",
     "file-saver": "^1.3.3",
+    "fontfaceobserver": "^2.0.13",
     "fuse.js": "^3.2.1",
     "geniejs": "^0.5.0",
     "glamor": "^2.20.25",

packages/app/src/app/components/CodeEditor/Monaco/MonacoReactComponent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import FontFaceObserver from 'fontfaceobserver';
 
 function noop() {}
 
@@ -57,9 +58,35 @@ class MonacoEditor extends React.PureComponent {
         openModel: model => this.props.openReference(model),
       };
 
+      const appliedOptions = { ...options };
+
+      const fonts = appliedOptions.fontFamily.split(',').map(x => x.trim());
+      // We first just set the default fonts for the editor. When the custom font has loaded
+      // we set that one so that Monaco doesn't get confused.
+      // https://github.com/Microsoft/monaco-editor/issues/392
+      let firstFont = fonts[0];
+      if (firstFont.startsWith('"')) {
+        // Font is eg. '"aaaa"'
+        firstFont = JSON.parse(firstFont);
+      }
+      const font = new FontFaceObserver(firstFont);
+
+      font.load().then(
+        () => {
+          if (this.editor && this.props.getEditorOptions) {
+            this.editor.updateOptions(this.props.getEditorOptions());
+          }
+        },
+        () => {
+          // Font was not loaded in 3s, do nothing
+        }
+      );
+
+      appliedOptions.fontFamily = fonts.slice(1).join(', ');
+
       this.editor = context.monaco.editor[
         diffEditor ? 'createDiffEditor' : 'create'
-      ](this.containerElement, options);
+      ](this.containerElement, appliedOptions);
       if (theme) {
         context.monaco.editor.setTheme(theme);
       }

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -1602,6 +1602,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
             editorWillMount={monaco =>
               defineTheme(monaco, this.props.theme.vscodeTheme)
             }
+            getEditorOptions={this.getEditorOptions}
             openReference={this.openReference}
           />
         </CodeContainer>

yarn.lock

@@ -7208,6 +7208,10 @@ follow-redirects@^1.0.0, follow-redirects@^1.2.3:
   dependencies:
     debug "^3.1.0"
 
+fontfaceobserver@^2.0.13:
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.0.13.tgz#47adbb343261eda98cb44db2152196ff124d3221"
+
 for-each@^0.3.2:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"