Add support for markdown-style links in line messages

mermaid-js · Dec 29, 2024 · 8abc5e8 · 8abc5e8
1 parent df636c6
commit 8abc5e8
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 5 deletions.
diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
@@ -303,6 +303,16 @@ export const katexRegex = /\$\$(.*)\$\$/g;
  */
 export const hasKatex = (text: string): boolean => (text.match(katexRegex)?.length ?? 0) > 0;
 
+export const markdownLinkRegex = /\[([^\]]+)]\(([^)]+)\)/;
+
+/**
+ * Detect markdown links
+ *
+ * @param text - The text to test
+ * @returns Whether or not the text has markdown links
+ */
+export const hasMarkdownLink = (text: string): boolean => markdownLinkRegex.test(text);
+
 /**
  * Computes the minimum dimensions needed to display a div containing MathML
  *

diff --git a/packages/mermaid/src/diagrams/sequence/styles.js b/packages/mermaid/src/diagrams/sequence/styles.js
@@ -48,6 +48,10 @@ const getStyles = (options) =>
     stroke: none;
   }
 
+  .link {
+    fill: #0000EE;
+  }
+
   .labelBox {
     stroke: ${options.labelBoxBorderColor};
     fill: ${options.labelBoxBkgColor};

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -1,4 +1,10 @@
-import common, { calculateMathMLDimensions, hasKatex, renderKatex } from '../common/common.js';
+import common, {
+  calculateMathMLDimensions,
+  hasKatex,
+  renderKatex,
+  hasMarkdownLink,
+  markdownLinkRegex,
+} 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';
@@ -127,6 +133,65 @@ export const drawKatex = async function (elem, textData, msgModel = null) {
   return [textElem];
 };
 
+export const drawLink = function (elem, label, url) {
+  elem
+    .append('a')
+    .attr('xlink:href', sanitizeUrl(url))
+    .attr('xlink:show', 'new')
+    .attr('target', '_blank')
+    .attr('rel', 'noopener noreferrer')
+    .append('tspan')
+    .attr('class', 'link')
+    .text(label);
+};
+
+export const drawMarkdownLinkText = function (elem, text) {
+  // Split text into segments - links and text between links
+  const segments = [];
+  let remainingText = text;
+  let match;
+
+  // Markdown link regex: [text](url)
+  const linkRegex = markdownLinkRegex;
+
+  while ((match = remainingText.match(linkRegex))) {
+    // Push text before link if exists
+    if (match.index > 0) {
+      segments.push({
+        type: 'text',
+        content: remainingText.substring(0, match.index),
+      });
+    }
+
+    // Push link
+    segments.push({
+      type: 'link',
+      text: match[1],
+      url: match[2],
+    });
+
+    // Update remaining text
+    remainingText = remainingText.substring(match.index + match[0].length);
+  }
+
+  // Push remaining text if any
+  if (remainingText) {
+    segments.push({
+      type: 'text',
+      content: remainingText,
+    });
+  }
+
+  // Append all segments
+  segments.forEach((segment) => {
+    if (segment.type === 'link') {
+      drawLink(elem, segment.text, segment.url);
+    } else {
+      elem.append('tspan').text(segment.content);
+    }
+  });
+};
+
 export const drawText = function (elem, textData) {
   let prevTextHeight = 0;
   let textHeight = 0;
@@ -234,13 +299,19 @@ export const drawText = function (elem, textData) {
     }
 
     const text = line || ZERO_WIDTH_SPACE;
+    let textSpan;
     if (textData.tspan) {
-      const span = textElem.append('tspan');
-      span.attr('x', textData.x);
+      textSpan = textElem.append('tspan');
+      textSpan.attr('x', textData.x);
       if (textData.fill !== undefined) {
-        span.attr('fill', textData.fill);
+        textSpan.attr('fill', textData.fill);
       }
-      span.text(text);
+    } else {
+      textSpan = textElem;
+    }
+
+    if (hasMarkdownLink(text)) {
+      drawMarkdownLinkText(textSpan, text);
     } else {
       textElem.text(text);
     }