From 1db4230d356fea7b153bd76c1f5d23c459d890f4 Mon Sep 17 00:00:00 2001
From: Nicolas Newman <nanewman01@gmail.com>
Date: Tue, 29 Mar 2022 17:37:35 -0400
Subject: [PATCH] feat(katex): fixed node sizing issues, caused by KaTeX fonts
 not being loaded

---
 package.json   |  1 +
 src/mermaid.js | 50 +++++++++++++++++++++++++++++++++++++++++++++++++-
 yarn.lock      |  5 +++++
 3 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0ec0ad938..29c16f5d2 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
     "dompurify": "2.3.6",
+    "fontfaceobserver": "^2.1.0",
     "graphlib": "^2.1.8",
     "katex": "^0.15.2",
     "khroma": "^1.4.1",
diff --git a/src/mermaid.js b/src/mermaid.js
index 757a91e2a..91c363e90 100644
--- a/src/mermaid.js
+++ b/src/mermaid.js
@@ -5,6 +5,7 @@
 import { log } from './logger';
 import mermaidAPI from './mermaidAPI';
 import utils from './utils';
+import FontFaceObserver from 'fontfaceobserver';
 import 'katex/dist/katex.css';
 
 /**
@@ -172,6 +173,53 @@ const contentLoaded = function () {
   }
 };
 
+/**
+ * ##contentLoaded Callback function that is called when page is loaded. This functions attempts to
+ * pre-load the Katex fonts before configuring mermaid and calling init. Failure to pre-load fonts
+ * could cause nodes to be improperly sized.
+ */
+const loadKatexFont = function () {
+  const fontArray = [
+    { name: 'KaTeX_AMS', options: { weight: 400, style: 'normal' } },
+    { name: 'KaTeX_Caligraphic', options: { weight: 700, style: 'normal' } },
+    { name: 'KaTeX_Caligraphic', options: { weight: 400, style: 'normal' } },
+    { name: 'KaTeX_Fraktur', options: { weight: 700, style: 'normal' } },
+    { name: 'KaTeX_Fraktur', options: { weight: 400, style: 'normal' } },
+    { name: 'KaTeX_Main', options: { weight: 700, style: 'normal' } },
+    { name: 'KaTeX_Main', options: { weight: 700, style: 'italic' } },
+    { name: 'KaTeX_Main', options: { weight: 400, style: 'italic' } },
+    { name: 'KaTeX_Main', options: { weight: 400, style: 'normal' } },
+    { name: 'KaTeX_Math', options: { weight: 700, style: 'italic' } },
+    { name: 'KaTeX_Math', options: { weight: 400, style: 'italic' } },
+    { name: 'KaTeX_SansSerif', options: { weight: 700, style: 'normal' } },
+    { name: 'KaTeX_SansSerif', options: { weight: 400, style: 'italic' } },
+    { name: 'KaTeX_SansSerif', options: { weight: 400, style: 'normal' } },
+    { name: 'KaTeX_Script', options: { weight: 400, style: 'normal' } },
+    { name: 'KaTeX_Size1', options: { weight: 400, style: 'normal' } },
+    { name: 'KaTeX_Size2', options: { weight: 400, style: 'normal' } },
+    { name: 'KaTeX_Size3', options: { weight: 400, style: 'normal' } },
+    { name: 'KaTeX_Size4', options: { weight: 400, style: 'normal' } },
+    { name: 'KaTeX_Typewriter', options: { weight: 400, style: 'normal' } },
+  ];
+
+  const observers = fontArray.map(function (fontObj) {
+    return new FontFaceObserver(fontObj.name, fontObj.options).load();
+  });
+
+  Promise.all(observers).then(
+    function (fonts) {
+      fonts.forEach(function (font) {
+        log.warn(font.family + ' (weight: ' + font.weight + ') loaded successfully');
+      });
+      contentLoaded();
+    },
+    function (err) {
+      log.error('Some fonts failed to load: ' + err);
+      contentLoaded();
+    }
+  );
+};
+
 if (typeof document !== 'undefined') {
   /*!
    * Wait for document loaded before starting the execution
@@ -179,7 +227,7 @@ if (typeof document !== 'undefined') {
   window.addEventListener(
     'load',
     function () {
-      contentLoaded();
+      loadKatexFont();
     },
     false
   );
diff --git a/yarn.lock b/yarn.lock
index fff00f09f..a8d3ebcbe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5798,6 +5798,11 @@ follow-redirects@^1.0.0, follow-redirects@^1.14.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
   integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
 
+fontfaceobserver@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz#e2705d293e2c585a6531c2a722905657317a2991"
+  integrity sha512-ReOsO2F66jUa0jmv2nlM/s1MiutJx/srhAe2+TE8dJCMi02ZZOcCTxTCQFr3Yet+uODUtnr4Mewg+tNQ+4V1Ng==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"