diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index af83eb555..88a40d228 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -611,6 +611,16 @@ flowchart RL ); }); + it('76: handle unicode encoded character with HTML labels true', () => { + imgSnapshotTest( + `flowchart TB + a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}} + --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}} + `, + {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} + ); + }); + it('2050: handling of different rendering direction in subgraphs', () => { imgSnapshotTest( ` diff --git a/cypress/platform/current.html b/cypress/platform/current.html index 80473c6ff..f89014970 100644 --- a/cypress/platform/current.html +++ b/cypress/platform/current.html @@ -74,7 +74,7 @@ stateDiagram-v2 A --> D: asd123 -
+
%% this does not produce the desired result flowchart TB subgraph container_Beta @@ -88,24 +88,13 @@ flowchart TB
- %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% -flowchart TB - b-->B - a-->c - subgraph O - A - end - subgraph B - c - end - subgraph A - a - b - B - end + flowchart TB + a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}} + --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}} +
-
+
flowchart TB internet nat @@ -130,7 +119,7 @@ flowchart TB routeur --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
-
+
flowchart TD subgraph one[One] @@ -145,7 +134,7 @@ end sub_one --> two
-
+
flowchart TD subgraph one[One] @@ -174,7 +163,7 @@ _one --> b // arrowMarkerAbsolute: true, // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', logLevel: 0, - flowchart: { curve: 'cardinal', "htmlLabels": false }, + flowchart: { curve: 'cardinal', "htmlLabels": true }, // gantt: { axisFormat: '%m/%d/%Y' }, sequence: { actorMargin: 50, showSequenceNumbers: true }, // sequenceDiagram: { actorMargin: 300 } // deprecated diff --git a/src/dagre-wrapper/shapes/util.js b/src/dagre-wrapper/shapes/util.js index 8d9ddc470..4f7494051 100644 --- a/src/dagre-wrapper/shapes/util.js +++ b/src/dagre-wrapper/shapes/util.js @@ -1,7 +1,8 @@ import createLabel from '../createLabel'; import { getConfig } from '../../config'; +import { decodeEntities } from '../../mermaidAPI'; import { select } from 'd3'; -import { evaluate } from '../../diagrams/common/common'; +import { evaluate, sanitizeText } from '../../diagrams/common/common'; export const labelHelper = (parent, node, _classes, isNode) => { let classes; if (!_classes) { @@ -20,7 +21,14 @@ export const labelHelper = (parent, node, _classes, isNode) => { const text = label .node() - .appendChild(createLabel(node.labelText, node.labelStyle, false, isNode)); + .appendChild( + createLabel( + sanitizeText(decodeEntities(node.labelText), getConfig()), + node.labelStyle, + false, + isNode + ) + ); // Get the size of the label let bbox = text.getBBox();