From c40368b0fa9b21a019bfd8ad0f0f0e40fbb4a0ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lorens=20Le=C3=B3n?= <Lorens Leon>
Date: Tue, 12 Jul 2022 17:55:43 +0200
Subject: [PATCH] fix: remove right padding when a label contains HTML entities

Decode the HTML entities from the label text before adding them to the
HTML this prevents a miss-calculation of the label text length
---
 .../integration/rendering/stateDiagram-v2.spec.js    | 12 ++++++++++++
 src/dagre-wrapper/createLabel.js                     |  3 ++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index b5ab86440..946b5d31e 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -509,4 +509,16 @@ stateDiagram-v2
       expect(svg).to.not.have.attr('style');
     });
   });
+
+  it('v2 should render a state diagram and set the correct length of the labels', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram-v2
+      [*] --> 1
+      1 --> 2: test({ foo#colon; 'far' })
+      2 --> [*]
+    `,
+      { logLevel: 0, fontFamily: 'courier' }
+    );
+  });
 });
diff --git a/src/dagre-wrapper/createLabel.js b/src/dagre-wrapper/createLabel.js
index ed7b9f6fb..3e3ffdfc9 100644
--- a/src/dagre-wrapper/createLabel.js
+++ b/src/dagre-wrapper/createLabel.js
@@ -2,6 +2,7 @@ import { select } from 'd3';
 import { log } from '../logger'; // eslint-disable-line
 import { getConfig } from '../config';
 import { sanitizeText, evaluate } from '../diagrams/common/common';
+import { decodeEntities } from '../mermaidAPI';
 
 const sanitizeTxt = (txt) => sanitizeText(txt, getConfig());
 
@@ -52,7 +53,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
     log.info('vertexText' + vertexText);
     const node = {
       isNode,
-      label: vertexText.replace(
+      label: decodeEntities(vertexText).replace(
         /fa[lrsb]?:fa-[\w-]+/g,
         (s) => `<i class='${s.replace(':', ' ')}'></i>`
       ),