Revert "fix: failing visual tests"

This reverts commit 7e7354c40d.

packages/mermaid/src/rendering-util/createText.ts

@@ -26,8 +26,7 @@ async function addHtmlSpan(
   classes,
   addBackground = false,
   // TODO: Make config mandatory
-  config: MermaidConfig = getConfig(),
+  config: MermaidConfig = getConfig()
-  useLegacyStyle = false
 ) {
   const fo = element.append('foreignObject');
   // This is not the final width but used in order to make sure the foreign
@@ -36,31 +35,10 @@ async function addHtmlSpan(
   fo.attr('height', `${10 * width}px`);
 
   const div = fo.append('xhtml:div');
-  const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
-
-  if (useLegacyStyle) {
-    let label = node.label;
-    if (node.label && hasKatex(node.label)) {
-      label = await renderKatexSanitized(node.label.replace(common.lineBreakRegex, '\n'), config);
-    }
-    const labelSpan =
-      '<span class="' +
-      labelClass +
-      '" ' +
-      (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') + // codeql [js/html-constructed-from-input] : false positive
-      '>' +
-      label +
-      '</span>';
-    div.html(sanitizeText(labelSpan, config));
-    applyStyle(div, node.labelStyle);
-    div.style('display', 'inline-block');
-    div.style('white-space', 'nowrap');
-    div.style('padding-right', '1px');
-  } else {
-    // Use new createText styling for markdown labels
   const sanitizedLabel = hasKatex(node.label)
     ? await renderKatexSanitized(node.label.replace(common.lineBreakRegex, '\n'), config)
     : sanitizeText(node.label, config);
+  const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
   const span = div.append('span');
   span.html(sanitizedLabel);
   applyStyle(span, node.labelStyle);
@@ -72,14 +50,13 @@ async function addHtmlSpan(
   div.style('line-height', '1.5');
   div.style('max-width', width + 'px');
   div.style('text-align', 'center');
-  }
   div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
   if (addBackground) {
     div.attr('class', 'labelBkg');
   }
 
   let bbox = div.node().getBoundingClientRect();
-  if (!useLegacyStyle && bbox.width === width) {
+  if (bbox.width === width) {
     div.style('display', 'table');
     div.style('white-space', 'break-spaces');
     div.style('width', width + 'px');
@@ -250,7 +227,6 @@ export const createText = async (
     isNode = true,
     width = 200,
     addSvgBackground = false,
-    useLegacyStyle = false,
   } = {},
   config?: MermaidConfig
 ) => {
@@ -263,42 +239,23 @@ export const createText = async (
     useHtmlLabels,
     isNode,
     'addSvgBackground: ',
-    addSvgBackground,
+    addSvgBackground
-    'useLegacyStyle: ',
-    useLegacyStyle
   );
   if (useHtmlLabels) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
 
-    let processedLabel;
-    if (useLegacyStyle) {
-      const textWithBreaks = text.replace(/\\n|\n/g, '<br />');
-      processedLabel = decodeEntities(textWithBreaks).replace(
-        /fa[blrs]?:fa-[\w-]+/g,
-        (s) => `<i class='${s.replace(':', ' ')}'></i>`
-      );
-    } else {
     const htmlText = markdownToHTML(text, config);
-      processedLabel = await replaceIconSubstring(decodeEntities(htmlText), config);
+    const decodedReplacedText = await replaceIconSubstring(decodeEntities(htmlText), config);
-    }
 
     //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 : processedLabel,
+      label: hasKatex(text) ? inputForKatex : decodedReplacedText,
       labelStyle: style.replace('fill:', 'color:'),
     };
-    const vertexNode = await addHtmlSpan(
+    const vertexNode = await addHtmlSpan(el, node, width, classes, addSvgBackground, config);
-      el,
-      node,
-      width,
-      classes,
-      addSvgBackground,
-      config,
-      useLegacyStyle
-    );
     return vertexNode;
   } else {
     //sometimes the user might add br tags with 1 or more spaces in between, so we need to replace them with <br/>

packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts

@@ -1,3 +1,4 @@
+import createLabel from '../createLabel.js';
 import { createText } from '../../createText.js';
 import type { Node } from '../../types.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
@@ -40,17 +41,26 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
     label = typeof node.label === 'string' ? node.label : node.label[0];
   }
 
-  const useLegacyStyle = node.labelType !== 'markdown';
+  let text;
-
+  if (node.labelType === 'markdown') {
-  const text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
+    text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
       useHtmlLabels,
       width: node.width || getConfig().flowchart?.wrappingWidth,
       // @ts-expect-error -- This is currently not used. Should this be `classes` instead?
       cssClasses: 'markdown-node-label',
       style: node.labelStyle,
       addSvgBackground: !!node.icon || !!node.img,
-    useLegacyStyle,
     });
+  } else {
+    const labelElement = await createLabel(
+      sanitizeText(decodeEntities(label), getConfig()),
+      node.labelStyle,
+      false,
+      true
+    );
+    text = labelEl.node()?.appendChild(labelElement);
+  }
+
   // Get the size of the label
   let bbox = text.getBBox();
   const halfPadding = (node?.padding ?? 0) / 2;