feat: Add markup support to timeline diagrams

Author: jonnymuir

packages/mermaid/src/config.type.ts

@@ -983,6 +983,11 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig {
   sectionFills?: string[];
   sectionColours?: string[];
   disableMulticolor?: boolean;
+  /**
+   * Flag for setting whether or not a html tag should be used for rendering labels.
+   *
+   */
+  htmlLabels?: boolean;
 }
 /**
  * The object containing configurations specific for gantt diagrams

packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js

@@ -2,6 +2,7 @@ import flowDb from './flowDb.js';
 import { parser } from './parser/flow.jison';
 import flowRenderer from './flowRenderer.js';
 import { addDiagrams } from '../../diagram-api/diagram-orchestration.js';
+import { curveBasis } from 'd3';
 
 const diag = {
   db: flowDb,
@@ -90,7 +91,7 @@ describe('when using mermaid and ', function () {
           expect(start).toContain('flowchart-A-');
           expect(end).toContain('flowchart-B-');
           expect(options.arrowhead).toBe('none');
-          expect(options.curve).toBe('basis'); // mocked as string
+          expect(options.curve().prototype).toBe(curveBasis().prototype); // D3 Basis function overrides its prototype and wipes the type so we referentially compare prototypes instead
         },
       };
 

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

@@ -77,5 +77,17 @@ const getStyles = (options) =>
   .eventWrapper  {
    filter: brightness(120%);
   }
+  .timeline-node-label {
+    dy: 1em;
+    alignment-baseline: middle;
+    text-anchor: middle;
+    dominant-baseline: middle;
+    text-align: center;
+  }
+  
+  .timeline-node-label > p {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 `;
 export default getStyles;

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

@@ -1,4 +1,5 @@
 import { arc as d3arc, select } from 'd3';
+import { createText } from '../../rendering-util/createText.js';
 const MAX_SECTIONS = 12;
 
 export const drawRect = function (elem, rectData) {
@@ -523,23 +524,40 @@ export const drawNode = function (elem, node, fullSection, conf) {
 
   // Create the wrapped text element
   const textElem = nodeElem.append('g');
+  const description = node.descr.replace(/(<br\/*>)/g, '\n');
+  const htmlLabels = conf.timeline.htmlLabels;
+
+  createText(textElem, description, {
+    useHtmlLabels: htmlLabels,
+    width: node.width,
+    classes: 'timeline-node-label',
+  });
+
+  if (!htmlLabels) {
+    textElem
+      .attr('dy', '1em')
+      .attr('alignment-baseline', 'middle')
+      .attr('dominant-baseline', 'middle')
+      .attr('text-anchor', 'middle');
+  }
+
+  const bbox = textElem.node().getBBox();
 
-  const txt = textElem
-    .append('text')
-    .text(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;
   node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding;
   node.height = Math.max(node.height, node.maxHeight);
   node.width = node.width + 2 * node.padding;
 
-  textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')');
+  if (!htmlLabels) {
+    const dx = node.width / 2;
+    const dy = node.padding / 2;
+    textElem.attr('transform', 'translate(' + dx + ', ' + dy + ')');
+  } else {
+    const dx = (node.width - bbox.width) / 2;
+    const dy = (node.height - bbox.height) / 2;
+    textElem.attr('transform', 'translate(' + dx + ', ' + dy + ')');
+  }
 
   // Create the background element
   defaultBkg(bkgElem, node, section, conf);

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

@@ -3,6 +3,8 @@ import * as timelineDB from './timelineDb.js';
 // import { injectUtils } from './mermaidUtils.js';
 import * as _commonDb from '../../commonDb.js';
 import { parseDirective as _parseDirective } from '../../directiveUtils.js';
+import * as svgDraw from './svgDraw';
+import { select } from 'd3';
 
 import {
   log,
@@ -23,11 +25,40 @@ import {
 // );
 
 describe('when parsing a timeline ', function () {
+  // Some of the tests are using d3 drawing and node doesn't support getComputedTextLength or getBBox
+  // because it isn't attached to a real DOM - so we need to mock them.
+  const originalGetComputedTextLength = SVGElement.prototype.getComputedTextLength;
+  const originalSVGGetBBox = SVGElement.prototype.getBBox;
+  const originalHTMLGetBBox = HTMLUnknownElement.prototype.getBBox;
+
   beforeEach(function () {
     timeline.yy = timelineDB;
     timelineDB.clear();
     setLogLevel('trace');
+    SVGElement.prototype.getComputedTextLength = () => {
+      return 150;
+    };
+
+    SVGElement.prototype.getBBox = HTMLUnknownElement.prototype.getBBox = () => {
+      return {
+        x: 0,
+        y: 0,
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        width: 0,
+      };
+    };
+  });
+
+  afterEach(function () {
+    SVGElement.prototype.getComputedTextLength = originalGetComputedTextLength;
+    SVGElement.prototype.getBBox = originalSVGGetBBox;
+    HTMLUnknownElement.prototype.getBBox = originalHTMLGetBBox;
   });
+
   describe('Timeline', function () {
     it('TL-1 should handle a simple section definition abc-123', function () {
       let str = `timeline
@@ -119,4 +150,54 @@ describe('when parsing a timeline ', function () {
       });
     });
   });
+
+  it('TL-6 should render markup as html if htmlLabel option is true', function () {
+    // Assemble
+    const element = select(document.createElement('div'), 'div');
+    const conf = {
+      timeline: {
+        htmlLabels: true,
+      },
+    };
+
+    // Act
+    svgDraw.drawNode(
+      element,
+      {
+        descr: '__this should be strong__',
+      },
+      1,
+      conf
+    );
+
+    // Assert
+    expect(element.html()).to.contain('<strong>this should be strong</strong>');
+  });
+
+  it('TL-6 should render markup as svg if htmlLabel option is false', function () {
+    // Assemble
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const element = select(svg, 'svg');
+
+    const conf = {
+      timeline: {
+        htmlLabels: false,
+      },
+    };
+
+    // Act
+    svgDraw.drawNode(
+      element,
+      {
+        descr: '__this should be strong__',
+      },
+      1,
+      conf
+    );
+
+    // Assert
+    expect(element.html()).to.contain(
+      '<tspan font-style="normal" class="text-inner-tspan" font-weight="bold"> strong</tspan>'
+    );
+  });
 });

packages/mermaid/src/schemas/config.schema.yaml

@@ -1324,6 +1324,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
       - messageAlign
       - bottomMarginAdj
       - useMaxWidth
+      - htmlLabels
     properties:
       diagramMarginX:
         $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginX'
@@ -1434,6 +1435,11 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
         # added by https://github.com/mermaid-js/mermaid/commit/652a42fe1aed7911a781a84716940a973b995639
         type: boolean
         default: false
+      htmlLabels:
+        description: |
+          Flag for setting whether or not a html tag should be used for rendering labels.
+        type: boolean
+        default: true
 
   GanttDiagramConfig:
     title: Gantt Diagram Config

packages/mermaid/src/tests/setup.ts

@@ -16,8 +16,6 @@ export default defineConfig({
   test: {
     environment: 'jsdom',
     globals: true,
-    // TODO: should we move this to a mermaid-core package?
-    setupFiles: ['packages/mermaid/src/tests/setup.ts'],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json', 'html', 'lcov'],