diff options
-rw-r--r-- | app/assets/javascripts/behaviors/markdown/render_mermaid.js | 3 | ||||
-rw-r--r-- | changelogs/unreleased/mh-mermaid-linebreaks.yml | 5 | ||||
-rw-r--r-- | spec/features/markdown/mermaid_spec.rb | 18 |
3 files changed, 25 insertions, 1 deletions
diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js index b23de36f860..dbc28beffbe 100644 --- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js +++ b/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 diff --git a/changelogs/unreleased/mh-mermaid-linebreaks.yml b/changelogs/unreleased/mh-mermaid-linebreaks.yml new file mode 100644 index 00000000000..e38820d8ce3 --- /dev/null +++ b/changelogs/unreleased/mh-mermaid-linebreaks.yml @@ -0,0 +1,5 @@ +--- +title: Fix linebreak rendering in Mermaid flowcharts +merge_request: 30730 +author: +type: fixed diff --git a/spec/features/markdown/mermaid_spec.rb b/spec/features/markdown/mermaid_spec.rb index 7008b361394..e3bcaca737e 100644 --- a/spec/features/markdown/mermaid_spec.rb +++ b/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 |