fix: Refactor createLabel to use addHtmlSpan for consistency

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

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

@@ -19,7 +19,7 @@ function applyStyle(dom, styleFn) {
   }
 }
 
-async function addHtmlSpan(
+export async function addHtmlSpan(
   element,
   node,
   width,

packages/mermaid/src/rendering-util/rendering-elements/createLabel.js

@@ -1,56 +1,9 @@
 import { select } from 'd3';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import common, {
-  evaluate,
-  hasKatex,
-  renderKatexSanitized,
-  sanitizeText,
-} from '../../diagrams/common/common.js';
+import { evaluate } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
 import { decodeEntities } from '../../utils.js';
-
-/**
- * @param dom
- * @param styleFn
- */
-function applyStyle(dom, styleFn) {
-  if (styleFn) {
-    dom.attr('style', styleFn);
-  }
-}
-
-/**
- * @param {any} node
- * @returns {Promise<SVGForeignObjectElement>} Node
- */
-async function addHtmlLabel(node) {
-  const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));
-  const div = fo.append('xhtml:div');
-
-  const config = getConfig();
-  let label = node.label;
-  if (node.label && hasKatex(node.label)) {
-    label = await renderKatexSanitized(node.label.replace(common.lineBreakRegex, '\n'), config);
-  }
-  const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
-  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('padding-right', '1px');
-  // Fix for firefox
-  div.style('white-space', 'nowrap');
-  div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
-  return fo.node();
-}
+import { addHtmlSpan } from '../createText.js';
 /**
  * @param _vertexText
  * @param style
@@ -65,7 +18,6 @@ const createLabel = async (_vertexText, style, isTitle, isNode) => {
   }
 
   if (evaluate(getConfig().flowchart.htmlLabels)) {
-    // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
     vertexText = vertexText.replace(/\\n|\n/g, '<br />');
     log.info('vertexText' + vertexText);
     const node = {
@@ -76,8 +28,10 @@ const createLabel = async (_vertexText, style, isTitle, isNode) => {
       ),
       labelStyle: style ? style.replace('fill:', 'color:') : style,
     };
-    let vertexNode = await addHtmlLabel(node);
-    // vertexNode.parentNode.removeChild(vertexNode);
+    const config = getConfig();
+    const width = config.flowchart?.wrappingWidth || 200;
+    const tempContainer = select(document.createElementNS('http://www.w3.org/2000/svg', 'g'));
+    const vertexNode = await addHtmlSpan(tempContainer, node, width, '', false, config);
     return vertexNode;
   } else {
     const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');