From bf718614d8bb05b166c008651063109ab5b7d2ac Mon Sep 17 00:00:00 2001
From: Sophie Alpert <sophiebits@fb.com>
Date: Fri, 13 Oct 2017 16:13:23 -0700
Subject: [PATCH] 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             | 3 +++
 src/component/contents/DraftEditorLeaf.react.js     | 2 ++
 src/component/contents/DraftEditorTextNode.react.js | 6 +++++-
 src/component/utils/DraftFeatureFlags-core.js       | 1 +
 4 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/component/base/DraftEditor.react.js b/src/component/base/DraftEditor.react.js
index 430ae31..3630755 100644
--- a/src/component/base/DraftEditor.react.js
+++ b/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}
diff --git a/src/component/contents/DraftEditorLeaf.react.js b/src/component/contents/DraftEditorLeaf.react.js
index e1a7308..00d2ea3 100644
--- a/src/component/contents/DraftEditorLeaf.react.js
+++ b/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>
diff --git a/src/component/contents/DraftEditorTextNode.react.js b/src/component/contents/DraftEditorTextNode.react.js
index 8c273cb..961d806 100644
--- a/src/component/contents/DraftEditorTextNode.react.js
+++ b/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>
     );
diff --git a/src/component/utils/DraftFeatureFlags-core.js b/src/component/utils/DraftFeatureFlags-core.js
index 183284f..b0dc50e 100644
--- a/src/component/utils/DraftFeatureFlags-core.js
+++ b/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,
 };