perf: replace opentype.js font metric parsing

Author: zsviczian

RefactorPlan.md

@@ -35,6 +35,7 @@ validated, and what remains uncertain.
 | Use inflate-only Pako runtime | Complete | Replaced the full Pako distribution with its API-compatible inflate-only build; all existing Excalidraw and locale payloads retain their format and decompression path |
 | Replace bundled YAML runtime | Implemented; awaiting manual validation | `mergeMarkdownFiles()` now uses Obsidian's public YAML APIs, and `yaml` is no longer a direct production dependency |
 | Compress per-window React payload | Complete | React, ReactDOM, and the JSX shim are inflated before React participates in plugin bootstrap; the decompressed source remains available for popout-window package creation, and manual testing found no startup or runtime regression |
+| Replace bundled OpenType metric reader | Complete | A bounds-checked SFNT reader now extracts only the TTF/OTF metrics consumed by Excalidraw; WOFF/WOFF2 fallback behavior is unchanged, `opentype.js` is no longer bundled, and manual testing found no font regression |
 | Audit and consolidate duplicate logic | In progress | Consolidated `updateFrontmatterInString()`, `arrayToMap()`, `wrapTextAtCharLength()`, `getLinkParts()`/`LinkParts`, `getBinaryFileFromDataURL()`, `svgToBase64()`, `getFontDataURL()`, `cropCanvas()`, `getImageSize()`, `promiseTry()`, `isVersionNewerThanOther()`, `repositionElementsToCursor()`, the internal `cloneElement()`, and `getBoundTextElementId()`; continue one independently testable helper family at a time |
 | Remaining view phases | In progress | Manually validate the extension renderer checkpoint before choosing between the higher-risk scene-file loader and a mechanical package-aware React-root extraction |
 
@@ -79,6 +80,8 @@ validated, and what remains uncertain.
 | 2026-08-09 | Replaced the bundled YAML runtime with Obsidian's public YAML APIs | Updated the sole runtime consumer, `mergeMarkdownFiles()`, to use `parseYaml()` and `stringifyYaml()` from `obsidian`, added TSDoc for its precedence and array-merge contract, and removed `yaml` as a direct production dependency. Existing target frontmatter remains text-preserved. Obsidian serialization may represent nulls as empty values and keep long scalars on one line; these forms parse to the same values as the previous output | Repository search confirms no source imports from `yaml`; targeted ESLint and `npm run lib` passed; production builds before and after dependency cleanup passed with the existing 33 circular-dependency warnings; the CRLF-aware whitespace check passed. `main.js` decreased 104,707 bytes, from 5,078,533 to 4,973,826 bytes, leaving 269,054 bytes below 5 MiB. Manual validation should prioritize template/target array merging and missing keys through **Convert note to Excalidraw** and `ExcalidrawAutomate.create()`, then null, long-text, date, alias, multiline, quoted-value, desktop, and mobile cases |
 | 2026-08-09 | Compressed the per-window React runtime payload | Deflated the minified React, ReactDOM, and JSX-shim source at build time. In the emitted bootstrap, inflate-only Pako and the dependency-free `unpackBase64Deflate()` helper are initialized first; only then is `REACT_PACKAGES` inflated and evaluated. The decompressed string remains alive for `PackageManager.getPackage()` to evaluate in each popout window. Removed the now-unused direct `jsesc` development dependency. This ordering specifically addresses the prior attempt that failed before React decompression could run | `npm run build` passed with the existing 33 circular-dependency warnings; `node --check dist/main.js` passed; emitted-order inspection confirms the inflater precedes React decompression; an isolated bootstrap smoke test initialized React 18.3.1 and ReactDOM, then successfully evaluated the retained package source a second time to simulate a popout. `main.js` decreased 78,540 bytes, from 4,973,826 to 4,895,286 bytes, leaving 347,594 bytes below 5 MiB. Manual validation is mandatory because the historical failure occurred during Obsidian startup: test desktop and mobile cold starts first, then main-window rendering, a new and restored popout, moving a leaf between windows, plugin disable/re-enable, and the extension-renderer paths |
 | 2026-08-09 | Closed the compressed React validation checkpoint | Manual testing found no startup or runtime regressions with the bootstrap-safe compressed React payload | User confirmed the implementation works; the checkpoint is ready to commit |
