Rich text editing with Draft.js
summary
Claim: Draft.js replaces fragile contenteditable by syncing the DOM to an immutable data-structure (Immutable.js) so React controls rendering, yielding instant edits, cheap undo/redo and a raw JSON export for the server. Concrete tools: decorators and block renderers plus custom style maps, entities and a plugin API. Outcomes: Facebook uses it in production, @-mentions, drag‑and‑drop images, linkify, emojis (emojiOne) and hashtags work, accessibility is achievable, collaboration is still poor and Slate is the suggested alternative.
AI-written summary · about
chapters (13)
- 0:00Start
- 0:25Introduction
- 0:57Rich Text Editing
- 6:04Facebook Notes
- 12:54How To Use Draft Chess
- 13:48What Are Controlled Form Components
- 17:41Editor State Construct
- 21:47Immutable Data Structure
- 22:34Convert from Raw
- 26:04Apply a Custom Block Render Function
- 35:40Read-Only Mode
- 42:43Change the Editor State Programmatically
- 47:23Tables
related talks
05mRich text editing with DraftJS Plugins
25mRich Text Editing with React
44mAn intro to DraftJS, and its immutable data model
08mDraft.js, Editor.js, Slate.js: Choosing Text Editor
41mCreating collaborative editing UIs in React
41mReact inline visual editing: now's the time.
21mReact Beyond the DOM
44m"Creating an enterprise level editorial experience for D8 using React"