The Mermaid diagram preview is broken when editing the existing issue

[dufipl]

📝 Provide detailed reproduction steps (if any)

1. Build GH Writer on ghw/epic/367-version-3510-bump branch
2. Edit the existing issue with the Mermaid diagram with this source code:

   flowchart TB
   A --> B
   B --> C
   D --> D

✔️ Expected result

❌ Actual result

On the released version (from the Chrome store) it looks better but still not too good:

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[dufipl]

It is a regression from the released version. When preview mode is chosen on the mermaid toolbar the result is even worse:

The issue persists on the ghw/411-version-3530-bump branch

[mlewand]

Intersting, I would assume that this could be in the mermaid plugin itself that it got broken by some upstream changes along the way. Requires further investigation.

[mmotyczynska]

I checked this and the reason for not displaying the diagram properly on edit is that the dom element, where the diagram should be rendered, is not visible at the time of rendering. This is because we load editor before the edit button is clicked, i.e. when the user clicks the three-dots button:

At this time the element where we want to render the diagram is not visible as the editor itself is also not visible until (and if) the user clicks edit button.

There are at least two solutions for this issue:

1. Create the editor when the edit button is clicked (github-writer repository), not earlier.
   1. The UX of this is poor as the user can see how the original editor is switched to CKE5.
2. Update mermaid package so it does not render the diagram until the dom element is visible.

I recommend the second one. So to fix the original issue I will change the ckeditor5-mermaid package and after releasing the new version I will update it in this project.

[mmotyczynska]

It is a regression from the released version. When preview mode is chosen on the mermaid toolbar the result is even worse:

Regarding this even worse issue, it is caused by the new version of mermaid package (starting from 9.1.7). However, it will be also fixed with the solution I described above.