Highlight invalid text in red

Summary:
Draft is unhappy when text manages to get added outside of the DraftEditorTextNode span. I'd like to highlight that text in red to make it more noticeable so that people might notice what editing patterns trigger it.

I would have liked to do this universally for all Draft inputs (if a certain flag is turned on), but CSS doesn't make this possible: there's no way to style just the text content in a node without styling children, and there's no way to inherit a property from the grandparent element ignoring the parent's styles.

So instead you have to do this manually per editor callsite so that you actually know the correct text color. Those rules will look like:

```
.public/myEditor/root .public/DraftEditor/highlightInvalidText .public/DraftEditor/leaf {
  /* Draft.js errors are shown in red text when in a GK */
  background: red;
  color: white;
}

.public/myEditor/root .public/DraftEditor/leaf .public/DraftEditor/textNode {
  background: white;
  color: black;  /* <-- actual text color */
}
```

Reviewed By: flarnie

Differential Revision: D6056162

fbshipit-source-id: e7f0dfc058535f5666221e4f51ff3d01336e4c0a

src/component/base/DraftEditor.react.js

@@ -26,6 +26,7 @@ const DraftEditorContents = require('DraftEditorContents.react');
 const DraftEditorDragHandler = require('DraftEditorDragHandler');
 const DraftEditorEditHandler = require('DraftEditorEditHandler');
 const DraftEditorPlaceholder = require('DraftEditorPlaceholder.react');
+const DraftFeatureFlags = require('DraftFeatureFlags');
 const EditorState = require('EditorState');
 const React = require('React');
 const ReactDOM = require('ReactDOM');
@@ -267,6 +268,8 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
               // here which makes its autotranslation skip over this subtree.
               'notranslate': !readOnly,
               'public/DraftEditor/content': true,
+              'public/DraftEditor/highlightInvalidText':
+                DraftFeatureFlags.draft_highlight_invalid_text,
             })}
             contentEditable={!readOnly}
             data-testid={this.props.webDriverTestID}

src/component/contents/DraftEditorLeaf.react.js

@@ -21,6 +21,7 @@ const DraftEditorTextNode = require('DraftEditorTextNode.react');
 var React = require('React');
 var ReactDOM = require('ReactDOM');
 
+const cx = require('cx');
 const invariant = require('invariant');
 var setDraftEditorSelection = require('setDraftEditorSelection');
 
@@ -166,6 +167,7 @@ class DraftEditorLeaf extends React.Component<Props> {
     return (
       <span
         data-offset-key={offsetKey}
+        className={cx('public/DraftEditor/leaf')}
         ref="leaf"
         style={styleObj}>
         <DraftEditorTextNode>{text}</DraftEditorTextNode>

src/component/contents/DraftEditorTextNode.react.js

@@ -17,6 +17,7 @@ const React = require('React');
 const ReactDOM = require('ReactDOM');
 const UserAgent = require('UserAgent');
 
+const cx = require('cx');
 const invariant = require('invariant');
 
 // In IE, spans with <br> tags render as two newlines. By rendering a span
@@ -89,7 +90,10 @@ class DraftEditorTextNode extends React.Component<Props> {
       return this._forceFlag ? NEWLINE_A : NEWLINE_B;
     }
     return (
-      <span key={this._forceFlag ? 'A' : 'B'} data-text="true">
+      <span
+        key={this._forceFlag ? 'A' : 'B'}
+        className={cx('public/DraftEditor/textNode')}
+        data-text="true">
         {this.props.children}
       </span>
     );

src/component/utils/DraftFeatureFlags-core.js

@@ -13,6 +13,7 @@
 'use strict';
 
 var DraftFeatureFlags = {
+  draft_highlight_invalid_text: false,
   draft_killswitch_allow_nontextnodes: false,
   draft_segmented_entities_behavior: false,
 };