So what does excel put on the clipboard if select a rectangle of cells and copy it? In the Desktop world one would deal with the DIF format. But in the Web-world it is really easy; you receive a string with two delimiters, “\n” for line ends, and “\t” for column ends. A data-copy from a Word table uses the same format.
In Websharper it is relatively easy to create a datagrid with input-text boxes, just a few loops. To each textbox you need to attach an eventhandler for paste. In the function that executes the paste-event, you need to search the coordinates in the grid, and then paste the contents from that location onwards.
That was the easy part. The hard part is that different browsers support clipboard functions in a different way (if at all). And this is probably the reason why Websharper does not support the clipboard function out of the box (Websharper 3.0.46.130-rc). But a great thing is, Websharper provides ways to extend.
So I wrote (with a lot of help from the Websharper forum) a clipboard extensions library. This extension maps F# code to DOM/Javascript and enables the clipboard functionality. But that’s not the end of it. Internet Explorer (11) supports the clipboard function in a complete different way than Chrome (42) and Firefox (33.1.1). Chrome and Firefox send the clipboard event data to the paste function, via the function’s input variable. In IE you need to read from “window.clipboardData”, which is also unsupported by Websharper out-of-the-box. So I also extended the Windows object.
A simple project that required quite some research. You can download the sources from GitHub. This won’t work in all browsers; this project was only to illustrate Websharper’s powers.