Added support for entity codes so that it for instance is possible to…

… represent a " with #quot; and a heart with #9829; This differs from the regular html codes in that the leading & isreplaced with a dsh and for dec codes dropped. This as referenced in issue #219.
mermaid-js · Oct 3, 2015 · a2b6bc5 · a2b6bc5
1 parent cb5e88c
commit a2b6bc5
Show file tree

Hide file tree

Showing 12 changed files with 129 additions and 46 deletions.
diff --git a/dist/mermaid.js b/dist/mermaid.js
@@ -32727,11 +32727,10 @@ var setupToolTips = function(element){
 
             tooltipElem.transition()
                 .duration(200)
-                .style("opacity", .9);
+                .style("opacity", '.9');
             tooltipElem.html(el.attr('title'))
                 .style("left", (rect.left+(rect.right-rect.left)/2) + "px")
                 .style("top", (rect.top-14+document.body.scrollTop) + "px");
-            var el = d3.select(this);
             el.classed('hover',true);
 
         })
@@ -37427,6 +37426,7 @@ exports.getNoteRect = function(){
 var mermaidAPI = _dereq_('./mermaidAPI');
 var nextId = 0;
 var log = _dereq_('./logger').create();
+var utils = _dereq_('./utils');
 
 module.exports.mermaidAPI = mermaidAPI;
 /**
@@ -37529,12 +37529,33 @@ var init = function () {
         txt = txt.replace(/>/g,'&gt;');
         txt = txt.replace(/</g,'&lt;');
         txt = he.decode(txt).trim();
-
+        txt = exports.encodeEntities(txt);
+        if( utils.detectType(txt) === 'sequenceDiagram'){
+            txt = he.decode(txt).trim();
+        }
         mermaidAPI.render(id,txt,insertSvg, element);
     }
 
 };
 
+exports.encodeEntities = function(text){
+    var txt = text;
+
+    txt = txt.replace(/#\w*;?/g,function(s,t,u){
+        var innerTxt = s.substring(1,s.length-1);
+
+        var isInt = /^\+?\d+$/.test(innerTxt);
+        if(isInt){
+            return '&#'+innerTxt+';';
+        }else{
+            return '&'+innerTxt+';';
+        }
+
+    });
+
+    return txt;
+};
+
 exports.init = init;
 exports.parse = mermaidAPI.parse;
 /**
@@ -37678,7 +37699,7 @@ if(typeof document !== 'undefined'){
 //}));
 
 }).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"../package.json":86,"./logger":104,"./mermaidAPI":105,"he":84}],104:[function(_dereq_,module,exports){
+},{"../package.json":86,"./logger":104,"./mermaidAPI":105,"./utils":106,"he":84}],104:[function(_dereq_,module,exports){
 (function (process){
 /**
  * #logger

diff --git a/dist/mermaid.min.js b/dist/mermaid.min.js
diff --git a/dist/mermaid.slim.js b/dist/mermaid.slim.js
@@ -23511,11 +23511,10 @@ var setupToolTips = function(element){
 
             tooltipElem.transition()
                 .duration(200)
-                .style("opacity", .9);
+                .style("opacity", '.9');
             tooltipElem.html(el.attr('title'))
                 .style("left", (rect.left+(rect.right-rect.left)/2) + "px")
                 .style("top", (rect.top-14+document.body.scrollTop) + "px");
-            var el = d3.select(this);
             el.classed('hover',true);
 
         })
@@ -28211,6 +28210,7 @@ exports.getNoteRect = function(){
 var mermaidAPI = _dereq_('./mermaidAPI');
 var nextId = 0;
 var log = _dereq_('./logger').create();
+var utils = _dereq_('./utils');
 
 module.exports.mermaidAPI = mermaidAPI;
 /**
@@ -28313,12 +28313,33 @@ var init = function () {
         txt = txt.replace(/>/g,'&gt;');
         txt = txt.replace(/</g,'&lt;');
         txt = he.decode(txt).trim();
-
+        txt = exports.encodeEntities(txt);
+        if( utils.detectType(txt) === 'sequenceDiagram'){
+            txt = he.decode(txt).trim();
+        }
         mermaidAPI.render(id,txt,insertSvg, element);
     }
 
 };
 
+exports.encodeEntities = function(text){
+    var txt = text;
+
+    txt = txt.replace(/#\w*;?/g,function(s,t,u){
+        var innerTxt = s.substring(1,s.length-1);
+
+        var isInt = /^\+?\d+$/.test(innerTxt);
+        if(isInt){
+            return '&#'+innerTxt+';';
+        }else{
+            return '&'+innerTxt+';';
+        }
+
+    });
+
+    return txt;
+};
+
 exports.init = init;
 exports.parse = mermaidAPI.parse;
 /**
@@ -28462,7 +28483,7 @@ if(typeof document !== 'undefined'){
 //}));
 
 }).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"../package.json":85,"./logger":103,"./mermaidAPI":104,"he":83}],103:[function(_dereq_,module,exports){
+},{"../package.json":85,"./logger":103,"./mermaidAPI":104,"./utils":105,"he":83}],103:[function(_dereq_,module,exports){
 (function (process){
 /**
  * #logger

diff --git a/dist/mermaid.slim.min.js b/dist/mermaid.slim.min.js
diff --git a/dist/mermaidAPI.js b/dist/mermaidAPI.js
@@ -32394,11 +32394,10 @@ var setupToolTips = function(element){
 
             tooltipElem.transition()
                 .duration(200)
-                .style("opacity", .9);
+                .style("opacity", '.9');
             tooltipElem.html(el.attr('title'))
                 .style("left", (rect.left+(rect.right-rect.left)/2) + "px")
                 .style("top", (rect.top-14+document.body.scrollTop) + "px");
-            var el = d3.select(this);
             el.classed('hover',true);
 
         })

diff --git a/dist/mermaidAPI.slim.js b/dist/mermaidAPI.slim.js
diff --git a/dist/mermaidAPI.slim.min.js b/dist/mermaidAPI.slim.min.js
diff --git a/docs/content/flowchart.md b/docs/content/flowchart.md
@@ -211,6 +211,8 @@ graph LR
 graph LR
     id1["This is the (text) in the box"]
 ```
+
+### Another possibility is to use the entity codes
 ## Subgraphs
 
 ```

diff --git a/src/diagrams/flowchart/graphDb.js b/src/diagrams/flowchart/graphDb.js
@@ -254,11 +254,10 @@ var setupToolTips = function(element){
 
             tooltipElem.transition()
                 .duration(200)
-                .style("opacity", .9);
+                .style("opacity", '.9');
             tooltipElem.html(el.attr('title'))
                 .style("left", (rect.left+(rect.right-rect.left)/2) + "px")
                 .style("top", (rect.top-14+document.body.scrollTop) + "px");
-            var el = d3.select(this);
             el.classed('hover',true);
 
         })

diff --git a/src/mermaid.js b/src/mermaid.js
@@ -20,6 +20,7 @@
 var mermaidAPI = require('./mermaidAPI');
 var nextId = 0;
 var log = require('./logger').create();
+var utils = require('./utils');
 
 module.exports.mermaidAPI = mermaidAPI;
 /**
@@ -122,12 +123,33 @@ var init = function () {
         txt = txt.replace(/>/g,'&gt;');
         txt = txt.replace(/</g,'&lt;');
         txt = he.decode(txt).trim();
-
+        txt = exports.encodeEntities(txt);
+        if( utils.detectType(txt) === 'sequenceDiagram'){
+            txt = he.decode(txt).trim();
+        }
         mermaidAPI.render(id,txt,insertSvg, element);
     }
 
 };
 
+exports.encodeEntities = function(text){
+    var txt = text;
+
+    txt = txt.replace(/#\w*;?/g,function(s,t,u){
+        var innerTxt = s.substring(1,s.length-1);
+
+        var isInt = /^\+?\d+$/.test(innerTxt);
+        if(isInt){
+            return '&#'+innerTxt+';';
+        }else{
+            return '&'+innerTxt+';';
+        }
+
+    });
+
+    return txt;
+};
+
 exports.init = init;
 exports.parse = mermaidAPI.parse;
 /**

diff --git a/test/examples/entityCodes.html b/test/examples/entityCodes.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+
+    <link rel="stylesheet" href="../../dist/mermaid.css"/>
+    <script src="../../dist/mermaid.js"></script>
+    <style>
+        body{
+            background-color: #89896f;
+        }
+
+    </style>
+
+</head>
+    <body>
+        <h1>Qutotes to callbacks</h1>
+        <div class="mermaid" id="i211">
+        graph LR
+            A["A double quote:#quot;"] -->B["A dec char:#9829;"]
+            B                          -->C["#9829; ;^; #9829;"]
+        </div>
+        <div class="mermaid" id="i211">
+            sequenceDiagram
+            Alice->>John: Hello John, how are you?&#9829;
+            John-->>Alice: Great!&quot;
+        </div>
+    </body>
+</html>
diff --git a/test/examples/interactionAndTooltips.html b/test/examples/interactionAndTooltips.html
@@ -23,7 +23,9 @@
 </head>
     <body>
     <h1>Links to callbacks</h1>
-    A has a tooltip
+    A has a tooltip and a callback <br/>
+    B has a link and a tooltip <br/>
+    C has a long tooltip <br/>
     <div class="mermaid" id="i211">
     graph LR;
         A-->B;
@@ -34,23 +36,12 @@ <h1>Links to callbacks</h1>
     </div>
 
     <h1>Links to urls</h1>
+    A second diagram that should have its own callback on A even though the node has the same id.
     <div class="mermaid" id="i213">
         graph LR;
             A-->B
             B-->C
             click A callback2 "Tooltip3"
     </div>
-    <div class="mermaid" id="i213">
-        graph LR;
-        subgraph S1
-            a-->b
-        end
-        subgraph S2
-            c-->d
-            c-->d
-        end
-
-    </div>
-
     </body>
 </html>