Fix mermaid diagram preview in rich text editor

Vanessa Ottorequested to merge
592223-preview-does-not-render-mermaid-diagrams-under-the-rich-text-editor into master

What does this MR do and why?

Fix mermaid diagram preview in rich text editor

The SandboxedMermaid component was posting a plain string via postMessage, but the iframe receiver destructures event.data expecting { source, proxiedUrls }. This caused source to be undefined, crashing mermaid's render with "Cannot read properties of undefined (reading 'replace')". Align the message format with render_sandboxed_mermaid.js by posting an object with source and proxiedUrls properties.

Changelog: fixed

References

Screenshots or screen recordings

Before After
Screenshot_2026-03-17_at_09.29.48 Screenshot_2026-03-17_at_09.28.38

How to set up and validate locally

  1. Go to any editor, e.g. edit a work item description or write a comment
  2. Click on the '+' and select mermaid diagram. You can use the template
  3. Click on 'switch to rich text editing'

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #592223 (closed)

Merge request reports