Wiki: Draw.io diagram not display when there's any linebreak in shape's text

[stevenxi]

Create a markdown document, insert a draw.io diagram.

1. Create a diagram.
2. Add a shape, say a Retrangle
3. Type "a" -> "Enter" -> "Enter" -> "b"
4. Save & Exit diagram

The diagram won't show up, until remove the text inside shape.

Thanks

Expected behavior
Diagram show up even with text.

Screenshots

Host Info (please complete the following information):

• OS: Ubuntu 18.04, Docker
• Wiki.js version: 2.5.126
• Database engine: postgres 9.7

[MarsWarrior]

Hmmm.

I don't have that problem:

This is the diagram:

[stevenxi]

Hmmm.

I don't have that problem:

This is the diagram:

@MarsWarrior thanks for the test.

I've tried again, seems it's content size (amount) related.

---

[MarsWarrior]

Still can't reproduce your problem:

This one renders as follows:

[stevenxi]

hi @MarsWarrior,

Try this, with

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxMjFweCIgaGVpZ2h0PSI0MXB4IiB2aWV3Qm94PSItMC41IC0wLjUgMTIxIDQxIiBjb250ZW50PSImbHQ7bXhmaWxlIGhvc3Q9JnF1b3Q7ZW1iZWQuZGlhZ3JhbXMubmV0JnF1b3Q7IG1vZGlmaWVkPSZxdW90OzIwMjAtMDktMTBUMTE6NTM6MTYuMjE1WiZxdW90OyBhZ2VudD0mcXVvdDs1LjAgKFdpbmRvd3MgTlQgMTAuMDsgV2luNjQ7IHg2NCkgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzg1LjAuNDE4My4xMDIgU2FmYXJpLzUzNy4zNiZxdW90OyBldGFnPSZxdW90O1Qyb0d4Ynp5SEJ2WDdpSGFxNlpYJnF1b3Q7IHZlcnNpb249JnF1b3Q7MTMuNi45JnF1b3Q7Jmd0OyZsdDtkaWFncmFtIGlkPSZxdW90O1pMXzV6VFkwTWdxQXQ1Mzg0N1d1JnF1b3Q7IG5hbWU9JnF1b3Q7UGFnZS0xJnF1b3Q7Jmd0O2paTEJib1FnRUlhZmhydkNkcXZYdXR2dG9UMTU2Sm5LVkVoUkRPS3FmZnBpR1ZiTnBra1REc00zLzhEd0Q0UVZ6WFN4dkpOdlJvQW1OQkVUWVNkQ2FYcWdsQ3dyRVhNZ2VaWUZVRnNsVUxTQ1VuMER3Z1Rwb0FUME82RXpSanZWN1dGbDJoWXF0MlBjV2pQdVpaOUc3Mi90ZUExM29LeTR2cWZ2U2pnWmFFWWZWLzRDcXBieDV2U1loMHpEb3hoZjBrc3V6TGhCN0V4WVlZMXhJV3FtQXZSaVh2UWwxRDMva2IwMVpxRjEveWw0Q0FWWHJnZDgyNnRxaDRuUW8vYjFUeC9XUi9VU25VejFCYmJIcnQwY3JiQm1hQVVzcHlWZU5VcmxvT3g0dFdSSFAzelBwR3UwMzZVK3ZPOE9HNzZDZFRCdEVIWjdBZE9BczdPWFlKYmwrRlh3NjdEbzVMZ09JbzFNYm9ad1FNWng5dlh0Nk5VZUg2QkRjYnRPNGplMytjL3MvQU09Jmx0Oy9kaWFncmFtJmd0OyZsdDsvbXhmaWxlJmd0OyI+PGRlZnMvPjxnPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiIGZpbGw9IiNmZmZmZmYiIHN0cm9rZT0iIzAwMDAwMCIgcG9pbnRlci1ldmVudHM9ImFsbCIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjUgLTAuNSkiPjxzd2l0Y2g+PGZvcmVpZ25PYmplY3Qgc3R5bGU9Im92ZXJmbG93OiB2aXNpYmxlOyB0ZXh0LWFsaWduOiBsZWZ0OyIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHJlcXVpcmVkRmVhdHVyZXM9Imh0dHA6Ly93d3cudzMub3JnL1RSL1NWRzExL2ZlYXR1cmUjRXh0ZW5zaWJpbGl0eSI+PGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9ImRpc3BsYXk6IGZsZXg7IGFsaWduLWl0ZW1zOiB1bnNhZmUgY2VudGVyOyBqdXN0aWZ5LWNvbnRlbnQ6IHVuc2FmZSBjZW50ZXI7IHdpZHRoOiAxMThweDsgaGVpZ2h0OiAxcHg7IHBhZGRpbmctdG9wOiAyMHB4OyBtYXJnaW4tbGVmdDogMXB4OyI+PGRpdiBzdHlsZT0iYm94LXNpemluZzogYm9yZGVyLWJveDsgZm9udC1zaXplOiAwOyB0ZXh0LWFsaWduOiBjZW50ZXI7ICI+PGRpdiBzdHlsZT0iZGlzcGxheTogaW5saW5lLWJsb2NrOyBmb250LXNpemU6IDEycHg7IGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2E7IGNvbG9yOiAjMDAwMDAwOyBsaW5lLWhlaWdodDogMS4yOyBwb2ludGVyLWV2ZW50czogYWxsOyB3aGl0ZS1zcGFjZTogbm9ybWFsOyB3b3JkLXdyYXA6IG5vcm1hbDsgIj5MaW51eDxiciAvPkRvY2tlcnM8L2Rpdj48L2Rpdj48L2Rpdj48L2ZvcmVpZ25PYmplY3Q+PHRleHQgeD0iNjAiIHk9IjI0IiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iSGVsdmV0aWNhIiBmb250LXNpemU9IjEycHgiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkxpbnV4Li4uPC90ZXh0Pjwvc3dpdGNoPjwvZz48L2c+PHN3aXRjaD48ZyByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiLz48YSB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC01KSIgeGxpbms6aHJlZj0iaHR0cHM6Ly9kZXNrLmRyYXcuaW8vc3VwcG9ydC9zb2x1dGlvbnMvYXJ0aWNsZXMvMTYwMDAwNDI0ODciIHRhcmdldD0iX2JsYW5rIj48dGV4dCB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjEwcHgiIHg9IjUwJSIgeT0iMTAwJSI+Vmlld2VyIGRvZXMgbm90IHN1cHBvcnQgZnVsbCBTVkcgMS4xPC90ZXh0PjwvYT48L3N3aXRjaD48L3N2Zz4=

