bug: Fix mermaid rendering on wiki notes

What does this MR do and why?

bug: Fix mermaid rendering on wiki notes

Problem: At the moment, mermaid diagrams are not rendered correctly in wiki comments. This is caused because the renderGFM function is not called when the note is updated. See #547843 (closed).

Solution: This commit adds a watcher on the note property to call renderGFM whenever the note is updated.

Changelog: fixed

🛠️ with ❤️ at Siemens

References

Screenshots or screen recordings

Add text here.

Before After
Mermaid diagram fails to render properly after editing a wiki note Mermaid diagram correctly renders after editing, showing the fix in action
image image

How to set up and validate locally

  1. Start your GDK instance: gdk start
  2. Go to http://gdk.test:3000/gitlab-org/gitlab-test
  3. Navigate to the Wiki section of the project
  4. Create a new Wiki page or edit an existing one
  5. Add a mermaid diagram in the comment section of the given Wiki page. You can use the following syntax example:
    ```mermaid
    graph TD
      A[Start] --> B{Is it working?}
      B -->|Yes| C[Great!]
      B -->|No| D[Debug]
      D --> A
    ```
  6. Save the comment and verify that the mermaid diagram renders correctly
  7. Edit the comment and make a change to the diagram
  8. Save the changes and verify that the diagram updates and renders correctly without page refresh

You should see the diagram properly rendered after both initial creation and subsequent edits, confirming the fix is working as expected.

MR acceptance checklist

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

MR Checklist (@gerardo-navarro)

Related to #547843 (closed)

Edited by Gerardo Navarro

Merge request reports

Loading