Commit dd243953 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'psi-dark-mermaid' into 'master'

Fix mermaid diagrams in dark mode

See merge request gitlab-org/gitlab!56183
parents aa259ef5 fef34301
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 }));
......
......@@ -43,3 +43,15 @@ export const validateHexColor = (color = '') => {
return /^#([0-9A-F]{3}){1,2}$/i.test(color);
};
export function darkModeEnabled() {
const ideDarkThemes = ['dark', 'solarized-dark', 'monokai'];
// eslint-disable-next-line @gitlab/require-i18n-strings
const isWebIde = document.body.dataset.page.startsWith('ide:');
if (isWebIde) {
return ideDarkThemes.includes(window.gon?.user_color_scheme);
}
return document.body.classList.contains('gl-dark');
}
---
title: Fix mermaid diagrams in dark mode
merge_request: 56183
author:
type: fixed
import { initMermaid } from '~/behaviors/markdown/render_mermaid';
import * as ColorUtils from '~/lib/utils/color_utils';
describe('Render mermaid diagrams for Gitlab Flavoured Markdown', () => {
it.each`
darkMode | expectedTheme
${false} | ${'neutral'}
${true} | ${'dark'}
`('is $darkMode $expectedTheme', async ({ darkMode, expectedTheme }) => {
jest.spyOn(ColorUtils, 'darkModeEnabled').mockImplementation(() => darkMode);
const mermaid = {
initialize: jest.fn(),
};
await initMermaid(mermaid);
expect(mermaid.initialize).toHaveBeenCalledTimes(1);
expect(mermaid.initialize).toHaveBeenCalledWith(
expect.objectContaining({
theme: expectedTheme,
}),
);
});
});
import { textColorForBackground, hexToRgb, validateHexColor } from '~/lib/utils/color_utils';
import {
textColorForBackground,
hexToRgb,
validateHexColor,
darkModeEnabled,
} from '~/lib/utils/color_utils';
describe('Color utils', () => {
describe('Converting hex code to rgb', () => {
......@@ -47,4 +52,24 @@ describe('Color utils', () => {
expect(validateHexColor(color)).toEqual(output);
});
});
describe('darkModeEnabled', () => {
it.each`
page | bodyClass | ideTheme | expected
${'ide:index'} | ${'gl-dark'} | ${'monokai-light'} | ${false}
${'ide:index'} | ${'ui-light'} | ${'monokai'} | ${true}
${'groups:issues:index'} | ${'ui-light'} | ${'monokai'} | ${false}
${'groups:issues:index'} | ${'gl-dark'} | ${'monokai-light'} | ${true}
`(
'is $expected on $page with $bodyClass body class and $ideTheme IDE theme',
async ({ page, bodyClass, ideTheme, expected }) => {
document.body.outerHTML = `<body class="${bodyClass}" data-page="${page}"></body>`;
window.gon = {
user_color_scheme: ideTheme,
};
expect(darkModeEnabled()).toBe(expected);
},
);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment