Rich-text editors in ReactJS — An intro to DraftJS

Following are the resources/items that have been featured in the presentation:

- The Hashnode Editor: https://hashnode.com/write/story
- DraftJS Samples: https://draft-js-samples.now.sh/Home
- DraftJS on Hashnode: https://hashnode.com/n/draftjs

- DraftJS Documentation: https://draftjs.org/docs/overview.html
- ImmutableJS Documentation: https://facebook.github.io/immutable-js/docs

Transcript

1. Rich-text editors in ReactJS An intro to DraftJS
2. HI!
3. STRUCTURED CONTENT EDITING
4. STRUCTURED CONTENT EDITING Three paradigms...
5. STRUCTURED CONTENT EDITING WHAT YOU SEE IS WHAT YOU GET
6. STRUCTURED CONTENT EDITING WHAT YOU SEE IS WHAT YOU MEAN
9. STRUCTURED CONTENT EDITING WHAT YOU SEE IS WHAT YOU MEAN
10. STRUCTURED CONTENT EDITING <SourceCode> VIEW
11. THE HASHNODE EDITOR
12. THE HASHNODE EDITOR
13. THE HASHNODE EDITOR
14. THE HASHNODE EDITOR
15. WHY WYSIWYG
16. CONTENT-EDITABLE
17. CONTENT-EDITABLE
18. ENTER DraftJS Normalises the content-editable markup across browsers...
19. ENTER DraftJS The declarative goodness of React...
20. ENTER DraftJS An immutable data model which represents an editor state...
21. ENTER DraftJS An immutable data model which represents an editor state... along with a set of APIs
22. ENTER DraftJS
23. THE DraftJS DATA MODEL EDITOR STATE
24. THE DraftJS DATA MODEL EDITOR STATE CONTENT STATE SELECTION STATE
25. THE DraftJS DATA MODEL EDITOR STATE CONTENT STATE SELECTION STATE CONTENT BLOCK CONTENT BLOCK
26. THE DraftJS DATA MODEL EDITOR STATE CONTENT STATE SELECTION STATE CONTENT BLOCK CHARACTER LIST CONTENT BLOCK CHARACTER LIST
27. THE DraftJS DATA MODEL EDITOR STATE CONTENT STATE ENTITIES DECORATORS SELECTION STATE CONTENT BLOCK CHARACTER LIST CONTENT BLOCK CHARACTER LIST
30. Questions? You should ask them on: hashnode.com/n/draftjs