feat: support esm

packages/mermaid-example-diagram/package.json

@@ -38,9 +38,9 @@
     ]
   },
   "dependencies": {
-    "@braintree/sanitize-url": "^7.0.0",
     "d3": "^7.9.0",
-    "khroma": "^2.1.0"
+    "khroma": "^2.1.0",
+    "micromark-util-sanitize-uri": "^2.0.0"
   },
   "devDependencies": {
     "concurrently": "^8.2.2",

packages/mermaid/package.json

@@ -68,7 +68,6 @@
     ]
   },
   "dependencies": {
-    "@braintree/sanitize-url": "^7.0.1",
     "@mermaid-js/parser": "workspace:^",
     "cytoscape": "^3.29.2",
     "cytoscape-cose-bilkent": "^4.1.0",
@@ -82,6 +81,7 @@
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
     "mdast-util-from-markdown": "^2.0.0",
+    "micromark-util-sanitize-uri": "^2.0.0",
     "stylis": "^4.3.1",
     "ts-dedent": "^2.2.0",
     "uuid": "^9.0.1"

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

@@ -1,6 +1,6 @@
 import common from '../common/common.js';
 import * as svgDrawCommon from '../common/svgDrawCommon.js';
-import { sanitizeUrl } from '@braintree/sanitize-url';
+import { sanitizeUri } from 'micromark-util-sanitize-uri';
 
 export const drawRect = function (elem, rectData) {
   return svgDrawCommon.drawRect(elem, rectData);
@@ -12,7 +12,7 @@ export const drawImage = function (elem, width, height, x, y, link) {
   imageElem.attr('height', height);
   imageElem.attr('x', x);
   imageElem.attr('y', y);
-  let sanitizedLink = link.startsWith('data:image/png;base64') ? link : sanitizeUrl(link);
+  let sanitizedLink = link.startsWith('data:image/png;base64') ? link : sanitizeUri(link);
   imageElem.attr('xlink:href', sanitizedLink);
 };
 

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

@@ -1,4 +1,4 @@
-import { sanitizeUrl } from '@braintree/sanitize-url';
+import { sanitizeUri } from 'micromark-util-sanitize-uri';
 import type { Group, SVG } from '../../diagram-api/types.js';
 import type {
   Bound,
@@ -80,7 +80,7 @@ export const drawImage = (elem: SVG | Group, x: number, y: number, link: string)
   const imageElement: D3ImageElement = elem.append('image');
   imageElement.attr('x', x);
   imageElement.attr('y', y);
-  const sanitizedLink: string = sanitizeUrl(link);
+  const sanitizedLink: string = sanitizeUri(link);
   imageElement.attr('xlink:href', sanitizedLink);
 };
 
@@ -93,7 +93,7 @@ export const drawEmbeddedImage = (
   const imageElement: D3UseElement = element.append('use');
   imageElement.attr('x', x);
   imageElement.attr('y', y);
-  const sanitizedLink: string = sanitizeUrl(link);
+  const sanitizedLink: string = sanitizeUri(link);
   imageElement.attr('xlink:href', `#${sanitizedLink}`);
 };
 

packages/mermaid/src/diagrams/gantt/ganttDb.js

@@ -1,5 +1,5 @@
-import { sanitizeUrl } from '@braintree/sanitize-url';
-import dayjs from 'dayjs';
+import { sanitizeUri } from 'micromark-util-sanitize-uri';
+import dayjs from 'dayjs/esm/index.js';
 import dayjsIsoWeek from 'dayjs/plugin/isoWeek.js';
 import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat.js';
 import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat.js';
@@ -631,7 +631,7 @@ const compileTasks = function () {
 export const setLink = function (ids, _linkStr) {
   let linkStr = _linkStr;
   if (getConfig().securityLevel !== 'loose') {
-    linkStr = sanitizeUrl(_linkStr);
+    linkStr = sanitizeUri(_linkStr);
   }
   ids.split(',').forEach(function (id) {
     let rawTask = findTaskById(id);

packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck TODO: Fix TS
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm/index.js';
 import ganttDb from './ganttDb.js';
 import { convert } from '../../tests/util.js';
 

packages/mermaid/src/diagrams/gantt/ganttRenderer.js

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm/index.js';
 import { log } from '../../logger.js';
 import {
   select,

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

@@ -1,7 +1,7 @@
 import common, { calculateMathMLDimensions, hasKatex, renderKatex } from '../common/common.js';
 import * as svgDrawCommon from '../common/svgDrawCommon.js';
 import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
-import { sanitizeUrl } from '@braintree/sanitize-url';
+import { sanitizeUri } from 'micromark-util-sanitize-uri';
 import * as configApi from '../../config.js';
 
 export const ACTOR_TYPE_WIDTH = 18 * 2;
@@ -53,7 +53,7 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
     var linkY = 20;
     for (let key in links) {
       var linkElem = g.append('a');
-      var sanitizedLink = sanitizeUrl(links[key]);
+      var sanitizedLink = sanitizeUri(links[key]);
       linkElem.attr('xlink:href', sanitizedLink);
       linkElem.attr('target', '_blank');
 
@@ -1119,5 +1119,5 @@ export default {
   getTextObj,
   getNoteRect,
   fixLifeLineHeights,
-  sanitizeUrl,
+  sanitizeUri,
 };

packages/mermaid/src/logger.ts

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable no-console */
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm/index.js';
 
 export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
 

packages/mermaid/src/utils.spec.ts

@@ -326,7 +326,7 @@ describe('when formatting urls', function () {
     expect(result).toEqual(url);
 
     result = utils.formatUrl(url, { securityLevel: 'strict' });
-    expect(result).toEqual('about:blank');
+    expect(result).toEqual('javascript:alert(%22test%22)');
   });
 });
 

packages/mermaid/src/utils.ts

@@ -1,4 +1,4 @@
-import { sanitizeUrl } from '@braintree/sanitize-url';
+import { sanitizeUri } from 'micromark-util-sanitize-uri';
 import type { CurveFactory } from 'd3';
 import {
   curveBasis,
@@ -258,7 +258,7 @@ export function formatUrl(linkStr: string, config: MermaidConfig): string | unde
   }
 
   if (config.securityLevel !== 'loose') {
-    return sanitizeUrl(url);
+    return sanitizeUri(url);
   }
 
   return url;