From 248a7aff7a7fdcd60fa038826327bb9dd0749542 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 23 Aug 2022 21:49:01 +0530 Subject: [PATCH] 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} */