Apply baseline-offset compensation to TextInput placeholder

The placeholder in RCTUITextField (single-line) and RCTUITextView
(multi-line) inherits the paragraph style from `defaultTextAttributes`,
so it suffers the same bottom-anchor misalignment as typed text when
`lineHeight > fontSize`. Apply the equivalent
`NSBaselineOffsetAttributeName` in `_placeholderTextAttributes` so the
placeholder renders at the same vertical position as typed text.

These backing views are shared between Paper and Fabric, so this also
fixes the placeholder on the old arch (where the existing fix in facebook#38359
only addressed typed text).

Also simplify the RN Tester example to a single-line + multi-line pair
at fontSize 16 / lineHeight 32 — enough to demonstrate the regression
and the fix for both control types.

Author: janicduplessis

packages/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm

@@ -364,6 +364,12 @@ - (void)_updatePlaceholder
     [textAttributes setValue:defaultPlaceholderFont() forKey:NSFontAttributeName];
   }
 
+  NSParagraphStyle *paragraphStyle = textAttributes[NSParagraphStyleAttributeName];
+  UIFont *font = textAttributes[NSFontAttributeName];
+  if (paragraphStyle && font && paragraphStyle.maximumLineHeight > font.lineHeight) {
+    textAttributes[NSBaselineOffsetAttributeName] = @((paragraphStyle.maximumLineHeight - font.lineHeight) / 2.0);
+  }
+
   return textAttributes;
 }
 

packages/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm

@@ -169,6 +169,12 @@ - (void)setDisableKeyboardShortcuts:(BOOL)disableKeyboardShortcuts
     [textAttributes removeObjectForKey:NSForegroundColorAttributeName];
   }
 
+  NSParagraphStyle *paragraphStyle = textAttributes[NSParagraphStyleAttributeName];
+  UIFont *font = textAttributes[NSFontAttributeName];
+  if (paragraphStyle && font && paragraphStyle.maximumLineHeight > font.lineHeight) {
+    textAttributes[NSBaselineOffsetAttributeName] = @((paragraphStyle.maximumLineHeight - font.lineHeight) / 2.0);
+  }
+
   return textAttributes;
 }
 

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

@@ -1189,33 +1189,28 @@ module.exports = [
     render: () => <TextStylesExample />,
   },
   {
-    title: 'Single-line lineHeight baseline',
+    title: '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 {
+      const inputStyle = {
+        fontSize: 16,
+        lineHeight: 32,
+        borderColor: '#ccc',
+        borderWidth: 1,
+        padding: 8,
+      };
       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>
-          ))}
+          <WithLabel label="single-line">
+            <ExampleTextInput placeholder="placeholder" style={inputStyle} />
+          </WithLabel>
+          <WithLabel label="multi-line">
+            <ExampleTextInput
+              multiline
+              placeholder="placeholder"
+              style={inputStyle}
+            />
+          </WithLabel>
         </View>
       );
     },