Merge branch 'develop' into sidv/testArgos

* develop: (80 commits)
  chore: update browsers list
  chore(deps): update eslint
  fix(class): #5624 Reset direction to default in classDiagram
  ci: upgrade to pnpm/action-setup@v4 to avoid CI failures
  chore(deps): update dependency eslint-plugin-unicorn to v54
  chore(deps): update dependency eslint-plugin-jsdoc to v48.5.0
  chore(deps): update all patch dependencies
  Sync docs folder
  Add Doctave to .cspell libraries
  Adds Doctave to list of integrations
  chore: update browsers list
  chore: Cleanup tsconfig
  chore: Fix lint
  Apply suggestions from code review
  chore: Remove extra words from cspell
  chore: Log granular rebuild times
  fix: Message wrap
  fix: Message wrap
  chore: Use `??` instead of `||`
  chore: Organise imports
  ...

.github/workflows/e2e.yml

@@ -117,7 +117,7 @@ jobs:
         id: cypress
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
-        if: ${{ env.shouldRunParallel == 'true' || ( matrix.containers == 1 ) }}
+        if: ${{ env.shouldRunParallel || ( matrix.containers == 1 ) }}
         with:
           install: false
           start: pnpm run dev:coverage
@@ -125,14 +125,14 @@ jobs:
           browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
-          record: ${{ env.shouldRunParallel == 'true' }}
-          parallel: ${{ env.shouldRunParallel == 'true' }}
+          record: ${{ env.shouldRunParallel }}
+          parallel: ${{ env.shouldRunParallel }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
           CYPRESS_COMMIT: ${{ github.sha }}
           ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-          ARGOS_PARALLEL: ${{ env.shouldRunParallel == 'true' }}
+          ARGOS_PARALLEL: ${{ env.shouldRunParallel }}
           ARGOS_PARALLEL_TOTAL: 4
           ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
 

cypress/integration/rendering/packet.spec.ts

@@ -10,15 +10,6 @@ describe('packet structure', () => {
     );
   });
 
