Ethan Davidson This is fantastic.

I noted however that this renders this as <img src="<plantuml url>"> which basically makes it non-interactive which is a bit of a bummer when we include aspects like links inside. Wikijs does have the setting to render as svg so I was thinking - if svg is selected can this be rendered as

<object data="<plantuml render link>" type="image/svg+xml">

<img src="<plantuml render link>" />

</object>

So i replaced the code as per below and this works beautifully. Any chance that this can be merged ?

Lines 117-124

--------------

token = state.push('uml_diagram', 'img', 0)

// alt is constructed from children. No point in populating it here.

token.attrs = [ [ 'src', ], [ 'alt', '' ], ['class', 'uml-diagram'] ]

token.block = true

token.children = altToken

token.info = params

token.map = [ startLine, nextLine ]

token.markup = markup

To:

if (imageFormat == 'png') {

token = state.push('uml_diagram', 'img', 0)

// alt is constructed from children. No point in populating it here.

token.attrs = [ [ 'src', ], [ 'alt', '' ], ['class', 'uml-diagram'],['style','max-width:100%;height:auto'] ]

token.block = true

token.children = altToken

token.info = params

token.map = [ startLine, nextLine ]

token.markup = markup

token = state.push('uml_diagram_close', 'img', -1)

}

else if (imageFormat == 'svg') {

token = state.push('uml_diagram', 'object', 0)

// alt is constructed from children. No point in populating it here.

token.attrs = [ [ 'data', ], [ 'alt', '' ], ['class', 'uml-diagram'], ['style','max-width:100%;height:auto'], ['type','image/svg+xml'] ]

token.block = true

token.children = altToken

token.info = params

token.map = [ startLine, nextLine ]

token.markup = markup

token = state.push('uml_diagram', 'img', 0)

// alt is constructed from children. No point in populating it here.

token.attrs = [ [ 'src', ], [ 'alt', '' ], ['class', 'uml-diagram'],['style','max-width:100%;height:auto'] ]

token.block = true

token.children = altToken

token.info = params

token.map = [ startLine, nextLine ]

token.markup = markup

token = state.push('uml_diagram_close', 'img', -1)

token = state.push('uml_diagram_close', 'object', -1)

}

See photo for changes - the text is now selectable and the links work - it's fully interactive.

Bharat Rajagopalan: That would definitely be a great feature to have! However, the best way to propose code changes is to create a pull request in github. You should fork the repo, make these changes in your fork, and then open a pull request for nicolas to review.

Ethan Davidson: Got it! Thank you for the guidance.

I noticed that with the latest wikijs code, <object> is being sanitised by xss which is a good thing from a security perspective; Need to make a few more edits in html-security to allow the object tag only if the data element is pointing the configured plantuml server url to get this to work., will use onIgnoreTag to parse this and then will do as you suggested