diff options
author | Martin Hanzel <mhanzel@gitlab.com> | 2019-07-16 07:09:55 +0000 |
---|---|---|
committer | Kushal Pandya <kushalspandya@gmail.com> | 2019-07-16 07:09:55 +0000 |
commit | d50f41d0f2103f78039ef4d01eda5d30ff968d6e (patch) | |
tree | ae61802eccfee6d3e2e6a619bf4b774a430428e9 | |
parent | 38aa79de0623cd197769adea9a22ae6762a3b638 (diff) | |
download | gitlab-ce-d50f41d0f2103f78039ef4d01eda5d30ff968d6e.tar.gz |
Fix linebreak rendering in Mermaid flowcharts
-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 |