From 3bec9f070fa0de5c749f91a9bcbf7a901135cb8f Mon Sep 17 00:00:00 2001
From: Andreas Svensson <andreas@syranide.com>
Date: Mon, 12 May 2014 22:25:57 +0200
Subject: [PATCH] Guard against contentEditable with children props

---
 src/browser/ui/ReactDOMComponent.js             | 10 ++++++++++
 .../ui/__tests__/ReactDOMComponent-test.js      | 17 +++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/browser/ui/ReactDOMComponent.js b/src/browser/ui/ReactDOMComponent.js
index 6b65664e86..8b5136c7fe 100644
--- a/src/browser/ui/ReactDOMComponent.js
+++ b/src/browser/ui/ReactDOMComponent.js
@@ -58,6 +58,16 @@ function assertValidProps(props) {
     props.children == null || props.dangerouslySetInnerHTML == null,
     'Can only set one of `children` or `props.dangerouslySetInnerHTML`.'
   );
+  if (__DEV__) {
+    if (props.contentEditable && props.children != null) {
+      console.warn(
+        '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.'
+      );
+    }
+  }
   invariant(
     props.style == null || typeof props.style === 'object',
     'The `style` prop expects a mapping from style properties to values, ' +
diff --git a/src/browser/ui/__tests__/ReactDOMComponent-test.js b/src/browser/ui/__tests__/ReactDOMComponent-test.js
index ccc279f2e2..cdaf226c62 100644
--- a/src/browser/ui/__tests__/ReactDOMComponent-test.js
+++ b/src/browser/ui/__tests__/ReactDOMComponent-test.js
@@ -335,6 +335,13 @@ describe('ReactDOMComponent', function() {
       );
     });
 
+    it("should warn about contentEditable and children", function() {
+      spyOn(console, 'warn');
+      mountComponent({ contentEditable: true, children: '' });
+      expect(console.warn.argsForCall.length).toBe(1);
+      expect(console.warn.argsForCall[0][0]).toContain('contentEditable');
+    });
+
     it("should validate against invalid styles", function() {
       expect(function() {
         mountComponent({ style: 'display: none' });
@@ -368,6 +375,16 @@ describe('ReactDOMComponent', function() {
       );
     });
 
+    it("should warn about contentEditable and children", function() {
+      spyOn(console, 'warn');
+      React.renderComponent(
+        <div contentEditable><div /></div>,
+        container
+      );
+      expect(console.warn.argsForCall.length).toBe(1);
+      expect(console.warn.argsForCall[0][0]).toContain('contentEditable');
+    });
+
     it("should validate against invalid styles", function() {
       React.renderComponent(<div></div>, container);