From eff56c251436520ed0a5b67ed55e4b0b17e0154e Mon Sep 17 00:00:00 2001 From: William Grant Date: Sat, 21 Jul 2018 19:20:20 +1000 Subject: [PATCH 1/2] mermaid diagram rendering for dark themes is now fixed --- browser/components/MarkdownPreview.js | 2 +- browser/components/render/MermaidRender.js | 13 ++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 1cec5cdd4..37c9e9f6a 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -556,7 +556,7 @@ export default class MarkdownPreview extends React.Component { _.forEach( this.refs.root.contentWindow.document.querySelectorAll('.mermaid'), (el) => { - mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML)) + mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme) } ) } diff --git a/browser/components/render/MermaidRender.js b/browser/components/render/MermaidRender.js index e057cf345..fcbc97eb9 100644 --- a/browser/components/render/MermaidRender.js +++ b/browser/components/render/MermaidRender.js @@ -1,5 +1,11 @@ import mermaidAPI from 'mermaid' +// fixes bad styling in the mermaid dark theme +const darkThemeStyling = ` +.loopText tspan { + fill: white; +}` + function getRandomInt (min, max) { return Math.floor(Math.random() * (max - min)) + min } @@ -13,8 +19,13 @@ function getId () { return id } -function render (element, content) { +function render (element, content, theme) { try { + let isDarkTheme = theme === "dark" || theme === "solarized-dark" || theme === "monokai" + mermaidAPI.initialize({ + theme: isDarkTheme ? "dark" : "default", + themeCSS: isDarkTheme ? darkThemeStyling : "" + }) mermaidAPI.render(getId(), content, (svgGraph) => { element.innerHTML = svgGraph }) From 16c62cd46fd8acf6fc71b514e56955c84162f978 Mon Sep 17 00:00:00 2001 From: William Grant Date: Sat, 21 Jul 2018 19:31:40 +1000 Subject: [PATCH 2/2] changed double quotes to single quotes --- browser/components/render/MermaidRender.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/browser/components/render/MermaidRender.js b/browser/components/render/MermaidRender.js index fcbc97eb9..12dce327c 100644 --- a/browser/components/render/MermaidRender.js +++ b/browser/components/render/MermaidRender.js @@ -21,10 +21,10 @@ function getId () { function render (element, content, theme) { try { - let isDarkTheme = theme === "dark" || theme === "solarized-dark" || theme === "monokai" + let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' mermaidAPI.initialize({ - theme: isDarkTheme ? "dark" : "default", - themeCSS: isDarkTheme ? darkThemeStyling : "" + theme: isDarkTheme ? 'dark' : 'default', + themeCSS: isDarkTheme ? darkThemeStyling : '' }) mermaidAPI.render(getId(), content, (svgGraph) => { element.innerHTML = svgGraph