#901 Fixed the issue with multiple calls to bind the click functions.…

… Also sanitized the tooltips so that no tags are allowed in them for (#847).
mermaid-js · Aug 11, 2019 · 7b335fb · 7b335fb
1 parent a6f21c2
commit 7b335fb
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 10 deletions.
diff --git a/e2e/platform/click.html b/e2e/platform/click.html
@@ -0,0 +1,23 @@
+<!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=">
+</head>
+<body>
+  <div id="FirstLine" class="mermaid">
+    graph TB
+    FullFirstSquad-->StripedFirstSquad
+    click FullFirstSquad showFullFirstSquad "show <strong>details</strong>"
+</div>
+  <script src="./mermaid.js"></script>
+  <script>
+     function showFullFirstSquad(elemName) {
+            console.log('show ' + elemName);
+        }
+        mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
+  </script>
+</body>
+</html>
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
@@ -18,7 +18,7 @@ let funs = []
 
 const sanitize = text => {
   let txt = text
-  if (config.securityLevel === 'strict') {
+  if (config.securityLevel !== 'loose') {
     txt = txt.replace(/<br>/g, '#br#')
     txt = txt.replace(/<br\S*?\/>/g, '#br#')
     txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;')
@@ -182,13 +182,13 @@ export const setClass = function (ids, className) {
 const setTooltip = function (ids, tooltip) {
   ids.split(',').forEach(function (id) {
     if (typeof tooltip !== 'undefined') {
-      tooltips[id] = tooltip
+      tooltips[id] = sanitize(tooltip)
     }
   })
 }
 
 const setClickFun = function (id, functionName) {
-  if (config.securityLevel === 'strict') {
+  if (config.securityLevel !== 'loose') {
     return
   }
   if (typeof functionName === 'undefined') {
@@ -215,7 +215,7 @@ const setClickFun = function (id, functionName) {
 export const setLink = function (ids, linkStr, tooltip) {
   ids.split(',').forEach(function (id) {
     if (typeof vertices[id] !== 'undefined') {
-      if (config.securityLevel === 'strict') {
+      if (config.securityLevel !== 'loose') {
         vertices[id].link = sanitizeUrl(linkStr) // .replace(/javascript:.*/g, '')
       } else {
         vertices[id].link = linkStr

diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
@@ -228,6 +228,7 @@ export const addEdges = function (edges, g) {
  * @returns {object} classDef styles
  */
 export const getClasses = function (text) {
+  logger.info('Extracting classes')
   flowDb.clear()
   const parser = flow.parser
   parser.yy = flowDb
@@ -243,7 +244,7 @@ export const getClasses = function (text) {
  * @param id
  */
 export const draw = function (text, id) {
-  logger.debug('Drawing flowchart')
+  logger.info('Drawing flowchart')
   flowDb.clear()
   const parser = flow.parser
   parser.yy = flowDb

diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js
@@ -430,7 +430,7 @@ const compileTasks = function () {
  */
 export const setLink = function (ids, _linkStr) {
   let linkStr = _linkStr
-  if (config.securityLevel === 'strict') {
+  if (config.securityLevel !== 'loose') {
     linkStr = sanitizeUrl(_linkStr)
   }
   ids.split(',').forEach(function (id) {
@@ -457,7 +457,7 @@ export const setClass = function (ids, className) {
 }
 
 const setClickFun = function (id, functionName, functionArgs) {
-  if (config.securityLevel === 'strict') {
+  if (config.securityLevel !== 'loose') {
     return
   }
   if (typeof functionName === 'undefined') {

diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
@@ -497,10 +497,17 @@ const render = function (id, txt, cb, container) {
   svgCode = decodeEntities(svgCode)
 
   if (typeof cb !== 'undefined') {
-    cb(svgCode, flowDb.bindFunctions)
-    cb(svgCode, ganttDb.bindFunctions)
+    switch(graphType) {
+      case 'flowchart':
+        cb(svgCode, flowDb.bindFunctions)
+        break;
+      case 'gantt':
+        cb(svgCode, ganttDb.bindFunctions)
+        break;
+        default:
+    }
   } else {
-    logger.warn('CB = undefined!')
+    logger.debug('CB = undefined!')
   }
 
   const node = d3.select('#d' + id).node()