Sorry, this is a bit of technical minutia having to do with using Javascript in modern browser to manipulate content on the fly. Its a bit technical but I do discuss the purpose behind it in terms of M-BY-MC and what youll be able to do on the site. If youd like a taste of the horror that is browser based development, read on

Its always something. Apparently, you cannot position the cursor into the empty space between two block level tags. (e.g. <div>something like an image</div>(cannot move cursor here)<div>like a block of text</div>) unless that spot in between contains at least one character. Thats what my testing here seems to indicate in Chrome. Ill have to try it with FireFox and the other browsers as well.

This endless minutia is annoying. If the method is called setStartBefore() you would think it would set the range BEFORE the node, no? especially when the documentation tells you, and I quote, Sets the start boundary of the range to be immediately before the specified node Its nuts because even with the keyboard typing into the contenteditable div you cant do it.

This is why I detest about this kind of development. First you have to figure out in Browser-ease how to say what you want to say. (e.g. setting a cursor position involves a thing called a selection and then a thing called a range and then collapsing the range so that the startOffset and the endOffset are the same. Walla! You have set the position of the cursor except .) Then you have to figure out how its broken in all kinds of annoying edge cases. (e.g. sorry, theres no way to put the cursor in front of that DIV the way you want to unless theres something there already.)

I figured this one out when I realized I couldnt insert characters between two objects in the @mention/#tag jquery plugin Ive been writing for the last week.

And this is after days of trying to figure out how to handle asynchronous lag in event handling when trying to figure out where the damned cursor is. When I type in @test into the box I want my little event handler, which gets called for each character entered, to check if an @ character has been entered. I need to know where its been entered so I can look at the characters around it to tell if its part of an email address like test@test.com, or whether its at the start of a word like @rob. In the latter case, I want to do the autocomplete. Imagine my shock and horror when I type in @test into the box, I get the character @ in my event handler and ask the browser to tell me what the character in front of the @ is and I randomly get t, e or s. (If it hadnt been for this issue I would have had this done last week.)

As with the rest of this, Ive agonized about the amount of time Ive been spending writing this plugin. Its just that the core social value that the formVista platform brings to the table is the linking of objects (think you have a forum post and in it you have a map and on the map you have a photo. Youre going to be able to view the photo in a gallery and then see every place that photo has been mentioned or shared on the site, given privacy settings, of course. The same is going to be true of every other kind of object.)

If Im typing away at speed adding some post to the forum when I go to insert a photo I want to see the thumbnail, not just some cryptic tag as is the case now. If I insert a map, I want to see a map. If I backspace over the thing I want it to disappear. If I move over it with the arrow keys I want the cursor to jump over the thing regardless if its left or right. (It turns out left is causing me all kinds of problems.). I want to be able to do Facebook style @mentions and Twitter style #hash tags with server side autocomplete, which I actually have working. And I want to have room to add support for any other kind of richtext thing I might want to add in the future.

Its the central feature that brings everything that Ive built so far together and its the thing that users will use more than any other piece of this whole system. As a result, this is where it really needs to be slick and work.

After all the work Ive done so far, it just didnt seem right to continue with the plain text box approach that I had in the previous version.

Honestly, of this entire nearly 6 month long project, it was this piece that I had the most trepidations about. I had hoped I was going to be able to use some of the existing @mention solutions that I had found. Initially they looked good but unfortunately, all the ones Ive been able to find are either too limited or too broken to use.

Once I have this @richmention beast built and tested, I plan to release it under an MIT style license and put it up on github. I also plan on writing up a detailed post about the plugin and the issues I ran into in the hopes that itll be of use to some poor fool who wants to write their own rich text editor widget thing.