chore: bump mermaid version to 10.9.4

Co-authored-by: Chris Grieger <chris@scolp.de>

.github/workflows/build-docs.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/build.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/e2e-applitools.yml

@@ -32,7 +32,7 @@ jobs:
 
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/e2e.yml

@@ -28,7 +28,7 @@ jobs:
       options: --user 1001
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
@@ -70,7 +70,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/lint.yml

@@ -19,7 +19,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/publish-docs.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/release-preview-publish.yml

@@ -13,7 +13,7 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/release-publish.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: fregante/setup-git-user@v2
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/test.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/update-browserlist.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - run: npx update-browserslist-db@latest
       - name: Commit changes
         uses: EndBug/add-and-commit@v9

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.9.1",
+  "version": "10.9.4",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -68,7 +68,7 @@
     "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.7",
-    "dompurify": "^3.0.5",
+    "dompurify": "^3.0.5 <3.1.7",
     "elkjs": "^0.9.0",
     "katex": "^0.16.9",
     "khroma": "^2.0.0",

packages/mermaid/src/dagre-wrapper/createLabel.js

@@ -1,7 +1,7 @@
 import { select } from 'd3';
-import { log } from '../logger.js';
 import { getConfig } from '../diagram-api/diagramAPI.js';
-import { evaluate } from '../diagrams/common/common.js';
+import { evaluate, sanitizeText } from '../diagrams/common/common.js';
+import { log } from '../logger.js';
 import { decodeEntities } from '../utils.js';
 
 /**
@@ -18,20 +18,23 @@ function applyStyle(dom, styleFn) {
  * @param {any} node
  * @returns {SVGForeignObjectElement} Node
  */
