Eric Lewis
@ericandrewlewis
Web Developer @
The New York Times

Text Editing at
The New York Times



Rethinking our authoring experience
Options for web text editors
- Implement an editor from scratch
- Use Content Editable
An editor from scratch

Use Content Editable


https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480




Content Editable Libraries
WordPress 2.0 "Duke" introduces WYSIWYG, and TinyMCE

The NYT Article CMS
TinyMCE in Scoop


Track Changes
If we built a new editor, what would it look like?

Bring media into the editor
Is HTML our desired document format?
<NYTVIDEO id="1000001230101"> <p>The <a href="http://topics.nytimes.com/top/reference/timestopics/organizations/s/supreme_court/index.html?inline=nyt-org">Supreme Court</a> announced on Thursday that it had deadlocked in a case challenging President Obama’s immigration plan, effectively ending what Mr. Obama had hoped would become one of his central legacies. The program would have shielded as many as five million undocumented immigrants from deportation and allowed them to legally work in the United States.</p>

Target Platforms


Target Platforms


Field-level Locking


"Content data structure is HTML/DOM"
—TinyMCE*
*Not an actual quote, software doesn't talk
TinyMCE Mutation Flow
- User presses a key
- DOM mutates itself
- TinyMCE checks and fixes browser inconsistencies
"Content data structure is a JavaScript object" —ProseMirror
{
type: "doc",
content: [
{
type: "heading1",
content: [
{text: "Hello "},
{text: "WordCamp Europe", formats: ["bold"]}
]
},
{
type: "paragraph",
content: [
{text: "Enjoy your afternoon!"}
]
}
]
}
ProseMirror Mutation Flow
- User presses a key
- ProseMirror overrides DOM events
- PM edits its document structure
- PM mutates DOM appropriately
H
Hi
{ type: 'replace', from: 2, to: 2, content: 'i' }
Document changes are JSON
{ from: 1, to: 1, type: replace, content: 'H' }
{ from: 2, to: 2, type: replace, content: 'e' }
{ from: 3, to: 3, type: replace, content: 'l' }
{ from: 4, to: 4, type: replace, content: 'l' }
{ from: 5, to: 5, type: replace, content: 'o' }
A collection of changes
Collaborative Editing

Controlled document schema
- e.g. only paragraphs and unordered lists with plain text
- Allows for custom node types (e.g. NYT video)

Q&A
Editing Text at The NYT
By Eric Lewis
Editing Text at The NYT
- 3,721