Repository: mermaid-js/mermaid
File: packages/mermaid/src/rendering-util/createText.ts (TypeScript)

Code before:
    return text;
  }

  let newText = text;

  for (const match of matches) {
    const [fullMatch, prefix, iconName] = match;
    const className = classNameMap[prefix];
    const registeredIconName = `${prefix}:${iconName}`;

    try {
      const isFreeIcon = await isIconAvailable(registeredIconName);
      if (!isFreeIcon) {
        log.warn(`Icon ${registeredIconName} is a pro icon.`);
        newText = newText.replace(fullMatch, `<i class='${className} fa-${iconName}'></i>`);
        continue;
      }
      const faIcon = await getIconSVG(registeredIconName, undefined, { class: 'label-icon' });
      if (faIcon) {
        newText = newText.replace(fullMatch, faIcon);
      }
    } catch (error) {
      log.error(`Error processing ${registeredIconName}:`, error);
    }
  }
  return newText;
}

// Note when using from flowcharts converting the API isNode means classes should be set accordingly. When using htmlLabels => to sett classes to'nodeLabel' when isNode=true otherwise 'edgeLabel'
// When not using htmlLabels => to set classes to 'title-row' when isTitle=true otherwise 'title-row'
export const createText = async (
  el,
  text = '',
  {
    style = '',
    isTitle = false,
    classes = '',
    useHtmlLabels = true,
    isNode = true,
    width = 200,
    addSvgBackground = false,
  } = {},
  config?: MermaidConfig
) => {
  log.debug(
    'XYZ createText',
    text,
    style,
    isTitle,
    classes,
    useHtmlLabels,

Review comment (suggestion):
**issue(blocking)**: I'm not sure why we still need the free/pro difference, or the different class names. Can we change this function to output the exact same thing if users haven't set an icon pack?

**suggestion**: Maybe something like the following (we should probably also update the function TSDoc comment too):

```suggestion
  // The letters 'bklrs' stand for possible endings of the fontawesome prefix (e.g. 'fab' for brands, 'fak' for fa-kit) // cspell: disable-line
  return text.replace(
    /(fa[bklrs]?):fa-([\w-]+)/g, // cspell: disable-line
    (fullMatch, prefix, iconName) => {
      const registeredIconName = `${prefix}:${iconName}`;
      if (await isIconAvailable(registeredIconName)) {
        return await getIconSVG(registeredIconName, undefined, { class: 'label-icon' });
      } else {
        // fall back to FontAwesome CSS
        return `<i class='${s.replace(':', ' ')}'></i>`;
      }
    },
  );
```

Code after:
    );
    return fullMatch;
  });

  const replacements = await Promise.all(pendingReplacements);
  // cspell: disable-next-line
  return text.replace(/(fa[bklrs]?):fa-([\w-]+)/g, () => replacements.shift() ?? '');
}

// Note when using from flowcharts converting the API isNode means classes should be set accordingly. When using htmlLabels => to set classes to 'nodeLabel' when isNode=true otherwise 'edgeLabel'
// When not using htmlLabels => to set classes to 'title-row' when isTitle=true otherwise 'title-row'
export const createText = async (
  el,
  text = '',
  {
    style = '',
    isTitle = false,
    classes = '',
    useHtmlLabels = true,
    isNode = true,
    width = 200,
    addSvgBackground = false,
  } = {},
  config?: MermaidConfig
) => {
  log.debug(
    'XYZ createText',
    text,
    style,
    isTitle,
    classes,
    useHtmlLabels,
    isNode,
    'addSvgBackground: ',
    addSvgBackground
  );
  if (useHtmlLabels) {
    // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?

    const htmlText = markdownToHTML(text, config);
    const decodedReplacedText = await replaceIconSubstring(decodeEntities(htmlText));

    //for Katex the text could contain escaped characters, \\relax that should be transformed to \relax
    const inputForKatex = text.replace(/\\\\/g, '\\');

    const node = {
      isNode,
      label: hasKatex(text) ? inputForKatex : decodedReplacedText,
      labelStyle: style.replace('fill:', 'color:'),
    };
    const vertexNode = await addHtmlSpan(el, node, width, classes, addSvgBackground);