Mermaid diagrams displayed incorrect when editing

[arnowelzel]

Describe the bug
When editing a document with a Mermaid diagram and using the "diagram" or "both" display mode, arrows in the diagram are not painted.

To Reproduce
Steps to reproduce the behavior:

1. Create a new collective page
2. Insert a "mermaid" code block
3. Add the code as shown below
4. Switch to "Both" display mode
5. The diagram will be displayed without arrows

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

Expected behavior
The diagram will be displayed with arrows as in view mode, also when in editing mode.

Screenshots
Incorrect display in editing mode:

Correct display in view mode:

Client details:

• OS: Windows 10 Pro
• Browser: happens with all tested browsers (Firefox, Edge, Vivalid, Chrome)
• Version: happens with all tested browsers
• Device: Desktop

Server details

Collectives app version: 2.8.2

Operating system: Ubuntu Linux 22.04

Web server: Apache 2.4

Database: MariaDB

PHP version: 8.1

Nextcloud version: 27.1.2

Logs

Nextcloud log (data/nextcloud.log)

Insert your Nextcloud log here

Browser log

Insert your browser log here, this could for example include:

a) The javascript console log
b) The network log
c) ...

[mejo-]

Thanks @arnowelzel. This should be fixed with Nextcloud 27.1.3. At least I cannot reproduce it there any longer. Please don't hesitate to comment/reopen if you still experience the problem with Nextcloud 27.1.3.

[arnowelzel]

I can not reopen the issue myself. But it still remains - also with Nextcloud 27.1.3.

Important: this only happens in Collectives not in the Text Editor outside Collectives.

[mejo-]

Thanks @arnowelzel. Indeed I'm able to reproduce the issue. It will be fixed with #936 though.

[mejo-]

Unfortunately it seems like #936 won't fix the issue and we have to look into this seperately.

@juliushaertl do you have an idea what could be the reason that arrows in the diagram get rendered in standalone text, but not in text used by Collectives (via editor API or not)?

[juliusknorr]

Looks like this is only an issue when the read only view is present in the DOM but hidden while the edit mode is shown.

Reason seems to be that both generated svgs use the same id for the end markers

Manually changing the id from End to End2 seems to make them show up again:

From a quick look it could be an upstream issue like mermaid-js/mermaid#1318

[arnowelzel]

The upstream bug is already more than 3 years old and seems not be to fixed yet. There is a PR from October 2022 (also see mermaid-js/mermaid#1318 (comment)) but the issue is still open.

The upstream also mentions a workaround using a custom loader and a shadow DOM for the diagrams which also got implemented in the Mermaid plugin for MkDocs. Maybe this would be a feasible solution for Collectives as well if the upstream fix will take longer to become available.

[mejo-]

This got fixed upstream by mermaid-js/mermaid#4825, which got released with Mermaid 10.5.0. We only updated from mermaid 10.4.0 to 10.6.1 recently (on main and stable27), so this will be fixed with upcoming stable releases.