Fix Groups text input

Reviewed By: javache

Differential Revision: D2590712

fb-gh-sync-id: 453e20970460c703230547d8fd649383ba7d4c4a

Libraries/Components/TextInput/TextInput.js

@@ -529,13 +529,16 @@ var TextInput = React.createClass({
     this.props.onChange && this.props.onChange(event);
     this.props.onChangeText && this.props.onChangeText(text);
     this.setState({mostRecentEventCount: eventCount}, () => {
-      // This is a controlled component, so make sure to force the native value
+      // NOTE: this doesn't seem to be needed on iOS - keeping for now in case it's required on Android
-      // to match.  Most usage shouldn't need this, but if it does this will be
+      if (Platform.OS === 'android') {
-      // more correct but might flicker a bit and/or cause the cursor to jump.
+        // This is a controlled component, so make sure to force the native value
-      if (text !== this.props.value && typeof this.props.value === 'string') {
+        // to match.  Most usage shouldn't need this, but if it does this will be
-        this.refs.input.setNativeProps({
+        // more correct but might flicker a bit and/or cause the cursor to jump.
-          text: this.props.value,
+        if (text !== this.props.value && typeof this.props.value === 'string') {
-        });
+          this.refs.input.setNativeProps({
+            text: this.props.value,
+          });
+        }
       }
     });
   },

Libraries/Text/RCTShadowRawText.m

@@ -37,7 +37,7 @@
 
 - (void)setText:(NSString *)text
 {
-  if (_text != text) {
+  if (_text != text && ![_text isEqualToString:text]) {
     _text = [text copy];
     [self dirtyLayout];
     [self dirtyText];

Libraries/Text/RCTTextManager.m

@@ -17,8 +17,16 @@
 #import "RCTShadowText.h"
 #import "RCTSparseArray.h"
 #import "RCTText.h"
+#import "RCTTextView.h"
 #import "UIView+React.h"
 
+@interface RCTShadowText (Private)
+
+- (NSTextStorage *)buildTextStorageForWidth:(CGFloat)width;
+
+@end
+
+
 @implementation RCTTextManager
 
 RCT_EXPORT_MODULE()
@@ -54,6 +62,7 @@ RCT_EXPORT_SHADOW_PROPERTY(allowFontScaling, BOOL)
 
 - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(RCTSparseArray *)shadowViewRegistry
 {
+  NSMutableSet *textViewTagsToUpdate = [NSMutableSet new];
   for (RCTShadowView *rootView in shadowViewRegistry.allObjects) {
     if (![rootView isReactRootView]) {
       // This isn't a root view
@@ -77,6 +86,19 @@ RCT_EXPORT_SHADOW_PROPERTY(allowFontScaling, BOOL)
         RCTLogError(@"Raw text cannot be used outside of a <Text> tag. Not rendering string: '%@'",
                     [(RCTShadowRawText *)shadowView text]);
       } else {
+        NSNumber *reactTag = shadowView.reactTag;
+        // This isn't pretty, but hopefully it's temporary
+        // the problem is, there's no easy way (besides the viewName)
+        // to tell from the shadowView if the view is an RKTextView
+        if ([shadowView.viewName hasSuffix:@"TextView"]) {
+          // Add to textViewTagsToUpdate only if has a RCTShadowText subview
+          for (RCTShadowView *subview in shadowView.reactSubviews) {
+            if ([subview isKindOfClass:[RCTShadowText class]]) {
+              [textViewTagsToUpdate addObject:reactTag];
+              break;
+            }
+          }
+        }
         for (RCTShadowView *child in [shadowView reactSubviews]) {
           if ([child isTextDirty]) {
             [queue addObject:child];
@@ -88,7 +110,53 @@ RCT_EXPORT_SHADOW_PROPERTY(allowFontScaling, BOOL)
     }
   }
 
-  return nil;
+  /**
+   * NOTE: this logic is included to support rich text editing inside multiline
+   * `<TextInput>` controls, a feature which is not yet supported in open source.
+   * It is required in order to ensure that the textStorage (aka attributed
+   * string) is copied over from the RCTShadowText to the RCTText view in time
+   * to be used to update the editable text content.
+   */
+  if (textViewTagsToUpdate.count) {
+
+    NSMutableArray<RCTViewManagerUIBlock> *uiBlocks = [NSMutableArray new];
+    for (NSNumber *reactTag in textViewTagsToUpdate) {
+      RCTShadowView *shadowTextView = shadowViewRegistry[reactTag];
+      RCTShadowText *shadowText;
+      for (RCTShadowText *subview in shadowTextView.reactSubviews) {
+        if ([subview isKindOfClass:[RCTShadowText class]]) {
+          shadowText = subview;
+          break;
+        }
+      }
+
+      UIEdgeInsets padding = shadowText.paddingAsInsets;
+      CGFloat width = shadowText.frame.size.width - (padding.left + padding.right);
+      NSTextStorage *textStorage = [shadowText buildTextStorageForWidth:width];
+
+      [uiBlocks addObject:^(RCTUIManager *uiManager, RCTSparseArray *viewRegistry) {
+        RCTTextView *textView = viewRegistry[reactTag];
+        RCTText *text;
+        for (RCTText *subview in textView.reactSubviews) {
+          if ([subview isKindOfClass:[RCTText class]]) {
+            text = subview;
+            break;
+          }
+        }
+
+        text.textStorage = textStorage;
+        [textView performTextUpdate];
+      }];
+    }
+
+    return ^(RCTUIManager *uiManager, RCTSparseArray *viewRegistry) {
+      for (RCTViewManagerUIBlock uiBlock in uiBlocks) {
+        uiBlock(uiManager, viewRegistry);
+      }
+    };
+  } else {
+    return nil;
+  }
 }
 
 - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowView:(RCTShadowText *)shadowView

Libraries/Text/RCTTextView.h

@@ -30,4 +30,6 @@
 
 - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;
 
+- (void)performTextUpdate;
+
 @end

Libraries/Text/RCTTextView.m

@@ -309,4 +309,9 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
   return [UIColor colorWithRed:0.0/255.0 green:0.0/255.0 blue:0.098/255.0 alpha:0.22];
 }
 
+- (void)performTextUpdate
+{
+  // Not used (yet)
+}
+
 @end