Mermaid diagrams broken due to DOMPurify release v3.1.7 (empty <foreignObject)

[slorber]

Description

Upgrade transitive dependency DOMPurify from 3.1.6 to 3.1.7

See flowchart diagram labels being empty, because <foreignObject> tags are empty

Steps to reproduce

Upgrade transitive dependency DOMPurify from 3.1.6 to 3.1.7

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
``` 

Screenshots

Code Sample

No response

Setup

• Mermaid version: 10.x, 11.x
• Browser and Version: all

Suggested Solutions

Convince DOMPurify to revert breaking change.

DOMPurify report here: cure53/DOMPurify#1002

Workaround, force resolution to v3.1.6

 "resolutions": {
    "dompurify": "3.1.6"
  },

Additional Context

I'm the maintainer of Docusaurus and this issue affects all our newly initialized sites. The problematic version was published 1 day ago and we already got 2 bug reports that Mermaid diagrams do not work well.

• Mermaid diagrams do not render text nodes (empty foreignObject) facebook/docusaurus#10526
• Some Mermaid diagrams are not rendering text facebook/docusaurus#10524

I'm opening this issue mostly to let you know of the problem.

I don't really know how Mermaid uses that lib exactly, nor if it's possible for you to patch usage on your side to make Mermaid code compatible with v3.1.7+. You could also decide to pin the dependency.

Personally I consider it a breaking change and they should rather revert it, but it's their responsibility to decide.

[nijinekoyo]

Is this issue being fixed? Pinning dependency versions is not a good idea :)

[slorber]

The maintainer of DOMPurify doesn't plan to revert the behavior so in the meantime the best option is to pin the dependency in Mermaid.

In the next version (v3.1.8) they plan to add an option that allows Mermaid to restore the previous behavior.

See discussions here: cure53/DOMPurify#1002 (comment)

So to me the plan for Mermaid should be:

• pin to 3.1.6 until 3.1.8 gets released with the new option
• then upgrade to ^3.1.8 and use the new option

[aloisklink]

The maintainer of DOMPurify doesn't plan to revert the behavior so in the meantime the best option is to pin the dependency in Mermaid.

🚀 Thanks for the help @slorber! I've made #5914 that will pin DOMPurify to:

mermaid/packages/mermaid/package.json

Line 80 in de2c05c

"dompurify": "^3.0.11 <3.1.7",

I'm guessing DOMPurify 3.1.8 will require some config/code changes, so we'd have to make a new Mermaid release that supports ^3.1.8 once it's out!

[slorber]

Thanks!

Not sure what's your plan but it may be useful for the community to backport these changes to v10.x patch as well. Although technically v11 was quite easy to adopt for us we only allow 11.x on upcoming Docusaurus v3.6+ and not v2.0-3.5.

[aloisklink]

Thanks for bringing that up @slorber!

We've made v10.9.2 that has this change!

[slorber]

Thanks 👍 Docusaurus users will thank you without knowing any of this ever happened 😄