feat(iOS): added lineBreakStrategy attribute to Text/TextInput (#31272)

Summary:
iOS did not support the implementation of Korean word-wrap(line-break) before iOS14.
If the attribute applied, the word-wrap of Korean will works.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Added] -  Line break strategy for Text and TextInput components

Pull Request resolved: #31272

Test Plan:
1. Test build and run on above iOS 14.
2. Test it does not affect existing text components when set default(none) strategy.
3. Test whether word-wrap works with Korean when set hangul-word strategy.

<img src="https://user-images.githubusercontent.com/26326015/112963967-d7f70c00-9182-11eb-9a34-8c758b80c219.png" width="300" height="" style="max-width:100%;">

Reviewed By: javache

Differential Revision: D39824809

Pulled By: lunaleaps

fbshipit-source-id: 42cb0385221a38c84e80d3494d1bfc1934ecf32b

Author: bang9

Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -149,6 +149,7 @@ const RCTTextInputViewConfig = {
     clearTextOnFocus: true,
     showSoftInputOnFocus: true,
     autoFocus: true,
+    lineBreakStrategyIOS: true,
     ...ConditionallyIgnoredEventHandlers({
       onChange: true,
       onSelectionChange: true,

Libraries/Components/TextInput/TextInput.flow.js

@@ -319,6 +319,12 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   textContentType?: ?TextContentType,
+
+  /**
+   * Set line break strategy on iOS.
+   * @platform ios
+   */
+  lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
 |}>;
 
 type AndroidProps = $ReadOnly<{|

Libraries/Components/TextInput/TextInput.js

@@ -352,6 +352,12 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   textContentType?: ?TextContentType,
+
+  /**
+   * Set line break strategy on iOS.
+   * @platform ios
+   */
+  lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
 |}>;
 
 type AndroidProps = $ReadOnly<{|

Libraries/Text/BaseText/RCTBaseTextViewManager.m

@@ -42,6 +42,7 @@ - (RCTShadowView *)shadowView
 RCT_REMAP_SHADOW_PROPERTY(lineHeight, textAttributes.lineHeight, CGFloat)
 RCT_REMAP_SHADOW_PROPERTY(textAlign, textAttributes.alignment, NSTextAlignment)
 RCT_REMAP_SHADOW_PROPERTY(writingDirection, textAttributes.baseWritingDirection, NSWritingDirection)
+RCT_REMAP_SHADOW_PROPERTY(lineBreakStrategyIOS, textAttributes.lineBreakStrategy, NSLineBreakStrategy)
 // Decoration
 RCT_REMAP_SHADOW_PROPERTY(textDecorationColor, textAttributes.textDecorationColor, UIColor)
 RCT_REMAP_SHADOW_PROPERTY(textDecorationStyle, textAttributes.textDecorationStyle, NSUnderlineStyle)

Libraries/Text/RCTTextAttributes.h

@@ -41,6 +41,7 @@ extern NSString *const RCTTextAttributesTagAttributeName;
 @property (nonatomic, assign) CGFloat lineHeight;
 @property (nonatomic, assign) NSTextAlignment alignment;
 @property (nonatomic, assign) NSWritingDirection baseWritingDirection;
+@property (nonatomic, assign) NSLineBreakStrategy lineBreakStrategy;
 // Decoration
 @property (nonatomic, strong, nullable) UIColor *textDecorationColor;
 @property (nonatomic, assign) NSUnderlineStyle textDecorationStyle;

Libraries/Text/RCTTextAttributes.m

@@ -27,6 +27,7 @@ - (instancetype)init
     _maxFontSizeMultiplier = NAN;
     _alignment = NSTextAlignmentNatural;
     _baseWritingDirection = NSWritingDirectionNatural;
+    _lineBreakStrategy = NSLineBreakStrategyNone;
     _textShadowRadius = NAN;
     _opacity = NAN;
     _textTransform = RCTTextTransformUndefined;
@@ -66,6 +67,7 @@ - (void)applyTextAttributes:(RCTTextAttributes *)textAttributes
   _baseWritingDirection = textAttributes->_baseWritingDirection != NSWritingDirectionNatural
       ? textAttributes->_baseWritingDirection
       : _baseWritingDirection; // *
+  _lineBreakStrategy = textAttributes->_lineBreakStrategy ?: _lineBreakStrategy;
 
   // Decoration
   _textDecorationColor = textAttributes->_textDecorationColor ?: _textDecorationColor;
@@ -117,6 +119,13 @@ - (NSParagraphStyle *)effectiveParagraphStyle
     isParagraphStyleUsed = YES;
   }
 
+  if (_lineBreakStrategy != NSLineBreakStrategyNone) {
+    if (@available(iOS 14.0, *)) {
+      paragraphStyle.lineBreakStrategy = _lineBreakStrategy;
+      isParagraphStyleUsed = YES;
+    }
+  }
+
   if (!isnan(_lineHeight)) {
     CGFloat lineHeight = _lineHeight * self.effectiveFontSizeMultiplier;
     paragraphStyle.minimumLineHeight = lineHeight;
@@ -318,7 +327,7 @@ - (BOOL)isEqual:(RCTTextAttributes *)textAttributes
       RCTTextAttributesCompareFloats(_letterSpacing) &&
       // Paragraph Styles
       RCTTextAttributesCompareFloats(_lineHeight) && RCTTextAttributesCompareFloats(_alignment) &&
-      RCTTextAttributesCompareOthers(_baseWritingDirection) &&
+      RCTTextAttributesCompareOthers(_baseWritingDirection) && RCTTextAttributesCompareOthers(_lineBreakStrategy) &&
       // Decoration
       RCTTextAttributesCompareObjects(_textDecorationColor) && RCTTextAttributesCompareOthers(_textDecorationStyle) &&
       RCTTextAttributesCompareOthers(_textDecorationLine) &&

Libraries/Text/TextNativeComponent.js

@@ -45,6 +45,7 @@ const textViewConfig = {
     onInlineViewLayout: true,
     dataDetectorType: true,
     android_hyphenationFrequency: true,
+    lineBreakStrategyIOS: true,
   },
   directEventTypes: {
     topTextLayout: {

Libraries/Text/TextProps.js

@@ -236,4 +236,11 @@ export type TextProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/text#supperhighlighting
    */
   suppressHighlighting?: ?boolean,
+
+  /**
+   * Set line break strategy on iOS.
+   *
+   * See https://reactnative.dev/docs/text.html#linebreakstrategyios
+   */
+  lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
 |}>;

React/Base/RCTConvert.h

@@ -65,6 +65,7 @@ typedef NSURL RCTFileURL;
 + (NSTextAlignment)NSTextAlignment:(id)json;
 + (NSUnderlineStyle)NSUnderlineStyle:(id)json;
 + (NSWritingDirection)NSWritingDirection:(id)json;
++ (NSLineBreakStrategy)NSLineBreakStrategy:(id)json;
 + (UITextAutocapitalizationType)UITextAutocapitalizationType:(id)json;
 + (UITextFieldViewMode)UITextFieldViewMode:(id)json;
 + (UIKeyboardType)UIKeyboardType:(id)json;

React/Base/RCTConvert.m

@@ -375,6 +375,25 @@ + (NSLocale *)NSLocale:(id)json
     NSWritingDirectionNatural,
     integerValue)
 
++ (NSLineBreakStrategy)NSLineBreakStrategy:(id)json RCT_DYNAMIC
+{
+  if (@available(iOS 14.0, *)) {
+    static NSDictionary *mapping;
+    static dispatch_once_t onceToken;
+    dispatch_once(&onceToken, ^{
+      mapping = @{
+        @"none" : @(NSLineBreakStrategyNone),
+        @"standard" : @(NSLineBreakStrategyStandard),
+        @"hangul-word" : @(NSLineBreakStrategyHangulWordPriority),
+        @"push-out" : @(NSLineBreakStrategyPushOut)
+      };
+    });
+    return RCTConvertEnumValue("NSLineBreakStrategy", mapping, @(NSLineBreakStrategyNone), json).integerValue;
+  } else {
+    return NSLineBreakStrategyNone;
+  }
+}
+
 RCT_ENUM_CONVERTER(
     UITextAutocapitalizationType,
     (@{