From 49ce5222c96882888abd146f1cb3b342c93c3294 Mon Sep 17 00:00:00 2001
From: ashishj <ashishjain0512@gmail.com>
Date: Wed, 25 Jan 2023 17:49:35 +0100
Subject: [PATCH] Lint Fixes

---
 .vite/build.ts                                |   4 +-
 cypress/platform/ashish2.html                 |  28 ++-
 .../src/mermaidUtils.ts                       |   3 +-
 packages/mermaid-mindmap/src/mermaidUtils.ts  |   2 +-
 .../mermaid-mindmap/src/mindmapRenderer.js    |   6 +-
 packages/mermaid-timeline/package.json        |   2 +-
 packages/mermaid-timeline/src/mermaidUtils.ts |   5 +-
 packages/mermaid-timeline/src/svgDraw.js      |  28 ++-
 packages/mermaid-timeline/src/timelineDb.js   |  19 +-
 .../mermaid-timeline/src/timelineRenderer.ts  | 175 ++++++++++--------
 packages/mermaid/src/defaultConfig.ts         |   2 -
 .../mermaid/src/diagram-api/diagramAPI.ts     |  22 ++-
 packages/mermaid/src/diagram-api/types.ts     |   2 +-
 packages/mermaid/src/directiveUtils.ts        |   9 +-
 .../src/docs/.vitepress/theme/mermaid.ts      |   2 +-
 packages/mermaid/src/docs/syntax/timeline.md  |  20 +-
 packages/mermaid/src/mermaidAPI.ts            |   1 -
 packages/mermaid/src/themes/theme-default.js  |   2 +-
 18 files changed, 188 insertions(+), 144 deletions(-)

