From 9bfbf948dfd23c891233e747cbaeeb6480f5fa41 Mon Sep 17 00:00:00 2001 From: Jakub Piasecki Date: Thu, 22 Aug 2024 10:41:01 -0700 Subject: [PATCH] Add line offset for baseline alignment of text attachments (#46172) Summary: In https://github.com/facebook/react-native/pull/45102 I've implemented a baseline alignment function for the new architecture. I've noticed one thing I've missed previously - `locationForGlyphAtIndex` is [relative to the line fragment](https://developer.apple.com/documentation/appkit/nslayoutmanager/1403239-locationforglyphatindex), not the container. This means that the attachments would be put in the wrong place in multiline text. This PR fixes that by adding the position of the entire line to the attachment position. ## Changelog: [IOS] [FIXED] - Fixed baseline attachment position in multiline text Pull Request resolved: https://github.com/facebook/react-native/pull/46172 Test Plan: Checked on relevant example of RNTester. |Before|After| |-|-| |Screenshot 2024-08-22 at 15 53 14|Screenshot 2024-08-22 at 15 52 37| Reviewed By: andrewdacenko Differential Revision: D61662006 Pulled By: cipolleschi fbshipit-source-id: 5eafdae1800c06d9fc61bfac99584e6e25a05c24 --- .../react/renderer/textlayoutmanager/RCTTextLayoutManager.mm | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm b/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm index 0cc55820b7d..8b00c5f8e2b 100644 --- a/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm +++ b/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm @@ -369,7 +369,7 @@ static NSLineBreakMode RCTNSLineBreakModeFromEllipsizeMode(EllipsizeMode ellipsi if (ReactNativeFeatureFlags::enableAlignItemsBaselineOnFabricIOS()) { CGFloat baseline = [layoutManager locationForGlyphAtIndex:range.location].y; - frame = {{glyphRect.origin.x, baseline - attachmentSize.height}, attachmentSize}; + frame = {{glyphRect.origin.x, glyphRect.origin.y + baseline - attachmentSize.height}, attachmentSize}; } else { UIFont *font = [textStorage attribute:NSFontAttributeName atIndex:range.location effectiveRange:nil];