fix for broken images, htmlLabel false issues

mermaid-js · Jul 17, 2024 · 15c85ef · 15c85ef
1 parent b3dfb5a
commit 15c85ef
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 9 deletions.
diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
@@ -49,8 +49,8 @@ async function addHtmlSpan(element, node, width, classes, addBackground = false)
     bbox = div.node().getBoundingClientRect();
   }
 
-  fo.style('width', bbox.width);
-  fo.style('height', bbox.height);
+  // fo.style('width', bbox.width);
+  // fo.style('height', bbox.height);
 
   return fo.node();
 }
@@ -231,13 +231,36 @@ export const createText = async (
       structuredText,
       text ? addSvgBackground : false
     );
-    if (/stroke:/.exec(style)) {
-      style = style.replace('stroke:', 'lineColor:');
+    if (isNode) {
+      if (/stroke:/.exec(style)) {
+        style = style.replace('stroke:', 'lineColor:');
+      }
+      select(svgLabel)
+        .select('text')
+        .attr('style', style.replace(/color:/g, 'fill:'));
+      // svgLabel.setAttribute('style', style);
+    } else {
+      //On style, assume `stroke`, `stroke-width` are used for edge path, so remove them
+      // remove `fill`
+      //  use  `background` as `fill` for label rect,
+
+      const edgeLabelRectStyle = style
+        .replace(/stroke:[^;]+;?/g, '')
+        .replace(/stroke-width:[^;]+;?/g, '')
+        .replace(/fill:[^;]+;?/g, '')
+        .replace(/background:/g, 'fill:');
+      select(svgLabel)
+        .select('rect')
+        .attr('style', edgeLabelRectStyle.replace(/background:/g, 'fill:'));
+
+      // for text, update fill color with `color`
+      const edgeLabelTextStyle = style
+        .replace(/stroke:[^;]+;?/g, '')
+        .replace(/stroke-width:[^;]+;?/g, '')
+        .replace(/fill:[^;]+;?/g, '')
+        .replace(/color:/g, 'fill:');
+      select(svgLabel).select('text').attr('style', edgeLabelTextStyle);
     }
-    select(svgLabel)
-      .select('text')
-      .attr('style', style.replace(/color:/g, 'fill:'));
-    // svgLabel.setAttribute('style', style);
     return svgLabel;
   }
 };
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.ts
@@ -9,8 +9,10 @@ import type { MermaidConfig } from '../config.type.js';
  * @returns processed markdown
  */
 function preprocessMarkdown(markdown: string, { markdownAutoWrap }: MermaidConfig): string {
+  //Replace <br/>with \n
+  const withoutBR = markdown.replace(/<br\/>/g, '\n');
   // Replace multiple newlines with a single newline
-  const withoutMultipleNewlines = markdown.replace(/\n{2,}/g, '\n');
+  const withoutMultipleNewlines = withoutBR.replace(/\n{2,}/g, '\n');
   // Remove extra spaces at the beginning of each line
   const withoutExtraSpaces = dedent(withoutMultipleNewlines);
   if (markdownAutoWrap === false) {
@@ -46,6 +48,8 @@ export function markdownToLines(markdown: string, config: MermaidConfig = {}): M
       node.tokens.forEach((contentNode) => {
         processNode(contentNode as MarkedToken, node.type);
       });
+    } else if (node.type === 'html') {
+      lines[currentLine].push({ content: node.text, type: 'normal' });
     }
   }
 
@@ -54,6 +58,8 @@ export function markdownToLines(markdown: string, config: MermaidConfig = {}): M
       treeNode.tokens?.forEach((contentNode) => {
         processNode(contentNode as MarkedToken);
       });
+    } else if (treeNode.type === 'html') {
+      lines[currentLine].push({ content: treeNode.text, type: 'normal' });
     }
   });