Draw.io source wont collapse when wrapped in HTML tag.

[deggle]

This is either going to be a quickish thing to look at or a pain - if it's the latter, feel free to close this as it's not a major bug.

I often wrap Draw.io diagrams in HTML tags like this to center the diagram:

Which looks fine there - but when you save and come back to edit the code is correctly identified as a diagram (and editable, so all fine there) but it's fully expanded and won't collapse:

The workaround is to just cut and paste (or change and revert in some way) the opening HTML tag which causes a refresh and then it goes back. It's a small think - there are probably higher priorities!

[jextnero]

Hey there,
so I came here for the same problem, noticed in 4 years there haven't been a fix or even a recognizing comment, I duct-taped-ai-fixed it via Tampermonkey.

If you have 5+ complex diagrams in a page it is no longer a small thing... the whole page becomes a nightmare to navigate for edits.

Disclaimer: the script works for my usage, I have no expierence in wiki.js development, so if it doesn't work for you or breaks things ... you've been warned about copying/pasting code without caution.

// @name         Wiki.js Diagram Collapse HTML FIX
// @namespace    wikijs
// @version      2.5.314
// @author       jt
// @match        http...      <<--- ADPAT HERE
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==


(function() {
    'use strict';

    function collapseDiagrams(cm) {

        // Remove previous custom collapse marks
        cm.getAllMarks().forEach(mark => {
            if (mark.__tmDiagramCollapse) {
                mark.clear();
            }
        });

        for (let i = 0; i < cm.lineCount(); i++) {
            if (!cm.getLine(i)?.startsWith('```diagram')) continue;

            let end = i + 1;
            while (
                end < cm.lineCount() &&
                !cm.getLine(end)?.trim().startsWith('```')
            ) {
                end++;
            }
            if (end >= cm.lineCount()) continue;

            const mark = cm.markText(
                { line: i + 1, ch: 0 },
                { line: end - 1, ch: cm.getLine(end - 1).length },
                { collapsed: true }
            );

            mark.__tmDiagramCollapse = true;

            i = end;
        }
    }


    const timer = setInterval(() => {
        const cm = document.querySelector('.CodeMirror')?.CodeMirror;
        if (!cm) return;

        const hasDiagramButton = document.querySelector('.CodeMirror-buttonmarker');

        if (!hasDiagramButton) return;

        clearInterval(timer);

        collapseDiagrams(cm);

        cm.on('changes', () => {
            clearTimeout(window.tmDiagramTimer);

            window.tmDiagramTimer = setTimeout(() => {
                collapseDiagrams(cm);
            }, 500);
        });

    }, 500);

})();

[vaagee]

Hey jextnero, thx for the solution. I'm wondering where should I put the script for its working? I tried to paste it into the 'code injection' region in admin/themes but it doesn't work.

[jextnero]

Sorry, I was a little bit short on that:
I'm using the Chrome/Firefox Extension "Tampermonkey" which allows you to run javascript code on any page you want.
It doesn't change/manipulates Wiki.js itself it just runs "on top" on the client's browser side.
So it has nothing to do with Wiki.js nor changes it anything there.

Search Tampermonkey in the Extensions web store (Chrome) or Firefox' addons.mozilla.org and install it. Then in the extension you can add a new userscript and paste that script from above.
You need to adjust the @match part and add the url/ip you're running wiki.js on.
So e.g.
@match https://10.0.99.1:8080/*

I ran into some issue when removing lines right before/after the diagram, so I just edited my post with an updated version.
I'm not sure if that fixed it, but you will see both the beginning and end markers of the diagram in the editor, don't remove them.

If you run into trouble you just can deactivate the user script in tampermonkey again and you're back to where you started.

[vaagee]

Thank you!