After weeks of trying and testing to find a solution for my needs I admit that I still have no idea how I can solve this problem.
It sounds simple: I want that a user is able to mention things in a text area similar to twitter.
The problem is that I can't seem to manage it to make it work. Every browser has its own specialties which are coming into my way and break things. I have tried multiple different attempts but none of them worked even on a single browser completely.. mixing text and HTML appears to be incredibly hard to do.
So here I am. Asking you guys for any kind of help. Whether it's a library you can recommend me that is already doing what I need here, or if you did something similar and can tell me what exactly you did to make this work on multiply browsers.
My current solution looks something like this: Hitting # will insert a input text field into a div contenteditable everything is working nice so far unless the whole thing is the first element of a row. If the caret is also at position 0 and the user hits Enter, then something dies inside the browser which removes the whole input box without further notice or any events - at least not on Chrome. That was the most promising solution that I was able to come up with. Don't think I didn't try to save it by inserting e.g. a native Text with a zero-whitespace-character but that doesn't work either. It works better - but not completely.
I'm really frustrated by now and this is holding my whole project back which has this key feature that has to work properly - mainly because the information put there is going to be persisted as XML but that is a completely different story.
I really hope somebody can help me to get a solution for this. Bear in mind that I am actually using GWT 2.8.0 but I would not mind to use/wrap a JavaScript library at this point ..
