Fix for br tags within nodes for new line

Author: knsv

dist/mermaid.full.js

@@ -23,6 +23,7 @@
     "gulp-jison": "~1.0.0",
     "gulp-rename": "~1.2.0",
     "gulp-uglify": "~1.0.1",
+    "he": "^0.5.0",
     "jasmine": "~2.0.1",
     "jison": "~0.4.15",
     "karma": "~0.12.20",

dist/mermaid.full.min.js

@@ -2,6 +2,8 @@ var graph = require('./graphDb');
 var flow = require('./parser/flow');
 var utils = require('./utils');
 var seq = require('./sequenceRenderer');
+var he = require('he');
+
 /**
  * Function that adds the vertices found in the graph definition to the graph to be rendered.
  * @param vert Object containing the vertices.
@@ -57,6 +59,7 @@ var addVertices = function (vert, g) {
 
         // Create the node in the graph based on defined form
         if (vertice.type === 'round') {
+            console.log(verticeText);
             g.setNode(vertice.id, {labelType: "html",label: verticeText, rx: 5, ry: 5, style: style, id:vertice.id});
         } else {
             if (vertice.type === 'diamond') {
@@ -226,18 +229,21 @@ var init = function () {
         id = 'mermaidChart' + cnt;
         cnt++;
 
-        var chartText = element.textContent.trim();
+        var txt = element.innerHTML;
+        txt = txt.replace(/>/g,'>');
+        txt = txt.replace(/</g,'&lt;');
+        txt = he.decode(txt).trim();
 
         element.innerHTML = '<svg id="' + id + '" width="100%">' +
         '<g />' +
         '</svg>';
 
-        if(utils.detectType(chartText) === 'graph'){
-            draw(chartText, id);
+        if(utils.detectType(txt) === 'graph'){
+            draw(txt, id);
             graph.bindFunctions();
         }
         else{
-            seq.draw(chartText,id);
+            seq.draw(txt,id);
         }
 
     }
@@ -253,7 +259,7 @@ exports.version = function(){
 }
 
 var equals = function (val, variable){
-    if(typeof variable !== 'undefined'){
+    if(typeof variable === 'undefined'){
         return false;
     }
     else{

dist/mermaid.slim.js

@@ -40,6 +40,7 @@
 "]"                   return 'SQE';
 "{"                   return 'DIAMOND_START'
 "}"                   return 'DIAMOND_STOP'
+"\""                  return 'QUOTE';
 \s                    return 'SPACE';
 \n                    return 'NEWLINE';
 
@@ -97,6 +98,10 @@ vertex:  alphaNum SQS text SQE
         {$$ = $1;yy.addVertex($1,$3,'round');}
     | alphaNum DIAMOND_START text DIAMOND_STOP
         {$$ = $1;yy.addVertex($1,$3,'diamond');}
+    | alphaNum TAGEND text SQE
+        {$$ = $1;yy.addVertex($1,$3,'odd');}
+    | alphaNum TAGSTART text TAGEND
+        {$$ = $1;yy.addVertex($1,$3,'diamond');}
     | alphaNum
         {$$ = $1;yy.addVertex($1);}
     ;
@@ -132,10 +137,7 @@ alphaNumToken
         {$$ = $1;}
     | DOT
         {$$ = $1;}
-    | TAGSTART
-        {$$ = $1;}
-    | TAGEND
-        {$$ = $1;}
+
     | BRKT
         {$$ = '<br>';}
     ;
@@ -161,16 +163,6 @@ arrowText:
     {$$ = $2;}
     ;
 
-// Characters and spaces
-//text: alphaNum SPACE text
-//        {$$ = $1 + ' ' +$3;}
-//    | alphaNum spaceList MINUS spaceList text
-//         {$$ = $1 + ' - ' +$5;}
-//    | alphaNum spaceList TAGSTART DIR TAGEND spaceList text
-//         {$$ = $1 + ' - ' +$5;}
-//    | alphaNum
-//        {$$ = $1;}
-//    ;
 text: textToken
     {$$=$1;}
     | text textToken
@@ -208,6 +200,35 @@ textToken: ALPHA
    | MINUS
        {$$ = $1;}
     ;
+textNoTags: textNoTagsToken
+    {$$=$1;}
+    | textNoTags textNoTagsToken
+    {$$=$1+''+$2;}
+    ;
+
+textNoTagsToken: ALPHA
+   {$$=$1;}
+   | NUM
+   {$$=$1;}
+   | COLON
+       {$$ = $1;}
+   | COMMA
+       {$$ = $1;}
+   | PLUS
+       {$$ = $1;}
+   | EQUALS
+       {$$ = $1;}
+   | MULT
+       {$$ = $1;}
+   | DOT
+       {$$ = $1;}
+   | BRKT
+       {$$ = '<br>';}
+   | SPACE
+       {$$ = $1;}
+   | MINUS
+       {$$ = $1;}
+    ;
 
 classDefStatement:CLASSDEF SPACE alphaNum SPACE stylesOpt
     {$$ = $1;yy.addClass($3,$5);}

dist/mermaid.slim.min.js

@@ -224,8 +224,40 @@ describe('when parsing ',function(){
         var vert = flow.parser.yy.getVertices();
         var edges = flow.parser.yy.getEdges();
 
+        expect(edges.length).toBe(0);
+        expect(vert['a'].type).toBe('odd');
+    });
+    it('should handle a single diamond node',function(){
+        // Silly but syntactically correct
+        var res = flow.parser.parse('graph TD;a<A>;');
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+        expect(edges.length).toBe(0);
+        expect(vert['a'].type).toBe('diamond');
+    });
+    it('should handle a single diamond node with html in it',function(){
+        // Silly but syntactically correct
+        var res = flow.parser.parse('graph TD;a<A <br> end>;');
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
         expect(edges.length).toBe(0);
         expect(vert['a'].type).toBe('diamond');
+        expect(vert['a'].text).toBe('A <br> end');
+    });
+    it('should handle a single diamond node with html in it',function(){
+        // Silly but syntactically correct
+        var res = flow.parser.parse('graph TD;a(A <br> end);');
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+        expect(edges.length).toBe(0);
+        expect(vert['a'].type).toBe('round');
+        expect(vert['a'].text).toBe('A <br> end');
     });
     it('should handle a single node with alphanumerics starting on a char',function(){
         // Silly but syntactically correct

package.json

@@ -22,7 +22,7 @@ module.exports.draw = function (text, id) {
     for(i=0;i<actorKeys.length;i++){
         var key = actorKeys[i];
 
-        console.log('Doing key: '+key)
+        //console.log('Doing key: '+key)
 
         var startMargin = 50;
         var margin = 50;

src/main.js

@@ -3,11 +3,11 @@
 <head>
 
     <script src="../dist/mermaid.full.js"></script>
-    <scrpt>
+    <script>
         var mermaid_config = {
             startOnLoad:true
         }
-    </scrpt>
+    </script>
     <script>
         function apa(){
             console.log('CLICKED');
@@ -22,7 +22,7 @@
         chimp:Chimpansenhoppar
     </div>
     <div class="mermaid">
-        graph TB;A(Astrid # a)-->B[Irene];
+        graph TB;A(Astrid <br> b)-->B[Irene];
         A-->C[Christer];
         B-->D[Micke];
         B-->E[Maria];