Merge branch 'develop' into fix-node16-module-resolution

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

@@ -1,10 +1,13 @@
 import createLabel from '../createLabel.js';
+import { createText } from '../../rendering-util/createText.js';
 import { getConfig } from '../../config.js';
 import { decodeEntities } from '../../mermaidAPI.js';
 import { select } from 'd3';
 import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
-export const labelHelper = (parent, node, _classes, isNode) => {
+
+export const labelHelper = async (parent, node, _classes, isNode) => {
   let classes;
+  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
   if (!_classes) {
     classes = 'node default';
   } else {
@@ -27,9 +30,17 @@ export const labelHelper = (parent, node, _classes, isNode) => {
     labelText = typeof node.labelText === 'string' ? node.labelText : node.labelText[0];
   }
 
-  const text = label
-    .node()
-    .appendChild(
+  const textNode = label.node();
+  let text;
+  if (node.labelType === 'markdown') {
+    // text = textNode;
+    text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
+      useHtmlLabels,
+      width: node.width || getConfig().flowchart.wrappingWidth,
+      classes: 'markdown-node-label',
+    });
+  } else {
+    text = textNode.appendChild(
       createLabel(
         sanitizeText(decodeEntities(labelText), getConfig()),
         node.labelStyle,
@@ -37,23 +48,61 @@ export const labelHelper = (parent, node, _classes, isNode) => {
         isNode
       )
     );
+  }
 
   // Get the size of the label
   let bbox = text.getBBox();
+  const halfPadding = node.padding / 2;
 
   if (evaluate(getConfig().flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
+
+    // if there are images, need to wait for them to load before getting the bounding box
+    const images = div.getElementsByTagName('img');
+    if (images) {
+      const noImgText = labelText.replace(/<img[^>]*>/g, '').trim() === '';
+
+      await Promise.all(
+        [...images].map(
+          (img) =>
+            new Promise((res) =>
+              img.addEventListener('load', function () {
+                img.style.display = 'flex';
+                img.style.flexDirection = 'column';
+
+                if (noImgText) {
+                  // default size if no text
+                  const bodyFontSize = getConfig().fontSize
+                    ? getConfig().fontSize
+                    : window.getComputedStyle(document.body).fontSize;
+                  const enlargingFactor = 5;
+                  img.style.width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
+                } else {
+                  img.style.width = '100%';
+                }
+                res(img);
+              })
+            )
+        )
+      );
+    }
+
     bbox = div.getBoundingClientRect();
     dv.attr('width', bbox.width);
     dv.attr('height', bbox.height);
   }
 
-  const halfPadding = node.padding / 2;
-
   // Center the label
-  label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
-
+  if (useHtmlLabels) {
+    label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
+  } else {
+    label.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')');
+  }
+  if (node.centerLabel) {
+    label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
+  }
+  label.insert('rect', ':first-child');
   return { shapeSvg, bbox, halfPadding, label };
 };