marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-14 12:59:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2562 from mermaid-js/2560_balancing_themeCSS

Browse Source 
2560 balancing theme css
This commit is contained in:
Knut Sveidqvist
2021-12-15 19:12:48 +01:00
committed by GitHub
parent 38496c004b 036f9dc359
commit 1baca16a51
5 changed files with 86 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
cypress/integration/rendering/theme.spec.js
View File

@@ -1,5 +1,30 @@
import { imgSnapshotTest } from '../../helpers/util.js';
describe('themeCSS balancing, it', () => {
it('should not allow unbalanced CSS definitions', () => {
imgSnapshotTest(
`
%%{init: { 'themeCSS': '} * { background: red }' } }%%
flowchart TD
a --> b
`,
{}
);
cy.get('svg');
});
it('should not allow unbalanced CSS definitions 2', () => {
imgSnapshotTest(
`
%%{init: { 'themeCSS': '\u007D * { background: red }' } }%%
flowchart TD
a2 --> b2
`,
{}
);
cy.get('svg');
});
});
describe('Pie Chart', () => {
// beforeEach(()=>{
// cy.clock((new Date('2014-06-09')).getTime());

39
cypress/platform/css1.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
body {
font-family: 'trebuchet ms', verdana, arial;
}
</style>
</head>
<body>
<div class="mermaid2">
%%{init: { 'themeCSS': '} * { background: lightblue }' } }%%
flowchart TD
a --> b
</div>
<div class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
flowchart LR
subgraph A
a --> b
end
subgraph B
i -->f
end
A --> B
</div>
<script src="./mermaid.js"></script>
<script>
function showFullFirstSquad(elemName) {
console.log('show ' + elemName);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 0 });
</script>
</body>
</html>

1
src/defaultConfig.js
View File

@@ -37,6 +37,7 @@ const config = {
themeCSS: undefined,
/* **maxTextSize** - The maximum allowed size of the users text diamgram */
maxTextSize: 50000,
darkMode: false,
/**
* | Parameter | Description | Type | Required | Values |

6
src/mermaidAPI.js
View File

@@ -60,7 +60,7 @@ import { attachFunctions } from './interactionDb';
import { log, setLogLevel } from './logger';
import getStyles from './styles';
import theme from './themes';
import utils, { directiveSanitizer, assignWithDepth } from './utils';
import utils, { directiveSanitizer, assignWithDepth, sanitizeCss } from './utils';
/**
* @param text
@@ -223,6 +223,7 @@ const render = function (id, _txt, cb, container) {
let txt = _txt;
const graphInit = utils.detectInit(txt);
if (graphInit) {
directiveSanitizer(graphInit);
configApi.addDirective(graphInit);
}
let cnf = configApi.getConfig();
@@ -533,6 +534,9 @@ const handleDirective = function (p, directive, type) {
p.setWrap(directive.type === 'wrap');
}
break;
case 'themeCss':
log.warn('themeCss encountered');
break;
default:
log.warn(
`Unhandled directive: source: '%%{${directive.type}: ${JSON.stringify(

16
src/utils.js
View File

@@ -974,6 +974,11 @@ export const directiveSanitizer = (args) => {
log.debug('sanitize deleting constr option', key);
delete args[key];
}
if (key.indexOf('themeCSS') >= 0) {
log.debug('sanitizing themeCss option');
args[key] = sanitizeCss(args[key]);
}
if (configKeys.indexOf(key) < 0) {
log.debug('sanitize deleting option', key);
delete args[key];
@@ -987,6 +992,16 @@ export const directiveSanitizer = (args) => {
}
}
};
export const sanitizeCss = (str) => {
const stringsearch = 'o';
const startCnt = (str.match(/\{/g) || []).length;
const endCnt = (str.match(/\}/g) || []).length;
if (startCnt !== endCnt) {
return '{ /* ERROR: Unbalanced CSS */ }';
}
// Todo add more checks here
return str;
};
export default {
assignWithDepth,
@@ -1013,4 +1028,5 @@ export default {
entityDecode,
initIdGeneratior,
directiveSanitizer,
sanitizeCss,
};