-function addHtmlLabel(node) {
+function addHtmlLabel(node, config) {
   const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));
   const div = fo.append('xhtml:div');
 
   const label = node.label;
   const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
   div.html(
-    '<span class="' +
-      labelClass +
-      '" ' +
-      (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
-      '>' +
-      label +
-      '</span>'
+    sanitizeText(
+      '<span class="' +
+        labelClass +
+        '" ' +
+        (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
+        '>' +
+        label +
+        '</span>',
+      config,
+    ),
   );
 
   applyStyle(div, node.labelStyle);
@@ -53,7 +56,8 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
   if (typeof vertexText === 'object') {
     vertexText = vertexText[0];
   }
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  const config = getConfig();
+  if (evaluate(config.flowchart.htmlLabels)) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
     vertexText = vertexText.replace(/\\n|\n/g, '<br />');
     log.debug('vertexText' + vertexText);
@@ -61,11 +65,11 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
       isNode,
       label: decodeEntities(vertexText).replace(
         /fa[blrs]?:fa-[\w-]+/g, // cspell: disable-line
-        (s) => `<i class='${s.replace(':', ' ')}'></i>`
+        (s) => `<i class='${s.replace(':', ' ')}'></i>`,
       ),
       labelStyle: style.replace('fill:', 'color:'),
     };
-    let vertexNode = addHtmlLabel(node);
+    let vertexNode = addHtmlLabel(node, config);
     // vertexNode.parentNode.removeChild(vertexNode);
     return vertexNode;
   } else {

packages/mermaid/src/diagrams/block/blockDB.ts

@@ -20,7 +20,7 @@ const config = getConfig();
 
 let classes = {} as Record<string, ClassDef>;
 
-const sanitizeText = (txt:string) => common.sanitizeText(txt, config);
+const sanitizeText = (txt: string) => common.sanitizeText(txt, config);
 
 /**
  * Called when the parser comes across a (style) class definition
@@ -93,7 +93,7 @@ const populateBlockDatabase = (_blockList: Block[] | Block[][], parent: Block):
   const children = [];
   for (const block of blockList) {
     if (block.label) {
-        block.label = sanitizeText(block.label);
+      block.label = sanitizeText(block.label);
     }
     if (block.type === 'classDef') {
       addStyleClass(block.id, block.css);

packages/mermaid/src/diagrams/common/common.ts

@@ -311,9 +311,8 @@ export const hasKatex = (text: string): boolean => (text.match(katexRegex)?.leng
  * @returns Object containing \{width, height\}
  */
 export const calculateMathMLDimensions = async (text: string, config: MermaidConfig) => {
-  text = await renderKatex(text, config);
   const divElem = document.createElement('div');
-  divElem.innerHTML = text;
+  divElem.innerHTML = await renderKatexSanitized(text, config);
   divElem.id = 'katex-temp';
   divElem.style.visibility = 'hidden';
   divElem.style.position = 'absolute';
@@ -325,14 +324,7 @@ export const calculateMathMLDimensions = async (text: string, config: MermaidCon
   return dim;
 };
 
-/**
- * Attempts to render and return the KaTeX portion of a string with MathML
- *
- * @param text - The text to test
- * @param config - Configuration for Mermaid
- * @returns String containing MathML if KaTeX is supported, or an error message if it is not and stylesheets aren't present
- */
-export const renderKatex = async (text: string, config: MermaidConfig): Promise<string> => {
+const renderKatexUnsanitized = async (text: string, config: MermaidConfig): Promise<string> => {
   if (!hasKatex(text)) {
     return text;
   }
@@ -366,6 +358,20 @@ export const renderKatex = async (text: string, config: MermaidConfig): Promise<
     );
 };
 
+/**
+ * Attempts to render and return the KaTeX portion of a string with MathML
+ *
+ * @param text - The text to test
+ * @param config - Configuration for Mermaid
+ * @returns String containing MathML if KaTeX is supported, or an error message if it is not and stylesheets aren't present
+ */
+export const renderKatexSanitized = async (
+  text: string,
+  config: MermaidConfig
+): Promise<string> => {
+  return sanitizeText(await renderKatexUnsanitized(text, config), config);
+};
+
 export default {
   getRows,
   sanitizeText,

packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js

@@ -1,13 +1,12 @@
-import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-import { select, curveLinear, selectAll } from 'd3';
-import { getConfig } from '../../diagram-api/diagramAPI.js';
-import utils from '../../utils.js';
-import { render } from '../../dagre-wrapper/index.js';
+import { curveLinear, select, selectAll } from 'd3';
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
+import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
+import { render } from '../../dagre-wrapper/index.js';
+import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { log } from '../../logger.js';
-import common, { evaluate, renderKatex } from '../common/common.js';
-import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import utils, { getStylesFromArray, interpolateToCurve } from '../../utils.js';
+import common, { evaluate, renderKatexSanitized } from '../common/common.js';
 
 const conf = {};
 export const setConf = function (cnf) {
@@ -140,7 +139,7 @@ export const addVertices = async function (vert, g, svgId, root, doc, diagObj) {
       default:
         _shape = 'rect';
     }
-    const labelText = await renderKatex(vertexText, getConfig());
+    const labelText = await renderKatexSanitized(vertexText, getConfig());
 
     // Add the node
     g.setNode(vertex.id, {
@@ -315,7 +314,10 @@ export const addEdges = async function (edges, g, diagObj) {
       edgeData.labelpos = 'c';
     }
     edgeData.labelType = edge.labelType;
-    edgeData.label = await renderKatex(edge.text.replace(common.lineBreakRegex, '\n'), getConfig());
+    edgeData.label = await renderKatexSanitized(
+      edge.text.replace(common.lineBreakRegex, '\n'),
+      getConfig()
+    );
 
     if (edge.style === undefined) {
       edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';

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

@@ -1,13 +1,13 @@
-import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-import { select, curveLinear, selectAll } from 'd3';
-import { getConfig } from '../../diagram-api/diagramAPI.js';
+import { curveLinear, select, selectAll } from 'd3';
 import { render as Render } from 'dagre-d3-es';
-import { applyStyle } from 'dagre-d3-es/src/dagre-js/util.js';
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
+import { applyStyle } from 'dagre-d3-es/src/dagre-js/util.js';
+import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
+import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { log } from '../../logger.js';
-import common, { evaluate, renderKatex } from '../common/common.js';
-import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import { getStylesFromArray, interpolateToCurve } from '../../utils.js';
+import common, { evaluate, renderKatexSanitized } from '../common/common.js';
 import flowChartShapes from './flowChartShapes.js';
 
 const conf = {};
@@ -57,7 +57,7 @@ export const addVertices = async function (vert, g, svgId, root, _doc, diagObj)
     if (evaluate(getConfig().flowchart.htmlLabels)) {
       // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
       const node = {
-        label: await renderKatex(
+        label: await renderKatexSanitized(
           vertexText.replace(
             /fa[blrs]?:fa-[\w-]+/g, // cspell:disable-line
             (s) => `<i class='${s.replace(':', ' ')}'></i>`
@@ -242,7 +242,7 @@ export const addEdges = async function (edges, g, diagObj) {
         edgeData.labelType = 'html';
         edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}" style="${
           edgeData.labelStyle
-        }">${await renderKatex(
+        }">${await renderKatexSanitized(
           edge.text.replace(
             /fa[blrs]?:fa-[\w-]+/g, // cspell:disable-line
             (s) => `<i class='${s.replace(':', ' ')}'></i>`

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

@@ -1,9 +1,12 @@
-import common, { calculateMathMLDimensions, hasKatex, renderKatex } from '../common/common.js';
-import * as svgDrawCommon from '../common/svgDrawCommon.js';
-import { addFunction } from '../../interactionDb.js';
-import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import * as configApi from '../../config.js';
+import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
+import common, {
+  calculateMathMLDimensions,
+  hasKatex,
+  renderKatexSanitized,
+} from '../common/common.js';
+import * as svgDrawCommon from '../common/svgDrawCommon.js';
 
 export const ACTOR_TYPE_WIDTH = 18 * 2;
 const TOP_ACTOR_CLASS = 'actor-top';
@@ -86,13 +89,13 @@ const popupMenuToggle = function (popId) {
 
 export const drawKatex = async function (elem, textData, msgModel = null) {
   let textElem = elem.append('foreignObject');
-  const lines = await renderKatex(textData.text, configApi.getConfig());
+  const linesSanitized = await renderKatexSanitized(textData.text, configApi.getConfig());
 
   const divElem = textElem
     .append('xhtml:div')
     .attr('style', 'width: fit-content;')
     .attr('xmlns', 'http://www.w3.org/1999/xhtml')
-    .html(lines);
+    .html(linesSanitized);
   const dim = divElem.node().getBoundingClientRect();
 
   textElem.attr('height', Math.round(dim.height)).attr('width', Math.round(dim.width));
@@ -963,7 +966,7 @@ const _drawTextCandidateFunc = (function () {
       .append('div')
       .style('text-align', 'center')
       .style('vertical-align', 'middle')
-      .html(await renderKatex(content, configApi.getConfig()));
+      .html(await renderKatexSanitized(content, configApi.getConfig()));
 
     byTspan(content, s, x, y, width, height, textAttrs, conf);
     _setTextAttrs(text, textAttrs);

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

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // @ts-nocheck TODO: Fix types
+import { getConfig } from '../config.js';
 import type { Group } from '../diagram-api/types.js';
+import { sanitizeText } from '../diagrams/common/common.js';
 import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
 import { log } from '../logger.js';
 import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
@@ -21,12 +23,15 @@ function addHtmlSpan(element, node, width, classes, addBackground = false) {
   const label = node.label;
   const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
   div.html(
-    `
+    sanitizeText(
+      `
     <span class="${labelClass} ${classes}" ` +
-      (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
-      '>' +
-      label +
-      '</span>'
+        (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
+        '>' +
+        label +
+        '</span>',
+      getConfig()
+    )
   );
 
   applyStyle(div, node.labelStyle);

pnpm-lock.yaml

@@ -227,14 +227,14 @@ importers:
         specifier: ^1.11.7
         version: 1.11.10
       dompurify:
-        specifier: ^3.0.5
-        version: 3.0.9
+        specifier: ^3.0.5 <3.1.7
+        version: 3.1.6
       elkjs:
         specifier: ^0.9.0
         version: 0.9.2
       katex:
         specifier: ^0.16.9
-        version: 0.16.9
+        version: 0.16.11
       khroma:
         specifier: ^2.0.0
         version: 2.1.0
@@ -8833,8 +8833,8 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
-  /dompurify@3.0.9:
-    resolution: {integrity: sha512-uyb4NDIvQ3hRn6NiC+SIFaP4mJ/MdXlvtunaqK9Bn6dD3RuB/1S/gasEjDHD8eiaqdSael2vBv+hOs7Y+jhYOQ==}
+  /dompurify@3.1.6:
+    resolution: {integrity: sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==}
     dev: false
 
   /domutils@3.1.0:
@@ -12081,8 +12081,8 @@ packages:
     engines: {node: '>=12.20'}
     dev: true
 
-  /katex@0.16.9:
-    resolution: {integrity: sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==}
+  /katex@0.16.11:
+    resolution: {integrity: sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==}
     hasBin: true
     dependencies:
       commander: 8.3.0