smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: load font faces in Safari manually (#8693)

Browse source
This commit is contained in:
Marcel Mraz 2024-10-30 13:40:24 +02:00 • committed by GitHub
parent 79b181bcdc
commit 03028eaa8c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 269 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

23
packages/excalidraw/components/App.tsx
View file

@ -49,7 +49,7 @@ import {
} from "../appState";
import type { PastedMixedContent } from "../clipboard";
import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
import { ARROW_TYPE, type EXPORT_IMAGE_TYPES } from "../constants";
import { ARROW_TYPE, isSafari, type EXPORT_IMAGE_TYPES } from "../constants";
import {
APP_NAME,
CURSOR_TYPE,
@ -2320,11 +2320,11 @@ class App extends React.Component<AppProps, AppState> {
// clear the shape and image cache so that any images in initialData
// can be loaded fresh
this.clearImageShapeCache();
// FontFaceSet loadingdone event we listen on may not always
// fire (looking at you Safari), so on init we manually load all
// fonts and rerender scene text elements once done. This also
// seems faster even in browsers that do fire the loadingdone event.
this.fonts.loadSceneFonts();
// manually loading the font faces seems faster even in browsers that do fire the loadingdone event
this.fonts.loadSceneFonts().then((fontFaces) => {
this.fonts.onLoaded(fontFaces);
});
};
private isMobileBreakpoint = (width: number, height: number) => {
@ -2567,8 +2567,8 @@ class App extends React.Component<AppProps, AppState> {
),
// rerender text elements on font load to fix #637 && #1553
addEventListener(document.fonts, "loadingdone", (event) => {
const loadedFontFaces = (event as FontFaceSetLoadEvent).fontfaces;
this.fonts.onLoaded(loadedFontFaces);
const fontFaces = (event as FontFaceSetLoadEvent).fontfaces;
this.fonts.onLoaded(fontFaces);
}),
// Safari-only desktop pinch zoom
addEventListener(
@ -3236,6 +3236,13 @@ class App extends React.Component<AppProps, AppState> {
}
});
// paste event may not fire FontFace loadingdone event in Safari, hence loading font faces manually
if (isSafari) {
Fonts.loadElementsFonts(newElements).then((fontFaces) => {
this.fonts.onLoaded(fontFaces);
});
}
if (opts.files) {
this.addMissingFiles(opts.files);
}