diff --git a/ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.ts b/ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.ts index 743828f625..b62e897158 100644 --- a/ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.ts +++ b/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', }, ]; diff --git a/ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid_render.js b/ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid_render.js index 97bd4ef7b7..bed3f31329 100644 --- a/ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid_render.js +++ b/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', () => { diff --git a/ReactNativeClient/lib/joplin-renderer/assets/mermaid/mermaid_render.js b/ReactNativeClient/lib/joplin-renderer/assets/mermaid/mermaid_render.js index 97bd4ef7b7..52bc065c05 100644 --- a/ReactNativeClient/lib/joplin-renderer/assets/mermaid/mermaid_render.js +++ b/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', () => {