From c37d3a68a92cf618534974e5749f632e89643caa Mon Sep 17 00:00:00 2001 From: futzmonitor Date: Tue, 26 Mar 2024 14:26:09 -0400 Subject: [PATCH 1/3] Changes made to svgDraw.js 1. Added function replaceEscapedColon() to replace all instances of 'ESC_COLON' with colons. 2. Added a call to this function within the drawText() function to replace any text that contains to a colon. 3. AUTHOR'S NOTE: These changes only apply for sections, periods, and event elements. This functionality does not work for timeline titles. Changes to timeline.md 1. Updated documentation to guide users on how to include colon characters in their text. --- docs/syntax/timeline.md | 2 +- packages/mermaid/src/diagrams/timeline/svgDraw.js | 14 ++++++++++++-- packages/mermaid/src/docs/syntax/timeline.md | 2 +- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index 3d476c41d2..d46ecace1d 100644 --- a/docs/syntax/timeline.md +++ b/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. diff --git a/packages/mermaid/src/diagrams/timeline/svgDraw.js b/packages/mermaid/src/diagrams/timeline/svgDraw.js index 874ac62ef0..ca110bcfd2 100644 --- a/packages/mermaid/src/diagrams/timeline/svgDraw.js +++ b/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(//gi, ' '); + const nText = replaceEscapedColon(textData.text.replace(//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, diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index 165fd62607..acb5e9fb52 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/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. From f4de0506da3235a3032f9a30d93aca11a825bdaa Mon Sep 17 00:00:00 2001 From: futzmonitor Date: Sat, 30 Mar 2024 14:51:22 -0400 Subject: [PATCH 2/3] Changes to rendering/timeline.spec.ts 1. Added test coverage to rendering changes where 'ESC_COLON' should be changed to a colon character and this change should not break rendering behavior. --- cypress/integration/rendering/timeline.spec.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts index c748b54d3c..236e310514 100644 --- a/cypress/integration/rendering/timeline.spec.ts +++ b/cypress/integration/rendering/timeline.spec.ts @@ -161,4 +161,20 @@ describe('Timeline diagram', () => { {} ); }); + + it('11: should render with semicolons 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.
The people who live here are hunter-gatherers. + section ESC_COLONBroESC_COLONze AgeESC_COLON + 2300 BC : People arrive from Europe and settle in Britain.
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.
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. + `, + {} + ); + }); }); From e529cbd719f0820e774c016db04d62ceb3d6d391 Mon Sep 17 00:00:00 2001 From: futzmonitor Date: Tue, 2 Apr 2024 19:54:16 -0400 Subject: [PATCH 3/3] Changes to rendering/timeline.spec.ts 1. Changes the test title because it was previously inaccurate --- cypress/integration/rendering/timeline.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts index 236e310514..832feaa682 100644 --- a/cypress/integration/rendering/timeline.spec.ts +++ b/cypress/integration/rendering/timeline.spec.ts @@ -162,7 +162,7 @@ describe('Timeline diagram', () => { ); }); - it('11: should render with semicolons in the sections, period, and events', () => { + it('11: should render with colons in the sections, period, and events', () => { imgSnapshotTest( `timeline title England's History Timeline