Rich Text Editing with React
summary
A controlled rich-text editor framework is built on top of contentEditable and integrated with React using ImmutableJS to represent document snapshots as block records, declaratively control cursor/selection via the native selection API, and implement grouped undo/redo. It supports mentions, embeds, block and inline styles, native international input and accessibility, and ships across News Feed, Messenger, composer and Notes. The implementation is open sourced as Draft.js and is used in production at Facebook.
AI-written summary · about
chapters (12)
- 0:00Intro
- 0:28Example Comment
- 0:58Previous Approach
- 1:31The Problem
- 10:04The Cursor
- 10:40The Model
- 14:15Undo redo
- 16:15Mentions
- 17:06Mention Function
- 18:56Facebook Comments
- 20:42Facebook Notes Editor
- 23:24Conclusion
related talks
50mRich text editing with Draft.js
05mRich text editing with DraftJS Plugins
45mCreating a WYSIWYG editor using ReactJS
41mReact inline visual editing: now's the time.
41mCreating collaborative editing UIs in React
57mDeveloping a Rich Text Editor: Problems and Solutions
28mReact Inline Visual Editing Now’s The Time
08mDraft.js, Editor.js, Slate.js: Choosing Text Editor