feat: subset font glyphs for SVG export (#8384)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

packages/excalidraw/fonts/ExcalidrawFont.ts

@@ -1,12 +1,14 @@
 import { stringToBase64, toByteString } from "../data/encode";
 import { LOCAL_FONT_PROTOCOL } from "./metadata";
+import loadWoff2 from "./wasm/woff2.loader";
+import loadHbSubset from "./wasm/hb-subset.loader";
 
 export interface Font {
   urls: URL[];
   fontFace: FontFace;
-  getContent(): Promise<string>;
+  getContent(codePoints: ReadonlySet<number>): Promise<string>;
 }
-export const UNPKG_PROD_URL = `https://unpkg.com/${
+export const UNPKG_FALLBACK_URL = `https://unpkg.com/${
   import.meta.env.VITE_PKG_NAME
     ? `${import.meta.env.VITE_PKG_NAME}@${import.meta.env.PKG_VERSION}` // should be provided by vite during package build
     : "@excalidraw/excalidraw" // fallback to latest package version (i.e. for app)
@@ -32,21 +34,32 @@ export class ExcalidrawFont implements Font {
   }
 
   /**
-   * Tries to fetch woff2 content, based on the registered urls.
-   * Returns last defined url in case of errors.
+   * Tries to fetch woff2 content, based on the registered urls (from first to last, treated as fallbacks).
    *
-   * Note: uses browser APIs for base64 encoding - use dataurl outside the browser environment.
+   * NOTE: assumes usage of `dataurl` outside the browser environment
+   *
+   * @returns base64 with subsetted glyphs based on the passed codepoint, last defined url otherwise
    */
-  public async getContent(): Promise<string> {
+  public async getContent(codePoints: ReadonlySet<number>): Promise<string> {
     let i = 0;
     const errorMessages = [];
 
     while (i < this.urls.length) {
       const url = this.urls[i];
 
+      // it's dataurl (server), the font is inlined as base64, no need to fetch
       if (url.protocol === "data:") {
-        // it's dataurl, the font is inlined as base64, no need to fetch
-        return url.toString();
+        const arrayBuffer = Buffer.from(
+          url.toString().split(",")[1],
+          "base64",
+        ).buffer;
+
+        const base64 = await ExcalidrawFont.subsetGlyphsByCodePoints(
+          arrayBuffer,
+          codePoints,
+        );
+
+        return base64;
       }
 
       try {
@@ -57,13 +70,13 @@ export class ExcalidrawFont implements Font {
         });
 
         if (response.ok) {
-          const mimeType = await response.headers.get("Content-Type");
-          const buffer = await response.arrayBuffer();
+          const arrayBuffer = await response.arrayBuffer();
+          const base64 = await ExcalidrawFont.subsetGlyphsByCodePoints(
+            arrayBuffer,
+            codePoints,
+          );
 
-          return `data:${mimeType};base64,${await stringToBase64(
-            await toByteString(buffer),
-            true,
-          )}`;
+          return base64;
         }
 
         // response not ok, try to continue
@@ -89,6 +102,48 @@ export class ExcalidrawFont implements Font {
     return this.urls.length ? this.urls[this.urls.length - 1].toString() : "";
   }
 
+  /**
+   * Tries to subset glyphs in a font based on the used codepoints, returning the font as daturl.
+   *
+   * @param arrayBuffer font data buffer, preferrably in the woff2 format, though others should work as well
+   * @param codePoints codepoints used to subset the glyphs
+   *
+   * @returns font with subsetted glyphs (all glyphs in case of errors) converted into a dataurl
+   */
+  private static async subsetGlyphsByCodePoints(
+    arrayBuffer: ArrayBuffer,
+    codePoints: ReadonlySet<number>,
+  ): Promise<string> {
+    try {
+      // lazy loaded wasm modules to avoid multiple initializations in case of concurrent triggers
+      const { compress, decompress } = await loadWoff2();
+      const { subset } = await loadHbSubset();
+
+      const decompressedBinary = decompress(arrayBuffer).buffer;
+      const subsetSnft = subset(decompressedBinary, codePoints);
+      const compressedBinary = compress(subsetSnft.buffer);
+
+      return ExcalidrawFont.toBase64(compressedBinary.buffer);
+    } catch (e) {
+      console.error("Skipped glyph subsetting", e);
+      // Fallback to encoding whole font in case of errors
+      return ExcalidrawFont.toBase64(arrayBuffer);
+    }
+  }
+
+  private static async toBase64(arrayBuffer: ArrayBuffer) {
+    let base64: string;
+
+    if (typeof Buffer !== "undefined") {
+      // node + server-side
+      base64 = Buffer.from(arrayBuffer).toString("base64");
+    } else {
+      base64 = await stringToBase64(await toByteString(arrayBuffer), true);
+    }
+
+    return `data:font/woff2;base64,${base64}`;
+  }
+
   private static createUrls(uri: string): URL[] {
     if (uri.startsWith(LOCAL_FONT_PROTOCOL)) {
       // no url for local fonts
@@ -118,15 +173,14 @@ export class ExcalidrawFont implements Font {
     }
 
     // fallback url for bundled fonts
-    urls.push(new URL(assetUrl, UNPKG_PROD_URL));
+    urls.push(new URL(assetUrl, UNPKG_FALLBACK_URL));
 
     return urls;
   }
 
   private static getFormat(url: URL) {
     try {
-      const pathname = new URL(url).pathname;
-      const parts = pathname.split(".");
+      const parts = new URL(url).pathname.split(".");
 
       if (parts.length === 1) {
         return "";

packages/excalidraw/fonts/wasm/hb-subset.bindings.ts

@@ -0,0 +1,202 @@
+/**
+ * Modified version of hb-subset bindings from "subset-font" package https://github.com/papandreou/subset-font/blob/3f711c8aa29a426c7f22655861abfb976950f527/index.js
+ * 
+ * CHANGELOG:
+ * - removed dependency on node APIs to work inside the browser
+ * - removed dependency on font fontverter for brotli compression
+ * - removed dependencies on lodash and p-limit
+ * - removed options for preserveNameIds, variationAxes, noLayoutClosure (not needed for now)
+ * - replaced text input with codepoints
+ * - rewritten in typescript and with esm modules
+
+Copyright (c) 2012, Andreas Lind Petersen
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+
+  * Redistributions of source code must retain the above copyright
+    notice, this list of conditions and the following disclaimer.
+  * Redistributions in binary form must reproduce the above copyright
+    notice, this list of conditions and the following disclaimer in
+    the documentation and/or other materials provided with the
+    distribution.
+  * Neither the name of the author nor the names of contributors may
+    be used to endorse or promote products derived from this
+    software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// function HB_TAG(str) {
+//   return str.split("").reduce((a, ch) => {
+//     return (a << 8) + ch.charCodeAt(0);
+//   }, 0);
+// }
+
+function subset(
+  hbSubsetWasm: any,
+  heapu8: Uint8Array,
+  font: ArrayBuffer,
+  codePoints: ReadonlySet<number>,
+) {
+  const input = hbSubsetWasm.hb_subset_input_create_or_fail();
+  if (input === 0) {
+    throw new Error(
+      "hb_subset_input_create_or_fail (harfbuzz) returned zero, indicating failure",
+    );
+  }
+
+  const fontBuffer = hbSubsetWasm.malloc(font.byteLength);
+  heapu8.set(new Uint8Array(font), fontBuffer);
+
+  // Create the face
+  const blob = hbSubsetWasm.hb_blob_create(
+    fontBuffer,
+    font.byteLength,
+    2, // HB_MEMORY_MODE_WRITABLE
+    0,
+    0,
+  );
+  const face = hbSubsetWasm.hb_face_create(blob, 0);
+  hbSubsetWasm.hb_blob_destroy(blob);
+
+  // Do the equivalent of --font-features=*
+  const layoutFeatures = hbSubsetWasm.hb_subset_input_set(
+    input,
+    6, // HB_SUBSET_SETS_LAYOUT_FEATURE_TAG
+  );
+  hbSubsetWasm.hb_set_clear(layoutFeatures);
+  hbSubsetWasm.hb_set_invert(layoutFeatures);
+
+  // if (preserveNameIds) {
+  //   const inputNameIds = harfbuzzJsWasm.hb_subset_input_set(
+  //     input,
+  //     4, // HB_SUBSET_SETS_NAME_ID
+  //   );
+  //   for (const nameId of preserveNameIds) {
+  //     harfbuzzJsWasm.hb_set_add(inputNameIds, nameId);
+  //   }
+  // }
+
+  // if (noLayoutClosure) {
+  //   harfbuzzJsWasm.hb_subset_input_set_flags(
+  //     input,
+  //     harfbuzzJsWasm.hb_subset_input_get_flags(input) | 0x00000200, // HB_SUBSET_FLAGS_NO_LAYOUT_CLOSURE
+  //   );
+  // }
+
+  // Add unicodes indices
+  const inputUnicodes = hbSubsetWasm.hb_subset_input_unicode_set(input);
+  for (const c of codePoints) {
+    hbSubsetWasm.hb_set_add(inputUnicodes, c);
+  }
+
+  // if (variationAxes) {
+  //   for (const [axisName, value] of Object.entries(variationAxes)) {
+  //     if (typeof value === "number") {
+  //       // Simple case: Pin/instance the variation axis to a single value
+  //       if (
+  //         !harfbuzzJsWasm.hb_subset_input_pin_axis_location(
+  //           input,
+  //           face,
+  //           HB_TAG(axisName),
+  //           value,
+  //         )
+  //       ) {
+  //         harfbuzzJsWasm.hb_face_destroy(face);
+  //         harfbuzzJsWasm.free(fontBuffer);
+  //         throw new Error(
+  //           `hb_subset_input_pin_axis_location (harfbuzz) returned zero when pinning ${axisName} to ${value}, indicating failure. Maybe the axis does not exist in the font?`,
+  //         );
+  //       }
+  //     } else if (value && typeof value === "object") {
+  //       // Complex case: Reduce the variation space of the axis
+  //       if (
+  //         typeof value.min === "undefined" ||
+  //         typeof value.max === "undefined"
+  //       ) {
+  //         harfbuzzJsWasm.hb_face_destroy(face);
+  //         harfbuzzJsWasm.free(fontBuffer);
+  //         throw new Error(
+  //           `${axisName}: You must provide both a min and a max value when setting the axis range`,
+  //         );
+  //       }
+  //       if (
+  //         !harfbuzzJsWasm.hb_subset_input_set_axis_range(
+  //           input,
+  //           face,
+  //           HB_TAG(axisName),
+  //           value.min,
+  //           value.max,
+  //           // An explicit NaN makes harfbuzz use the existing default value, clamping to the new range if necessary
+  //           value.default ?? NaN,
+  //         )
+  //       ) {
+  //         harfbuzzJsWasm.hb_face_destroy(face);
+  //         harfbuzzJsWasm.free(fontBuffer);
+  //         throw new Error(
+  //           `hb_subset_input_set_axis_range (harfbuzz) returned zero when setting the range of ${axisName} to [${value.min}; ${value.max}] and a default value of ${value.default}, indicating failure. Maybe the axis does not exist in the font?`,
+  //         );
+  //       }
+  //     }
+  //   }
+  // }
+
+  let subset;
+  try {
+    subset = hbSubsetWasm.hb_subset_or_fail(face, input);
+    if (subset === 0) {
+      hbSubsetWasm.hb_face_destroy(face);
+      hbSubsetWasm.free(fontBuffer);
+      throw new Error(
+        "hb_subset_or_fail (harfbuzz) returned zero, indicating failure. Maybe the input file is corrupted?",
+      );
+    }
+  } finally {
+    // Clean up
+    hbSubsetWasm.hb_subset_input_destroy(input);
+  }
+
+  // Get result blob
+  const result = hbSubsetWasm.hb_face_reference_blob(subset);
+
+  const offset = hbSubsetWasm.hb_blob_get_data(result, 0);
+  const subsetByteLength = hbSubsetWasm.hb_blob_get_length(result);
+  if (subsetByteLength === 0) {
+    hbSubsetWasm.hb_blob_destroy(result);
+    hbSubsetWasm.hb_face_destroy(subset);
+    hbSubsetWasm.hb_face_destroy(face);
+    hbSubsetWasm.free(fontBuffer);
+    throw new Error(
+      "Failed to create subset font, maybe the input file is corrupted?",
+    );
+  }
+
+  const subsetFont = new Uint8Array(
+    heapu8.subarray(offset, offset + subsetByteLength),
+  );
+
+  // Clean up
+  hbSubsetWasm.hb_blob_destroy(result);
+  hbSubsetWasm.hb_face_destroy(subset);
+  hbSubsetWasm.hb_face_destroy(face);
+  hbSubsetWasm.free(fontBuffer);
+
+  return subsetFont;
+}
+
+export default {
+  subset,
+};

packages/excalidraw/fonts/wasm/hb-subset.loader.ts

@@ -0,0 +1,58 @@
+/**
+ * Lazy loads wasm and respective bindings for font subsetting based on the harfbuzzjs.
+ */
+let loadedWasm: ReturnType<typeof load> | null = null;
+
+// TODO: add support for fetching the wasm from an URL (external CDN, data URL, etc.)
+const load = (): Promise<{
+  subset: (
+    fontBuffer: ArrayBuffer,
+    codePoints: ReadonlySet<number>,
+  ) => Uint8Array;
+}> => {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const [binary, bindings] = await Promise.all([
+        import("./hb-subset.wasm"),
+        import("./hb-subset.bindings"),
+      ]);
+
+      WebAssembly.instantiate(binary.default).then((module) => {
+        try {
+          const harfbuzzJsWasm = module.instance.exports;
+          // @ts-expect-error since `.buffer` is custom prop
+          const heapu8 = new Uint8Array(harfbuzzJsWasm.memory.buffer);
+
+          const hbSubset = {
+            subset: (
+              fontBuffer: ArrayBuffer,
+              codePoints: ReadonlySet<number>,
+            ) => {
+              return bindings.default.subset(
+                harfbuzzJsWasm,
+                heapu8,
+                fontBuffer,
+                codePoints,
+              );
+            },
+          };
+
+          resolve(hbSubset);
+        } catch (e) {
+          reject(e);
+        }
+      });
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
+
+// lazy load the default export
+export default (): ReturnType<typeof load> => {
+  if (!loadedWasm) {
+    loadedWasm = load();
+  }
+
+  return loadedWasm;
+};

packages/excalidraw/fonts/wasm/woff2.loader.ts

@@ -0,0 +1,70 @@
+/**
+ * Lazy loads wasm and respective bindings for woff2 compression and decompression.
+ */
+type Vector = any;
+
+let loadedWasm: ReturnType<typeof load> | null = null;
+
+// TODO: add support for fetching the wasm from an URL (external CDN, data URL, etc.)
+const load = (): Promise<{
+  compress: (buffer: ArrayBuffer) => Uint8Array;
+  decompress: (buffer: ArrayBuffer) => Uint8Array;
+}> => {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const [binary, bindings] = await Promise.all([
+        import("./woff2.wasm"),
+        import("./woff2.bindings"),
+      ]);
+
+      // initializing the module manually, so that we could pass in the wasm binary
+      bindings
+        .default({ wasmBinary: binary.default })
+        .then(
+          (module: {
+            woff2Enc: (buffer: ArrayBuffer, byteLength: number) => Vector;
+            woff2Dec: (buffer: ArrayBuffer, byteLength: number) => Vector;
+          }) => {
+            try {
+              // re-map from internal vector into byte array
+              function convertFromVecToUint8Array(vector: Vector): Uint8Array {
+                const arr = [];
+                for (let i = 0, l = vector.size(); i < l; i++) {
+                  arr.push(vector.get(i));
+                }
+
+                return new Uint8Array(arr);
+              }
+
+              // re-exporting only compress and decompress functions (also avoids infinite loop inside emscripten bindings)
+              const woff2 = {
+                compress: (buffer: ArrayBuffer) =>
+                  convertFromVecToUint8Array(
+                    module.woff2Enc(buffer, buffer.byteLength),
+                  ),
+                decompress: (buffer: ArrayBuffer) =>
+                  convertFromVecToUint8Array(
+                    module.woff2Dec(buffer, buffer.byteLength),
+                  ),
+              };
+
+              resolve(woff2);
+            } catch (e) {
+              reject(e);
+            }
+          },
+        );
+    } catch (e) {
+      reject(e);
+    }
+  });
+};
+
+// lazy loaded default export
+export default (): ReturnType<typeof load> => {
+  if (!loadedWasm) {
+    loadedWasm = load();
+  }
+
+  return loadedWasm;
+};