Ensure Monaco measures fonts after the font is loaded

As soon as Monaco is instantiated, it measures various aspects of the
chosen font. Since the playground fetches fonts, the fonts may not yet
be available to be measured. After a bit, the fonts are loaded but
Monaco's cached results are now out of date.

We now trigger a remeasurement of the fonts after our fonts are
available.

For some reason, this has only been reported by people using Microsoft
Edge, but theoretically it should occur in any browser. Perhaps
there's something unique about Edge's text rendering? It also only
occurs at certain original zoom levels — on my computer, it needed
125% zoom. Note that each zoom level has different font metrics, so
changing the zoom once the font is loaded will work although the
original incorrect metrics will still be cached.

Fixes #1103

Author: shepmaster

ui/frontend/editor/MonacoEditorCore.tsx

@@ -8,6 +8,14 @@ import { themeVsDarkPlus } from './rust_monaco_def';
 
 import * as styles from './Editor.module.css';
 
+async function remeasureFontWhenReady(fonts: FontFaceSet, font: string) {
+  while (!fonts.check(font)) {
+    await fonts.ready;
+  }
+
+  monaco.editor.remeasureFonts();
+}
+
 function useEditorProp<T>(
   editor: monaco.editor.IStandaloneCodeEditor | null,
   prop: T,
@@ -68,6 +76,8 @@ const MonacoEditorCore: React.FC<CommonEditorProps> = (props) => {
     });
     setEditor(editor);
 
+    remeasureFontWhenReady(document.fonts, nodeStyle.font);
+
     editor.focus();
   }, []);