How can I float a movieclip over a textarea to make it appear like it's part of the text?

Question

Take a look at this demo , how do they accomplish the Inline Changes feature? To me it looks like they are floating a movieclip over the textarea.

What I can't figure out is how they anchored the movieclip to stay in the correct position. If you type something before the movieclip it moves position along with the text, the movieclips even move to the next line when the text word wraps. Does anyone have an idea?

Answer 1

What I think they're doing is keeping track of the index the sprite is representing. Then they have a nice function that moves the sprite to the correct position given the size of the textbox and font. All you need to do after that is bind the positioning function to changes made to the textbox and you've got that effect. Doesn't seem too complicated, as there are already font size/position functions available.

EDIT: Notice how you cannot type code in between the overlapping regions.