Draft.js
et l'utopie du traitement de texte sur le web

React
Nantes

@florentduveau

artisan JavaScript 

@kisskissbankbank

TL;TR

Utilisez le <textarea> tant que vous pouvez

Word-like

CKEditor \o/

LOOOUUURRRD

HTML / designMode

HTML / contentEditable

execCommand / queryCommandState

<strong> ou <b> ?

La réponse est : 

source : https://developer.mozilla.org/fr/docs/Web/API/Document/execCommand

NO SPEC !!!

IE 5.5

1999

2005

Anne van Kesteren

[...] Ian tracked me down and put me on on debugging contentEditable in Internet Explorer. Quite cool. 
Except for the fact that IE is horribly broken. Totally, utterly, completely broken. 
Or rather, it works, but it is messy as hell. [...]

2004

Ian Hickson

Aryeh Gregor

Début du travail d'écriture

d'un standard (WIP)

2010/2011

2014

The Editing Task Force

2019

Standardisons !

#FAIL

Pourquoi est-ce si dur ?

contentEditable /execCommand

  1. Pas de Spec à la base ! (Draft)
     
  2. API non fiable
     
  3. API non extensible
     
  4. Scope énorme (selection, keyboard, style, undo/redo...)
     
  5. Assurer une rétro-compatibilité (20 ans !)

Mais comment font-ils ?

CKeditor / TinyMCE / ...

  1. On garde contentEditable (trop compliqué à réécrire)
  2. On surcharge (et on étend) toute l'API d'execCommand  

La Next Generation

Trix

ProseMirror

wysiwyg

Rich Text Editor

contentEditable comme input

DOM

Data Model

Draft.js

Rich Text Editor...

pour React

2016 par Facebook

Le DataModel Draft.js

Chaque modification créé une nouvelle copie de l'EditorState

Voici un texte

Je l'ai écrit avec Draft.js

EditorState

  • ContentState
    • Blocks[]​​​
      • Type
      • InlineStyle[]
    • Entity
  • SelectionState

H1

P

#ReactNantes

P

Blocks

Styles

  • ITALIC
  • BOLD
  • UNDERLINE
  • CODE

Draft.js c'est

  • Une API bas niveau (extensible)
     

  • Un Rich Text Editor boosté par React

Les 

Tout ce que j'ai dis avant..

  • API pas totalement mature
  • Doc très moyenne
  • Encore en beta (v0.10.5)
  • Immutable.JS ?!
  • Pas de système simple de plugin
  • Open-source (15 000)
  • Projet actif
  • Extensible à (presque) l'infini
  • React

Draft.js Plugins !

Une trouzaine de Rich Text Editor basés sur Draft.js

Des questions ?

Draft_JS

By Florent DUVEAU

Made with Slides.com

Draft_JS

  • 1,216

More from Florent DUVEAU