As of this writing, SVG exported from OPM does not render the node shapes when embedded in wiki's HTML plugin. See Diagnose an SVG. Here we attempt to hack around with the SVG to see if we can make something workable.
We import some libraries.
import * as frame from "https://wiki.dbbs.co/assets/v1/frame.js" const dompurifyLoaded = import('https://cdn.jsdelivr.net/npm/dompurify@2.3.8/dist/purify.min.js');
We store a local copy of the original SVG file from OPM.
pages/hack-opm-svg
We copy the sanitize function we're using in the HTML plugin.
function sanitize(dirty) { return window.DOMPurify.sanitize(dirty, { SANITIZE_DOM: false, ADD_TAGS: ['foreignObject'] }); }
We create a new sanitize function.
function newSanitize(dirty) { return window.DOMPurify.sanitize(dirty, { ADD_TAGS: ['foreignObject', 'feDropShadow'] }); }
We fetch the SVGs from the asset.
async function svgs() { return await Promise.all( (await frame.assets()) .filter(it => it.url.match(/\.svg$/i)) .map(async it => { const req = await fetch(it.url) return await req.text() }) ) }
We construct a page with buttons to show the original and new sanitize configurations.
export async function emit(el) { await dompurifyLoaded document.body.innerHTML = ` <div> <button id=old>Old Sanitize</button> <button id=new>New Sanitize</button> </div> <div id=result></div>` let items = await svgs() document.body.addEventListener('click', event => { if (event.target.tagName == "BUTTON") { event.preventDefault() event.stopPropagation() if (event.target.id == "old") { window.result.innerHTML = items.map(sanitize).join("\n<hr>\n") } else { window.result.innerHTML = items.map(newSanitize).join("\n<hr>\n") } frame.resize() } }) frame.resize() }
In the frame below we can view the results.
//wiki.ralfbarkow.ch/assets/pages/snippet-template/esm.html