A way to disable contenteditable warnings

https://github.com/facebook/react/blob/0e8db6ba424564833866a3044e62f4034ec98faa/src/renderers/dom/shared/ReactDOMComponent.js#L178-L184

React warns:

A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

I am writing a rich text editor using React, and have written it to ensure that the nodes are not modified by the browser by capturing all input events, performing the modifications on my internal document format, and re-rendering using React. However, on each render, React still warns me about this.

I would be awesome to be able to disable this warning somehow, such as with a specific value to the contentEditable prop, another name or something. I’m not sure the best approach to take here, so I thought I’d create an issue for discussion around this.

[mjgil]

+1

[jimfb]

You can capture input events without content editable (http://jsfiddle.net/vm9gjhs3/) and can simulate the cursor behavior yourself (which you basically need to do anyway in order to implement a good editor, as per https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480#6497). The browsers all have different behaviors with regards to how cursor position works. If you want a truly nice editor, you will end up using almost nothing from contentEditable. But I get it, you’re trying to reuse the browser’s functionality under the (very optimistic) assumption that contentEditable gets you most of the way there.

With regards to your hack: A better stopgap solution (hack) would probably be to set contentEditable imperatively (as demonstrated in my fiddle: http://jsfiddle.net/4q2p6ug8/). That way, React doesn’t even know you’ve set it, and you can share your component without overwriting other people’s console.error method.