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
   

   View Slide

2. @nikgraf
   Nik Graf
   @nikgraf

   nik@nikgraf.com
   Open Source
   Carte Blanche
   DraftJS Plugins
   Belle
   

   View Slide

3. You are born

   Pretty exciting!
   time
   happiness
   

   View Slide

4. You are born

   Pretty exciting!
   Becoming a teenager
   time
   happiness
   

   View Slide

5. You are born

   Pretty exciting!
   Becoming a teenager
   First kiss
   time
   happiness
   

   View Slide

6. You are born

   Pretty exciting!
   Becoming a teenager
   First kiss
   First breakup:
   Why me?
   time
   happiness
   

   View Slide

7. You are born

   Pretty exciting!
   Becoming a teenager
   First kiss
   First breakup:
   Why me?
   DraftJS released
   time
   happiness
   

   View Slide

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.
   

   View Slide

9. @nikgraf
   

   View Slide

10. @nikgraf
    

    View Slide

11. @nikgraf
    
    This text can be edited by the user.
    
    

    View Slide

12. @nikgraf
    

    View Slide

13. @nikgraf
    Structure
    EditorState
    • ContentState
    • SelectionState
    

    View Slide

14. @nikgraf
    Lorem ipsum dolor sit amet
    Lorem ipsum #dolor sit amet
    Lorem ipsum dolor sit amet
    ContentState

    Block
    Text - Character
    ContentState
    

    View Slide

15. @nikgraf
    

    View Slide

16. @nikgraf
    

    View Slide

17. @nikgraf
    

    View Slide

18. @nikgraf
    

    View Slide

19. @nikgraf
    

    View Slide

20. @nikgraf
    

    View Slide

21. @nikgraf
    Manipulation
    • decorators (wrap text with a Component)
    • “React” -> “React”
    • blockStyleFn (apply class to a whole block)
    • blockRendererFn (render custom block)
    

    View Slide

22. @nikgraf
    Decorator
    

    View Slide

23. @nikgraf
    Decorator
    

    View Slide

24. @nikgraf
    Decorator
    

    View Slide

25. @nikgraf
    blockRendererFn
    

    View Slide

26. @nikgraf
    blockRendererFn
    

    View Slide

27. @nikgraf
    blockRendererFn
    

    View Slide

28. @nikgraf
    

    View Slide

29. View Slide

30. @nikgraf
    The End
    

    Thanks for listening!

    

    https://github.com/nikgraf

    

    https://twitter.com/nikgraf
    http://www.meetup.com/Vienna-ReactJS-Meetup/
    

    View Slide