rich text editing with draft.js
TRANSCRIPT
![Page 1: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/1.jpg)
Rich text editing with
Draft.js
![Page 2: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/2.jpg)
@nikgraf
Nik Graf
@nikgraf
Open Source Carte Blanche DraftJS Plugins Belle
![Page 3: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/3.jpg)
You are bornPretty exciting!
time
happiness
![Page 4: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/4.jpg)
You are bornPretty exciting!
Becoming a teenager
time
happiness
![Page 5: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/5.jpg)
You are bornPretty exciting!
Becoming a teenager
First kiss
time
happiness
![Page 6: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/6.jpg)
You are bornPretty exciting!
Becoming a teenager
First kiss
First breakup: Why me?
time
happiness
![Page 7: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/7.jpg)
You are bornPretty exciting!
Becoming a teenager
First kiss
First breakup: Why me?
DraftJS released
time
happiness
![Page 8: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/8.jpg)
@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.
![Page 9: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/9.jpg)
@nikgraf
![Page 10: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/10.jpg)
@nikgraf
![Page 11: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/11.jpg)
@nikgraf
<div contenteditable=“true"> This text can be edited by the user. </div>
![Page 12: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/12.jpg)
@nikgraf
![Page 13: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/13.jpg)
@nikgraf
Structure
EditorState
• ContentState
• SelectionState
![Page 14: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/14.jpg)
@nikgraf
Lorem ipsum dolor sit amet
Lorem ipsum #dolor sit amet
Lorem ipsum dolor sit amet
ContentStateBlock Text - Character
ContentState
![Page 15: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/15.jpg)
@nikgraf
![Page 16: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/16.jpg)
@nikgraf
![Page 17: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/17.jpg)
@nikgraf
![Page 18: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/18.jpg)
@nikgraf
![Page 19: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/19.jpg)
@nikgraf
![Page 20: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/20.jpg)
@nikgraf
![Page 21: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/21.jpg)
@nikgraf
Manipulation
• decorators (wrap text with a Component)
• “React” -> “React🎉”
• blockStyleFn (apply class to a whole block)
• blockRendererFn (render custom block)
![Page 22: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/22.jpg)
@nikgraf
Decorator
![Page 23: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/23.jpg)
@nikgraf
Decorator
![Page 24: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/24.jpg)
@nikgraf
Decorator
![Page 25: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/25.jpg)
@nikgraf
blockRendererFn
![Page 26: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/26.jpg)
@nikgraf
blockRendererFn
![Page 27: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/27.jpg)
@nikgraf
blockRendererFn
![Page 28: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/28.jpg)
@nikgraf
![Page 29: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/29.jpg)
![Page 30: Rich text editing with Draft.js](https://reader034.vdocuments.mx/reader034/viewer/2022050914/586fbb231a28abe57d8b899b/html5/thumbnails/30.jpg)
@nikgraf
The End
Thanks for listening!
https://github.com/nikgraf
https://twitter.com/nikgraf
http://www.meetup.com/Vienna-ReactJS-Meetup/