Allow Colon Characters in Period, Sections, and Event Text

cypress/integration/rendering/timeline.spec.ts

@@ -161,4 +161,20 @@ describe('Timeline diagram', () => {
       {}
     );
   });
+
+  it('11: should render with colons in the sections, period, and events', () => {
+    imgSnapshotTest(
+      `timeline
+      title England's History Timeline
+      section ESC_COLONStESC_COLONone AgeESC_COLON
+      ESC_COLON760ESC_COLON0 BCESC_COLON : BritESC_COLONain's oldest known hoESC_COLONuse was built in Orkney, ScotlandESC_COLON
+        6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
+      section ESC_COLONBroESC_COLONze AgeESC_COLON
+        2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking. : ESC_COLONNew styles of potterESC_COLONy and ways of burying the dead appear.ESC_COLON
+        2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
+                : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
+    `,
+      {}
+    );
+  });
 });

docs/syntax/timeline.md

@@ -58,7 +58,7 @@ or
               : {event}
 ```
 
-**NOTE**: Both time period and event are simple text, and not limited to numbers.
+**NOTE**: Both time period and event are simple text, and not limited to numbers. You also cannot use `:` characters on their own in the title, time period, section, or event elements because they are used as tokens by the parser. If you want to have a token in your text use `ESC_COLON`. This will be transformed into a `:` when rendered (this will not work for titles).
 
 Let us look at the syntax for the example above.
 

packages/mermaid/src/diagrams/timeline/svgDraw.js

@@ -130,7 +130,7 @@ export const drawCircle = function (element, circleData) {
 
 export const drawText = function (elem, textData) {
   // Remove and ignore br:s
-  const nText = textData.text.replace(/<br\s*\/?>/gi, ' ');
+  const nText = replaceEscapedColon(textData.text.replace(/<br\s*\/?>/gi, ' '));
 
   const textElem = elem.append('text');
   textElem.attr('x', textData.x);
@@ -526,12 +526,13 @@ export const drawNode = function (elem, node, fullSection, conf) {
 
   const txt = textElem
     .append('text')
-    .text(node.descr)
+    .text(replaceEscapedColon(node.descr))
     .attr('dy', '1em')
     .attr('alignment-baseline', 'middle')
     .attr('dominant-baseline', 'middle')
     .attr('text-anchor', 'middle')
     .call(wrap, node.width);
+
   const bbox = txt.node().getBBox();
   const fontSize =
     conf.fontSize && conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
@@ -586,6 +587,15 @@ const defaultBkg = function (elem, node, section) {
     .attr('y2', node.height);
 };
 
+/**
+ * Replaces "\ESCAPE_COLON" with a regular colon in the provided text.
+ * @param {string} text - The text to be modified.
+ * @returns {string} - The text with "\ESCAPE_COLON" replaced with ":".
+ */
+function replaceEscapedColon(text) {
+  return text.replace(/ESC_COLON/g, ':');
+}
+
 export default {
   drawRect,
   drawCircle,

packages/mermaid/src/docs/syntax/timeline.md

@@ -42,7 +42,7 @@ or
               : {event}
 ```
 
-**NOTE**: Both time period and event are simple text, and not limited to numbers.
+**NOTE**: Both time period and event are simple text, and not limited to numbers. You also cannot use `:` characters on their own in the title, time period, section, or event elements because they are used as tokens by the parser. If you want to have a token in your text use `ESC_COLON`. This will be transformed into a `:` when rendered (this will not work for titles).
 
 Let us look at the syntax for the example above.