Merge pull request #2427 from mermaid-js/2425_Unicode_handling_for_html_labels

#2425 Unicode handling for HTML labels

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(
       `

cypress/platform/current.html

@@ -74,7 +74,7 @@ stateDiagram-v2
   A --> D: asd123
       </div>
       </div>
-      <div class="mermaid" style="width: 50%; height: 40%;">
+      <div class="mermaid2" style="width: 50%; height: 40%;">
 %% this does not produce the desired result
 flowchart TB
   subgraph container_Beta
@@ -88,24 +88,13 @@ flowchart TB
 
       </div>
       <div class="mermaid" style="width: 50%; height: 40%;">
-        %%{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;."}}
+
 
       </div>
-      <div class="mermaid" style="width: 50%; height: 50%;">
+      <div class="mermaid2" style="width: 50%; height: 50%;">
 flowchart TB
   internet
   nat
@@ -130,7 +119,7 @@ flowchart TB
   routeur --> subnet1 & subnet2
   subnet1 & subnet2 --> nat --> internet
       </div>
-      <div class="mermaid" style="width: 50%; height: 50%;">
+      <div class="mermaid2" style="width: 50%; height: 50%;">
 flowchart TD
 
 subgraph one[One]
@@ -145,7 +134,7 @@ end
 
 sub_one --> two
       </div>
-      <div class="mermaid" style="width: 50%; height: 50%;">
+      <div class="mermaid2" style="width: 50%; height: 50%;">
 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

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