From 07fdbf8fcbcae83d9737b4c5d6d054572924cc67 Mon Sep 17 00:00:00 2001 From: Fabrizio Bertoglio Date: Sat, 15 Jul 2023 20:00:41 +0800 Subject: [PATCH 1/3] set baseline with RCTBaseTextInputShadowView --- .../TextInput/RCTBaseTextInputShadowView.m | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m index 04d2446f86d9b3..d0370435f3e94f 100644 --- a/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m +++ b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m @@ -158,6 +158,8 @@ - (void)uiManagerWillPerformMounting [attributedText insertAttributedString:propertyAttributedText atIndex:0]; } + [self postprocessAttributedText:attributedText]; + NSAttributedString *newAttributedText; if (![_previousAttributedText isEqualToAttributedString:attributedText]) { // We have to follow `set prop` pattern: @@ -191,6 +193,54 @@ - (void)uiManagerWillPerformMounting }]; } +- (void)postprocessAttributedText:(NSMutableAttributedString *)attributedText +{ + __block CGFloat maximumLineHeight = 0; + + [attributedText enumerateAttribute:NSParagraphStyleAttributeName + inRange:NSMakeRange(0, attributedText.length) + options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired + usingBlock:^(NSParagraphStyle *paragraphStyle, __unused NSRange range, __unused BOOL *stop) { + if (!paragraphStyle) { + return; + } + + maximumLineHeight = MAX(paragraphStyle.maximumLineHeight, maximumLineHeight); + }]; + + CGFloat height = self.layoutMetrics.frame.size.height; + if (maximumLineHeight == 0 || maximumLineHeight > height) { + // `lineHeight` was not specified, nothing to do. + // or is higher then actual height + return; + } + + __block CGFloat maximumFontLineHeight = 0; + + [attributedText enumerateAttribute:NSFontAttributeName + inRange:NSMakeRange(0, attributedText.length) + options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired + usingBlock:^(UIFont *font, NSRange range, __unused BOOL *stop) { + if (!font) { + return; + } + + if (maximumFontLineHeight <= font.lineHeight) { + maximumFontLineHeight = font.lineHeight; + } + }]; + + if (maximumLineHeight < maximumFontLineHeight) { + return; + } + + CGFloat baseLineOffset = maximumLineHeight / 2.0 - maximumFontLineHeight / 2.0; + + [attributedText addAttribute:NSBaselineOffsetAttributeName + value:@(baseLineOffset) + range:NSMakeRange(0, attributedText.length)]; +} + #pragma mark - - (NSAttributedString *)measurableAttributedText From a900804b0083c4fea0420b9e210c25891afd09b5 Mon Sep 17 00:00:00 2001 From: Fabrizio Bertoglio Date: Sat, 15 Jul 2023 20:50:43 +0800 Subject: [PATCH 2/3] removing frame.size.height logic --- .../Libraries/Text/TextInput/RCTBaseTextInputShadowView.m | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m index d0370435f3e94f..720dad2f1427cd 100644 --- a/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m +++ b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m @@ -208,8 +208,7 @@ - (void)postprocessAttributedText:(NSMutableAttributedString *)attributedText maximumLineHeight = MAX(paragraphStyle.maximumLineHeight, maximumLineHeight); }]; - CGFloat height = self.layoutMetrics.frame.size.height; - if (maximumLineHeight == 0 || maximumLineHeight > height) { + if (maximumLineHeight == 0) { // `lineHeight` was not specified, nothing to do. // or is higher then actual height return; From 28c8031e2a2c5d4182bbb5bc8e3900465ac825c5 Mon Sep 17 00:00:00 2001 From: Fabrizio Bertoglio Date: Tue, 18 Jul 2023 19:02:58 +0800 Subject: [PATCH 3/3] remove comment --- .../Libraries/Text/TextInput/RCTBaseTextInputShadowView.m | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m index 720dad2f1427cd..fcbde2934fa8f9 100644 --- a/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m +++ b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m @@ -210,7 +210,6 @@ - (void)postprocessAttributedText:(NSMutableAttributedString *)attributedText if (maximumLineHeight == 0) { // `lineHeight` was not specified, nothing to do. - // or is higher then actual height return; }