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

Code before:
    window.rendered = true;
  }
}

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

Review comment (bug):
**issue(blocking)**:

This change now causes the following E2E tests to fail https://github.com/mermaid-js/mermaid/blob/1d9c2aab8db7b18f48815e90f2c0806f621542f7/cypress/integration/rendering/flowchart-v2.spec.js#L82-L124

We could remove the `fa:fa-car` icon? Or update the widths to the new value.

Code after:
    window.rendered = true;
  }
}

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