Commit 5e0949bc authored by Kushal Pandya's avatar Kushal Pandya

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

Fix linebreak rendering in Mermaid flowcharts

Closes #54588

See merge request gitlab-org/gitlab-ce!30730
parents 38aa79de d50f41d0
...@@ -36,7 +36,8 @@ export default function renderMermaid($els) { ...@@ -36,7 +36,8 @@ export default function renderMermaid($els) {
}); });
$els.each((i, el) => { $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 * Restrict the rendering to a certain amount of character to
......
---
title: Fix linebreak rendering in Mermaid flowcharts
merge_request: 30730
author:
type: fixed
...@@ -21,4 +21,22 @@ describe 'Mermaid rendering', :js do ...@@ -21,4 +21,22 @@ describe 'Mermaid rendering', :js do
expect(page).to have_selector('svg text', text: label) expect(page).to have_selector('svg text', text: label)
end end
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 end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment