A medium contenteditable editor written in React?

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:

  1. 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.
  2. Atomic operations could be bold / underline / h2 / h3 etc. They takes a text string and outputs HTML.
  3. In-memory text string is the raw text, typed by the author
  4. 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…