diff --git a/packages/mermaid/src/dagre-wrapper/createLabel.js b/packages/mermaid/src/dagre-wrapper/createLabel.js
index 22496a250..831eb8810 100644
--- a/packages/mermaid/src/dagre-wrapper/createLabel.js
+++ b/packages/mermaid/src/dagre-wrapper/createLabel.js
@@ -1,7 +1,7 @@
import { select } from 'd3';
-import { log } from '../logger.js';
import { getConfig } from '../diagram-api/diagramAPI.js';
-import { evaluate } from '../diagrams/common/common.js';
+import { evaluate, sanitizeText } from '../diagrams/common/common.js';
+import { log } from '../logger.js';
import { decodeEntities } from '../utils.js';
/**
@@ -18,20 +18,23 @@ function applyStyle(dom, styleFn) {
* @param {any} node
* @returns {SVGForeignObjectElement} Node
*/
-function addHtmlLabel(node) {
+function addHtmlLabel(node, config) {
const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));
const div = fo.append('xhtml:div');
const label = node.label;
const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
div.html(
- '' +
- label +
- ''
+ sanitizeText(
+ '' +
+ label +
+ '',
+ config,
+ ),
);
applyStyle(div, node.labelStyle);
@@ -53,7 +56,8 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
if (typeof vertexText === 'object') {
vertexText = vertexText[0];
}
- if (evaluate(getConfig().flowchart.htmlLabels)) {
+ const config = getConfig();
+ if (evaluate(config.flowchart.htmlLabels)) {
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
vertexText = vertexText.replace(/\\n|\n/g, '
');
log.debug('vertexText' + vertexText);
@@ -61,11 +65,11 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
isNode,
label: decodeEntities(vertexText).replace(
/fa[blrs]?:fa-[\w-]+/g, // cspell: disable-line
- (s) => ``
+ (s) => ``,
),
labelStyle: style.replace('fill:', 'color:'),
};
- let vertexNode = addHtmlLabel(node);
+ let vertexNode = addHtmlLabel(node, config);
// vertexNode.parentNode.removeChild(vertexNode);
return vertexNode;
} else {