Building a Text Editor for the New York Times

I'm sure I'm not the only technical writer who has fantasized about building my own text editor or word processor. A lucky team at the New York Times got the chance to do exactly that and built an editor for use by the Times' newsroom staff. As you might expect, the Times had some requirements specific to the newspaper business, but what they built would probably keep most technical writers quite happy.

As the newsroom evolves, we envisioned a new story editor that would visually bring the different components of stories inline, so that reporters and editors alike could see exactly what a story would look like before it publishes. Additionally, the new approach would ideally be more intuitive and flexible in its code implementation, avoiding many of the problems caused by the older editor.

With these two goals in mind, my team set out to build this new text editor, which we named Oak. After much research and months of prototyping, we opted to build it on the foundation of ProseMirror, a robust open-source JavaScript toolkit for building rich-text editors. ProseMirror takes a completely different approach than our old text editor did, representing the document using its own non-HTML tree-shaped data structure that describes the structure of the text in terms of paragraphs, headings, lists, links and more.

Unlike the output of our old editor, the output of a text editor built on ProseMirror can ultimately be rendered as a DOM tree, Markdown text or any other number of other formats that can express the concepts it encodes, making it very versatile and solving many of the problems we run into with our legacy text editor.

The article goes into a fair bit of technical detail. If you're a tools geek like I am, you'll find it quite fascinating. It's notable that the editor is based on ProseMirror, an open source JavaScript toolkit, and doesn't use DITA.