fix: Refactor createLabel to use addHtmlSpan for consistency

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

.github/workflows/e2e-timings.yml

@@ -58,7 +58,7 @@ jobs:
           echo "EOF" >> $GITHUB_OUTPUT
 
       - name: Commit and create pull request
-        uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412
+        uses: peter-evans/create-pull-request@0979079bc20c05bbbb590a56c21c4e2b1d1f1bbe
         with:
           add-paths: |
             cypress/timings.json

packages/mermaid/package.json

@@ -78,7 +78,7 @@
     "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.13",
     "dayjs": "^1.11.19",
-    "dompurify": "^3.3.0",
+    "dompurify": "^3.3.1",
     "katex": "^0.16.25",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",

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

pnpm-lock.yaml

@@ -257,8 +257,8 @@ importers:
         specifier: ^1.11.19
         version: 1.11.19
       dompurify:
-        specifier: ^3.3.0
-        version: 3.3.0
+        specifier: ^3.3.1
+        version: 3.3.1
       katex:
         specifier: ^0.16.25
         version: 0.16.25
@@ -5328,8 +5328,8 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
-  dompurify@3.3.0:
-    resolution: {integrity: sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==}
+  dompurify@3.3.1:
+    resolution: {integrity: sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==}
 
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
@@ -14677,7 +14677,7 @@ snapshots:
       class-variance-authority: 0.7.1
       clsx: 2.1.1
       color-string: 2.1.2
-      dompurify: 3.3.0
+      dompurify: 3.3.1
       highlight.js: 10.7.3
       html-to-image: 1.11.13
       immer: 10.1.3
@@ -16281,7 +16281,7 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
-  dompurify@3.3.0:
+  dompurify@3.3.1:
     optionalDependencies:
       '@types/trusted-types': 2.0.7