The Bespin project is very inspiring. As is Lively. Both of these projects use the HTML5 canvas tag which allows you to draw 2d graphics on a webpage using Javascript.

I thought it'd be an interesting experiment to try and make a rich code editor for WebVelocity using the same techniques. There are many hurdles along the way and last night a colleague (Jerry) and I discussed one of the harder ones: Cut/Copy/Paste.

Web browsers don't give you access to the clipboard from Javascript because of security concerns. To get around this, in IE you can use execCommand to send cut/copy/paste. As far as I know and from Jerry's research in to the issue, IE is the only browser silly enough to provide this kind of interface.

Silly or not, you can do something interesting in Mozilla too, with a ClipboardManager that asks the user if they want to allow the particular website access to their clipboard or not. Chrome strictly forbids access to the clipboard and I'm not sure what Safari does.

The short of it is this - the best way to access the clipboard is to embed a flash program that does just that, escapes the browser to give you access to the clipboard. This is, apparently, the state of the art technique... or so I thought.

As Jerry told me how bad it all was, my mind started to rebel saying "No no no, I don't want to do it that way."

It dawned on me, we can capture the cut/copy/paste key strokes easily enough - why not dynamically create a textarea and insert the text to be copied or retrieve the pasted text, on keydown then keyup, allowing the standard action to take place.

At first blush, it worked - but I found I could not hide the textarea and still trick Firefox in to letting me do this. I had to make it small and shuffle it off the edge of the page so that it is technically still visible. On keydown, I create the textarea and fill it with the selected text in my , then on keyup, I retrieve the text from the textarea. It's remarkably simple and it works perfectly.

I don't know why I haven't read of more people doing this. It works equally as well in Safari and Chrome, however it doesn't work if the user decides to do copy/paste from the menus. However, it's probably easy enough to have a persistent textarea hidden away that I keep in sync with actual edits. This would also be useful if someone wanted to use the editor as part of a form POST.