[stevenxi]

Somehow I find stable way to reproduce it now:

1. Create a diagram.
2. Add a shape, say a Retrangle
3. Type "a" -> "Enter" -> "Enter" -> "b"
4. Save & Exit diagram

[MarsWarrior]

Yes, I can reproduce this bug now 👍

I tested the same in Bookstack without problems. I also see no errors in the Chrome console and container log.
So it seems something breaks the Wiki.js rendering pipeline with this draw.io example.

[MarsWarrior]

I tried to migrate all my draw.io diagrams to Wiki.js, but about 90% contains new lines, so are not displayed.

@NGPixel could you check this one? As about 90% of the diagrams don't show, users are having a lot of troubles...

I set loglevel to debug in config.yml but can't see a difference with the default setting. In other words: no errors/warnings
I persisted the /wiki folder for this in my docker compose file ,as the loglevel is not an environment variable (yet).

[NGPixel]

@MarsWarrior Draw.io rendering is completely client-side so changing the log level won't have any effect.

[NGPixel]

This is caused by DOMPurify which completely remove the SVG for some reason...

Filed a bug on DOMPurify library: https://github.com/cure53/DOMPurify/issues/469

[MarsWarrior]

It seems context related.

If I make a Mermaid diagram with a <br> in it (which also generates an svg), it is simply rendered.

wikijs markdown input:

rendered svg with chrome inspector:

Or are mermaid diagrams not sanitized?

[stevenxi]

As comment https://github.com/cure53/DOMPurify/issues/469#issuecomment-691487928, even without <br>, the foreignObject is removed anyway. So a non-perfect solution is before pass to DOMPurify, remove the <br>s, because the foreignObject will be removed, text will look like non-wrap ending with .... Not prefect, but at least shapes are displayed.

[stevenxi]

If DOMPurify doesn't change the behaviour, solution would be:

1. As @cure53 mentioned in the last comment, put foreignObject into an allow list. https://github.com/cure53/DOMPurify/issues/469#issuecomment-691490281
2. Replace all <br> inside foreignObject by <div></div>, it would give the same/similar result.

[cure53]

Since this can be easily addressed with a hook, we won't change behavior (unless there is new insights into this issue we don't have yet). Reason being the resulting XSS risk for everyone to be too high.

[MarsWarrior]

As already mentioned in the DOMPurify issue, a user can disable HTML sanitation:

Note however that while editing the markdown text, the draw.io graph is NOT rendered. This seems to be a bug.
But if you save/close the markdown editor, the resulting page with the draw.io diagram IS rendered!

So, as long as this issue isn't solved (the proposed hook for example), I will disable sanitation to have my draw.io diagrams rendered instead of looking at an empty space 😠

[NGPixel]

Fixed by 8f6cba262ff1b2d26f1aaf9f65c66aae872a7a22

[stevenxi]

Thank you @NGPixel, so productive...