Merge pull request #1156 from gene1wood/extend_br_tag_regex

Extend the `br` tag regex

cypress/integration/rendering/sequencediagram.spec.js

@@ -39,12 +39,15 @@ context('Sequence diagram', () => {
       participant 1 as multiline<br>using #lt;br#gt;
       participant 2 as multiline<br/>using #lt;br/#gt;
       participant 3 as multiline<br />using #lt;br /#gt;
+      participant 4 as multiline<br \t/>using #lt;br \t/#gt;
       1->>2: multiline<br>using #lt;br#gt;
       note right of 2: multiline<br>using #lt;br#gt;
       2->>3: multiline<br/>using #lt;br/#gt;
       note right of 3: multiline<br/>using #lt;br/#gt;
-      3->>1: multiline<br />using #lt;br /#gt;
-      note right of 1: multiline<br />using #lt;br /#gt;
+      3->>4: multiline<br />using #lt;br /#gt;
+      note right of 4: multiline<br />using #lt;br /#gt;
+      4->>1: multiline<br />using #lt;br /#gt;
+      note right of 1: multiline<br \t/>using #lt;br \t/#gt;
     `,
       {}
     );

dist/index.html

@@ -361,12 +361,15 @@ end
     participant 1 as multiline<br>using #lt;br#gt;
     participant 2 as multiline<br/>using #lt;br/#gt;
     participant 3 as multiline<br />using #lt;br /#gt;
+    participant 4 as multiline<br 	/>using #lt;br 	/#gt;
     1->>2: multiline<br>using #lt;br#gt;
     note right of 2: multiline<br>using #lt;br#gt;
     2->>3: multiline<br/>using #lt;br/#gt;
     note right of 3: multiline<br/>using #lt;br/#gt;
-    3->>1: multiline<br />using #lt;br /#gt;
-    note right of 1: multiline<br />using #lt;br /#gt;
+    3->>4: multiline<br />using #lt;br /#gt;
+    note right of 4: multiline<br />using #lt;br /#gt;
+    4->>1: multiline<br 	/>using #lt;br 	/#gt;
+    note right of 1: multiline<br 	/>using #lt;br 	/#gt;
   </div>
 
   <hr/>

src/diagrams/flowchart/flowRenderer.js

@@ -246,7 +246,7 @@ export const addEdges = function(edges, g) {
         edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
       } else {
         edgeData.labelType = 'text';
-        edgeData.label = edge.text.replace(/<br ?\/?>/g, '\n');
+        edgeData.label = edge.text.replace(/<br\s*\/?>/g, '\n');
 
         if (typeof edge.style === 'undefined') {
           edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -339,12 +339,15 @@ describe('when parsing a sequenceDiagram', function() {
       'participant 1 as multiline<br>text\n' +
       'participant 2 as multiline<br/>text\n' +
       'participant 3 as multiline<br />text\n' +
+      'participant 4 as multiline<br \t/>text\n' +
       '1->>2: multiline<br>text\n' +
       'note right of 2: multiline<br>text\n' +
       '2->>3: multiline<br/>text\n' +
       'note right of 3: multiline<br/>text\n' +
-      '3->>1: multiline<br />text\n' +
-      'note right of 1: multiline<br />text\n';
+      '3->>4: multiline<br />text\n' +
+      'note right of 4: multiline<br />text\n' +
+      '4->>1: multiline<br \t/>text\n' +
+      'note right of 1: multiline<br \t/>text\n';
 
     parser.parse(str);
 
@@ -352,6 +355,7 @@ describe('when parsing a sequenceDiagram', function() {
     expect(actors['1'].description).toBe('multiline<br>text');
     expect(actors['2'].description).toBe('multiline<br/>text');
     expect(actors['3'].description).toBe('multiline<br />text');
+    expect(actors['4'].description).toBe('multiline<br \t/>text');
 
     const messages = parser.yy.getMessages();
     expect(messages[0].message).toBe('multiline<br>text');
@@ -360,6 +364,8 @@ describe('when parsing a sequenceDiagram', function() {
     expect(messages[3].message).toBe('multiline<br/>text');
     expect(messages[4].message).toBe('multiline<br />text');
     expect(messages[5].message).toBe('multiline<br />text');
+    expect(messages[6].message).toBe('multiline<br \t/>text');
+    expect(messages[7].message).toBe('multiline<br \t/>text');
   });
   it('it should handle notes over a single actor', function() {
     const str =

src/diagrams/sequence/sequenceRenderer.js

@@ -168,7 +168,7 @@ export const bounds = {
 
 const _drawLongText = (text, x, y, g, width) => {
   let textHeight = 0;
-  const lines = text.split(/<br ?\/?>/gi);
+  const lines = text.split(/<br\s*\/?>/gi);
   for (const line of lines) {
     const textObj = svgDraw.getTextObj();
     textObj.x = x;
@@ -233,7 +233,7 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde
   let textElem;
   let counterBreaklines = 0;
   let breaklineOffset = 17;
-  const breaklines = msg.message.split(/<br ?\/?>/gi);
+  const breaklines = msg.message.split(/<br\s*\/?>/gi);
   for (const breakline of breaklines) {
     textElem = g
       .append('text') // text label for the x axis

src/diagrams/sequence/svgDraw.js

@@ -18,7 +18,7 @@ export const drawRect = function(elem, rectData) {
 
 export const drawText = function(elem, textData) {
   // Remove and ignore br:s
-  const nText = textData.text.replace(/<br ?\/?>/gi, ' ');
+  const nText = textData.text.replace(/<br\s*\/?>/gi, ' ');
 
   const textElem = elem.append('text');
   textElem.attr('x', textData.x);
@@ -321,7 +321,7 @@ const _drawTextCandidateFunc = (function() {
   function byTspan(content, g, x, y, width, height, textAttrs, conf) {
     const { actorFontSize, actorFontFamily } = conf;
 
-    const lines = content.split(/<br ?\/?>/gi);
+    const lines = content.split(/<br\s*\/?>/gi);
     for (let i = 0; i < lines.length; i++) {
       const dy = i * actorFontSize - (actorFontSize * (lines.length - 1)) / 2;
       const text = g