+| 2026-08-09 | Replaced `opentype.js` with a focused SFNT metric reader | Added documented, bounds-checked parsing of `head.unitsPerEm`, `hhea.ascender`, and `hhea.descender`, preserving exact raw values and the established line-height calculation. The already-read vault buffer is reused instead of decoding the generated data URL. Glyph outlines, shaping, rendering, and embedding remain owned by the browser and Excalidraw. Removed unused font-family-name parsing plus the `opentype.js` runtime and type dependencies. WOFF/WOFF2 continue to use the same fallback metrics as before | The new reader produced exact metric parity with `opentype.js` across all 21 installed TTF/OTF fixtures, including a CFF OTF, and safely rejected three malformed/truncated fixtures. Repository search found no remaining runtime dependency references. Targeted ESLint passed for the new reader and `FontManager`; `node --check dist/main.js` and production builds passed with the existing 33 circular-dependency warnings; `npm run madge` remains unavailable because `madge` is not installed. `main.js` decreased 186,132 bytes, from 4,895,286 to 4,709,154 bytes, leaving 533,726 bytes below 5 MiB. Manual validation should first compare existing and newly created local-font text using representative TTF and OTF files on desktop, including wrapping, baselines, bound text, reload, SVG/PNG/PDF export, and a popout; then repeat core text creation/reload on mobile and smoke-test WOFF/WOFF2. The highest-risk regression is different layout for an unusual TTF/OTF whose metrics fall back because its table structure is malformed or unsupported |
+| 2026-08-09 | Closed the focused SFNT reader validation checkpoint | Manual testing found no regressions in local-font loading or behavior after removing `opentype.js` | User confirmed the implementation works well; the checkpoint is ready to commit |
 
 ## Executive recommendation
 
@@ -149,8 +152,9 @@ bundle exactly 25,380 bytes to 5,078,533 bytes. Current headroom is 164,347
 bytes (about 160 KiB or 3.13%). Replacing the bundled YAML runtime then reduced
 the bundle another 104,707 bytes to 4,973,826 bytes. Current headroom is
 269,054 bytes (about 263 KiB or 5.13%). Compressing the React package source
-then reduced the bundle another 78,540 bytes to 4,895,286 bytes. Current
-headroom is 347,594 bytes (about 339 KiB or 6.63%).
+then reduced the bundle another 78,540 bytes to 4,895,286 bytes. Replacing
+`opentype.js` with the focused SFNT reader reduced it another 186,132 bytes to
+4,709,154 bytes. Current headroom is 533,726 bytes (about 521 KiB or 10.18%).
 
 | Injected section | Approximate production characters | Share of `main.js` |
 | --- | ---: | ---: |
@@ -189,12 +193,12 @@ Recommended order:
    unreachable even when the user manually requests all notes. Those entries
    occupy about 18 KB of source string data. Preserve their history outside
    the runtime import graph.
-5. Replace `opentype.js` only as a separately tested feature change. It is
-   imported at one site solely to read `unitsPerEm`, ascender, descender, and
-   English family name for custom TTF/OTF fonts. Its measured standalone
-   production cost is about 169 KB. A focused SFNT table reader could recover
-   most of that, but must cover real TTF/OTF collections and name encodings;
-   this has more functional risk than the preceding items.
+5. Implemented; awaiting manual validation: replaced `opentype.js` with a
+   focused SFNT reader for the three metrics actually consumed by Excalidraw.
+   English family-name parsing was removed because it had no consumer. The
+   reader matched all 21 available TTF/OTF fixtures exactly and retains the
+   existing fallback for invalid files and all WOFF/WOFF2 fonts. The production
+   bundle decreased 186,132 bytes.
 
 Secondary static-payload candidates, after the above checkpoints:
 

package-lock.json

@@ -38,7 +38,6 @@
     "lz-string": "^1.5.0",
     "monkey-around": "^2.3.0",
     "nanoid": "^5.1.16",
-    "opentype.js": "^1.3.4",
     "pako": "^2.1.0",
     "points-on-path": "^0.2.1",
     "polybooljs": "^1.2.0",
@@ -68,7 +67,6 @@
     "@types/chroma-js": "^3.1.1",
     "@types/js-beautify": "^1.14.0",
     "@types/node": "^22.19.19",
-    "@types/opentype.js": "^1.3.8",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "@zsviczian/excalidraw-extras-api": "^0.0.13",

package.json

@@ -7,7 +7,8 @@ import {
 } from "src/constants/constants";
 import { t } from "src/lang/helpers";
 import { getCJKDataURLs } from "src/utils/CJKLoader";
