marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-11-14 01:34:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

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
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);
}