feat(katex): fixed node sizing issues, caused by KaTeX fonts not being loaded

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",

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

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"