Allow Colon Characters in Period, Sections, and Event Text

[FutzMonitor]

📑 Summary

This PR seeks to allow users to include colon characters in their period, section, and event element text.

Resolves #4175

📏 Design Decisions

1. I added a new function replaceEscapedColon() which transforms ESC_COLON into a colon character.
2. I made changes to the documentation to guide users on how to include colon characters in their period, section, and event element text while also letting users know that this cannot be done for titles.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🔖 targeted develop branch

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	1c32828
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/66750666a13aad00089140af
😎 Deploy Preview	https://deploy-preview-5418--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.

[FutzMonitor]

I have not added the necessary tests for this change to the timeline diagram. I was hoping to get some pointers on how to create tests for this new functionality because the timeline diagram has no rendering tests like some other diagrams. The timeline.spec.js file currently only tests the parser but this functionality is implemented during rendering.

[codecov]

Codecov Report

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

Project coverage is 5.74%. Comparing base (9f37513) to head (e529cbd).

❗ Current head e529cbd differs from pull request most recent head 1c32828

Please upload reports for the commit 1c32828 to get more accurate results.

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #5418      +/-   ##
==========================================
+ Coverage     5.73%   5.74%   +0.01%     
==========================================
  Files          279     277       -2     
  Lines        42030   41908     -122     
  Branches       491     489       -2     
==========================================
- Hits          2409    2407       -2     
+ Misses       39621   39501     -120     

Flag	Coverage Δ
unit	5.74% <0.00%> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
packages/mermaid/src/diagrams/timeline/svgDraw.js	0.00% <0.00%> (ø)

... and 28 files with indirect coverage changes

[sidharthv96]

@FutzMonitor I see some rendering tests in cypress/integration/rendering/timeline.spec.ts.

[FutzMonitor]

@FutzMonitor I see some rendering tests in cypress/integration/rendering/timeline.spec.ts.

Thank you, I'll take a look at it and add a test for my changes.

[argos-ci]

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

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	616 added	Jun 21, 2024, 5:01 AM

[sidharthv96]

This can be fixed when we move the diagram to the new parser, to support : itself somehow, instead of adding custom escape syntax.