public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 01:36:22 +00:00
Code Issues Releases Wiki Activity

mermaid diagram rendering for dark themes is now fixed

Browse Source
This commit is contained in:
William Grant
2018-07-21 19:20:20 +10:00
parent 6cad2ab4df
commit eff56c2514
2 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/components/MarkdownPreview.js
View File

@@ -556,7 +556,7 @@ export default class MarkdownPreview extends React.Component {
_.forEach( _.forEach(
this.refs.root.contentWindow.document.querySelectorAll('.mermaid'), this.refs.root.contentWindow.document.querySelectorAll('.mermaid'),
(el) => { (el) => {
mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML)) mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme)
} }
) )
} }

13
browser/components/render/MermaidRender.js
View File

@@ -1,5 +1,11 @@
import mermaidAPI from 'mermaid' import mermaidAPI from 'mermaid'
// fixes bad styling in the mermaid dark theme
const darkThemeStyling = `
.loopText tspan {
fill: white;
}`
function getRandomInt (min, max) { function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min)) + min return Math.floor(Math.random() * (max - min)) + min
} }
@@ -13,8 +19,13 @@ function getId () {
return id return id
} }
function render (element, content) { function render (element, content, theme) {
try { try {
let isDarkTheme = theme === "dark" || theme === "solarized-dark" || theme === "monokai"
mermaidAPI.initialize({
theme: isDarkTheme ? "dark" : "default",
themeCSS: isDarkTheme ? darkThemeStyling : ""
})
mermaidAPI.render(getId(), content, (svgGraph) => { mermaidAPI.render(getId(), content, (svgGraph) => {
element.innerHTML = svgGraph element.innerHTML = svgGraph
}) })