Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rich-text editors in ReactJS — An intro to DraftJS

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

8464e9754c993cc89705f097a798f796?s=128

Sai Kishore Komanduri

April 22, 2017
Tweet

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

  7. None
  8. None
  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
  28. None
  29. None
  30. Questions? You should ask them on: hashnode.com/n/draftjs