Bringing OpenDocument to the web, collaboratively

Last week, the first version of OwnCloud Documents was released as a part of OwnCloud 6. This incorporates  a subset of editing features from the upstream WebODF project that is considered stable and well-tested enough for collaborative editing.

This was a much-anticipated release and lots of nice reviews are pouring in, so I thought I’d take some time to write about WebODF and all the stuff we at KO GmbH been working on upstream.

So what is WebODF?

WebODF is a javascript library that lets you display ODF files in your browser. Think of it as PDF.js, but for ODF. You just throw a webodf.js script on your server, and do a couple of javascript calls to render an ODF file. It works completely client-side, no serverside ODF processing required. You only need a server to actually serve the javascript file. However, WebODF does not do any conversion to HTML. It really shows you the actual ODF, styled with CSS. To see this, you can simply inspect the document:

Inspecting a document in the WebODF Viewer in Chrome.

As part of the WebODF project, you also get the viewer (shown above) and an editor application.

Aside: We’ve written a unified PDF and ODF viewer called ViewerJS and have released it as a standalone package that you can put on your server. This uses both the PDF.js and WebODF backends to show you a wider variety of formats.

Editing

The WebODF editor works by default in single-user mode. After more than a year of hard work laying the foundations for editing, we have now begun to implement new features rapidly.

The Editor UI is written using the Dojo toolkit and is ready to use for the average user already.

WebODF Editor action shot.

It lets you:

• Apply, Remove, and Modify Paragraph Styles (with proper style inheritance handling).
• Do basic Undo/Redo.
• Apply direct text formatting through the toolbar and hotkeys – Bold, Italics, Underline, Strikethrough.
• Change font style and size.
• Modify indentation.
• Apply different alignments – Left, Center, Right, Justified.
• Insert and Remove links.
• Add Images.
• Zoom in and out.
• Add and Remove Annotations.
• Open, Edit, and Save an ODT document, both completely client-side, without ever talking to a server!

Collaboration

The recent NSA scandal has shaken the faith of many in ‘the cloud’, or at least the services hosted by the likes of Google and Microsoft. Therefore, being able to self-host this is a very attractive idea in the recent climate. However, open-source solutions in this space have generally dealt with plaintext or only very simple formatting (think Etherpad), which is why we’re very proud to roll this out.

Collaborative editing in action. Note the improved selections and paragraph edit history markers.

The collaborative server, included with OwnCloud Documents, lets users join a ‘session’, which is basically a document with a history of edit operations. Operations are small units of edits (think ‘commits’). In a collaborative session, we use Operational Transformation techniques to make sure that operations fired by various clients will eventually result in a consistent state everywhere. When a new client joins an existing session, all earlier operations are played-back for it to reach the current state.

Note that this editing is not turn-based; this is true inline collaborative editing where users can join a document and start editing straight away. Like in other similar applications, the OT is smart enough to not give a no-op result when one user inserts a character and another presses ‘delete’ at the same position – instead, the second user will remove it’s target character and the new character will be inserted next to it in the ‘converged’ state; thus respecting the intent of the edit operations.

When multiple users edit a paragraph, it gets a  ‘marker’ on it’s left in the color of the last editing user. Hovering over it shows a tooltip that provides information on which user edited it last.

Users’ selections are also collaborative, so you can neatly see what any other user has selected. This is useful for ‘indicating’ a region whilst reviewing something.

At the moment, we have our own homecooked library of Operations, for actions like cursor addition/movement/removal, text insertion/removal, style application, and more. Hopefully, we shall be able to agree upon a common spec for operations in the future with other developers for interoperability.

PS: Grab the source code at https://github.com/kogmbh/WebODF