Fix text clipping (#57408)

Summary:

Gate the iOS compressed text adjustment behind a runtime gate, expand the paragraph text drawing frame when compressed glyph bounds exceed the view bounds, and center glyph drawing for explicit line heights shorter than the font metrics.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D110430304

Author: sbuggay

packages/react-native/React/Fabric/Mounting/ComponentViews/Text/RCTParagraphComponentView.mm

@@ -9,6 +9,7 @@
 #import "RCTParagraphComponentAccessibilityProvider.h"
 
 #import <MobileCoreServices/UTCoreTypes.h>
+#import <react/featureflags/ReactNativeFeatureFlags.h>
 #import <react/renderer/components/text/ParagraphComponentDescriptor.h>
 #import <react/renderer/components/text/ParagraphProps.h>
 #import <react/renderer/components/text/ParagraphState.h>
@@ -24,13 +25,23 @@
 
 using namespace facebook::react;
 
+@interface RCTTextLayoutManager (RCTParagraphComponentViewPrivate)
+
+- (CGRect)drawingFrameForAttributedString:(facebook::react::AttributedString)attributedString
+                      paragraphAttributes:(facebook::react::ParagraphAttributes)paragraphAttributes
+                                    frame:(CGRect)frame
+                           containerFrame:(CGRect *)containerFrame;
+
+@end
+
 // ParagraphTextView is an auxiliary view we set as contentView so the drawing
 // can happen on top of the layers manipulated by RCTViewComponentView (the parent view)
 @interface RCTParagraphTextView : UIView
 
 @property (nonatomic) ParagraphShadowNode::ConcreteState::Shared state;
 @property (nonatomic) ParagraphAttributes paragraphAttributes;
 @property (nonatomic) LayoutMetrics layoutMetrics;
+@property (nonatomic) CGRect drawingFrame;
 
 @end
 
@@ -50,6 +61,7 @@ @implementation RCTParagraphComponentView {
   RCTParagraphComponentAccessibilityProvider *_accessibilityProvider;
   UILongPressGestureRecognizer *_longPressGestureRecognizer;
   RCTParagraphTextView *_textView;
+  CGRect _textLayoutFrame;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -60,6 +72,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     self.opaque = NO;
     _textView = [RCTParagraphTextView new];
     _textView.backgroundColor = UIColor.clearColor;
+    _textView.drawingFrame = self.bounds;
     self.contentView = _textView;
   }
 
@@ -134,6 +147,7 @@ - (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
   // re-applying individual sub-values which weren't changed.
   [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:_layoutMetrics];
   _textView.layoutMetrics = _layoutMetrics;
+  _textLayoutFrame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
   [_textView setNeedsDisplay];
   [self setNeedsLayout];
 }
@@ -149,7 +163,28 @@ - (void)layoutSubviews
 {
   [super layoutSubviews];
 
-  _textView.frame = self.bounds;
+  CGRect textViewFrame = self.bounds;
+  CGRect drawingFrame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
+
+  if (ReactNativeFeatureFlags::enableIOSCompressedTextFrameAdjustment() && _textView.state &&
+      drawingFrame.size.height > 0) {
+    const auto &stateData = _textView.state->getData();
+    auto textLayoutManager = stateData.layoutManager.lock();
+    if (textLayoutManager) {
+      RCTTextLayoutManager *nativeTextLayoutManager =
+          (RCTTextLayoutManager *)unwrapManagedObject(textLayoutManager->getNativeTextLayoutManager());
+      CGRect drawingContainerFrame = drawingFrame;
+      drawingFrame = [nativeTextLayoutManager drawingFrameForAttributedString:stateData.attributedString
+                                                          paragraphAttributes:_paragraphAttributes
+                                                                        frame:drawingFrame
+                                                               containerFrame:&drawingContainerFrame];
+      textViewFrame = CGRectUnion(textViewFrame, drawingContainerFrame);
+    }
+  }
+
+  _textLayoutFrame = drawingFrame;
+  _textView.frame = textViewFrame;
+  _textView.drawingFrame = CGRectOffset(drawingFrame, -textViewFrame.origin.x, -textViewFrame.origin.y);
 }
 
 #pragma mark - Accessibility
@@ -194,7 +229,7 @@ - (NSArray *)accessibilityElements
     if (textLayoutManager) {
       RCTTextLayoutManager *nativeTextLayoutManager =
           (RCTTextLayoutManager *)unwrapManagedObject(textLayoutManager->getNativeTextLayoutManager());
-      CGRect frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
+      CGRect frame = _textLayoutFrame;
       _accessibilityProvider =
           [[RCTParagraphComponentAccessibilityProvider alloc] initWithString:data.attributedString
                                                                layoutManager:nativeTextLayoutManager
@@ -268,7 +303,7 @@ - (SharedTouchEventEmitter)touchEventEmitterAtPoint:(CGPoint)point
 
   RCTTextLayoutManager *nativeTextLayoutManager =
       (RCTTextLayoutManager *)unwrapManagedObject(textLayoutManager->getNativeTextLayoutManager());
-  CGRect frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
+  CGRect frame = _textLayoutFrame;
 
   auto eventEmitter = [nativeTextLayoutManager getEventEmitterWithAttributeString:stateData.attributedString
                                                               paragraphAttributes:_paragraphAttributes
@@ -404,7 +439,7 @@ - (void)drawRect:(CGRect)rect
   RCTTextLayoutManager *nativeTextLayoutManager =
       (RCTTextLayoutManager *)unwrapManagedObject(textLayoutManager->getNativeTextLayoutManager());
 
-  CGRect frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
+  CGRect frame = _drawingFrame;
 
   [nativeTextLayoutManager drawAttributedString:stateData.attributedString
                             paragraphAttributes:_paragraphAttributes

packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.mm

@@ -369,7 +369,7 @@ static void RCTApplyBaselineOffsetForRange(NSMutableAttributedString *attributed
                             maximumFontLineHeight = MAX(font.lineHeight, maximumFontLineHeight);
                           }];
 
-  if (maximumLineHeight < maximumFontLineHeight) {
+  if (maximumLineHeight < maximumFontLineHeight && !ReactNativeFeatureFlags::enableIOSCompressedTextFrameAdjustment()) {
     return;
   }
 

packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm

@@ -68,6 +68,64 @@ - (TextMeasurement)measureAttributedString:(AttributedString)attributedString
                        layoutConstraints:layoutConstraints];
 }
 
+- (CGRect)drawingFrameForAttributedString:(AttributedString)attributedString
+                      paragraphAttributes:(ParagraphAttributes)paragraphAttributes
+                                    frame:(CGRect)frame
+                           containerFrame:(CGRect *)containerFrame
+{
+  if (containerFrame != nullptr) {
+    *containerFrame = frame;
+  }
+
+  if (!ReactNativeFeatureFlags::enableIOSCompressedTextFrameAdjustment()) {
+    return frame;
+  }
+
+  NSTextStorage *textStorage = [self
+      _textStorageAndLayoutManagerWithAttributesString:[self _nsAttributedStringFromAttributedString:attributedString]
+                                   paragraphAttributes:paragraphAttributes
+                                                  size:frame.size];
+  NSLayoutManager *layoutManager = textStorage.layoutManagers.firstObject;
+  NSTextContainer *textContainer = layoutManager.textContainers.firstObject;
+  [layoutManager ensureLayoutForTextContainer:textContainer];
+
+  NSRange glyphRange = [layoutManager glyphRangeForTextContainer:textContainer];
+  [self processTruncatedAttributedText:textStorage textContainer:textContainer layoutManager:layoutManager];
+
+  __block CGFloat maximumLineHeight = 0;
+  [textStorage enumerateAttribute:NSParagraphStyleAttributeName
+                          inRange:NSMakeRange(0, textStorage.length)
+                          options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
+                       usingBlock:^(NSParagraphStyle *paragraphStyle, __unused NSRange range, __unused BOOL *stop) {
+                         if (paragraphStyle != nil) {
+                           maximumLineHeight = MAX(paragraphStyle.maximumLineHeight, maximumLineHeight);
+                         }
+                       }];
+  if (maximumLineHeight == 0 || glyphRange.length == 0) {
+    return frame;
+  }
+
+  CGRect glyphBounds = [layoutManager boundingRectForGlyphRange:glyphRange inTextContainer:textContainer];
+  CGFloat glyphHeight = CGRectGetMaxY(glyphBounds) - MIN(glyphBounds.origin.y, 0);
+  CGFloat drawingHeight = MAX(frame.size.height, glyphHeight);
+  CGFloat extraHeight = drawingHeight - frame.size.height;
+
+  CGRect localContainerFrame = frame;
+  localContainerFrame.origin.y -= extraHeight / 2.0;
+  localContainerFrame.size.height = drawingHeight;
+  if (containerFrame != nullptr) {
+    *containerFrame = localContainerFrame;
+  }
+
+  CGRect drawingFrame = frame;
+  drawingFrame.size.height = drawingHeight;
+  drawingFrame.origin.y = localContainerFrame.origin.y;
+  if (glyphBounds.origin.y < 0) {
+    drawingFrame.origin.y += (drawingHeight - glyphBounds.size.height) / 2.0 - glyphBounds.origin.y;
+  }
+  return drawingFrame;
+}
+
 - (void)drawAttributedString:(AttributedString)attributedString
          paragraphAttributes:(ParagraphAttributes)paragraphAttributes
                        frame:(CGRect)frame
@@ -504,7 +562,8 @@ - (TextMeasurement)_measureTextStorage:(NSTextStorage *)textStorage
                                  }
                                }];
 
-  CGSize size = [layoutManager usedRectForTextContainer:textContainer].size;
+  CGRect usedBounds = [layoutManager usedRectForTextContainer:textContainer];
+  CGSize size = usedBounds.size;
 
   if (textDidWrap) {
     size.width = textContainer.size.width;