diff --git a/.vite/build.ts b/.vite/build.ts
index 549ac3b0b..91050895b 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -166,8 +166,8 @@ if (watch) {
   if (!mermaidOnly) {
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
     // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
-  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-timeline' }));
-  //build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-timeline-detector' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-timeline' }));
+    //build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-timeline-detector' }));
   }
 } else if (visualize) {
   await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
diff --git a/cypress/platform/ashish2.html b/cypress/platform/ashish2.html
index c6dfdc6b0..f6df46fbc 100644
--- a/cypress/platform/ashish2.html
+++ b/cypress/platform/ashish2.html
@@ -71,7 +71,21 @@
           I am a big big big tasks
           I am not so big tasks
     </pre>
-     <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
+ timeline
+        title MermaidChart 2023 Timeline
+        section 2023 Q1 &lt;br&gt; Release Personal Tier
+          Buttet 1 : sub-point 1a : sub-point 1b
+               : sub-point 1c
+          Bullet 2 : sub-point 2a : sub-point 2b
+        section 2023 Q2 <br> Release XYZ Tier
+          Buttet 3 : sub-point <br/> 3a : sub-point 3b
+               : sub-point 3c
+          Bullet 4 : sub-point 4a : sub-point 4b
+
+    </pre>
+
+    <pre id="diagram" class="mermaid2">
  timeline
         title England's History Timeline
         section Stone Age
@@ -96,7 +110,7 @@
           2008s : Instagram
           2010 : Pinterest
     </pre>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
       %%{init: { 'logLevel': 'debug', 'theme': 'base', 'themeVariables': {
               'cScale0': '#ff0000',
               'cScale1': '#00ff00',
@@ -113,7 +127,7 @@
           2010 : Pinterest
     </pre>
 
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
           %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
               'cScale0': '#ff0000',
               'cScale1': '#00ff00',
@@ -173,11 +187,11 @@ mindmap
     <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
     <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
     <script type="module">
-      import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      //import mindmap from '../../packages/mermaid-mindmap/src/detector';
       // import example from '../../packages/mermaid-example-diagram/src/detector';
       import timeline from '../../packages/mermaid-timeline/src/detector';
       import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([mindmap, timeline]);
+      await mermaid.registerExternalDiagrams([timeline]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -187,7 +201,7 @@ mindmap
         logLevel: 0,
         flowchart: {
           useMaxWidth: false,
-          htmlLabels: true,
+          htmlLabels: false,
         },
         gantt: {
           useMaxWidth: false,
@@ -195,7 +209,7 @@ mindmap
         timeline: {
           disableMulticolor: false,
         },
-        useMaxWidth: false,
+        useMaxWidth: true,
         lazyLoadedDiagrams: [
           // './mermaid-mindmap-detector.esm.mjs',
           // './mermaid-example-diagram-detector.esm.mjs',
diff --git a/packages/mermaid-example-diagram/src/mermaidUtils.ts b/packages/mermaid-example-diagram/src/mermaidUtils.ts
index 698203f19..9ba66be5a 100644
--- a/packages/mermaid-example-diagram/src/mermaidUtils.ts
+++ b/packages/mermaid-example-diagram/src/mermaidUtils.ts
@@ -42,7 +42,7 @@ export let setupGraphViewbox: (
  * @param _getConfig - getConfig from mermaid/src/diagramAPI.ts
  * @param _sanitizeText - sanitizeText from mermaid/src/diagramAPI.ts
  * @param _setupGraphViewbox - setupGraphViewbox from mermaid/src/diagramAPI.ts
- * @param _commonDb
+ * @param _commonDb -`commonDb` from mermaid/src/diagramAPI.ts
  */
 export const injectUtils = (
   _log: Record<keyof typeof LEVELS, typeof console.log>,
@@ -64,5 +64,4 @@ export const injectUtils = (
   sanitizeText = _sanitizeText;
   setupGraphViewbox = _setupGraphViewbox;
   commonDb = _commonDb;
-
 };
diff --git a/packages/mermaid-mindmap/src/mermaidUtils.ts b/packages/mermaid-mindmap/src/mermaidUtils.ts
index 4f894b48d..44cc85f73 100644
--- a/packages/mermaid-mindmap/src/mermaidUtils.ts
+++ b/packages/mermaid-mindmap/src/mermaidUtils.ts
@@ -55,5 +55,5 @@ export const injectUtils = (
   getConfig = _getConfig;
   sanitizeText = _sanitizeText;
   setupGraphViewbox = _setupGraphViewbox;
-  commonDb= _commonDb;
+  commonDb = _commonDb;
 };
diff --git a/packages/mermaid-mindmap/src/mindmapRenderer.js b/packages/mermaid-mindmap/src/mindmapRenderer.js
index 17f2d0097..6ffe80f5e 100644
--- a/packages/mermaid-mindmap/src/mindmapRenderer.js
+++ b/packages/mermaid-mindmap/src/mindmapRenderer.js
@@ -11,7 +11,7 @@ cytoscape.use(coseBilkent);
 
 /**
  * @param {any} svg The svg element to draw the diagram onto
- * @param {object} mindmap The maindmap data and hierarchy
+ * @param {object} mindmap The mindmap data and hierarchy
  * @param section
  * @param {object} conf The configuration object
  */
@@ -110,7 +110,7 @@ function layoutMindmap(node, conf) {
     renderEl.remove();
     addNodes(node, cy, conf, 0);
 
-    // Make cytoscape care about the dimensisions of the nodes
+    // Make cytoscape care about the dimensions of the nodes
     cy.nodes().forEach(function (n) {
       n.layoutDimensions = () => {
         const data = n.data();
@@ -173,7 +173,7 @@ export const draw = async (text, id, version, diagObj) => {
   log.debug('Renering info diagram\n' + text);
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and Document for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
diff --git a/packages/mermaid-timeline/package.json b/packages/mermaid-timeline/package.json
index 8447d1981..0ad4cc564 100644
--- a/packages/mermaid-timeline/package.json
+++ b/packages/mermaid-timeline/package.json
@@ -55,4 +55,4 @@
     "**/*.css",
     "**/*.scss"
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/mermaid-timeline/src/mermaidUtils.ts b/packages/mermaid-timeline/src/mermaidUtils.ts
index b733507ed..0c6469203 100644
--- a/packages/mermaid-timeline/src/mermaidUtils.ts
+++ b/packages/mermaid-timeline/src/mermaidUtils.ts
@@ -26,7 +26,7 @@ export let sanitizeText: (str: string) => string;
 export const getCommonDb = () => localCommonDb;
 export let parseDirective = (p: any, statement: string, context: string, type: string) => {
   return;
-}
+};
 /**
  * Placeholder for the real function that will be injected by mermaid.
  */
@@ -38,8 +38,6 @@ export let setupGraphViewbox: (
   useMaxWidth: boolean
 ) => void;
 
-
-
 /**
  * Function called by mermaid that injects utility functions that help the diagram to be a good citizen.
  * @param _log - The log function to use
@@ -71,5 +69,4 @@ export const injectUtils = (
   setupGraphViewbox = _setupGraphViewbox;
   localCommonDb = _commonDb;
   parseDirective = _parseDirective;
-
 };
diff --git a/packages/mermaid-timeline/src/svgDraw.js b/packages/mermaid-timeline/src/svgDraw.js
index 88f90401c..874ac62ef 100644
--- a/packages/mermaid-timeline/src/svgDraw.js
+++ b/packages/mermaid-timeline/src/svgDraw.js
@@ -1,4 +1,4 @@
-import { arc as d3arc , select} from 'd3';
+import { arc as d3arc, select } from 'd3';
 const MAX_SECTIONS = 12;
 
 export const drawRect = function (elem, rectData) {
@@ -12,7 +12,7 @@ export const drawRect = function (elem, rectData) {
   rectElem.attr('rx', rectData.rx);
   rectElem.attr('ry', rectData.ry);
 
-  if (typeof rectData.class !== 'undefined') {
+  if (rectData.class !== undefined) {
     rectElem.attr('class', rectData.class);
   }
 
@@ -117,11 +117,11 @@ export const drawCircle = function (element, circleData) {
   circleElement.attr('stroke', circleData.stroke);
   circleElement.attr('r', circleData.r);
 
-  if (typeof circleElement.class !== 'undefined') {
+  if (circleElement.class !== undefined) {
     circleElement.attr('class', circleElement.class);
   }
 
-  if (typeof circleData.title !== 'undefined') {
+  if (circleData.title !== undefined) {
     circleElement.append('title').text(circleData.title);
   }
 
@@ -139,7 +139,7 @@ export const drawText = function (elem, textData) {
 
   textElem.style('text-anchor', textData.anchor);
 
-  if (typeof textData.class !== 'undefined') {
+  if (textData.class !== undefined) {
     textElem.attr('class', textData.class);
   }
 
@@ -517,9 +517,7 @@ export const drawNode = function (elem, node, fullSection, conf) {
   node.section = section;
   nodeElem.attr(
     'class',
-    (node.class ? node.class + ' ' : '') +
-      'timeline-node ' +
-      ('section-' + section)
+    (node.class ? node.class + ' ' : '') + 'timeline-node ' + ('section-' + section)
   );
   const bkgElem = nodeElem.append('g');
 
@@ -535,7 +533,8 @@ export const drawNode = function (elem, node, fullSection, conf) {
     .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;
+  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;
@@ -545,13 +544,12 @@ export const drawNode = function (elem, node, fullSection, conf) {
   // Create the background element
   defaultBkg(bkgElem, node, section, conf);
 
-
   return node;
 };
 
- export const getVirtualNodeHeight = function (elem,node,conf) {
- const textElem = elem.append('g');
-    const txt = textElem
+export const getVirtualNodeHeight = function (elem, node, conf) {
+  const textElem = elem.append('g');
+  const txt = textElem
     .append('text')
     .text(node.descr)
     .attr('dy', '1em')
@@ -560,12 +558,12 @@ export const drawNode = function (elem, node, fullSection, conf) {
     .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;
+  const fontSize =
+    conf.fontSize && conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
   textElem.remove();
   return bbox.height + fontSize * 1.1 * 0.5 + node.padding;
 };
 
-
 const defaultBkg = function (elem, node, section) {
   const rd = 5;
   elem
diff --git a/packages/mermaid-timeline/src/timelineDb.js b/packages/mermaid-timeline/src/timelineDb.js
index b92715fe9..f0152e490 100644
--- a/packages/mermaid-timeline/src/timelineDb.js
+++ b/packages/mermaid-timeline/src/timelineDb.js
@@ -1,4 +1,8 @@
-import { getCommonDb as _getCommonDb, parseDirective as _parseDirective ,log  } from './mermaidUtils';
+import {
+  getCommonDb as _getCommonDb,
+  parseDirective as _parseDirective,
+  log,
+} from './mermaidUtils';
 
 let currentSection = '';
 let currentTaskId = 0;
@@ -9,7 +13,7 @@ const rawTasks = [];
 
 export const getCommonDb = _getCommonDb;
 
-export const parseDirective = ( statement, context, type) => {
+export const parseDirective = (statement, context, type) => {
   _parseDirective(this, statement, context, type);
 };
 
@@ -45,27 +49,25 @@ export const getTasks = function () {
 };
 
 export const addTask = function (period, length, event) {
-
   const rawTask = {
     id: currentTaskId++,
     section: currentSection,
     type: currentSection,
     task: period,
-    score : length?length:0,
+    score: length ? length : 0,
     //if event is defined, then add it the events array
-    events: event?[event]:[],
+    events: event ? [event] : [],
   };
   rawTasks.push(rawTask);
 };
 
 export const addEvent = function (event) {
- // fetch current task with currnetTaskId
+  // fetch current task with currnetTaskId
   const currentTask = rawTasks.find((task) => task.id === currentTaskId - 1);
   //add event to the events array
   currentTask.events.push(event);
 };
 
-
 export const addTaskOrg = function (descr) {
   const newTask = {
     section: currentSection,
@@ -100,6 +102,5 @@ export default {
   addTask,
   addTaskOrg,
   addEvent,
-  parseDirective
+  parseDirective,
 };
-
diff --git a/packages/mermaid-timeline/src/timelineRenderer.ts b/packages/mermaid-timeline/src/timelineRenderer.ts
index 86a83f674..613e3ff48 100644
--- a/packages/mermaid-timeline/src/timelineRenderer.ts
+++ b/packages/mermaid-timeline/src/timelineRenderer.ts
@@ -14,7 +14,7 @@ export const setConf = function (cnf) {
 export const draw = function (text, id, version, diagObj) {
   //1. Fetch the configuration
   const conf = getConfig();
-  const LEFT_MARGIN = conf.leftMargin?conf.leftMargin:50;
+  const LEFT_MARGIN = conf.leftMargin ? conf.leftMargin : 50;
 
   //2. Clear the diagram db before parsing
   diagObj.db.clear();
@@ -42,7 +42,7 @@ export const draw = function (text, id, version, diagObj) {
   //4. Fetch the diagram data
   const tasks = diagObj.db.getTasks();
   const title = diagObj.db.getCommonDb().getDiagramTitle();
-  log.debug('task',tasks);
+  log.debug('task', tasks);
 
   //5. Initialize the diagram
   svgDraw.initGraphics(svg);
@@ -59,7 +59,7 @@ export const draw = function (text, id, version, diagObj) {
   let masterX = 50 + LEFT_MARGIN;
   //sectionBeginX = masterX;
   let masterY = 50;
-  sectionBeginY=50;
+  sectionBeginY = 50;
   //draw sections
   let sectionNumber = 0;
   let hasSections = true;
@@ -76,17 +76,16 @@ export const draw = function (text, id, version, diagObj) {
     };
     const sectionHeight = svgDraw.getVirtualNodeHeight(svg, sectionNode, conf);
     log.debug('sectionHeight before draw', sectionHeight);
-    maxSectionHeight = Math.max(maxSectionHeight, sectionHeight +20);
+    maxSectionHeight = Math.max(maxSectionHeight, sectionHeight + 20);
   });
 
-//tasks length and maxEventCount
+  //tasks length and maxEventCount
   let maxEventCount = 0;
   let maxEventLineLength = 0;
   log.debug('tasks.length', tasks.length);
-   //calculate max task height
+  //calculate max task height
   // for loop till tasks.length
   for (const [i, task] of tasks.entries()) {
-
     const taskNode = {
       number: i,
       descr: task,
@@ -105,27 +104,24 @@ export const draw = function (text, id, version, diagObj) {
     let maxEventLineLengthTemp = 0;
     for (let j = 0; j < task.events.length; j++) {
       const event = task.events[j];
-       const eventNode = {
-      descr: event,
-      section: task.section,
-      number : task.section,
-      width: 150,
-      padding: 20,
-      maxHeight: 50,
-    };
+      const eventNode = {
+        descr: event,
+        section: task.section,
+        number: task.section,
+        width: 150,
+        padding: 20,
+        maxHeight: 50,
+      };
       maxEventLineLengthTemp += svgDraw.getVirtualNodeHeight(svg, eventNode, conf);
     }
     maxEventLineLength = Math.max(maxEventLineLength, maxEventLineLengthTemp);
-
   }
 
-
   log.debug('maxSectionHeight before draw', maxSectionHeight);
   log.debug('maxTaskHeight before draw', maxTaskHeight);
 
   if (sections && sections.length > 0) {
     sections.forEach((section) => {
-
       const sectionNode = {
         number: sectionNumber,
         descr: section,
@@ -139,22 +135,27 @@ export const draw = function (text, id, version, diagObj) {
       const node = svgDraw.drawNode(sectionNodeWrapper, sectionNode, sectionNumber, conf);
       log.debug('sectionNode output', node);
 
-      sectionNodeWrapper.attr(
-        'transform',
-        `translate(${masterX}, ${sectionBeginY})`
-      );
+      sectionNodeWrapper.attr('transform', `translate(${masterX}, ${sectionBeginY})`);
 
       masterY += maxSectionHeight + 50;
 
-
-
       //draw tasks for this section
       //filter task where tasks.section == section
       const tasksForSection = tasks.filter((task) => task.section === section);
       if (tasksForSection.length > 0) {
-
-
-        drawTasks(svg, tasksForSection, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,maxEventLineLength,maxSectionHeight,false);
+        drawTasks(
+          svg,
+          tasksForSection,
+          sectionNumber,
+          masterX,
+          masterY,
+          maxTaskHeight,
+          conf,
+          maxEventCount,
+          maxEventLineLength,
+          maxSectionHeight,
+          false
+        );
       }
       // todo replace with total width of section and its tasks
       masterX += 200 * Math.max(tasksForSection.length, 1);
@@ -165,10 +166,22 @@ export const draw = function (text, id, version, diagObj) {
   } else {
     //draw tasks
     hasSections = false;
-    drawTasks(svg, tasks, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,maxEventLineLength,maxSectionHeight,true);
+    drawTasks(
+      svg,
+      tasks,
+      sectionNumber,
+      masterX,
+      masterY,
+      maxTaskHeight,
+      conf,
+      maxEventCount,
+      maxEventLineLength,
+      maxSectionHeight,
+      true
+    );
   }
 
-// Get BBox of the diagram
+  // Get BBox of the diagram
   const box = svg.node().getBBox();
   log.debug('bounds', box);
 
@@ -176,7 +189,7 @@ export const draw = function (text, id, version, diagObj) {
     svg
       .append('text')
       .text(title)
-      .attr('x', (box.width/2)-LEFT_MARGIN)
+      .attr('x', box.width / 2 - LEFT_MARGIN)
       .attr('font-size', '4ex')
       .attr('font-weight', 'bold')
       .attr('y', 20);
@@ -184,33 +197,49 @@ export const draw = function (text, id, version, diagObj) {
   //5. Draw the diagram
   depthY = hasSections ? maxSectionHeight + maxTaskHeight + 150 : maxTaskHeight + 100;
 
-   const lineWrapper = svg.append('g').attr('class', 'lineWrapper');
- // Draw activity line
+  const lineWrapper = svg.append('g').attr('class', 'lineWrapper');
+  // Draw activity line
   lineWrapper
     .append('line')
     .attr('x1', LEFT_MARGIN)
     .attr('y1', depthY) // One section head + one task + margins
-    .attr('x2', (box.width)+3*LEFT_MARGIN) // Subtract stroke width so arrow point is retained
+    .attr('x2', box.width + 3 * LEFT_MARGIN) // Subtract stroke width so arrow point is retained
     .attr('y2', depthY)
     .attr('stroke-width', 4)
     .attr('stroke', 'black')
     .attr('marker-end', 'url(#arrowhead)');
 
   // Setup the view box and size of the svg element
-  setupGraphViewbox(undefined, svg, conf.timeline.padding?conf.timeline.padding:50, conf.timeline.useMaxWidth?conf.timeline.useMaxWidth:false);
+  setupGraphViewbox(
+    undefined,
+    svg,
+    conf.timeline.padding ? conf.timeline.padding : 50,
+    conf.timeline.useMaxWidth ? conf.timeline.useMaxWidth : false
+  );
 
   // addSVGAccessibilityFields(diagObj.db, diagram, id);
 };
 
-
-export const drawTasks = function (diagram, tasks, sectionColor, masterX, masterY, maxTaskHeight,conf,maxEventCount,maxEventLineLength,maxSectionHeight, isWithoutSections) {
+export const drawTasks = function (
+  diagram,
+  tasks,
+  sectionColor,
+  masterX,
+  masterY,
+  maxTaskHeight,
+  conf,
+  maxEventCount,
+  maxEventLineLength,
+  maxSectionHeight,
+  isWithoutSections
+) {
   // Draw the tasks
   for (const task of tasks) {
     // create node from task
     const taskNode = {
       descr: task.task,
       section: sectionColor,
-      number : sectionColor,
+      number: sectionColor,
       width: 150,
       padding: 20,
       maxHeight: maxTaskHeight,
@@ -223,63 +252,62 @@ export const drawTasks = function (diagram, tasks, sectionColor, masterX, master
     const taskHeight = node.height;
     //log task height
     log.debug('taskHeight after draw', taskHeight);
-    taskWrapper.attr(
-      'transform',
-      `translate(${masterX}, ${masterY})`
-    );
+    taskWrapper.attr('transform', `translate(${masterX}, ${masterY})`);
 
     // update max task height
     maxTaskHeight = Math.max(maxTaskHeight, taskHeight);
 
-
-
-     // if task has events, draw them
+    // if task has events, draw them
     if (task.events) {
-    // draw a line between the task and the events
+      // draw a line between the task and the events
       const lineWrapper = diagram.append('g').attr('class', 'lineWrapper');
       let linelength = maxTaskHeight;
-    //add margin to task
-    masterY += 100;
-     linelength = linelength+ drawEvents(diagram, task.events, sectionColor, masterX, masterY, conf);
-    masterY -= 100;
+      //add margin to task
+      masterY += 100;
+      linelength =
+        linelength + drawEvents(diagram, task.events, sectionColor, masterX, masterY, conf);
+      masterY -= 100;
 
       lineWrapper
-    .append('line')
-    .attr('x1', masterX + 190/2)
-    .attr('y1', masterY + maxTaskHeight) // One section head + one task + margins
-    .attr('x2', masterX + 190/2) // Subtract stroke width so arrow point is retained
-    .attr('y2', masterY + maxTaskHeight + (isWithoutSections?maxTaskHeight:maxSectionHeight) + maxEventLineLength+ 120)
-    .attr('stroke-width', 2)
-    .attr('stroke', 'black')
-    .attr('marker-end', 'url(#arrowhead)')
-      .attr('stroke-dasharray', "5,5");
+        .append('line')
+        .attr('x1', masterX + 190 / 2)
+        .attr('y1', masterY + maxTaskHeight) // One section head + one task + margins
+        .attr('x2', masterX + 190 / 2) // Subtract stroke width so arrow point is retained
+        .attr(
+          'y2',
+          masterY +
+            maxTaskHeight +
+            (isWithoutSections ? maxTaskHeight : maxSectionHeight) +
+            maxEventLineLength +
+            120
+        )
+        .attr('stroke-width', 2)
+        .attr('stroke', 'black')
+        .attr('marker-end', 'url(#arrowhead)')
+        .attr('stroke-dasharray', '5,5');
     }
 
-
-
     masterX = masterX + 200;
     if (isWithoutSections && !getConfig().timeline.disableMulticolor) {
-       sectionColor++;
-  }
+      sectionColor++;
+    }
   }
 
-
-// reset Y coordinate for next section
-    masterY= masterY -10; ;
+  // reset Y coordinate for next section
+  masterY = masterY - 10;
 };
 
 export const drawEvents = function (diagram, events, sectionColor, masterX, masterY, conf) {
-
   let maxEventHeight = 0;
   const eventBeginY = masterY;
-  masterY = masterY + 100
+  masterY = masterY + 100;
   // Draw the events
   for (const event of events) {
     // create node from event
     const eventNode = {
       descr: event,
       section: sectionColor,
-      number : sectionColor,
+      number: sectionColor,
       width: 150,
       padding: 20,
       maxHeight: 50,
@@ -289,20 +317,15 @@ export const drawEvents = function (diagram, events, sectionColor, masterX, mast
     log.debug('eventNode', eventNode);
     // create event wrapper
     const eventWrapper = diagram.append('g').attr('class', 'eventWrapper');
-    const node = svgDraw.drawNode(eventWrapper, eventNode, sectionColor, conf)
+    const node = svgDraw.drawNode(eventWrapper, eventNode, sectionColor, conf);
     const eventHeight = node.height;
-    maxEventHeight= maxEventHeight + eventHeight;
-    eventWrapper.attr(
-      'transform',
-      `translate(${masterX}, ${masterY})`
-    );
+    maxEventHeight = maxEventHeight + eventHeight;
+    eventWrapper.attr('transform', `translate(${masterX}, ${masterY})`);
     masterY = masterY + 10 + eventHeight;
-
   }
   // set masterY back to eventBeginY
   masterY = eventBeginY;
   return maxEventHeight;
-
 };
 
 export default {
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 329164797..ec741e908 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -985,8 +985,6 @@ const config: Partial<MermaidConfig> = {
      */
     useMaxWidth: true,
 
-
-
     /**
      * | Parameter   | Description                       | Type | Required | Values      |
      * | ----------- | --------------------------------- | ---- | -------- | ----------- |
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index 69c4d8110..936e43efd 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -5,9 +5,8 @@ import { sanitizeText as _sanitizeText } from '../diagrams/common/common';
 import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
 import { addStylesForDiagram } from '../styles';
 import { DiagramDefinition, DiagramDetector } from './types';
-import * as  _commonDb from '../commonDb';
-import { parseDirective as _parseDirective} from '../directiveUtils';
-
+import * as _commonDb from '../commonDb';
+import { parseDirective as _parseDirective } from '../directiveUtils';
 
 /*
   Packaging and exposing resources for external diagrams so that they can import
@@ -19,8 +18,11 @@ export const setLogLevel = _setLogLevel;
 export const getConfig = _getConfig;
 export const sanitizeText = (text: string) => _sanitizeText(text, getConfig());
 export const setupGraphViewbox = _setupGraphViewbox;
-export const getCommonDb = () => { return _commonDb };
-export const parseDirective =  (p: any, statement: string, context: string, type: string)=>_parseDirective(p, statement, context, type);
+export const getCommonDb = () => {
+  return _commonDb;
+};
+export const parseDirective = (p: any, statement: string, context: string, type: string) =>
+  _parseDirective(p, statement, context, type);
 
 const diagrams: Record<string, DiagramDefinition> = {};
 export interface Detectors {
@@ -51,7 +53,15 @@ export const registerDiagram = (
   addStylesForDiagram(id, diagram.styles);
 
   if (diagram.injectUtils) {
-    diagram.injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox,getCommonDb(),parseDirective);
+    diagram.injectUtils(
+      log,
+      setLogLevel,
+      getConfig,
+      sanitizeText,
+      setupGraphViewbox,
+      getCommonDb(),
+      parseDirective
+    );
   }
 };
 
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 883cf3987..d60019577 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -33,7 +33,7 @@ export interface DiagramDefinition {
     _sanitizeText: InjectUtils['_sanitizeText'],
     _setupGraphViewbox: InjectUtils['_setupGraphViewbox'],
     _commonDb: InjectUtils['_commonDb'],
-    _parseDirective: InjectUtils['_parseDirective'],
+    _parseDirective: InjectUtils['_parseDirective']
   ) => void;
 }
 
diff --git a/packages/mermaid/src/directiveUtils.ts b/packages/mermaid/src/directiveUtils.ts
index 677647d44..2d2971a85 100644
--- a/packages/mermaid/src/directiveUtils.ts
+++ b/packages/mermaid/src/directiveUtils.ts
@@ -1,5 +1,3 @@
-
-
 import * as configApi from './config';
 
 import { log } from './logger';
@@ -7,7 +5,12 @@ import { directiveSanitizer } from './utils';
 
 let currentDirective: { type?: string; args?: any } | undefined = {};
 
-export const parseDirective = function (p: any, statement: string, context: string, type: string): void {
+export const parseDirective = function (
+  p: any,
+  statement: string,
+  context: string,
+  type: string
+): void {
   log.debug('parseDirective is being called', statement, context, type);
   try {
     if (statement !== undefined) {
diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
index f10aa8168..ead42904f 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -4,7 +4,7 @@ import timeline from '@mermaid-js/mermaid-timeline';
 
 const init = (async () => {
   try {
-    await mermaid.registerExternalDiagrams([mindmap,timeline]);
+    await mermaid.registerExternalDiagrams([mindmap, timeline]);
   } catch (e) {
     console.error(e);
   }
diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
index 44b72bd79..0a124abfb 100644
--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -15,7 +15,6 @@ timeline
     2006 : Twitter
 ```
 
-
 ## Syntax
 
 The syntax for creating Timeline diagram is simple. You always start with the `timeline` keyword to let mermaid know that you want to create a timeline diagram.
@@ -24,15 +23,18 @@ After that there is a possibility to add a title to the timeline. This is done b
 
 Then you add the timeline data, where you always start with a time period, followed by a colon and then the text for the event. Optionally you can add a second colon and then the text for the event. So, you can have one or more events per time period.
 
-
 ```json
 {time period} : {event}
 ```
+
 or
+
 ```json
 {time period} : {event} : {event}
 ```
+
 or
+
 ```json
 {time period} : {event}
               : {event}
@@ -41,7 +43,6 @@ or
 
 NOTE: Both time period and event are simple text, and not limited to numbers.
 
-
 Let us look at the syntax for the example above.
 
 ```mermaid-example
@@ -59,6 +60,7 @@ The sequence of time period and events is important, as it will be used to draw
 Similarly, the first event will be placed at the top for that specific time period, and the last event will be placed at the bottom.
 
 ## Grouping of time periods in sections/ages
+
 You can group time periods in sections/ages. This is done by adding a line with the keyword `section` followed by the section name.
 
 All subsequent time periods will be placed in this section until a new section is defined.
@@ -78,12 +80,13 @@ timeline
         Industry 4.0 : Internet, Robotics, Internet of Things
         Industry 5.0 : Artificial intelligence, Big data,3D printing
 ```
+
 As you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined.
 
 All time periods and events under a given section follow a similar color scheme. This is done to make it easier to see the relationship between time periods and events.
 
-
 ## Wrapping of text for long time-periods or events
+
 By default, the text for time-periods and events will be wrapped if it is too long. This is done to avoid that the text is drawn outside the diagram.
 
 You can also use `<br>` to force a line break.
@@ -120,6 +123,7 @@ However, if there is no section defined, then we have two possibilities:
           2006 : Twitter
 
 ```
+
 Note that this is no, section defined, and each time period and its corresponding events will have its own color scheme.
 
 2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
@@ -139,6 +143,7 @@ mermaid.initialize({
 ```
 
 let us look at same example, where we have disabled the multiColor option.
+
 ```mermaid-example
    %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
     timeline
@@ -149,6 +154,7 @@ let us look at same example, where we have disabled the multiColor option.
           2006 : Twitter
 
 ```
+
 ### Customizing Color scheme
 
 You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
@@ -180,8 +186,8 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
 
 See how the colors are changed to the values specified in the theme variables.
 
-
 ## Themes
+
 Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).
 
 The following are the different pre-defined theme options:
@@ -270,10 +276,6 @@ Let's put them to use, and see how our sample diagram looks in different themes:
           2010 : Pinterest
 ```
 
-
-
-
-
 ## Integrating with your library/website.
 
 Timeline uses the experimental lazy loading & async rendering features which could change in the future.
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 28a1351cf..68db59b34 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -779,7 +779,6 @@ const renderAsync = async function (
   return svgCode;
 };
 
-
 /**
  * @param  options - Initial Mermaid options
  */
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index 4fb898040..391c0298f 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -139,7 +139,7 @@ class Theme {
     this['cScalePeer' + 2] = this['cScalePeer' + 2] || darken(this.tertiaryColor, 40);
     for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
       // Setup the peer color for the set, useful for borders
-       this['cScale' + i] = darken(this['cScale' + i], 10);
+      this['cScale' + i] = darken(this['cScale' + i], 10);
       this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 25);
     }
     // Setup the inverted color for the set