Repository: mermaid-js/mermaid
File: cypress/platform/viewer.js (JavaScript)

Code before:

function loadFontAwesomeCSS() {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css';

  document.head.appendChild(link);

  return new Promise((resolve, reject) => {
    link.onload = resolve;
    link.onerror = () => reject(new Error('Failed to load FontAwesome'));
  });
}

/**
 * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
 * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
 * page.
 */
const contentLoaded = async function () {
  try {
    await loadFontAwesomeCSS();
    await Promise.all(Array.from(document.fonts, (font) => font.load()));
  } catch (error) {
    console.error('Error loading fonts', error);
  }

  let pos = document.location.href.indexOf('?graph=');
  if (pos > 0) {
    pos = pos + 7;
    const graphBase64 = document.location.href.substr(pos);
    const graphObj = JSON.parse(b64ToUtf8(graphBase64));
    if (graphObj.mermaid && graphObj.mermaid.theme === 'dark') {
      document.body.style.background = '#3f3f3f';
    }
    console.log(graphObj);
    if (Array.isArray(graphObj.code)) {
      const numCodes = graphObj.code.length;
      for (let i = 0; i < numCodes; i++) {
        const div = document.createElement('div');
        div.id = 'block' + i;
        div.className = 'mermaid';
        div.innerHTML = graphObj.code[i];
        document.getElementsByTagName('body')[0].appendChild(div);
      }
    } else {
      const div = document.createElement('div');
      div.id = 'block';
      div.className = 'mermaid';
      div.innerHTML = graphObj.code;
      document.getElementsByTagName('body')[0].appendChild(div);

Review comment (bug):
**issue(not sure if blocking or not)**: I don't know about this.

I feel like this might make it harder to debug issues where the font fails to load.

Maybe just doing:

```suggestion
  await loadFontAwesomeCSS();
  await Promise.all(Array.from(document.fonts, (font) => font.load()));
```

That way we get a JavaScript error when it fails to load and Cypress fails?

I don't know. @sidharthv96 and @saurabhg772244, what are your thoughts?

Code after:

function loadFontAwesomeCSS() {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css';

  document.head.appendChild(link);

  return new Promise((resolve, reject) => {
    link.onload = resolve;
    link.onerror = () => reject(new Error('Failed to load FontAwesome'));
  });
}

/**
 * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
 * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
 * page.
 */
const contentLoaded = async function () {
  await loadFontAwesomeCSS();
  await Promise.all(Array.from(document.fonts, (font) => font.load()));

  let pos = document.location.href.indexOf('?graph=');
  if (pos > 0) {
    pos = pos + 7;
    const graphBase64 = document.location.href.substr(pos);
    const graphObj = JSON.parse(b64ToUtf8(graphBase64));
    if (graphObj.mermaid && graphObj.mermaid.theme === 'dark') {
      document.body.style.background = '#3f3f3f';
    }
    console.log(graphObj);
    if (Array.isArray(graphObj.code)) {
      const numCodes = graphObj.code.length;
      for (let i = 0; i < numCodes; i++) {
        const div = document.createElement('div');
        div.id = 'block' + i;
        div.className = 'mermaid';
        div.innerHTML = graphObj.code[i];
        document.getElementsByTagName('body')[0].appendChild(div);
      }
    } else {
      const div = document.createElement('div');
      div.id = 'block';
      div.className = 'mermaid';
      div.innerHTML = graphObj.code;
      document.getElementsByTagName('body')[0].appendChild(div);
    }

    await mermaid.registerExternalDiagrams([externalExample, zenUml]);