Rich text editing with Draft.js

Slide 1

Slide 1 text

Slide 2

Slide 2 text

@nikgraf Nik Graf @nikgraf  [email protected] Open Source Carte Blanche DraftJS Plugins Belle

Slide 3

Slide 3 text

You are born  Pretty exciting! time happiness

Slide 4

Slide 4 text

You are born  Pretty exciting! Becoming a teenager time happiness

Slide 5

Slide 5 text

You are born  Pretty exciting! Becoming a teenager First kiss time happiness

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

@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.

Slide 9

Slide 9 text

@nikgraf

Slide 10

Slide 10 text

@nikgraf

Slide 11

Slide 11 text

@nikgraf

This text can be edited by the user.

Slide 12

Slide 12 text

@nikgraf

Slide 13

Slide 13 text

@nikgraf Structure EditorState • ContentState • SelectionState

Slide 14

Slide 14 text

@nikgraf Lorem ipsum dolor sit amet Lorem ipsum #dolor sit amet Lorem ipsum dolor sit amet ContentState  Block Text - Character ContentState

Slide 15

Slide 15 text

@nikgraf

Slide 16

Slide 16 text

@nikgraf

Slide 17

Slide 17 text

@nikgraf

Slide 18

Slide 18 text

@nikgraf

Slide 19

Slide 19 text

@nikgraf

Slide 20

Slide 20 text

@nikgraf

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

@nikgraf Decorator

Slide 23

Slide 23 text

@nikgraf Decorator

Slide 24

Slide 24 text

@nikgraf Decorator

Slide 25

Slide 25 text

@nikgraf blockRendererFn

Slide 26

Slide 26 text

@nikgraf blockRendererFn

Slide 27

Slide 27 text

@nikgraf blockRendererFn

Slide 28

Slide 28 text

@nikgraf

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

@nikgraf The End   Thanks for listening!    https://github.com/nikgraf    https://twitter.com/nikgraf http://www.meetup.com/Vienna-ReactJS-Meetup/