DrawIO Confluence user macro

confluence.macro.html

## @param URL:title=URL (https)|type=string|required=true|desc=Use sempre https
## @param LOCAL:title=Local (no Drive)|type=string|required=false|desc=Informe o local no drive para facilitar a edição

</div style="hight:25px">&nbsp;</div>
<div id="drawio-diagram">(carregando diagrama $paramLOCAL...)</div>

<script>
    (function () {

        const chatMap = {
            "&": "&amp;",
            "'": "&#x27;",
            "`": "&#x60;",
            '"': "&quot;",
            "<": "&lt;",
            ">": "&gt;",
        };
        
        function escapeHTML(string) {
            if (typeof string !== "string") return string;
            return string.replace(/[&'`"<>]/g, (match) => chatMap[match]);
        }
        
        function createMxGraphData(xml) {
            return {
                "highlight": "#123456",
                "nav": true,
                "resize": true,
                "edit": "_blank",
                "editable": "true",
                "toolbar": "zoom lightbox layers",
                "toolbar-position": "bottom",
                "toolbar-nohide": true,
                "lightbox": false,
                zoom: "1",
                xml,
            };
        }

     	function createMxGraphHTML(xml) {
            const json = JSON.stringify(createMxGraphData(xml));
            const cleanHTML = escapeHTML(json);
            return `<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="`+cleanHTML+`"></div>`;
        }

        function pullDrawioCopyFromSvg(inboundText) {
            const xmlDoc = new DOMParser().parseFromString(inboundText, "text/xml");
            const svgElements = xmlDoc.getElementsByTagName("svg");
            if (svgElements.length === 0) return inboundText;
            return svgElements[0].attributes.content.nodeValue;
        }

        function loadDrawioFile(url) {
            // Lazy load do script
            const script = document.createElement('script');
            script.src = 'https://viewer.diagrams.net/js/viewer-static.min.js';
            script.onload = () => {
                fetch(url)
                    .then(response => response.text())
                    .then(pullDrawioCopyFromSvg)
                    .then(createMxGraphHTML)
                    .then(content => {
                        document.getElementById('drawio-diagram').innerHTML = content;
                        window.GraphViewer.processElements();
                    })
                    .catch(err => console.error("Error loading draw.io file:", err));
            };
            document.head.appendChild(script);
        }
        // Initialize
        loadDrawioFile("$paramURL");
    })();
</script>