An intro to DraftJS, and its immutable data model
summary
Explains that DraftJS plus ImmutableJS gives an immutable data model representing editor state, selection, blocks, entities and decorators and shows the actual APIs used (EditorState, ContentState, entities, decorators, convertToRaw/convertFromRaw). Demonstrates structural sharing for cheap undo/redo, normalizes contentEditable across browsers, shares a Learn DraftJS tutorial and reports a practical perf datapoint: processing 50,000 characters takes ~600–700ms. Shows how edits are applied and how HTML import/export is handled.
AI-written summary · about
chapters (8)
- 0:00Start
- 3:39STRUCTURED CONTENT EDITING
- 6:14CONTENT-EDITABLE
- 6:35Why ContentEditable is Terrible
- 9:26How the Medium Editor Works
- 9:41PROSE MIRROR
- 10:09Open Source
- 30:26QUESTIONS?
related talks
50mRich text editing with Draft.js
05mRich text editing with DraftJS Plugins
08mDraft.js, Editor.js, Slate.js: Choosing Text Editor
25mRich Text Editing with React
41mCreating collaborative editing UIs in React
25mCursors Illustrated: Collaborative sketching
31mImmutable Data and React
21mReact Beyond the DOM