Skip to content

Commit

Permalink
Ensure Monaco measures fonts after the font is loaded
Browse files Browse the repository at this point in the history
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
  • Loading branch information
shepmaster committed Oct 9, 2024
1 parent efd614b commit a66d813
Showing 1 changed file with 10 additions and 0 deletions.
10 changes: 10 additions & 0 deletions ui/frontend/editor/MonacoEditorCore.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -68,6 +76,8 @@ const MonacoEditorCore: React.FC<CommonEditorProps> = (props) => {
});
setEditor(editor);

remeasureFontWhenReady(document.fonts, nodeStyle.font);

editor.focus();
}, []);

Expand Down

0 comments on commit a66d813

Please sign in to comment.