Rich text editing with

Draft.js

@nikgraf

Nik Graf

@nikgraf

nik@nikgraf.com

Open Source Carte Blanche DraftJS Plugins Belle

You are bornPretty exciting!

time

happiness

You are bornPretty exciting!

Becoming a teenager

time

happiness

You are bornPretty exciting!

Becoming a teenager

First kiss

time

happiness

You are bornPretty exciting!

Becoming a teenager

First kiss

First breakup: Why me?

time

happiness

You are bornPretty exciting!

Becoming a teenager

First kiss

First breakup: Why me?

DraftJS released

time

happiness

@nikgraf

DraftJS

DraftJS is a framework for building rich text editors in React built & used within Facebook.

It got released at ReactConf in February and powers editing of comments, notes and status updates within Facebook.

@nikgraf

@nikgraf

@nikgraf

<div contenteditable=“true"> This text can be edited by the user. </div>

@nikgraf

@nikgraf

Structure

EditorState

• ContentState

• SelectionState

@nikgraf

Lorem ipsum dolor sit amet

Lorem ipsum #dolor sit amet

Lorem ipsum dolor sit amet

ContentStateBlock Text - Character

ContentState

@nikgraf

@nikgraf

@nikgraf

@nikgraf

@nikgraf

@nikgraf

@nikgraf

Manipulation

• decorators (wrap text with a Component)

• “React” -> “React🎉”

• blockStyleFn (apply class to a whole block)

• blockRendererFn (render custom block)

@nikgraf

Decorator

@nikgraf

Decorator

@nikgraf

Decorator

@nikgraf

blockRendererFn

@nikgraf

blockRendererFn

@nikgraf

blockRendererFn

@nikgraf

@nikgraf

The End

Thanks for listening!

https://github.com/nikgraf

https://twitter.com/nikgraf

http://www.meetup.com/Vienna-ReactJS-Meetup/