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

Made with Slides.com