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
  • 1,028
  • 2
  • 8
  • 28
  • 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

3 Answers3

4

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

Max
  • 1,028
  • 2
  • 8
  • 28
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
  • 19,463
  • 8
  • 77
  • 114
-1

One use case of controlling content editable in react js:

One use case of controlling content editable in react js

SherylHohman
  • 16,580
  • 17
  • 88
  • 94
Kimera Moses
  • 19
  • 3
  • 1
    Thanks for your answer. The code would best be provided in text form (as a code block in your answer) instead of an image, which is not accessible for every reader. – Ingo Steinke Nov 05 '22 at 21:02
  • Welcome to SO! All code & error messages must be posted in text format that can be easily copy-pasted into editors & search engines. Pictures of text can be difficult to read, especially on mobile, and said posts may be subject to deletion. Additionally, SO highly encourages explainations how/why your solution solves the OP's issue. Bonus: over time, high quality answers tend to gain more upvotes over time, as future visitors apply knowledge & insight from your post to their owning coding issues. Consider [editing](https://stackoverflow.com/posts/74281493/edit) to improve quality of your post. – SherylHohman Nov 06 '22 at 14:17