@farberg/reveal-template 1.1.13 → 1.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farberg/reveal-template",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "homepage": "https://github.com/pfisterer/reveal-template",
   "description": "Reveal.js template for Dennis' lectures",
   "main": "index.js",

package/plugins/reveal-plugin-mermaid.js

@@ -14,6 +14,7 @@ export default {
 		mermaid.initialize({
 			'startOnLoad': false,
 			'theme': 'base',
+			'fontSize': 13,
 			'themeVariables': {
 				'textColor': '#000',
 				'primaryColor': '#e2001a',
@@ -31,38 +32,75 @@ export default {
 			},
 			'flowchart': {
 				'useMaxWidth': true,
-				'htmlLabels': true
+				'padding': 6
 			}
 		});
 
 		function fixSvgScaling(el) {
-			el.querySelectorAll('pre.mermaid svg').forEach(svg => {
-				// mermaid v10+ sets style="max-width: Xpx" which constrains width —
-				// remove it and let the container CSS drive the size instead
+			el.querySelectorAll('.mermaid svg').forEach(svg => {
+				// Ensure viewBox so width:100% scales content proportionally
+				if (!svg.getAttribute('viewBox')) {
+					const w = parseFloat(svg.getAttribute('width'));
+					const h = parseFloat(svg.getAttribute('height'));
+					if (w && h) svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+				}
+				svg.setAttribute('width', '100%');
+				svg.removeAttribute('height');
 				svg.style.maxWidth = '100%';
 				svg.style.width = '100%';
 				svg.style.height = 'auto';
+
+				// mermaid v11 measures text before the document font is loaded,
+				// producing foreignObjects that are too narrow for the actual rendered text.
+				// Measure the real content width and expand each foreignObject to fit,
+				// then shift the label group by half the difference to keep it centered.
+				svg.querySelectorAll('foreignObject').forEach(fo => {
+					fo.setAttribute('overflow', 'visible');
+					const inner = fo.firstElementChild;
+					if (!inner) return;
+					const actualWidth = inner.scrollWidth;
+					const foWidth = parseFloat(fo.getAttribute('width')) || 0;
+					if (actualWidth > foWidth) {
+						const extra = actualWidth - foWidth;
+						fo.setAttribute('width', actualWidth);
+						const labelG = fo.parentElement;
+						if (labelG && labelG.hasAttribute('transform')) {
+							const m = labelG.getAttribute('transform')
+								.match(/translate\((-?[\d.]+),\s*(-?[\d.]+)\)/);
+							if (m) {
+								labelG.setAttribute('transform',
+									`translate(${parseFloat(m[1]) - extra / 2}, ${m[2]})`);
+							}
+						}
+					}
+				});
 			});
 		}
 
-		function handle(el) {
-			// Convert ```mermaid code blocks into pre.mermaid elements.
-			// highlight.js processes them first (adding spans, encoding arrows as >),
-			// so we read textContent to strip spans and decode HTML entities back to raw source.
+		async function handle(el) {
+			// Convert ```mermaid code blocks to .mermaid elements.
+			// highlight.js runs first: adds <span> tags and encodes --> as &gt;.
+			// textContent strips spans and decodes HTML entities back to raw mermaid source.
 			el.querySelectorAll('code.mermaid').forEach(code => {
-				if (code.closest('pre.mermaid')) return; // already converted
-				const pre = code.parentElement;
-				pre.className = 'mermaid';
-				pre.textContent = code.textContent;
+				const oldPre = code.parentElement;
+				if (oldPre.classList.contains('mermaid')) return;
+				const newPre = document.createElement('pre');
+				newPre.className = 'mermaid';
+				newPre.textContent = code.textContent;
+				oldPre.replaceWith(newPre);
 			});
 
-			const mermaids = el.querySelectorAll('pre.mermaid');
-			const result = mermaid.run({ nodes: mermaids });
-			if (result && typeof result.then === 'function') {
-				result.then(() => fixSvgScaling(el));
-			} else {
-				setTimeout(() => fixSvgScaling(el), 100);
-			}
+			// Yield so DOM mutations are flushed before mermaid reads them
+			await new Promise(resolve => requestAnimationFrame(resolve));
+
+			// Skip elements already rendered (contain an SVG)
+			const unrendered = [...el.querySelectorAll('.mermaid')].filter(
+				node => !node.querySelector('svg') && node.textContent.trim().length > 0
+			);
+			if (unrendered.length === 0) return;
+
+			await mermaid.run({ nodes: unrendered, suppressErrors: true });
+			fixSvgScaling(el);
 		}
 
 		deck.on('ready', event => {
@@ -77,22 +115,29 @@ export default {
 				text-align: center;
 				overflow: visible;
 			  }
-			  pre.mermaid svg {
+			  .mermaid svg {
 				max-width: 100%;
 				height: auto;
 			  }
+			  .mermaid svg foreignObject {
+				overflow: visible;
+			  }
+			  .mermaid svg foreignObject * {
+				font-size: 13px !important;
+				font-family: arial, sans-serif !important;
+				line-height: 1.5 !important;
+			  }
 			`;
 			document.head.appendChild(style);
 
 			const print = window.location.search.match(/print-pdf/gi);
-
 			if (print) {
-				console.log("print-pdf detected, rendering mermaid diagrams")
+				console.log("print-pdf detected, rendering mermaid diagrams");
 				handle(document);
 			} else {
 				deck.addEventListener('slidechanged', e => handle(e.currentSlide));
 				handle(event.currentSlide);
 			}
-		})
+		});
 	}
 }