Hi, guys.
I created a rendering macro, which allow user to draw charts with external draw.io service.
the macro code:
{{velocity}}
$xwiki.jsx.use('Charts.WebHome')
#if($wikimacro.content == '')
#set ($wikimacro.content = 'iVBORw0KGgoAAAANSUhEUgAAAIMAAABHCAYAAAAk5PTEAAAC4HRFWHRteGZpbGUAJTNDbXhmaWxlJTIwaG9zdCUzRCUyMjE3Mi4yNS4xNjEuMjExJTIyJTIwbW9kaWZpZWQlM0QlMjIyMDIxLTExLTA4VDA3JTNBNDglM0EzMC4wMzdaJTIyJTIwYWdlbnQlM0QlMjI1LjAlMjAoWDExKSUyMiUyMGV0YWclM0QlMjJ4MTM1OUpQR29sZ21udEFCTFIxSCUyMiUyMHZlcnNpb24lM0QlMjIxNS42LjIlMjIlMjB0eXBlJTNEJTIyZGV2aWNlJTIyJTNFJTNDZGlhZ3JhbSUyMGlkJTNEJTIyNEd0aVp4cWRuemJnanpmMC0zXzElMjIlMjBuYW1lJTNEJTIyUGFnZS0xJTIyJTNFalpKTlQ4UWdFSVolMkZUWThtTFdqdFhsMjdidHg0cXNaNEpHVXNKTFEwTEYxYWY3MVVwbCUyRlpiT0tKNFprUFp0NGhvdnU2ZnpHc0ZXJTJCYWc0cEl6UHVJUGtlRWtEZ2wlMkZoakpFRWlTa0N5UXlraU9iQUdGJTJGQUdFTWRKT2NqaHZBcTNXeXNwMkMwdmRORkRhRFdQR2FMY04lMkI5WnElMkIyckxLcmdDUmNuVU5mMlUzSXBBTSUyRks0OENQSVNrd3ZKJTJCa3VlR28yQmVNa1o4RzRkaXRFODRqdWpkWTJXSFclMkZCeldxTiUyQmtTOGc0M3ZITmpCaHI3bjRRRFl6S1Z1OVBISlQ5JTJCdVpOOUw5enJIVmE1TU5YaHdOaXNIU1lGak80YURtT1JPS0pQVGtnTFJjdkswZXY4MGowVHRsYiUyQmxuZ1R5NEd4ME4lMkZzTTVtbjklMkY4R2RBM1dERDRFRSUyQmpEZlVqQkwwTXpGTkF0JTJCaWVUcUdLbGZZcU00Y3FydWZTaWlqZFFtT202TE9EUHQlMkZySE5QOEYlM0MlMkZkaWFncmFtJTNFJTNDJTJGbXhmaWxlJTNFUXJoXAAAAKNJREFUeJzt0rENACEQwDD2X5rvUoOe6mRL2SBrAQDAA1vjO7aZywzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzkegaNDwAA/vkAmk+zV9RvOdkAAAAASUVORK5CYII=')
#end
{{html clean="false"}}
<img class="drawio" style="cursor: default" src="data:image/png;base64,$wikimacro.content" />
{{/html}}
{{/velocity}}
the jsx code:
/**
* A XWiki extension to integrate external diagrame.net chartting service.
* please not: this extension doesn't support the in-place editing feature, aka rtWYSIWYG.
* you can disable rtWYSIWYG by setting edit.document.inPlaceEditing.enabled = false
* @author west_farmer@163.com
*/
const drawioUrl = 'http://172.25.161.211:8280/?embed=1&ui=atlas&spin=1&modified=unsavedChanges&proto=json'
const imgDBLClick = function (evt) {
var source = evt.target
if (XWiki.editor != 'wysiwyg') return
if (source.drawIoWindow == null || source.drawIoWindow.closed) {
var receive = function (evt) {
if (evt.data.length > 0 && evt.source == source.drawIoWindow) {
var msg = JSON.parse(evt.data)
if (msg.event == 'init') {
source.drawIoWindow.postMessage(JSON.stringify({ action: 'load', xmlpng: source.getAttribute('src') }), '*')
}
else if (msg.event == 'save') {
source.drawIoWindow.postMessage(JSON.stringify({ action: 'export', format: 'xmlpng', spinKey: 'saving' }), '*')
}
else if (msg.event == 'export') {
source.setAttribute('src', msg.data)
// TODO this seems hacky, looking for a offical way to do it
source.parentNode.parentNode.parentNode.parentNode.setAttribute('data-macro', 'startmacro:drawio|-||-|' + msg.data.substr(22)) + '\n'
}
if (msg.event == 'exit' || msg.event == 'export') {
window.removeEventListener('message', receive)
source.drawIoWindow.close()
source.drawIoWindow = null
}
}
}
window.addEventListener('message', receive)
source.drawIoWindow = window.open(drawioUrl)
} else {
source.drawIoWindow.focus()
}
evt.stopPropagation()
}
require(['jquery', 'bootstrap'], function ($) {
const observer = new MutationObserver(function (mutations_list) {
mutations_list.forEach(function (mutation) {
mutation.addedNodes.forEach(function (node) {
if (node.tagName == 'IFRAME' && node.className.indexOf('cke_wysiwyg_frame') >= 0) {
observer.disconnect()
const iframe = node
iframe.contentWindow.addEventListener('DOMContentLoaded', onFrameDOMContentLoaded, true)
function onFrameDOMContentLoaded(ee) {
iframe.onload = function () {
var img = iframe.contentWindow.document.querySelector('img.drawio')
if(img)
img.addEventListener('dblclick', imgDBLClick)
}
}
}
})
})
})
observer.observe(document.querySelector('body'), { subtree: true, childList: true })
})
it almost work, but with some issues that I have no idea at all:
I can draw charts, and can save it as macro content, but if I add text content below it, that text content will become part of my macro, and if I switch to the source code mode, only my macro’s code displayed:
as you can see in below, newly added text content “22222” is placed inside macro’s yellow box when editing, if I save again at this point the “22222” content will lost.
after switching to source code mode, I get this:
111111111
{{drawio}}
iVBORw0KGgoAAAANSUhEUgAAAP8AAABRCAYAAAAdHnBUAAAAAXNSR0IArs4c6QAAA4R0RVh0bXhmaWxlACUzQ214ZmlsZSUyMGhvc3QlM0QlMjIxNzIuMjUuMTYxLjIxMSUyMiUyMG1vZGlmaWVkJTNEJTIyMjAyMS0xMi0yM1QxMSUzQTE0JTNBNTEuMDg3WiUyMiUyMGFnZW50JTNEJTIyNS4wJTIwKFgxMSUzQiUyMExpbnV4JTIweDg2XzY0KSUyMEFwcGxlV2ViS2l0JTJGNTM3LjM2JTIwKEtIVE1MJTJDJTIwbGlrZSUyMEdlY2tvKSUyMENocm9tZSUyRjk1LjAuNDYzOC42OSUyMFNhZmFyaSUyRjUzNy4zNiUyMiUyMGV0YWclM0QlMjJDZ1BIalR4UFpYLXJyd0ZLc3N3TyUyMiUyMHZlcnNpb24lM0QlMjIxNS42LjIlMjIlMjB0eXBlJTNEJTIyZW1iZWQlMjIlM0UlM0NkaWFncmFtJTIwaWQlM0QlMjI0R3RpWnhxZG56YmdqemYwLTNfMSUyMiUyMG5hbWUlM0QlMjJQYWdlLTElMjIlM0VsWk5kYjRNZ0ZFQiUyRmpZOUxGRmJidnJiclI5YnN5UzNMSG9uY0NRbUtvVmpzZnYxd1FOWFlwdDJUY080RkxvZHJoTmRsdTFPa1ptJTJCU2dvaFFUTnNJdjBRSW9UaEY5dE9Sc3lOSk1vc2RLUlNubnZVZzR6JTJGZ1lVaHJPSVhqS0ZGTEtUU3Z4ekNYVlFXNUhqR2lsRFRqdEc4cHhxZldwSUFKeUhJaXB2U1RVODBjWGFCNXolMkZmQUN4Wk9UdEtsaTVRa0pQdWJIQm1oMGd3UTNrUjRyYVRVYmxTMmF4Q2R2ZURGcmR2ZWlGNEtVMURwUnhac0NlRXBYeDQlMkJUcHY5bHpubzk4eThQdmxkVGtRMCUyRnNLJTJCV0gwT0JwUnNLZ3JkSm5HRVY0WnhEVmxOOGk1cTdLTmJ4blFwN0N5eHcybFI0UVJRR3RvQjhrWHVRSmFnMWRtbSUyQkNpZVBic2x2bVh3d2dzMHZmOGtTR1VEOTZsbnhEOTVjZG02dDJJSFhzeDFTZWklMkJEN3ZBTnAlMkJkck95TDFoM01oV3pvbzI0bUlxN291dW5tMGt6QnpmeEJONHYlMkZ1N0hUdmpu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
{{/drawio}}