Eric Lewis
@ericandrewlewis
Web Developer @
The New York Times
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2786225/d26N0cfo.jpg)
Text Editing at
The New York Times
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2786888/back.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2786924/oak.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2786888/back.gif)
Rethinking our authoring experience
Options for web text editors
- Implement an editor from scratch
- Use Content Editable
An editor from scratch
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2766494/back.gif)
Use Content Editable
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2765793/back.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2735613/Screen_Shot_2016-06-11_at_10.32.03_AM.png)
https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2735617/Screen_Shot_2016-06-11_at_10.34.39_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2735618/CKEditor_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2735620/Screen_Shot_2016-06-11_at_10.34.55_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2735623/Screen_Shot_2016-06-11_at_10.37.45_AM.png)
Content Editable Libraries
WordPress 2.0 "Duke" introduces WYSIWYG, and TinyMCE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2765823/Screen_Shot_2016-06-19_at_12.08.18_PM.png)
The NYT Article CMS
TinyMCE in Scoop
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2786888/back.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2765861/back.gif)
Track Changes
If we built a new editor, what would it look like?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2766943/back.gif)
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>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2766971/Screen_Shot_2016-06-19_at_7.03.54_PM.png)
Target Platforms
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2766970/iphone6s-plus-box-gray-2015_GEO_US.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2766972/best-android-phones-nexus-6p-100631249-large.idge.jpg)
Target Platforms
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2766971/Screen_Shot_2016-06-19_at_7.03.54_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2786961/Screen_Shot_2016-06-24_at_2.28.07_PM.png)
Field-level Locking
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2786964/Screen_Shot_2016-06-24_at_2.29.47_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2786974/pm.gif)
"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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2767041/F00b8.png)
Controlled document schema
- e.g. only paragraphs and unordered lists with plain text
- Allows for custom node types (e.g. NYT video)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/416418/images/2786924/oak.gif)
Q&A
Editing Text at The NYT
By Eric Lewis
Editing Text at The NYT
- 3,885