11

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.

enter image description here

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

Max
  • 883
  • 2
  • 7
  • 27
  • It's not clear what your programming question is. It's too broad to ask for someone to detail out how to create a complex editor. – WiredPrairie Jun 02 '15 at 18:03
  • 1
    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. – Max Jun 02 '15 at 21:50
  • 2
    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. – Jacob Oscarson Jun 03 '15 at 09:59

2 Answers2

4

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

Max
  • 883
  • 2
  • 7
  • 27
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:

Community
  • 1
  • 1
Blair Anderson
  • 18,297
  • 7
  • 71
  • 100