<p dir="auto"></p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/facebook/react/blob/0e8db6ba424564833866a3044e62f4034ec98faa/src/renderers/dom/shared/ReactDOMComponent.js#L178-L184">react/src/renderers/dom/shared/ReactDOMComponent.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
        Lines 178 to 184
      in
      <a data-pjax="true" class="commit-tease-sha" href="/facebook/react/commit/0e8db6ba424564833866a3044e62f4034ec98faa">0e8db6b</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L178" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="178"></td>
          <td id="LC178" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-s1">warning</span><span class="pl-kos">(</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L179" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="179"></td>
          <td id="LC179" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-c1">!</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">contentEditable</span> <span class="pl-c1">||</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">children</span> <span class="pl-c1">==</span> <span class="pl-c1">null</span><span class="pl-kos">,</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L180" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="180"></td>
          <td id="LC180" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-s">'A component is `contentEditable` and contains `children` managed by '</span> <span class="pl-c1">+</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L181" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="181"></td>
          <td id="LC181" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-s">'React. It is now your responsibility to guarantee that none of '</span> <span class="pl-c1">+</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L182" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="182"></td>
          <td id="LC182" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-s">'those nodes are unexpectedly modified or duplicated. This is '</span> <span class="pl-c1">+</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L183" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="183"></td>
          <td id="LC183" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-s">'probably not intentional.'</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L184" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="184"></td>
          <td id="LC184" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-kos">)</span><span class="pl-kos">;</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">React warns:</p>
<blockquote>
<p dir="auto">A component is <code class="notranslate">contentEditable</code> and contains <code class="notranslate">children</code> managed by<br>
React. It is now your responsibility to guarantee that none of<br>
those nodes are unexpectedly modified or duplicated. This is<br>
probably not intentional.</p>
</blockquote>
<p dir="auto">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.</p>
<p dir="auto">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.</p>
<p dir="auto">We're writing a WYSIWYG editor in React, and in order to place a cursor inside the rich document we use <code class="notranslate">contentEditable</code>. Understandably, React doesn't fare well with contentEditable - to get around the framework's confusion once contentEditable children are modified, we force re-renders with new keys and do other work to restore the selection. In practice, we have this working pretty well.</p>
<p dir="auto">With 0.12, we're getting the new warning:</p>
<blockquote>
<p dir="auto">A component is <code class="notranslate">contentEditable</code> and contains <code class="notranslate">children</code> managed by React. It is now your responsibility to guarantee that none of these nodes are unexpectedly modified or duplicated. This is probably not intentional.</p>
</blockquote>
<p dir="auto">In our case, we do guarantee that nodes are unexpectedly modified or duplicated, and it is intentional. Is there any way to suppress that warning? Unlike the Factory warning, this warning appears each time the component is instantiated (I think) - at the very least, it slowly fills up our consoles.</p>
<p dir="auto">(We've considered an alternative of not using children on the contentEditable, and on component update we set the <code class="notranslate">innerHTML</code> outside of React - this would likely sidestep the warning, but not get us much else.)</p>