Text is not rendered in nodes of flowchart with several commas

[InAnYan]

Description

When I wrote a node with text in double quotes with several commas, the text is not rendered inside a node.

Steps to reproduce

1. Run code sample

Screenshots

Code Sample

flowchart TB
    githost["Github, Gitlab, BitBucket, etc."]

Setup

• Mermaid version: 11.0.2
• Browser and Version: Firefox

Suggested Solutions

No response

Additional Context

No response

[InAnYan]

It seems this also breaks if I replace commas with semicolons

[InAnYan]

Updating:

When you use special characters like comma, dot (dot is new), semicolon, and you type them more than once, the rendering breaks.

A single special character is fine

[jgreywolf]

I believe that this may be a firefox only issue

[dolt]

It's appears to be a Firefox issue and it isn't the number of commas, it fails to render the text if it's long enough to wrap.

flowchart TB
    example["This text is too long by one."]

When it doesn't render:

<foreignObject height="0" width="0">

When it does render:

<foreignObject height="24" width="197.43333435058594">

Using the config to not use foreignObject renders the text correctly: #2688 (comment)

[dolt]

As a mitigation you can conditionally disable htmlLabels for Firefox user-agents.

    flowchart: {
        htmlLabels: !navigator.userAgent.includes('Firefox'), // text long enough to wrap is not rendering in Firefox
    },

[dolt]

This issue looks to be a duplicate of #5785