diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index 457cb8244..8dd4ff33c 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -1,11 +1,13 @@ +/* eslint-disable @typescript-eslint/no-non-null-assertion */ import * as configApi from './config.js'; +import type { MermaidConfig } from './config.type.js'; -describe('when working with site config', function () { +describe('when working with site config', () => { beforeEach(() => { // Resets the site config to default config configApi.setSiteConfig({}); }); - it('should set site config and config properly', function () { + it('should set site config and config properly', () => { const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; configApi.setSiteConfig(config_0); const config_1 = configApi.getSiteConfig(); @@ -14,19 +16,26 @@ describe('when working with site config', function () { expect(config_1.fontSize).toEqual(config_0.fontSize); expect(config_1).toEqual(config_2); }); - it('should respect secure keys when applying directives', function () { - const config_0 = { + it('should respect secure keys when applying directives', () => { + const config_0: MermaidConfig = { fontFamily: 'foo-font', + securityLevel: 'strict', // can't be changed fontSize: 12345, // can't be changed secure: [...configApi.defaultConfig.secure!, 'fontSize'], }; configApi.setSiteConfig(config_0); - const directive = { fontFamily: 'baf', fontSize: 54321 /* fontSize shouldn't be changed */ }; - const cfg = configApi.updateCurrentConfig(config_0, [directive]); + const directive: MermaidConfig = { + fontFamily: 'baf', + // fontSize and securityLevel shouldn't be changed + fontSize: 54321, + securityLevel: 'loose', + }; + const cfg: MermaidConfig = configApi.updateCurrentConfig(config_0, [directive]); expect(cfg.fontFamily).toEqual(directive.fontFamily); expect(cfg.fontSize).toBe(config_0.fontSize); + expect(cfg.securityLevel).toBe(config_0.securityLevel); }); - it('should allow setting partial options', function () { + it('should allow setting partial options', () => { const defaultConfig = configApi.getConfig(); configApi.setConfig({ @@ -42,7 +51,7 @@ describe('when working with site config', function () { updatedConfig.quadrantChart!.chartWidth ); }); - it('should set reset config properly', function () { + it('should set reset config properly', () => { const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; configApi.setSiteConfig(config_0); const config_1 = { fontFamily: 'baf' }; @@ -55,7 +64,7 @@ describe('when working with site config', function () { const config_4 = configApi.getSiteConfig(); expect(config_4.fontFamily).toEqual(config_0.fontFamily); }); - it('should set global reset config properly', function () { + it('should set global reset config properly', () => { const config_0 = { fontFamily: 'foo-font', fontSize: 150 }; configApi.setSiteConfig(config_0); const config_1 = configApi.getSiteConfig(); diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index e00663827..c426e9122 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -3,15 +3,16 @@ import { log } from './logger.js'; import theme from './themes/index.js'; import config from './defaultConfig.js'; import type { MermaidConfig } from './config.type.js'; +import { sanitizeDirective } from './utils.js'; export const defaultConfig: MermaidConfig = Object.freeze(config); let siteConfig: MermaidConfig = assignWithDepth({}, defaultConfig); let configFromInitialize: MermaidConfig; -let directives: any[] = []; +let directives: MermaidConfig[] = []; let currentConfig: MermaidConfig = assignWithDepth({}, defaultConfig); -export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: any[]) => { +export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: MermaidConfig[]) => { // start with config being the siteConfig let cfg: MermaidConfig = assignWithDepth({}, siteCfg); // let sCfg = assignWithDepth(defaultConfig, siteConfigDelta); @@ -20,7 +21,6 @@ export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: any[]) let sumOfDirectives: MermaidConfig = {}; for (const d of _directives) { sanitize(d); - // Apply the data from the directive where the the overrides the themeVariables sumOfDirectives = assignWithDepth(sumOfDirectives, d); } @@ -111,12 +111,6 @@ export const getSiteConfig = (): MermaidConfig => { * @returns The currentConfig merged with the sanitized conf */ export const setConfig = (conf: MermaidConfig): MermaidConfig => { - // sanitize(conf); - // Object.keys(conf).forEach(key => { - // const manipulator = manipulators[key]; - // conf[key] = manipulator ? manipulator(conf[key]) : conf[key]; - // }); - checkConfig(conf); assignWithDepth(currentConfig, conf); @@ -188,16 +182,14 @@ export const sanitize = (options: any) => { * * @param directive - The directive to push in */ -export const addDirective = (directive: any) => { - if (directive.fontFamily) { - if (!directive.themeVariables) { - directive.themeVariables = { fontFamily: directive.fontFamily }; - } else { - if (!directive.themeVariables.fontFamily) { - directive.themeVariables = { fontFamily: directive.fontFamily }; - } - } +export const addDirective = (directive: MermaidConfig) => { + sanitizeDirective(directive); + + // If the directive has a fontFamily, but no themeVariables, add the fontFamily to the themeVariables + if (directive.fontFamily && (!directive.themeVariables || !directive.themeVariables.fontFamily)) { + directive.themeVariables = { fontFamily: directive.fontFamily }; } + directives.push(directive); updateCurrentConfig(siteConfig, directives); }; diff --git a/packages/mermaid/src/directiveUtils.ts b/packages/mermaid/src/directiveUtils.ts index 563856631..baf628e74 100644 --- a/packages/mermaid/src/directiveUtils.ts +++ b/packages/mermaid/src/directiveUtils.ts @@ -1,7 +1,5 @@ import * as configApi from './config.js'; - import { log } from './logger.js'; -import { directiveSanitizer } from './utils.js'; let currentDirective: { type?: string; args?: any } | undefined = {}; @@ -60,9 +58,6 @@ const handleDirective = function (p: any, directive: any, type: string): void { delete directive.args[prop]; } }); - log.info('sanitize in handleDirective', directive.args); - directiveSanitizer(directive.args); - log.info('sanitize in handleDirective (done)', directive.args); configApi.addDirective(directive.args); break; } diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index f8a36f88e..35b251bc7 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -23,7 +23,7 @@ import { attachFunctions } from './interactionDb.js'; import { log, setLogLevel } from './logger.js'; import getStyles from './styles.js'; import theme from './themes/index.js'; -import utils, { directiveSanitizer } from './utils.js'; +import utils from './utils.js'; import DOMPurify from 'dompurify'; import { MermaidConfig } from './config.type.js'; import { evaluate } from './diagrams/common/common.js'; @@ -388,7 +388,6 @@ const render = async function ( // Add Directives. Must do this before getting the config and before creating the diagram. const graphInit = utils.detectInit(text); if (graphInit) { - directiveSanitizer(graphInit); configApi.addDirective(graphInit); } diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts index f054ef29f..dd574f86a 100644 --- a/packages/mermaid/src/utils.ts +++ b/packages/mermaid/src/utils.ts @@ -102,8 +102,6 @@ export const detectInit = function (text: string, config?: MermaidConfig): Merma if (Array.isArray(inits)) { const args = inits.map((init) => init.args); - sanitizeDirective(args); - results = assignWithDepth(results, [...args]); } else { results = inits.args;