Desktop, Mobile: Fixes #2638: Improved Mermaid rendering on small viewports

ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.ts

@@ -6,7 +6,10 @@ function addContextAssets(context:any) {
 		{ name: 'mermaid_render.js' },
 		{
 			inline: true,
-			text: '.mermaid { background-color: white }',
+			// Note: Mermaid is buggy when rendering below a certain width (500px?)
+			// so set an arbitrarily high width here for the container. Once the
+			// diagram is rendered it will be reset to 100% in mermaid_render.js
+			text: '.mermaid { background-color: white; width: 640px; }',
 			mime: 'text/css',
 		},
 	];

ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid_render.js

@@ -8,7 +8,19 @@ function mermaidInit() {
 	// Mermaid's wonderful API has two init methods: init() and initialize().
 	// init() is deprectated but works, and initialize() is recommended but doesn't
 	// work, so let's use init() for now.
-	if (mermaidReady()) mermaid.init();
+	if (mermaidReady()) {
+		try {
+			mermaid.init();
+		} catch (error) {
+			console.error('Mermaid error', error);
+		}
+
+		// Resetting elements size - see mermaid.ts
+		const elements = document.getElementsByClassName('mermaid');
+		for (const element of elements) {
+			element.style.width = '100%';
+		}
+	}
 }
 
 document.addEventListener('joplin-noteDidUpdate', () => {

ReactNativeClient/lib/joplin-renderer/assets/mermaid/mermaid_render.js

@@ -8,7 +8,18 @@ function mermaidInit() {
 	// Mermaid's wonderful API has two init methods: init() and initialize().
 	// init() is deprectated but works, and initialize() is recommended but doesn't
 	// work, so let's use init() for now.
-	if (mermaidReady()) mermaid.init();
+	if (mermaidReady()) {
+		try {
+			mermaid.init();
+		} catch (error) {
+			console.error('Mermaid error', error);
+		}
+
+		const elements = document.getElementsByClassName('mermaid');
+		for (const element of elements) {
+			element.style.width = '100%';
+		}
+	}
 }
 
 document.addEventListener('joplin-noteDidUpdate', () => {