Merge pull request #5856 from mermaid-js/5787_firefox_label_width

#5787 Fix for issue with labels in firefox
mermaid-js · Sep 12, 2024 · 17c6ed6 · 17c6ed6
2 parents dd03043 + bfd8c63
commit 17c6ed6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/.changeset/dry-plums-glow.md b/.changeset/dry-plums-glow.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+Fix for issue with calculation of label width when using in firefox
diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
@@ -20,6 +20,11 @@ function applyStyle(dom, styleFn) {
 
 async function addHtmlSpan(element, node, width, classes, addBackground = false) {
   const fo = element.append('foreignObject');
+  // This is not the final width but used in order to make sure the foreign
+  // object in firefox gets a width at all. The final width is fetched from the div
+  fo.attr('width', `${10 * width}px`);
+  fo.attr('height', `${10 * width}px`);
+
   const div = fo.append('xhtml:div');
   let label = node.label;
   if (node.label && hasKatex(node.label)) {
@@ -201,7 +206,7 @@ export const createText = async (
   } = {},
   config: MermaidConfig
 ) => {
-  log.info(
+  log.debug(
     'XYZ createText',
     text,
     style,