Add cursorColor support to TextInput (#1787)

* Add cursorColor support to TextInput

* Better organize macOS comments and rely on autosynthesized behavior.

* Use RCT_REMAP_VIEW_PROPERTY instead of RCT_REMAP_OSX_VIEW_PROPERTY

---------

Co-authored-by: Dmitrii Litsman <[email protected]>

Author: dlitsman

Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -163,6 +163,7 @@ const RCTTextInputViewConfig = {
     pastedTypes: true,
     submitKeyEvents: true,
     tooltip: true,
+    cursorColor: {process: require('../../StyleSheet/processColor').default},
     // macOS]
     ...ConditionallyIgnoredEventHandlers({
       onChange: true,

Libraries/Components/TextInput/TextInput.js

@@ -612,7 +612,8 @@ type AndroidProps = $ReadOnly<{|
    * When provided it will set the color of the cursor (or "caret") in the component.
    * Unlike the behavior of `selectionColor` the cursor color will be set independently
    * from the color of the text selection box.
-   * @platform android
+   // [macOS]
+   * @platform android macos
    */
   cursorColor?: ?ColorValue,
 

Libraries/Text/TextInput/Multiline/RCTUITextView.h

@@ -47,7 +47,8 @@ NS_ASSUME_NONNULL_BEGIN
 
 #if TARGET_OS_OSX // [macOS
 @property (nonatomic, getter=isScrollEnabled) BOOL scrollEnabled;
-@property (nonatomic, strong, nullable) RCTUIColor *selectionColor; // TODO(OSS Candidate ISS#2710739)
+@property (nonatomic, strong, nullable) RCTUIColor *selectionColor;
+@property (nonatomic, strong, nullable) RCTUIColor *cursorColor;
 @property (nonatomic, assign) UIEdgeInsets textContainerInsets;
 @property (nonatomic, copy) NSString *text;
 @property (nonatomic, assign) NSTextAlignment textAlignment;

Libraries/Text/TextInput/Multiline/RCTUITextView.m

@@ -152,14 +152,20 @@ - (void)setSelectionColor:(RCTUIColor *)selectionColor
   NSMutableDictionary *selectTextAttributes = self.selectedTextAttributes.mutableCopy;
   selectTextAttributes[NSBackgroundColorAttributeName] = selectionColor ?: [NSColor selectedControlColor];
   self.selectedTextAttributes = selectTextAttributes.copy;
-  self.insertionPointColor = self.selectionColor ?: [NSColor textColor];
+  self.insertionPointColor = _cursorColor ?: self.selectionColor ?: [NSColor textColor];
 }
 
 - (RCTUIColor*)selectionColor
 {
   return (RCTUIColor*)self.selectedTextAttributes[NSBackgroundColorAttributeName];
 }
 
+- (void)setCursorColor:(NSColor *)cursorColor
+{
+  _cursorColor = cursorColor;
+  self.insertionPointColor = cursorColor;
+}
+
 - (void)setEnabledTextCheckingTypes:(NSTextCheckingTypes)checkingType
 {
   [super setEnabledTextCheckingTypes:checkingType];

Libraries/Text/TextInput/RCTBaseTextInputView.h

@@ -50,6 +50,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign) BOOL clearTextOnSubmit;
 @property (nonatomic, copy, nullable) RCTDirectEventBlock onSubmitEditing;
 @property (nonatomic, copy) NSArray<NSDictionary *> *submitKeyEvents;
+@property (nonatomic, strong, nullable) RCTUIColor *cursorColor;
 #endif // macOS]
 @property (nonatomic, assign) NSInteger mostRecentEventCount;
 @property (nonatomic, assign, readonly) NSInteger nativeEventCount;

Libraries/Text/TextInput/RCTBaseTextInputViewManager.m

@@ -74,6 +74,8 @@ @implementation RCTBaseTextInputViewManager {
 RCT_EXPORT_VIEW_PROPERTY(clearTextOnSubmit, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(onSubmitEditing, RCTBubblingEventBlock);
 RCT_EXPORT_VIEW_PROPERTY(submitKeyEvents, NSArray<NSDictionary *>);
+
+RCT_REMAP_VIEW_PROPERTY(cursorColor, backedTextInputView.cursorColor, UIColor)
 #endif // macOS]
 
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)

Libraries/Text/TextInput/Singleline/RCTUITextField.m

@@ -30,6 +30,7 @@ @interface RCTUITextFieldCell : NSTextFieldCell
 @property (nonatomic, getter=isContinuousSpellCheckingEnabled) BOOL continuousSpellCheckingEnabled;
 @property (nonatomic, getter=isGrammarCheckingEnabled) BOOL grammarCheckingEnabled;
 @property (nonatomic, strong, nullable) RCTUIColor *selectionColor;
+@property (nonatomic, strong, nullable) RCTUIColor *insertionPointColor;
 
 @end
 
@@ -77,7 +78,8 @@ - (NSText *)setUpFieldEditorAttributes:(NSText *)textObj
   fieldEditor.grammarCheckingEnabled = self.isGrammarCheckingEnabled;
   NSMutableDictionary *selectTextAttributes = fieldEditor.selectedTextAttributes.mutableCopy;
   selectTextAttributes[NSBackgroundColorAttributeName] = self.selectionColor ?: [NSColor selectedControlColor];
-	fieldEditor.selectedTextAttributes = selectTextAttributes;
+  fieldEditor.selectedTextAttributes = selectTextAttributes;
+  fieldEditor.insertionPointColor = self.insertionPointColor ?: [NSColor textColor];
   return fieldEditor;
 }
 
@@ -262,6 +264,16 @@ - (RCTUIColor*)selectionColor
 {
   return ((RCTUITextFieldCell*)self.cell).selectionColor;
 }
+    
+- (void)setCursorColor:(NSColor *)cursorColor
+{
+    ((RCTUITextFieldCell*)self.cell).insertionPointColor = cursorColor;
+}
+
+- (RCTUIColor*)cursorColor
+{
+  return ((RCTUITextFieldCell*)self.cell).insertionPointColor;
+}
 
 - (void)setFont:(UIFont *)font
 {

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js

@@ -1107,6 +1107,55 @@ if (Platform.OS === 'macos') {
         return <OnPaste />;
       },
     },
+    {
+      title: 'Cursor color',
+      render: function (): React.Node {
+        return (
+          <View>
+            <TextInput
+              placeholder="Single line"
+              cursorColor="#00FF00"
+              placeholderTextColor="grey"
+              style={[
+                styles.default,
+                {backgroundColor: 'black', color: 'white', marginBottom: 4},
+              ]}
+            />
+            <TextInput
+              multiline={true}
+              placeholder="Multiline"
+              cursorColor="#00FF00"
+              placeholderTextColor="grey"
+              style={[
+                styles.default,
+                {backgroundColor: 'black', color: 'white', marginBottom: 4},
+              ]}
+            />
+            <TextInput
+              placeholder="Single line with selection color"
+              cursorColor="#00FF00"
+              selectionColor="yellow"
+              placeholderTextColor="grey"
+              style={[
+                styles.default,
+                {backgroundColor: 'black', color: 'white', marginBottom: 4},
+              ]}
+            />
+            <TextInput
+              multiline={true}
+              placeholder="Multiline with selection color"
+              cursorColor="#00FF00"
+              selectionColor="yellow"
+              placeholderTextColor="grey"
+              style={[
+                styles.default,
+                {backgroundColor: 'black', color: 'white'},
+              ]}
+            />
+          </View>
+        );
+      },
+    },
   );
 }
 // [macOS]