Merge branch 'mh/mermaid-linebreaks' into 'master'

Fix linebreak rendering in Mermaid flowcharts

Closes #54588

See merge request gitlab-org/gitlab-ce!30730

app/assets/javascripts/behaviors/markdown/render_mermaid.js

@@ -36,7 +36,8 @@ export default function renderMermaid($els) {
       });
 
       $els.each((i, el) => {
-        const source = el.textContent;
+        // Mermaid doesn't like `<br />` tags, so collapse all like tags into `<br>`, which is parsed correctly.
+        const source = el.textContent.replace(/<br\s*\/>/g, '<br>');
 
         /**
          * Restrict the rendering to a certain amount of character to

changelogs/unreleased/mh-mermaid-linebreaks.yml

@@ -0,0 +1,5 @@
+---
+title: Fix linebreak rendering in Mermaid flowcharts
+merge_request: 30730
+author:
+type: fixed

spec/features/markdown/mermaid_spec.rb

@@ -21,4 +21,22 @@ describe 'Mermaid rendering', :js do
       expect(page).to have_selector('svg text', text: label)
     end
   end
+
+  it 'renders linebreaks in Mermaid diagrams' do
+    description = <<~MERMAID
+      ```mermaid
+      graph TD;
+        A(Line 1<br>Line 2)-->B(Line 1<br/>Line 2);
+        C(Line 1<br />Line 2)-->D(Line 1<br  />Line 2);
+      ```
+    MERMAID
+
+    project = create(:project, :public)
+    issue = create(:issue, project: project, description: description)
+
+    visit project_issue_path(project, issue)
+
+    expected = '<text><tspan xml:space="preserve" dy="1em" x="1">Line 1</tspan><tspan xml:space="preserve" dy="1em" x="1">Line 2</tspan></text>'
+    expect(page.html.scan(expected).count).to be(4)
+  end
 end