Merge branch 'psi-mermaid-details' into 'master'

Correctly render mermaid digrams inside details blocks

See merge request gitlab-org/gitlab!23662

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

 import flash from '~/flash';
+import $ from 'jquery';
 import { sprintf, __ } from '../../locale';
 
 // Renders diagrams and flowcharts from text using Mermaid in any element with the
@@ -18,7 +19,7 @@ import { sprintf, __ } from '../../locale';
 // This is an arbitrary number; Can be iterated upon when suitable.
 const MAX_CHAR_LIMIT = 5000;
 
-export default function renderMermaid($els) {
+function renderMermaids($els) {
   if (!$els.length) return;
 
   // A diagram may have been truncated in search results which will cause errors, so abort the render.
@@ -95,3 +96,19 @@ export default function renderMermaid($els) {
       flash(`Can't load mermaid module: ${err}`);
     });
 }
+
+export default function renderMermaid($els) {
+  if (!$els.length) return;
+
+  const visibleMermaids = $els.filter(function filter() {
+    return $(this).closest('details').length === 0;
+  });
+
+  renderMermaids(visibleMermaids);
+
+  $els.closest('details').one('toggle', function toggle() {
+    if (this.open) {
+      renderMermaids($(this).find('.js-render-mermaid'));
+    }
+  });
+}

changelogs/unreleased/psi-mermaid-details.yml

+---
+title: Correctly render mermaid digrams inside details blocks
+merge_request: 23662
+author:
+type: fixed

spec/features/markdown/mermaid_spec.rb

@@ -68,4 +68,34 @@ describe 'Mermaid rendering', :js do
       expect(page).to have_selector('pre.mermaid')
     end
   end
+
+  it 'correctly sizes mermaid diagram inside <details> block', :js do
+    description = <<~MERMAID
+      <details>
+      <summary>Click to show diagram</summary>
+
+      ```mermaid
+      graph TD;
+        A-->B;
+        A-->C;
+        B-->D;
+        C-->D;
+      ```
+
+      </details>
+    MERMAID
+
+    project = create(:project, :public)
+    issue = create(:issue, project: project, description: description)
+
+    visit project_issue_path(project, issue)
+
+    page.within('.description') do
+      page.find('summary').click
+      svg = page.find('svg.mermaid')
+
+      expect(svg[:width].to_i).to be_within(5).of(120)
+      expect(svg[:height].to_i).to be_within(5).of(220)
+    end
+  end
 end