-import { getFontDataURL, getFontMetrics } from "src/utils/utils";
+import { getFontDataURL } from "src/utils/utils";
+import { getFontMetrics } from "src/utils/fontMetrics";
 import type ExcalidrawPlugin from "src/core/main";
 
 declare const mainDocument: Document;
@@ -115,17 +116,16 @@ export class FontManager {
       this.plugin.settings.experimantalFourthFont,
       "",
     );
-    let fontMetrics = file.extension.startsWith("woff")
+    let fontMetrics = file.extension.startsWith("woff") || !font.arrayBuffer
       ? undefined
-      : await getFontMetrics(fourthFontDataURL, "Local Font");
+      : getFontMetrics(font.arrayBuffer);
 
     if (!fontMetrics) {
       fontMetrics = {
         unitsPerEm: 1000,
         ascender: 750,
         descender: -250,
         lineHeight: 1.2,
-        fontName: "Local Font",
       };
     }
     this.getPackageMap().forEach(({ excalidrawLib }) => {

src/core/managers/FontManager.ts

@@ -13,8 +13,9 @@ export { getEmbeddedFilenameParts } from "./embeddedFilenameParts";
  * @param fontFileName - Vault link path or font filename to resolve.
  * @param sourcePath - Vault path from which the font link is resolved.
  * @param name - Optional font-family name overriding the file basename.
- * @returns The font definition, resolved family name, and encoded data URL.
- * Empty strings are returned when the font cannot be resolved.
+ * @returns The font definition, resolved family name, encoded data URL, and
+ * original buffer. Empty strings and a null buffer are returned when the font
+ * cannot be resolved.
  * @remarks
  * MIME types and CSS format names intentionally preserve the established
  * extension mapping used by plugin startup and embedded SVG font loading.
@@ -24,13 +25,19 @@ export async function getFontDataURL(
   fontFileName: string,
   sourcePath: string,
   name?: string,
-): Promise<{ fontDef: string; fontName: string; dataURL: string }> {
+): Promise<{
+  fontDef: string;
+  fontName: string;
+  dataURL: string;
+  arrayBuffer: ArrayBuffer | null;
+}> {
   let fontDef = "";
   let fontName = "";
   let dataURL = "";
+  let arrayBuffer: ArrayBuffer | null = null;
   const f = app.metadataCache.getFirstLinkpathDest(fontFileName, sourcePath);
   if (f) {
-    const ab = await app.vault.readBinary(f);
+    arrayBuffer = await app.vault.readBinary(f);
     let mimeType = "";
     let format = "";
 
@@ -55,12 +62,12 @@ export async function getFontDataURL(
         mimeType = "application/octet-stream";
     }
     fontName = name ?? f.basename;
-    dataURL = await getDataURL(ab, mimeType);
+    dataURL = await getDataURL(arrayBuffer, mimeType);
     const split = dataURL.split(";base64,", 2);
     dataURL = `${split[0]};charset=utf-8;base64,${split[1]}`;
     fontDef = ` @font-face {font-family: "${fontName}";src: url("${dataURL}") format("${format}")}`;
   }
-  return { fontDef, fontName, dataURL };
+  return { fontDef, fontName, dataURL, arrayBuffer };
 }
 
 /**

src/utils/embeddedAssetUtils.ts

@@ -0,0 +1,143 @@
+/**
+ * Reads only the SFNT metadata required to register a local Excalidraw font.
+ *
+ * @packageDocumentation
+ */
+
+const SFNT_HEADER_SIZE = 12;
+const TABLE_RECORD_SIZE = 16;
+const TABLE_TAG_SIZE = 4;
+const TABLE_OFFSET_POSITION = 8;
+const TABLE_LENGTH_POSITION = 12;
+
+const HEAD_UNITS_PER_EM_POSITION = 18;
+const HEAD_REQUIRED_LENGTH = HEAD_UNITS_PER_EM_POSITION + 2;
+const HHEA_ASCENDER_POSITION = 4;
+const HHEA_DESCENDER_POSITION = 6;
+const HHEA_REQUIRED_LENGTH = HHEA_DESCENDER_POSITION + 2;
+
+const SUPPORTED_SFNT_SIGNATURES = new Set([
+  0x00010000, // TrueType outlines
+  0x4f54544f, // OTTO: OpenType with CFF/CFF2 outlines
+  0x74727565, // true: legacy Apple TrueType
+  0x74797031, // typ1: legacy OpenType wrapper
+]);
+
+/** Font metrics registered for Excalidraw's local font family. */
+export interface FontMetrics {
+  /** Raw `head.unitsPerEm` value. The narrow cast preserves uncommon values. */
+  unitsPerEm: 1000 | 1024 | 2048;
+  /** Raw `hhea.ascender` value. */
+  ascender: number;
+  /** Raw `hhea.descender` value. */
+  descender: number;
+  /** Unitless line height derived using the plugin's established formula. */
+  lineHeight: number;
+}
+
+type SfntTable = {
+  offset: number;
+  length: number;
+};
+
+const readTableTag = (view: DataView, offset: number): string => {
+  let tag = "";
+  for (let index = 0; index < TABLE_TAG_SIZE; index++) {
+    tag += String.fromCharCode(view.getUint8(offset + index));
+  }
+  return tag;
+};
+
+const isRangeAvailable = (
+  byteLength: number,
+  offset: number,
+  length: number,
+): boolean =>
+  Number.isSafeInteger(offset) &&
+  Number.isSafeInteger(length) &&
+  offset >= 0 &&
+  length >= 0 &&
+  offset <= byteLength - length;
+
+const findRequiredTables = (
+  view: DataView,
+): { head: SfntTable; hhea: SfntTable } | null => {
+  if (view.byteLength < SFNT_HEADER_SIZE) {
+    return null;
+  }
+  if (!SUPPORTED_SFNT_SIGNATURES.has(view.getUint32(0))) {
+    return null;
+  }
+
+  const tableCount = view.getUint16(4);
+  const directoryLength = tableCount * TABLE_RECORD_SIZE;
+  if (!isRangeAvailable(view.byteLength, SFNT_HEADER_SIZE, directoryLength)) {
+    return null;
+  }
+
+  let head: SfntTable | null = null;
+  let hhea: SfntTable | null = null;
+  for (let index = 0; index < tableCount && (!head || !hhea); index++) {
+    const recordOffset = SFNT_HEADER_SIZE + index * TABLE_RECORD_SIZE;
+    const tag = readTableTag(view, recordOffset);
+    if (tag !== "head" && tag !== "hhea") {
+      continue;
+    }
+    const table = {
+      offset: view.getUint32(recordOffset + TABLE_OFFSET_POSITION),
+      length: view.getUint32(recordOffset + TABLE_LENGTH_POSITION),
+    };
+    if (!isRangeAvailable(view.byteLength, table.offset, table.length)) {
+      return null;
+    }
+    if (tag === "head") {
+      head = table;
+    } else {
+      hhea = table;
+    }
+  }
+  return head && hhea ? { head, hhea } : null;
+};
+
+/**
+ * Reads the vertical metrics needed by Excalidraw from a TTF or OTF buffer.
+ *
+ * @param fontData - Complete SFNT font data from a `.ttf` or `.otf` file.
+ * @returns Parsed metrics, or `null` when the font is unsupported or malformed.
+ * @remarks
+ * Only the SFNT table directory plus `head.unitsPerEm`, `hhea.ascender`, and
+ * `hhea.descender` are read. Glyph outlines, names, and layout tables are left
+ * to the browser and Excalidraw, as they were never consumed by the plugin.
+ */
+export function getFontMetrics(fontData: ArrayBuffer): FontMetrics | null {
+  const view = new DataView(fontData);
+  const tables = findRequiredTables(view);
+  if (
+    !tables ||
+    tables.head.length < HEAD_REQUIRED_LENGTH ||
+    tables.hhea.length < HHEA_REQUIRED_LENGTH
+  ) {
+    return null;
+  }
+
+  const unitsPerEm = view.getUint16(
+    tables.head.offset + HEAD_UNITS_PER_EM_POSITION,
+  );
+  const ascender = view.getInt16(
+    tables.hhea.offset + HHEA_ASCENDER_POSITION,
+  );
+  const descender = view.getInt16(
+    tables.hhea.offset + HHEA_DESCENDER_POSITION,
+  );
+  if (unitsPerEm === 0) {
+    return null;
+  }
+
+  return {
+    // Excalidraw's type lists common values only; retain the font's exact value.
+    unitsPerEm: unitsPerEm as FontMetrics["unitsPerEm"],
+    ascender,
+    descender,
+    lineHeight: (ascender - descender) / unitsPerEm,
+  };
+}