#702 improve handling of different "br" tag notations for multiline texts in sequence diagrams

cypress/integration/rendering/sequencediagram.spec.js

@@ -2,8 +2,8 @@
 
 import { imgSnapshotTest } from '../../helpers/util';
 
-context('Aliasing', () => {
+context('Sequence diagram', () => {
-  it('should render a simple sequence diagrams', () => {
+  it('should render a simple sequence diagram', () => {
     imgSnapshotTest(
       `
       sequenceDiagram
@@ -32,6 +32,23 @@ context('Aliasing', () => {
       {}
     );
   });
+  it('should handle different line breaks', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+      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;
+      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;
+    `,
+      {}
+    );
+  });
   context('background rects', () => {
     it('should render a single and nested rects', () => {
       imgSnapshotTest(

dist/index.html

@@ -356,6 +356,18 @@ and
 Alice -->> John: Parallel message 2
 end
   </div>
+  <div class="mermaid">
+    sequenceDiagram
+    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;
+    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;
+  </div>
 
   <hr/>
 

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -333,6 +333,34 @@ describe('when parsing a sequenceDiagram', function() {
     expect(messages[0].from).toBe('Alice');
     expect(messages[2].from).toBe('John');
   });
+  it('it should handle different line breaks', function() {
+    const str =
+      'sequenceDiagram\n' +
+      'participant 1 as multiline<br>text\n' +
+      'participant 2 as multiline<br/>text\n' +
+      'participant 3 as multiline<br />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';
+
+    parser.parse(str);
+
+    const actors = parser.yy.getActors();
+    expect(actors['1'].description).toBe('multiline<br>text');
+    expect(actors['2'].description).toBe('multiline<br/>text');
+    expect(actors['3'].description).toBe('multiline<br />text');
+
+    const messages = parser.yy.getMessages();
+    expect(messages[0].message).toBe('multiline<br>text');
+    expect(messages[1].message).toBe('multiline<br>text');
+    expect(messages[2].message).toBe('multiline<br/>text');
+    expect(messages[3].message).toBe('multiline<br/>text');
+    expect(messages[4].message).toBe('multiline<br />text');
+    expect(messages[5].message).toBe('multiline<br />text');
+  });
   it('it should handle notes over a single actor', function() {
     const str =
       'sequenceDiagram\n' + 'Alice->Bob: Hello Bob, how are you?\n' + 'Note over Bob: Bob thinks\n';

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 ?\/?>/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 ?\/?>/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 ?\/?>/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 ?\/?>/gi);
     for (let i = 0; i < lines.length; i++) {
       const dy = i * actorFontSize - (actorFontSize * (lines.length - 1)) / 2;
       const text = g