From 9c12502a36a56beda26572e2d43071a1073bda61 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 14 Dec 2021 23:54:31 +0100 Subject: [PATCH 1/2] #2560 Tetsing that the added css have balanced brackets --- cypress/integration/rendering/theme.spec.js | 25 ++++++++++++++++++ cypress/platform/css1.html | 28 +++++++++++++++++++++ src/mermaidAPI.js | 6 ++++- src/utils.js | 16 ++++++++++++ 4 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 cypress/platform/css1.html diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/integration/rendering/theme.spec.js index f42dd0c2f..30a7efb7f 100644 --- a/cypress/integration/rendering/theme.spec.js +++ b/cypress/integration/rendering/theme.spec.js @@ -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()); diff --git a/cypress/platform/css1.html b/cypress/platform/css1.html new file mode 100644 index 000000000..efb37a53a --- /dev/null +++ b/cypress/platform/css1.html @@ -0,0 +1,28 @@ + + + + + + Mermaid Quick Test Page + + + + +
+ %%{init: { 'themeCSS': '} * { background: lightblue }' } }%% + flowchart TD + a --> b +
+ + + + diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 0e73b3032..e51f22468 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -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( diff --git a/src/utils.js b/src/utils.js index 90a087f9f..012fb98d3 100644 --- a/src/utils.js +++ b/src/utils.js @@ -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, }; From 036f9dc35921bda3d10f641a592cdd45113860c6 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 15 Dec 2021 00:19:04 +0100 Subject: [PATCH 2/2] #2560 Adding dark mode to allowed options in directives --- cypress/platform/css1.html | 13 ++++++++++++- src/defaultConfig.js | 1 + 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/cypress/platform/css1.html b/cypress/platform/css1.html index efb37a53a..f02892123 100644 --- a/cypress/platform/css1.html +++ b/cypress/platform/css1.html @@ -12,11 +12,22 @@ -
+
%%{init: { 'themeCSS': '} * { background: lightblue }' } }%% flowchart TD a --> b
+
+ %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%% + flowchart LR + subgraph A + a --> b + end + subgraph B + i -->f + end + A --> B +