Download - Rich text editing with Draft.js
Rich text editing with
Draft.js
@nikgraf
Nik Graf
@nikgraf
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/