WYSIWYG editing of macro calls which generate (large) output

I have a set macros which generate rather large output. When editing in WYSIWYG mode the output is generated at once within the editor window. If you edit the document several times you will get the output additionally into your document after saving it. Every time you edit this way and save you will get e.g. a generated graphics additionally into your document.

I have generated a workaround within my (groovy) macros:

boolean checkViewMode() {
  if (xcontext.action.equals("edit") || xcontext.action.equals("get")) {
       println '(%style="border:1pt dashed blue;padding:2pt;"%)(((**'+xwiki.context.macro.doc.getObject("XWiki.WikiMacroClass").getValue("id")+'**'; 
       xwiki.context.macro.params.getParameterNames().each {if (! it.startsWith("__cke_")) {print "\n##**"+it+'** = '
            if(xwiki.context.macro.params.get(it) == null) { print "//null//##" } else { print '"' + xwiki.context.macro.params.get(it) + '"##'}
         }}
       print ")))" 
       return false
   }
  return true
}

if (checkViewMode()) {
   //
   //
   //
   // do here your macros normally ....
   //
}

While WYSIWYG editing this will generate a box which display macro name, parameters and there values.

Demo:

editing-macro-call

By clicking on the dashed box parameters can be changed in the normal way - and will be updated in the box.

Questions:
(1) Did I miss something or is there a better - maybe even already realized - way to avoid these problems?
(2) How to get this work with macros for inline use? These are not editable. I didn’t found a workaround. (May be bug 17417?)

The first thing to check is if your macro produces valid HTML. Invalid HTML can lead to duplicated content or missing content in the editor. See Loading... . Otherwise, if your macro uses JavaScript to produce its output then you need to debug your JavaScript code to understand why it is executed multiple times.