Many users asked to me to add to the extension Table2Clipboard (T2C for friends) the ability to preserve web links and maintain the styles during tables copy.

Preserving links and other HTML tags was a very easy task, I’ve written the code very quickly and both OpenOffice Calc and Microsoft Excel have handled correctly the pasted content.

When I started to support style preservation I discovered different and ugly results on the two popular office suites making harder to write cross platform XUL code.

Actually T2C pastes to clipboard inserting data in two different formats (flavors), unicode plain text and HTML format.
When users do “Paste Special” the HTML format is pasted and applications (Excel or Calc) render inside the data sheet.

Both Excel and Calc handle only the deprecated FONT tag and a subset of TABLE tag attributes and this represents a great limitation for style preservation from T2C.

If you try to paste from Microsoft Explorer to Microsoft Excel you discover everything is copied, the styles are totally preserved but if you paste from Explorer to OpenOffice Calc all style are lost!!!

Well, Explorer inserts to clipboard also RTF formatted text and Excel works very fine with the barely public RTF file format.

Clipboard application interoperability goes to hell, HTML is not fully supported by the “Paste Special” feature available on both suites, and as usual Microsoft uses semi proprietary data formats to exchange informations between applications.

I think at least OpenOffice should improve its “Paste” feature simply adding support for HTML style attribute.

T2C can preserve correctly styles only implementing platform specific code for OpenOffice and Microsoft Office and I really hate write specific platform.

I’m considering other alternatives but I see only the darkness of C++, OLE and core dump…

Soon or later any blogger talking about software development will post some snippet of code.

To make code more cool and attractive he/she will use syntax highlight.

There are many alternatives for many blog platforms like Pygments, GeSHI, CodeHighlighter, WP-Syntax and so on.

This blog is hosted on the free version of WordPress.com, it doesn’t allow to use any plugin or user-defined CSS so adding sexy code is very difficult.

Komodo has the ability to print to HTML files code with the syntax highlighted, this feature is fully accessible from APIs so I’ve written a macro that

• make CSS style inline replacing HTML class with corresponding style attributes
• copy to clipboard (using the new Komodo 5 clipboard helper library) in HTML format so user can paste directly on Visual WordPress mode

Below you find the macro source code obviously highlighted by itself

How to get the selected text (or the whole Komodo view) converted to HTML

The variable str at end contains the converted HTML

var view = ko.views.manager.currentView;

var tmpFileSvc = Components.classes["@activestate.com/koFileService;1"]
                 .getService(Components.interfaces.koIFileService)
fname = tmpFileSvc.makeTempName(".html");

var lang = view.document.languageObj;
var forceColor = true;
var selectionOnly = view.selection != "";
var schemeService = Components.classes['@activestate.com/koScintillaSchemeService;1'].getService();
schemeService.convertToHTMLFile(view.scimoz,
                                view.document.displayPath,
                                view.document.language,
                                lang.styleBits,
                                view.document.encoding.python_encoding_name,
                                fname,
                                selectionOnly,
                                forceColor);

var file = Components.classes["@activestate.com/koFileEx;1"]
        .createInstance(Components.interfaces.koIFileEx)
file.URI = ko.uriparse.localPathToURI(fname);
file.open('rb');
var str = file.readfile();
file.close();

Applying the replace to str

Nothing really interesting, simply the replace method is called many times to make CSS style inline inside span tags

Copy to clipboard in HTML format

Komodo 5 allows to interact with clipboard wrapping XPCOM services, these APIs allow to copy in the so called HTML flavor so content preserves styles and colors.

xtk.include("clipboard");

var transferable = xtk.clipboard.addTextDataFlavor("text/html", str);
transferable = xtk.clipboard.addTextDataFlavor("text/unicode", str, transferable);
xtk.clipboard.copyFromTransferable(transferable);

That’s all folks

After running this macro on a Komodo view you can paste directly on WordPress Visual editor and obtain your beautiful code.

Using HTML flavor you can paste into any application able to accept Special Formats like Microsoft Word or OpenOffice Writer.

The full macro source code can be found on Macro SVN repository

Copy plain text in clipboard can be obtained using code shown below.

Components.classes["@mozilla.org/widget/clipboardhelper;1"]

    .getService(Components.interfaces.nsIClipboardHelper)

    .copyString("<font color=’#FF0000′>Hello world</font>");

Using this approach you can easily copy HTML text but… it remains plain text!
So if you copy the string <font color=’#FF0000′>Hello world</font> inside OpenOffice Calc (or Microsoft Word) you don’t see the text “Hello world” in red but the plain HTML tag.

Copy data (not necessary text) using a specific format requires nsITransferable’s use.
You specify the mime type and if destination application (where you paste the data) is able to understand the format the correct result appears.

The code below insert real HTML data into clipboard and when you paste for example in OpenOffice you see the colored text.

var textHtml = "<font color='#FF0000'>Hello world</font>";

var xferable = Components.classes["@mozilla.org/widget/transferable;1"]

    .createInstance(Components.interfaces.nsITransferable);

xferable.addDataFlavor("text/html");

var htmlstring = Components.classes["@mozilla.org/supports-string;1"]

    .createInstance(Components.interfaces.nsISupportsString);

htmlstring.data = textHtml;

xferable.setTransferData("text/html", htmlstring, textHtml.length * 2);

var clipboard = Components.classes["@mozilla.org/widget/clipboard;1"]

    .getService(Components.interfaces.nsIClipboard);

clipboard.setData(xferable, null,

        Components.interfaces.nsIClipboard.kGlobalClipboard);

Consider you want be able to choose if text must be pasted like HTML or plain text, for example because some application can’t handle stylished code.
Consider a plain text editor, it handles text not colorful HTML so you need the ability to paste based on destination application.
It’s easy! You only need to add a new flavor to the code shown above

var plainText = "Hello world in plain";

xferable.addDataFlavor("text/unicode");

var unicodestring = Components.classes["@mozilla.org/supports-string;1"]

    .createInstance(Components.interfaces.nsISupportsString);

unicodestring.data = plainText;

xferable.setTransferData("text/unicode", unicodestring, plainText.length * 2);

Now text editors receive the string “Hello world in plain” without any formatting and rich editors receive a colored “Hello world”.
Rich editors like OpenOffice Calc or Writer allow user to choose how to paste using the “Paste special” function.
You can choose to paste the same data in different format or different data per different format.

Table2Clipboard uses two flavors, you can take a look at its source code here.