-  it('should render a simple packet diagram without ranges', () => {
-    imgSnapshotTest(
-      `packet-beta
-  0: "h"
-  1: "i"
-`
-    );
-  });
-
   it('should render a complex packet diagram', () => {
     imgSnapshotTest(
       `packet-beta

cypress/integration/rendering/quadrantChart.spec.js

@@ -20,7 +20,7 @@ describe('Quadrant Chart', () => {
     quadrant-2 Need to promote
     quadrant-3 Re-evaluate
     quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
+    Campaign A: [0.3, 0.61]
     Campaign B: [0.45, 0.23]
     Campaign C: [0.57, 0.69]
     Campaign D: [0.78, 0.34]
@@ -54,7 +54,7 @@ describe('Quadrant Chart', () => {
     x-axis Low Reach --> High Reach
     y-axis Low Engagement --> High Engagement
     quadrant-1 We should expand
-    quadrant-2 Need to promote
+    quadrant-2 Need to promot
     quadrant-3 Re-evaluate
     quadrant-4 May be improved
       `,

cypress/integration/rendering/xyChart.spec.js

@@ -205,7 +205,7 @@ describe('XY Chart', () => {
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
-        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6010]
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
       `,
       {}
@@ -239,15 +239,15 @@ describe('XY Chart', () => {
       config:
         xyChart:
           xAxis:
-            showTick: false
+            showTick: true
           yAxis:
-            showTick: false
+            showTick: true
       ---
       xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
-        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 5000]
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
       `,
       {}
@@ -268,7 +268,7 @@ describe('XY Chart', () => {
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
-        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6001]
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
       `,
       {}

docs/syntax/stateDiagram.md

@@ -483,8 +483,8 @@ a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by
 
 Here is an example of a classDef with just one property-value pair:
 
-```txt
-classDef movement font-style:italic;
+```
+    classDef movement font-style:italic;
 ```
 
 where
@@ -496,8 +496,8 @@ If you want to have more than one _property-value pair_ then you put a comma (`,
 
 Here is an example with three property-value pairs:
 
-```txt
-classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+```
+    classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
 ```
 
 where
@@ -522,7 +522,7 @@ There are two ways to apply a `classDef` style to a state:
 A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
 
 ```txt
-class [one or more state names, separated by commas] [name of a style defined with classDef]
+    class [one or more state names, separated by commas] [name of a style defined with classDef]
 ```
 
 Here is an example applying the `badBadEvent` style to a state named `Crash`:

packages/mermaid/package.json

@@ -81,7 +81,7 @@
     "katex": "^0.16.9",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
-    "marked": "^13.0.2",
+    "mdast-util-from-markdown": "^2.0.0",
     "stylis": "^4.3.1",
     "ts-dedent": "^2.2.0",
     "uuid": "^9.0.1"

packages/mermaid/src/dagre-wrapper/shapes/util.js

@@ -104,7 +104,6 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
     bbox = div.getBoundingClientRect();
     dv.attr('width', bbox.width);
     dv.attr('height', bbox.height);
-    dv.style('height', bbox.height + 'px');
   }
 
   // Center the label

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

@@ -288,8 +288,8 @@ a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by
 
 Here is an example of a classDef with just one property-value pair:
 
-```txt
-classDef movement font-style:italic;
+```
+    classDef movement font-style:italic;
 ```
 
 where
@@ -301,8 +301,8 @@ If you want to have more than one _property-value pair_ then you put a comma (`,
 
 Here is an example with three property-value pairs:
 
-```txt
-classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+```
+    classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
 ```
 
 where
@@ -327,7 +327,7 @@ There are two ways to apply a `classDef` style to a state:
 A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
 
 ```txt
-class [one or more state names, separated by commas] [name of a style defined with classDef]
+    class [one or more state names, separated by commas] [name of a style defined with classDef]
 ```
 
 Here is an example applying the `badBadEvent` style to a state named `Crash`:

packages/mermaid/src/rendering-util/createText.ts

@@ -40,14 +40,11 @@ function addHtmlSpan(element, node, width, classes, addBackground = false) {
     div.style('display', 'table');
     div.style('white-space', 'break-spaces');
     div.style('width', width + 'px');
-    const newBbox = div.node().getBoundingClientRect();
-    if (newBbox.height > 0) {
-      bbox = newBbox;
-    }
+    bbox = div.node().getBoundingClientRect();
   }
 
-  fo.style('width', bbox.width + 'px');
-  fo.style('height', bbox.height + 'px');
+  fo.style('width', bbox.width);
+  fo.style('height', bbox.height);
 
   return fo.node();
 }
@@ -156,7 +153,7 @@ function updateTextContentAndStyles(tspan: any, wrappedLine: MarkdownWord[]) {
   wrappedLine.forEach((word, index) => {
     const innerTspan = tspan
       .append('tspan')
-      .attr('font-style', word.type === 'em' ? 'italic' : 'normal')
+      .attr('font-style', word.type === 'emphasis' ? 'italic' : 'normal')
       .attr('class', 'text-inner-tspan')
       .attr('font-weight', word.type === 'strong' ? 'bold' : 'normal');
     if (index === 0) {

packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-irregular-whitespace */
 import { markdownToLines, markdownToHTML } from './handle-markdown-text.js';
 import { test, expect } from 'vitest';
 
@@ -36,9 +37,9 @@ Here is a line *with an italic* section`;
       { content: 'is', type: 'normal' },
       { content: 'a', type: 'normal' },
       { content: 'line', type: 'normal' },
-      { content: 'with', type: 'em' },
-      { content: 'an', type: 'em' },
-      { content: 'italic', type: 'em' },
+      { content: 'with', type: 'emphasis' },
+      { content: 'an', type: 'emphasis' },
+      { content: 'italic', type: 'emphasis' },
       { content: 'section', type: 'normal' },
     ],
   ];
@@ -142,7 +143,7 @@ test('markdownToLines - Only italic formatting', () => {
       { content: 'This', type: 'normal' },
       { content: 'is', type: 'normal' },
       { content: 'an', type: 'normal' },
-      { content: 'italic', type: 'em' },
+      { content: 'italic', type: 'emphasis' },
       { content: 'test', type: 'normal' },
     ],
   ];
@@ -155,7 +156,7 @@ it('markdownToLines - Mixed formatting', () => {
   let input = `*Italic* and **bold** formatting`;
   let expected = [
     [
-      { content: 'Italic', type: 'em' },
+      { content: 'Italic', type: 'emphasis' },
       { content: 'and', type: 'normal' },
       { content: 'bold', type: 'strong' },
       { content: 'formatting', type: 'normal' },
@@ -166,9 +167,9 @@ it('markdownToLines - Mixed formatting', () => {
   input = `*Italic with space* and **bold ws** formatting`;
   expected = [
     [
-      { content: 'Italic', type: 'em' },
-      { content: 'with', type: 'em' },
-      { content: 'space', type: 'em' },
+      { content: 'Italic', type: 'emphasis' },
+      { content: 'with', type: 'emphasis' },
+      { content: 'space', type: 'emphasis' },
       { content: 'and', type: 'normal' },
       { content: 'bold', type: 'strong' },
       { content: 'ws', type: 'strong' },
@@ -190,9 +191,9 @@ Word!`;
       { content: 'the', type: 'strong' },
       { content: 'hog...', type: 'normal' },
       { content: 'a', type: 'normal' },
-      { content: 'very', type: 'em' },
-      { content: 'long', type: 'em' },
-      { content: 'text', type: 'em' },
+      { content: 'very', type: 'emphasis' },
+      { content: 'long', type: 'emphasis' },
+      { content: 'text', type: 'emphasis' },
       { content: 'about', type: 'normal' },
       { content: 'it', type: 'normal' },
     ],
@@ -214,13 +215,13 @@ test('markdownToLines - No auto wrapping', () => {
     [
       [
         {
-          "content": "Hello, how do",
+          "content": "Hello, how do",
           "type": "normal",
         },
       ],
       [
         {
-          "content": "you do?",
+          "content": "you do?",
           "type": "normal",
         },
       ],
@@ -297,13 +298,3 @@ test('markdownToHTML - no auto wrapping', () => {
     )
   ).toMatchInlineSnapshot('"<p>Hello,&nbsp;how&nbsp;do<br/>you&nbsp;do?</p>"');
 });
-
-test('markdownToHTML - auto wrapping', () => {
-  expect(
-    markdownToHTML(
-      `Hello, how do
-  you do?`,
-      { markdownAutoWrap: true }
-    )
-  ).toMatchInlineSnapshot('"<p>Hello, how do<br/>you do?</p>"');
-});

packages/mermaid/src/rendering-util/handle-markdown-text.ts

@@ -1,5 +1,5 @@
-import type { MarkedToken, Token } from 'marked';
-import { marked } from 'marked';
+import type { Content } from 'mdast';
+import { fromMarkdown } from 'mdast-util-from-markdown';
 import { dedent } from 'ts-dedent';
 import type { MarkdownLine, MarkdownWordType } from './types.js';
 import type { MermaidConfig } from '../config.type.js';
@@ -24,13 +24,13 @@ function preprocessMarkdown(markdown: string, { markdownAutoWrap }: MermaidConfi
  */
 export function markdownToLines(markdown: string, config: MermaidConfig = {}): MarkdownLine[] {
   const preprocessedMarkdown = preprocessMarkdown(markdown, config);
-  const nodes = marked.lexer(preprocessedMarkdown);
+  const { children } = fromMarkdown(preprocessedMarkdown);
   const lines: MarkdownLine[] = [[]];
   let currentLine = 0;
 
-  function processNode(node: MarkedToken, parentType: MarkdownWordType = 'normal') {
+  function processNode(node: Content, parentType: MarkdownWordType = 'normal') {
     if (node.type === 'text') {
-      const textLines = node.text.split('\n');
+      const textLines = node.value.split('\n');
       textLines.forEach((textLine, index) => {
         if (index !== 0) {
           currentLine++;
@@ -42,17 +42,17 @@ export function markdownToLines(markdown: string, config: MermaidConfig = {}): M
           }
         });
       });
-    } else if (node.type === 'strong' || node.type === 'em') {
-      node.tokens.forEach((contentNode) => {
-        processNode(contentNode as MarkedToken, node.type);
+    } else if (node.type === 'strong' || node.type === 'emphasis') {
+      node.children.forEach((contentNode) => {
+        processNode(contentNode, node.type);
       });
     }
   }
 
-  nodes.forEach((treeNode) => {
+  children.forEach((treeNode) => {
     if (treeNode.type === 'paragraph') {
-      treeNode.tokens?.forEach((contentNode) => {
-        processNode(contentNode as MarkedToken);
+      treeNode.children.forEach((contentNode) => {
+        processNode(contentNode);
       });
     }
   });
@@ -61,23 +61,23 @@ export function markdownToLines(markdown: string, config: MermaidConfig = {}): M
 }
 
 export function markdownToHTML(markdown: string, { markdownAutoWrap }: MermaidConfig = {}) {
-  const nodes = marked.lexer(markdown);
+  const { children } = fromMarkdown(markdown);
 
-  function output(node: Token): string {
+  function output(node: Content): string {
     if (node.type === 'text') {
       if (markdownAutoWrap === false) {
-        return node.text.replace(/\n */g, '<br/>').replace(/ /g, '&nbsp;');
+        return node.value.replace(/\n/g, '<br/>').replace(/ /g, '&nbsp;');
       }
-      return node.text.replace(/\n */g, '<br/>');
+      return node.value.replace(/\n/g, '<br/>');
     } else if (node.type === 'strong') {
-      return `<strong>${node.tokens?.map(output).join('')}</strong>`;
-    } else if (node.type === 'em') {
-      return `<em>${node.tokens?.map(output).join('')}</em>`;
+      return `<strong>${node.children.map(output).join('')}</strong>`;
+    } else if (node.type === 'emphasis') {
+      return `<em>${node.children.map(output).join('')}</em>`;
     } else if (node.type === 'paragraph') {
-      return `<p>${node.tokens?.map(output).join('')}</p>`;
+      return `<p>${node.children.map(output).join('')}</p>`;
     }
     return `Unsupported markdown: ${node.type}`;
   }
 
-  return nodes.map(output).join('');
+  return children.map(output).join('');
 }

packages/mermaid/src/rendering-util/types.d.ts

@@ -1,4 +1,4 @@
-export type MarkdownWordType = 'normal' | 'strong' | 'em';
+export type MarkdownWordType = 'normal' | 'strong' | 'emphasis';
 export interface MarkdownWord {
   content: string;
   type: MarkdownWordType;

scripts/size.ts

@@ -25,7 +25,6 @@ const formatBytes = (bytes: number): string => {
   if (bytes == 0) {
     return '0 Bytes';
   }
-  bytes = Math.abs(bytes);
   const base = 1024;
   const decimals = 2;
   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];