fix/label-escaping-htmlLabels-false - #7039
SAMARTHAGARWAL77 wants to merge 3 commits into
Conversation
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
🦋 Changeset detectedLatest commit: 93c55d5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
@mermaid-js/examples
mermaid
@mermaid-js/layout-elk
@mermaid-js/layout-tidy-tree
@mermaid-js/mermaid-zenuml
@mermaid-js/parser
@mermaid-js/tiny
commit: |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #7039 +/- ##
=======================================
Coverage 3.55% 3.56%
=======================================
Files 473 473
Lines 47454 47462 +8
Branches 730 734 +4
=======================================
+ Hits 1687 1690 +3
- Misses 45767 45772 +5
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
|
Hi @darshanr0107 @dijitali , can you both review this. Thanks for your time. |
|
Hi @shubhamparikh2704 @darshanr0107, Can you review this once. Thanks for your time. |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
When creating labels using `htmlLabels: false`, e.g.
```mermaid
---
config:
htmlLabels: false
---
flowchart TD
A[2 < 4 && 12 > 14]
```
The SVG node label gets rendered as
`2 < 4 && 12 > 14`. This is fine for HTML text, where we
use `.innerHTML` to set the value. But for non-HTML Labels, we use
`.textContent`, so we need to pass the unescaped values.
Ideally we would stop calling DOMPurify on this label when
`.textContent` is used, since the content doesn't need to be sanitized,
but adding a quick `<`/`>`/`&`-> `<`/`>`/`&` also works.
I've adapted this commit from mermaid-js#6406
and from mermaid-js#7039
Closes: mermaid-js#6406
Co-authored-by: khalil <5alil.landolsi@gmail.com>
Co-authored-by: Samarth <115448290+SAMARTHAGARWAL77@users.noreply.github.com>
📑 Summary
Fixes escaping of special characters (
<,>,&,\) in node labels whenflowchart.htmlLabelsis set tofalse.Previously, these characters were either stripped or not rendered correctly, breaking the expected output when
htmlLabels: false.Resolves #7016
📏 Design Decisions
Updated
sanitizeText()incommon.tsto handle label escaping manually whenhtmlLabels: false.When
htmlLabels: true, existing DOMPurify logic remains unchanged.Escaping covers:
&→&<→<>→>\→\\Added test cases to verify that escaping works correctly and nothing breaks in
htmlLabels: truemode.No breaking changes; default behavior is preserved for users who rely on HTML labels.
📋 Tasks
Make sure you
MERMAID_RELEASE_VERSIONis used for all new features.pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.