From 2f4af87bf70bf3839054bdb8a47d6d19d1026c48 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 20 Aug 2022 16:22:48 +0530 Subject: [PATCH 1/5] Fix `securityLevel` docs --- docs/Setup.md | 10 +++++----- docs/usage.md | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/Setup.md b/docs/Setup.md index 85070a1e7..7a253e521 100644 --- a/docs/Setup.md +++ b/docs/Setup.md @@ -72,16 +72,16 @@ Theme , the CSS style sheet ## securityLevel -| Parameter | Description | Type | Required | Values | -| ------------- | --------------------------------- | ------ | -------- | ------------------------------- | -| securitylevel | Level of trust for parsed diagram | string | Required | 'strict', 'loose', 'antiscript' | +| Parameter | Description | Type | Required | Values | +| ------------- | --------------------------------- | ------ | -------- | ------------------------- | +| securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' | **Notes**: - **strict**: (**default**) tags in text are encoded, click functionality is disabled - **loose**: tags in text are allowed, click functionality is enabled -- **antiscript**: html tags in text are allowed, (only script element is removed), click - functionality is enabled +- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled +- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. ## startOnLoad diff --git a/docs/usage.md b/docs/usage.md index ac126631a..1815f0a36 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -107,7 +107,7 @@ Mermaid can load multiple diagrams, in the same page. | Parameter | Description | Type | Required | Values | | ------------- | --------------------------------- | ------ | -------- | ------------------------- | -| securityLevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript , sandbox| +| securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' | Values: @@ -118,7 +118,7 @@ Values: ```note -This changes the default behaviour of mermaid so that after upgrade to 8.2,unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled. +This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled. **sandbox** security level is still in the beta version. ``` From 2e392232eb05b39057145534f7cf2cad61ccec4a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 20 Aug 2022 16:39:35 +0530 Subject: [PATCH 2/5] Prettier --- docs/Setup.md | 150 ++++++++++++++++++++++++-------------------------- 1 file changed, 73 insertions(+), 77 deletions(-) diff --git a/docs/Setup.md b/docs/Setup.md index 7a253e521..5f26f57c4 100644 --- a/docs/Setup.md +++ b/docs/Setup.md @@ -72,8 +72,8 @@ Theme , the CSS style sheet ## securityLevel -| Parameter | Description | Type | Required | Values | -| ------------- | --------------------------------- | ------ | -------- | ------------------------- | +| Parameter | Description | Type | Required | Values | +| ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ | | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' | **Notes**: @@ -81,7 +81,7 @@ Theme , the CSS style sheet - **strict**: (**default**) tags in text are encoded, click functionality is disabled - **loose**: tags in text are allowed, click functionality is enabled - **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled -- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. +- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. ## startOnLoad @@ -1405,10 +1405,10 @@ This sets the auto-wrap padding for the diagram (sides only) ### Parameters -- `text` -- `dia` +- `text` +- `dia` -Returns **any** +Returns **any** ## setSiteConfig @@ -1425,7 +1425,7 @@ function _Default value: At default, will mirror Global Config_ ### Parameters -- `conf` The base currentConfig to use as siteConfig +- `conf` The base currentConfig to use as siteConfig Returns **[object][5]** The siteConfig @@ -1477,14 +1477,14 @@ Function that renders an svg with a graph from a chart definition. Usage example ```javascript mermaidAPI.initialize({ - startOnLoad: true, + startOnLoad: true, }); $(function () { - const graphDefinition = 'graph TB\na-->b'; - const cb = function (svgGraph) { - console.log(svgGraph); - }; - mermaidAPI.render('id1', graphDefinition, cb); + const graphDefinition = 'graph TB\na-->b'; + const cb = function (svgGraph) { + console.log(svgGraph); + }; + mermaidAPI.render('id1', graphDefinition, cb); }); ``` @@ -1494,10 +1494,10 @@ $(function () { - `_txt` **any** The graph definition - `cb` **any** Callback which is called after rendering is finished with the svg code as inparam. - `container` **any** Selector to element in which a div with the graph temporarily will be - inserted. In one is provided a hidden div will be inserted in the body of the page instead. The - element will be removed when rendering is completed. + inserted. In one is provided a hidden div will be inserted in the body of the page instead. The + element will be removed when rendering is completed. -Returns **any** +Returns **any** ## sanitize @@ -1542,84 +1542,80 @@ Pushes in a directive to the configuration ### Parameters -- `conf` **any** +- `conf` **any** ## initialize ### Parameters -- `options` **any** +- `options` **any** -## +## ## mermaidAPI configuration defaults ```html ``` [1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js - [2]: Setup.md?id=render - [3]: 8.6.0_docs.md - [4]: #mermaidapi-configuration-defaults - [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object From 34ea67c8c476acd8ad3d5bfb10c760b7f2f0a584 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 20 Aug 2022 16:45:17 +0530 Subject: [PATCH 3/5] Fix prettier formatting in vscode Plugins are automatically loaded https://prettier.io/docs/en/plugins.html#using-plugins --- .prettierrc.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/.prettierrc.json b/.prettierrc.json index 8cadfefaf..0835748d6 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,8 +1,5 @@ { "endOfLine": "auto", - "plugins": [ - "prettier-plugin-jsdoc" - ], "printWidth": 100, "singleQuote": true } \ No newline at end of file From 8d3617f0c79ca142553ec9ce41faa61bbe03076a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 20 Aug 2022 16:49:31 +0530 Subject: [PATCH 4/5] Lint markdown --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e71afdc89..b8819ea43 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "postbuild": "documentation build src/mermaidAPI.js src/config.js src/defaultConfig.js --shallow -f md --markdown-toc false > docs/Setup.md", "build:watch": "yarn build:development --watch", "release": "yarn build", - "lint": "eslint ./ --ext .js,.json,.html", + "lint": "eslint ./ --ext .js,.json,.html,.md", "lint:fix": "yarn lint --fix", "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js", "cypress": "cypress run", @@ -122,4 +122,4 @@ "**/*.css", "**/*.scss" ] -} +} \ No newline at end of file From 248a7aff7a7fdcd60fa038826327bb9dd0749542 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 23 Aug 2022 21:49:01 +0530 Subject: [PATCH 5/5] Review comments. --- docs/Setup.md | 189 ++++++++++++++++++++++--------------------- src/defaultConfig.js | 9 ++- src/mermaidAPI.js | 2 +- 3 files changed, 105 insertions(+), 95 deletions(-) diff --git a/docs/Setup.md b/docs/Setup.md index 5f26f57c4..a413617b1 100644 --- a/docs/Setup.md +++ b/docs/Setup.md @@ -80,8 +80,11 @@ Theme , the CSS style sheet - **strict**: (**default**) tags in text are encoded, click functionality is disabled - **loose**: tags in text are allowed, click functionality is enabled -- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled -- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. +- **antiscript**: html tags in text are allowed, (only script element is removed), click + functionality is enabled +- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This + prevent any JavaScript from running in the context. This may hinder interactive functionality + of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. ## startOnLoad @@ -1405,10 +1408,10 @@ This sets the auto-wrap padding for the diagram (sides only) ### Parameters -- `text` -- `dia` +- `text` +- `dia` -Returns **any** +Returns **any** ## setSiteConfig @@ -1425,7 +1428,7 @@ function _Default value: At default, will mirror Global Config_ ### Parameters -- `conf` The base currentConfig to use as siteConfig +- `conf` The base currentConfig to use as siteConfig Returns **[object][5]** The siteConfig @@ -1471,34 +1474,6 @@ Returns **any** The currentConfig merged with the sanitized conf Returns **any** The currentConfig -## render - -Function that renders an svg with a graph from a chart definition. Usage example below. - -```javascript -mermaidAPI.initialize({ - startOnLoad: true, -}); -$(function () { - const graphDefinition = 'graph TB\na-->b'; - const cb = function (svgGraph) { - console.log(svgGraph); - }; - mermaidAPI.render('id1', graphDefinition, cb); -}); -``` - -### Parameters - -- `id` **any** The id of the element to be rendered -- `_txt` **any** The graph definition -- `cb` **any** Callback which is called after rendering is finished with the svg code as inparam. -- `container` **any** Selector to element in which a div with the graph temporarily will be - inserted. In one is provided a hidden div will be inserted in the body of the page instead. The - element will be removed when rendering is completed. - -Returns **any** - ## sanitize ## sanitize @@ -1514,6 +1489,34 @@ options in-place - `options` **any** The potential setConfig parameter +## render + +Function that renders an svg with a graph from a chart definition. Usage example below. + +```javascript +mermaidAPI.initialize({ + startOnLoad: true, +}); +$(function () { + const graphDefinition = 'graph TB\na-->b'; + const cb = function (svgGraph) { + console.log(svgGraph); + }; + mermaidAPI.render('id1', graphDefinition, cb); +}); +``` + +### Parameters + +- `id` **any** The id of the element to be rendered +- `_txt` **any** The graph definition +- `cb` **any** Callback which is called after rendering is finished with the svg code as inparam. +- `container` **any** Selector to element in which a div with the graph temporarily will be + inserted. If one is provided a hidden div will be inserted in the body of the page instead. The + element will be removed when rendering is completed. + +Returns **any** + ## addDirective Pushes in a directive to the configuration @@ -1542,80 +1545,84 @@ Pushes in a directive to the configuration ### Parameters -- `conf` **any** +- `conf` **any** ## initialize ### Parameters -- `options` **any** +- `options` **any** -## +## ## mermaidAPI configuration defaults ```html ``` [1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js + [2]: Setup.md?id=render + [3]: 8.6.0_docs.md + [4]: #mermaidapi-configuration-defaults + [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object diff --git a/src/defaultConfig.js b/src/defaultConfig.js index acf85055f..216932576 100644 --- a/src/defaultConfig.js +++ b/src/defaultConfig.js @@ -64,9 +64,9 @@ const config = { logLevel: 5, /** - * | Parameter | Description | Type | Required | Values | - * | ------------- | --------------------------------- | ------ | -------- | ------------------------------- | - * | securitylevel | Level of trust for parsed diagram | string | Required | 'strict', 'loose', 'antiscript' | + * | Parameter | Description | Type | Required | Values | + * | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ | + * | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' | * * **Notes**: * @@ -74,6 +74,9 @@ const config = { * - **loose**: tags in text are allowed, click functionality is enabled * - **antiscript**: html tags in text are allowed, (only script element is removed), click * functionality is enabled + * - **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This + * prevent any JavaScript from running in the context. This may hinder interactive functionality + * of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. */ securityLevel: 'strict', diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 6a00e80ca..2d25d1f58 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -141,7 +141,7 @@ export const decodeEntities = function (text) { * @param {any} _txt The graph definition * @param {any} cb Callback which is called after rendering is finished with the svg code as inparam. * @param {any} container Selector to element in which a div with the graph temporarily will be - * inserted. In one is provided a hidden div will be inserted in the body of the page instead. The + * inserted. If one is provided a hidden div will be inserted in the body of the page instead. The * element will be removed when rendering is completed. * @returns {any} */