#2496 Unbreaking state diagrams

src/dagre-wrapper/createLabel.js

@@ -1,7 +1,7 @@
 import { select } from 'd3';
 import { log } from '../logger'; // eslint-disable-line
 import { getConfig } from '../config';
-import { evaluate, sanitizeText } from '../diagrams/common/common';
+import { evaluate } from '../diagrams/common/common';
 // let vertexNode;
 // if (evaluate(getConfig().flowchart.htmlLabels)) {
 //   // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?

src/diagrams/common/common.js

@@ -80,6 +80,13 @@ export const sanitizeText = (text, config) => {
   return txt;
 };
 
+export const sanitizeTextOrArray = (a, config) => {
+  if (typeof a === 'string') return sanitizeText(a, config);
+
+  const f = (x) => sanitizeText(x, config);
+  return a.flat().map(f);
+};
+
 export const lineBreakRegex = /<br\s*\/?>/gi;
 
 /**
@@ -149,6 +156,7 @@ export const evaluate = (val) => (val === 'false' || val === false ? false : tru
 export default {
   getRows,
   sanitizeText,
+  sanitizeTextOrArray,
   hasBreaks,
   splitBreaks,
   lineBreakRegex,

src/diagrams/state/stateRenderer-v2.js

@@ -61,25 +61,26 @@ const setupNode = (g, parent, node, altFlag) => {
       if (Array.isArray(nodeDb[node.id].description)) {
         // There already is an array of strings,add to it
         nodeDb[node.id].shape = 'rectWithTitle';
-        nodeDb[node.id].description.push(common.sanitizeText(node.description, getConfig()));
+        nodeDb[node.id].description.push(node.description);
       } else {
         if (nodeDb[node.id].description.length > 0) {
           // if there is a description already transformit to an array
           nodeDb[node.id].shape = 'rectWithTitle';
           if (nodeDb[node.id].description === node.id) {
             // If the previous description was the is, remove it
-            nodeDb[node.id].description = [common.sanitizeText(node.description, getConfig())];
+            nodeDb[node.id].description = [node.description];
           } else {
-            nodeDb[node.id].description = [
-              common.sanitizeText(nodeDb[node.id].description, getConfig()),
-              common.sanitizeText(node.description, getConfig()),
-            ];
+            nodeDb[node.id].description = [nodeDb[node.id].description, node.description];
           }
         } else {
           nodeDb[node.id].shape = 'rect';
-          nodeDb[node.id].description = common.sanitizeText(node.description, getConfig());
+          nodeDb[node.id].description = node.description;
         }
       }
+      nodeDb[node.id].description = common.sanitizeTextOrArray(
+        nodeDb[node.id].description,
+        getConfig()
+      );
     }
 
     // Save data for description and group so that for instance a statement without description overwrites
@@ -100,7 +101,7 @@ const setupNode = (g, parent, node, altFlag) => {
     const nodeData = {
       labelStyle: '',
       shape: nodeDb[node.id].shape,
-      labelText: common.sanitizeText(nodeDb[node.id].description, getConfig()),
+      labelText: nodeDb[node.id].description,
       // typeof nodeDb[node.id].description === 'object'
       //   ? nodeDb[node.id].description[0]
       //   : nodeDb[node.id].description,
@@ -118,7 +119,7 @@ const setupNode = (g, parent, node, altFlag) => {
       const noteData = {
         labelStyle: '',
         shape: 'note',
-        labelText: common.sanitizeText(node.note.text, getConfig()),
+        labelText: node.note.text,
         classes: 'statediagram-note', //classStr,
         style: '', //styles.style,
         id: node.id + '----note-' + cnt,
@@ -129,7 +130,7 @@ const setupNode = (g, parent, node, altFlag) => {
       const groupData = {
         labelStyle: '',
         shape: 'noteGroup',
-        labelText: common.sanitizeText(node.note.text, getConfig()),
+        labelText: node.note.text,
         classes: nodeDb[node.id].classes, //classStr,
         style: '', //styles.style,
         id: node.id + '----parent',