first commit

common/resources/client/ui/font-picker/browser-safe-fonts.ts

@@ -0,0 +1,28 @@
+import {FontConfig} from '@common/http/value-lists';
+import {message} from '@common/i18n/message';
+
+export const BrowserSafeFonts: FontConfig[] = [
+  {
+    label: message('System'),
+    family:
+      'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    category: 'sans-serif',
+  },
+  {family: 'Impact, Charcoal, sans-serif', category: 'sans-serif'},
+  {family: 'Arial, Helvetica Neue, Helvetica, sans-serif', category: 'serif'},
+  {family: '"Comic Sans MS", cursive, sans-serif', category: 'Handwriting'},
+  {family: 'Century Gothic, sans-serif', category: 'sans-serif'},
+  {family: '"Courier New", Courier, monospace', category: 'monospace'},
+  {
+    family: '"Lucida Sans Unicode", "Lucida Grande", sans-serif',
+    category: 'sans-serif',
+  },
+  {family: '"Times New Roman", Times, serif', category: 'serif'},
+  {family: '"Lucida Console", Monaco, monospace', category: 'monospace'},
+  {family: '"Andele Mono", monospace, sans-serif', category: 'sans-serif'},
+  {family: 'Verdana, Geneva, sans-serif', category: 'sans-serif'},
+  {
+    family: '"Helvetica Neue", Helvetica, Arial, sans-serif',
+    category: 'sans-serif',
+  },
+];

common/resources/client/ui/font-picker/font-face-config.ts

@@ -0,0 +1,5 @@
+export interface FontFaceConfig {
+  family: string;
+  src: string;
+  descriptors?: FontFaceDescriptors;
+}

common/resources/client/ui/font-picker/load-fonts.ts

@@ -0,0 +1,75 @@
+import {FontFaceConfig} from './font-face-config';
+import {FontConfig} from '@common/http/value-lists';
+import lazyLoader from '@common/utils/http/lazy-loader';
+
+function prefixId(id: string) {
+  return `be-fonts-${id}`;
+}
+
+export function loadFonts(
+  fonts: (FontFaceConfig | FontConfig)[],
+  options: {
+    prefixSrc?: (src?: string) => string;
+    id: string;
+    forceAssetLoad?: boolean;
+    document?: Document;
+    weights?: number[];
+  },
+): Promise<FontFace[]> {
+  const doc = options.document || document;
+  const googleFonts: FontConfig[] = [];
+  const customFonts: FontFaceConfig[] = [];
+
+  let promises = [];
+
+  fonts.forEach(font => {
+    if ('google' in font && font.google) {
+      googleFonts.push(font);
+    } else if ('src' in font) {
+      customFonts.push(font);
+    }
+    // native fonts don't need to be loaded, they are already available in the browser
+  });
+
+  if (googleFonts?.length) {
+    const weights = options.weights || [400];
+    const families = fonts
+      .map(f => `${f.family}:${weights.join(',')}`)
+      .join('|');
+    const googlePromise = lazyLoader.loadAsset(
+      `https://fonts.googleapis.com/css?family=${families}&display=swap`,
+      {
+        type: 'css',
+        id: prefixId(options.id),
+        force: options.forceAssetLoad,
+        document: doc,
+      },
+    );
+    promises.push(googlePromise);
+  }
+
+  if (customFonts?.length) {
+    const customFontPromises = customFonts.map(async fontConfig => {
+      const loadedFont = Array.from(doc.fonts.values()).find(current => {
+        return current.family === fontConfig.family;
+      });
+      if (loadedFont) {
+        return loadedFont.loaded;
+      }
+      const fontFace = new FontFace(
+        fontConfig.family,
+        `url(${
+          options?.prefixSrc
+            ? options.prefixSrc(fontConfig.src)
+            : fontConfig.src
+        })`,
+        fontConfig.descriptors,
+      );
+      doc.fonts.add(fontFace);
+      return fontFace.load();
+    });
+    promises = promises.concat(customFontPromises);
+  }
+
+  return Promise.all(promises);
+}

common/resources/client/ui/font-picker/load-google-fonts.ts

@@ -0,0 +1,13 @@
+import {FontConfig} from '@common/http/value-lists';
+import lazyLoader from '@common/utils/http/lazy-loader';
+
+export function loadGoogleFonts(fonts: FontConfig[], id: string) {
+  const googleFonts = fonts.filter(f => f.google);
+  if (googleFonts?.length) {
+    const families = fonts.map(f => `${f.family}:400`).join('|');
+    lazyLoader.loadAsset(
+      `https://fonts.googleapis.com/css?family=${families}&display=swap`,
+      {type: 'css', id}
+    );
+  }
+}