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 {