React.JS - Manage content of contenteditable div as React components

Question

I'm looking for methods of managing elements of contenteditable as React components.

Exploring Facebook's source via React DevTools extension reveals that they wrote a contenteditable comment editor that seems to be fully managed by React.

You can see in the components tree that updating the conteneditable triggers updates to components tree that are children of contenteditable.

Solution 1

Facebook just released Draft.js - https://facebook.github.io/draft-js/

Solution 2

update:

Facebook has released draft-js which is meant for building text editors with react. https://github.com/facebook/draft-js

original answer which is now outdated:

Go ahead, there is nothing special for this.

here are some examples:

• https://github.com/lovasoa/react-contenteditable
• https://github.com/liamzebedee/reactjs-contenteditable/blob/master/ContentEditable.jsx
• https://stackoverflow.com/a/22678516/1536309

Comments

[Max]

Those who are familiar with React, should know about the difficulties concerning with managing a reliable state of contentediatble element while providing a smooth user experience. I'm not asking how to create complex editor, there are plenty of those; I'm rather asking about ways to manage state of contenteditable element as React components.

[Jacob Oscarson]

Facebook has most likely poured countless of hours into making that control work as smooth as it does. You could probably re-implement it, but count on lots of work. Contenteditable elements are notoriously ridden with tricky edge-cases and browser compatibility issues. Their component is most likely not open and couldn't be - it's probably too deeply integrated with the rest of their system.

[Justin Lawrence]

The top link gives a 404. It should be github.com/lovasoa/react-contenteditable