fix(ios): center TextInput text when lineHeight > fontSize on Fabric

Summary:
Ports the Paper-only fix from facebook#38359 to the Fabric (new arch) path.
When `lineHeight` is set larger than the font's intrinsic line height,
UIKit anchors glyphs to the bottom of the attributed-string line box,
making typed text visually sit too low while the placeholder (which
uses a different rendering path) stays correctly centered.

The `RCTApplyBaselineOffset` helper that Paper's fix relies on already
ships in Fabric (`RCTAttributedTextUtils.mm`) and is invoked for
`<Text>` rendering in `RCTTextLayoutManager`, but was never wired into
the `<TextInput>` path. This calls it inside
`RCTTextInputComponentView._setAttributedString:`.

This regression against Paper is tracked in facebook#39145. It has been
reported repeatedly for the new architecture (see comments referring
back to facebook#38359).

Changelog:
[IOS] [FIXED] - Center typed TextInput text when lineHeight > fontSize
on the new architecture.

Test Plan:
Added an RN Tester example ("Single-line lineHeight baseline" under
TextInput examples) that renders a single-line TextInput at a range
of lineHeight values with a fixed fontSize. Before this change,
typing into any of these inputs shows text bottom-anchored inside
the line box while the placeholder is centered. After this change,
typed text centers alongside the placeholder.

Related: facebook#38359, facebook#39145

Author: janicduplessis

packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm

@@ -575,8 +575,8 @@ - (void)setTextAndSelection:(NSInteger)eventCount
   }
   _comingFromJS = YES;
   if (value && ![value isEqualToString:_backedTextInputView.attributedText.string]) {
-    NSAttributedString *attributedString =
-        [[NSAttributedString alloc] initWithString:value attributes:_backedTextInputView.defaultTextAttributes];
+    NSMutableAttributedString *attributedString =
+        [[NSMutableAttributedString alloc] initWithString:value attributes:_backedTextInputView.defaultTextAttributes];
     [self _setAttributedString:attributedString];
     [self _updateState];
   }
@@ -766,8 +766,10 @@ - (void)_restoreTextSelectionAndIgnoreCaretChange:(BOOL)ignore
   [_backedTextInputView setSelectedTextRange:range notifyDelegate:YES];
 }
 
-- (void)_setAttributedString:(NSAttributedString *)attributedString
+- (void)_setAttributedString:(NSMutableAttributedString *)attributedString
 {
+  RCTApplyBaselineOffset(attributedString);
+
   if ([self _textOf:attributedString equals:_backedTextInputView.attributedText]) {
     return;
   }

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

@@ -28,10 +28,10 @@ NSMutableDictionary<NSAttributedStringKey, id> *RCTNSTextAttributesFromTextAttri
 /*
  * Conversions amond `NSAttributedString`, `AttributedString` and `AttributedStringBox`.
  */
-NSAttributedString *RCTNSAttributedStringFromAttributedString(
+NSMutableAttributedString *RCTNSAttributedStringFromAttributedString(
     const facebook::react::AttributedString &attributedString);
 
-NSAttributedString *RCTNSAttributedStringFromAttributedStringBox(
+NSMutableAttributedString *RCTNSAttributedStringFromAttributedStringBox(
     const facebook::react::AttributedStringBox &attributedStringBox);
 
 facebook::react::AttributedStringBox RCTAttributedStringBoxFromNSAttributedString(

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

@@ -405,7 +405,7 @@ void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText)
   return nsAttributedStringFragment;
 }
 
-NSAttributedString *RCTNSAttributedStringFromAttributedString(const AttributedString &attributedString)
+NSMutableAttributedString *RCTNSAttributedStringFromAttributedString(const AttributedString &attributedString)
 {
   static UIImage *placeholderImage;
   static dispatch_once_t onceToken;
@@ -428,13 +428,13 @@ void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText)
   return nsAttributedString;
 }
 
-NSAttributedString *RCTNSAttributedStringFromAttributedStringBox(const AttributedStringBox &attributedStringBox)
+NSMutableAttributedString *RCTNSAttributedStringFromAttributedStringBox(const AttributedStringBox &attributedStringBox)
 {
   switch (attributedStringBox.getMode()) {
     case AttributedStringBox::Mode::Value:
       return RCTNSAttributedStringFromAttributedString(attributedStringBox.getValue());
     case AttributedStringBox::Mode::OpaquePointer:
-      return (NSAttributedString *)unwrapManagedObject(attributedStringBox.getOpaquePointer());
+      return [(NSAttributedString *)unwrapManagedObject(attributedStringBox.getOpaquePointer()) mutableCopy];
   }
 }
 

packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js

@@ -1188,6 +1188,38 @@ module.exports = [
     name: 'textStyles',
     render: () => <TextStylesExample />,
   },
+  {
+    title: 'Single-line lineHeight baseline',
+    name: 'lineHeightBaseline',
+    description:
+      'Regression repro for https://github.com/facebook/react-native/issues/39145. ' +
+      'When lineHeight > fontSize on a single-line TextInput, typed text should ' +
+      'stay vertically centered. Placeholder centering is already correct; the ' +
+      'bug is that typed glyphs anchor to the bottom of the attributed-string ' +
+      'line box, appearing visually too low.',
+    render: function (): React.Node {
+      return (
+        <View>
+          {[20, 24, 32, 48].map(lineHeight => (
+            <WithLabel
+              key={lineHeight}
+              label={`fontSize: 16, lineHeight: ${lineHeight}`}>
+              <ExampleTextInput
+                placeholder="placeholder stays centered"
+                style={{
+                  fontSize: 16,
+                  lineHeight,
+                  borderColor: '#ccc',
+                  borderWidth: 1,
+                  padding: 8,
+                }}
+              />
+            </WithLabel>
+          ))}
+        </View>
+      );
+    },
+  },
   {
     title: 'showSoftInputOnFocus',
     render: function (): React.Node {