drag drop of UIComponent in TextFlow of Sparks TextArea

Question

I would like to add a UIComponent of variable width and height into the textFlow of a Sparks TextArea. I managed to get the drag and drop working via InlineGraphicElement, but I have to add the UIComponent to some invisible Group first, where its size is calculated.

protected function test_dragDropHandler(event:DragEvent):void
        {
            var tf:TextFlow = test.textFlow;
            var flowComposer:IFlowComposer = tf.flowComposer;
            var numLines:int = flowComposer.numLines;

            for (var cnt:int; cnt<numLines; cnt++){
                var tfl:TextFlowLine = flowComposer.getLineAt(cnt);
                var tl:TextLine =  tfl.getTextLine(true);
                if (tl ){

                    var tlBnds:Rectangle = tl.getBounds(FlexGlobals.topLevelApplication.stage);

                    var mouseOver:Boolean = tlBnds.contains(mouseX,mouseY)
                    if (mouseOver){
                        var idx:int = computeSelectionIndexInLine(tf,tl,mouseX,mouseY);

                        var data:Object = event.dragSource.dataForFormat("itemsByIndex")[0];


                        var wpimg:WordPressImageDisplay = new WordPressImageDisplay();
                        wpimg.data = data;
                        wpimg.autoLayout = true;

                        // to get the right width and height of ImageDisplay with the Image loaded
                        //  once the DisplayObject is added to the TextFlow, it will not resize anymore.
                        imgDisp.addEventListener("imageCreated", imageCreated );
                        // to allow editing in the TextInput of ImageDisplay
                        imgDisp.addEventListener(FocusEvent.FOCUS_IN, focusInImage);
                        // to allow editing in the surrounding TextArea again
                        imgDisp.addEventListener(FocusEvent.FOCUS_OUT, focusOutImage);

                        /**
                         * CAUTION 1:
                         * hiddenG is needed to initialize the imgDisp properly - textFlow does not do this, so this is a workaround
                         * CAUTION 2:
                         * then again we have alway to add at index==0, because after adding imgDisp to textFlow it is not in the
                         * displayList of hiddenG anymore and adding the second imgDisp will fail!
                         */ 
                        hiddenG.addElementAt(wpimg,0);
                        tf.interactionManager.selectRange(idx,idx);

                        break;
                    }

                }
            } 
            trace("drag drop");
        }

        private function imageCreated(event:Event):void {
            var tf:TextFlow = test.textFlow;
            var cWidth:int = event.target.width;
            var cHeight:int = event.target.height;
            EditManager( tf.interactionManager).insertInlineGraphic(event.target, cWidth, cHeight);
        }

Actually not only the size is the reason I add the UIComponent to a hidden Group first: If I do not do this an just add the UIComponent with this:

EditManager( tf.interactionManager).insertInlineGraphic(new MyUICompnent(), "auto",  "auto");

it does not get even initialized....

The whole thing is a big workaround, does somebody have a better and easier answer to this problem?

Full code here: http://www.veeeb.com/examples/flex/tlfdragdropimages/index.html (right click - view src)