fix: prevent escaping label styles

[Yash-Singh1]

:bookmark_tabs: Summary

Currently we use string concatenation to create the spans for labels inside diagrams, however this can be escaped in securityLevel: loose using a diagram syntax like the following:

flowchart
A --> B
style A color:red\"test \"

This isn't a problem as of now because the equal sign (=) isn't allowed inside style statements on any of our diagram grammars, but it can cause problems further down the road.

:straight_ruler: Design Decisions

Replaced string concatenation with instead using D3 syntax to insert a span and modify its attributes.

:clipboard: Tasks

Make sure you

• [x] :book: have read the contribution guidelines
• [x] :computer: have added necessary unit/e2e tests.
• [x] :notebook: have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• [x] :bookmark: targeted develop branch

[netlify[bot]]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	ab726f008c493a92d8b9e2d466025d7dfb77531a
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/667b2e25c1d11a00087ef3bf
😎 Deploy Preview	https://deploy-preview-5598--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 0% with 8 lines in your changes missing coverage. Please review.

Project coverage is 5.73%. Comparing base (ce3b0af) to head (ab726f0).

Additional details and impacted files

[](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5598?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) ```diff @@ Coverage Diff @@ ## develop #5598 +/- ## ========================================== - Coverage 5.73% 5.73% -0.01% ========================================== Files 278 279 +1 Lines 42019 42022 +3 Branches 516 491 -25 ========================================== Hits 2409 2409 - Misses 39610 39613 +3 ``` | [Flag](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5598/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [unit](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5598/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | `5.73% <0.00%> (-0.01%)` | :arrow_down: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#carryforward-flags-in-the-pull-request-comment) to find out more. | [Files](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5598?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [packages/mermaid/src/dagre-wrapper/createLabel.js](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5598?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdagre-wrapper%2FcreateLabel.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZGFncmUtd3JhcHBlci9jcmVhdGVMYWJlbC5qcw==) | `0.00% <0.00%> (ø)` | | | [packages/mermaid/src/rendering-util/createText.ts](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5598?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Frendering-util%2FcreateText.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvcmVuZGVyaW5nLXV0aWwvY3JlYXRlVGV4dC50cw==) | `0.00% <0.00%> (ø)` | | ... and [1 file with indirect coverage changes](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5598/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js)

[argos-ci[bot]]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Jun 25, 2024, 9:07 PM

[sidharthv96]

Nice catch @Yash-Singh1! Always better to be safe, and this one is the right approach.