diff options
Diffstat (limited to 'app/assets/javascripts/behaviors/markdown/render_mermaid.js')
-rw-r--r-- | app/assets/javascripts/behaviors/markdown/render_mermaid.js | 54 |
1 files changed, 26 insertions, 28 deletions
diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js index 0cb13815c7e..5b5148a850b 100644 --- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js +++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js @@ -1,6 +1,7 @@ import $ from 'jquery'; import { once } from 'lodash'; import { deprecatedCreateFlash as flash } from '~/flash'; +import { darkModeEnabled } from '~/lib/utils/color_utils'; import { __, sprintf } from '~/locale'; // Renders diagrams and flowcharts from text using Mermaid in any element with the @@ -27,37 +28,34 @@ let renderedMermaidBlocks = 0; let mermaidModule = {}; +export function initMermaid(mermaid) { + let theme = 'neutral'; + + if (darkModeEnabled()) { + theme = 'dark'; + } + + mermaid.initialize({ + // mermaid core options + mermaid: { + startOnLoad: false, + }, + // mermaidAPI options + theme, + flowchart: { + useMaxWidth: true, + htmlLabels: false, + }, + securityLevel: 'strict', + }); + + return mermaid; +} + function importMermaidModule() { return import(/* webpackChunkName: 'mermaid' */ 'mermaid') .then((mermaid) => { - let theme = 'neutral'; - const ideDarkThemes = ['dark', 'solarized-dark', 'monokai']; - - if ( - ideDarkThemes.includes(window.gon?.user_color_scheme) && - // if on the Web IDE page - document.querySelector('.ide') - ) { - theme = 'dark'; - } - - mermaid.initialize({ - // mermaid core options - mermaid: { - startOnLoad: false, - }, - // mermaidAPI options - theme, - flowchart: { - useMaxWidth: true, - htmlLabels: false, - }, - securityLevel: 'strict', - }); - - mermaidModule = mermaid; - - return mermaid; + mermaidModule = initMermaid(mermaid); }) .catch((err) => { flash(sprintf(__("Can't load mermaid module: %{err}"), { err })); |