Rich text editing with Draft.js

Walking through how Draft.js EditorState is structured, how to use decorators as well as custom blocks.

Transcript

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