Facebook’s official implementation:
After writing our in-house rich text editor (I know, it was a bad idea), I kept wondering whether there is a better way.
React.js opens some interesting possibilities, because now rending to DOM is so cheap. Additionally, the medium engineering team’s blog re-assured the difficulty of writing a contenteditable editor and shared similar visions with Polymer web components.
At a very high level, I think the approach could be similar to what Medium is doing right now:
- Apply a sequence of atomic operations on an in-memory text string to generate innerHTML, give the innerHTML to the virtual DOM, and let Reactjs update the actual DOM.
- Atomic operations could be bold / underline / h2 / h3 etc. They takes a text string and outputs HTML.
- In-memory text string is the raw text, typed by the author
- We also need a controller to coordinate atomic operations, meaning not only know how to apply one operation at a particular start-end position of the text string, but also knowing how to prioritize different operations.
This also reminds me of the fancy command logging, the idea of always starting with a base state, and generate current state by applying many many atomic operations.
Anyway, would love to write a rich text editor that doesn’t suck and generate consistent HTML markups in React.js, but it is a pretty big undertake… Maybe someday…