Move textAlignVertical to paragraph props (facebook#51712)

Summary:
Pull Request resolved: facebook#51712

This prop only works on top level text components, yet it is stored as a TextAttribute. It should be a ParagraphAttribute, so I moved it there.

Changelog: [Android] [Breaking] - Move textAlignVertical to paragraph attributes instead of text attributes

Reviewed By: NickGerleman

Differential Revision: D75684576

Author: joevilches

packages/react-native/ReactCommon/react/renderer/attributedstring/ParagraphAttributes.cpp

@@ -21,14 +21,16 @@ bool ParagraphAttributes::operator==(const ParagraphAttributes& rhs) const {
              textBreakStrategy,
              adjustsFontSizeToFit,
              includeFontPadding,
-             android_hyphenationFrequency) ==
+             android_hyphenationFrequency,
+             textAlignVertical) ==
       std::tie(
              rhs.maximumNumberOfLines,
              rhs.ellipsizeMode,
              rhs.textBreakStrategy,
              rhs.adjustsFontSizeToFit,
              rhs.includeFontPadding,
-             rhs.android_hyphenationFrequency) &&
+             rhs.android_hyphenationFrequency,
+             rhs.textAlignVertical) &&
       floatEquality(minimumFontSize, rhs.minimumFontSize) &&
       floatEquality(maximumFontSize, rhs.maximumFontSize) &&
       floatEquality(minimumFontScale, rhs.minimumFontScale);
@@ -73,7 +75,11 @@ SharedDebugStringConvertibleList ParagraphAttributes::getDebugProps() const {
       debugStringConvertibleItem(
           "android_hyphenationFrequency",
           android_hyphenationFrequency,
-          paragraphAttributes.android_hyphenationFrequency)};
+          paragraphAttributes.android_hyphenationFrequency),
+      debugStringConvertibleItem(
+          "textAlignVertical",
+          textAlignVertical,
+          paragraphAttributes.textAlignVertical)};
 }
 #endif
 

packages/react-native/ReactCommon/react/renderer/attributedstring/ParagraphAttributes.h

@@ -76,6 +76,12 @@ class ParagraphAttributes : public DebugStringConvertible {
    */
   Float minimumFontScale{std::numeric_limits<Float>::quiet_NaN()};
 
+  /*
+   * The vertical alignment of the text, causing the glyphs to be vertically
+   * aligned in its container.
+   */
+  std::optional<TextAlignmentVertical> textAlignVertical{};
+
   bool operator==(const ParagraphAttributes&) const;
   bool operator!=(const ParagraphAttributes&) const;
 
@@ -103,7 +109,8 @@ struct hash<facebook::react::ParagraphAttributes> {
         attributes.maximumFontSize,
         attributes.includeFontPadding,
         attributes.android_hyphenationFrequency,
-        attributes.minimumFontScale);
+        attributes.minimumFontScale,
+        attributes.textAlignVertical);
   }
 };
 } // namespace std

packages/react-native/ReactCommon/react/renderer/attributedstring/TextAttributes.cpp

@@ -114,10 +114,6 @@ void TextAttributes::apply(TextAttributes textAttributes) {
       ? textAttributes.accessibilityRole
       : accessibilityRole;
   role = textAttributes.role.has_value() ? textAttributes.role : role;
-
-  textAlignVertical = textAttributes.textAlignVertical.has_value()
-      ? textAttributes.textAlignVertical
-      : textAlignVertical;
 }
 
 #pragma mark - Operators
@@ -133,7 +129,6 @@ bool TextAttributes::operator==(const TextAttributes& rhs) const {
              allowFontScaling,
              dynamicTypeRamp,
              alignment,
-             textAlignVertical,
              baseWritingDirection,
              lineBreakStrategy,
              textDecorationColor,
@@ -146,8 +141,7 @@ bool TextAttributes::operator==(const TextAttributes& rhs) const {
              layoutDirection,
              accessibilityRole,
              role,
-             textTransform,
-             textAlignVertical) ==
+             textTransform) ==
       std::tie(
              rhs.foregroundColor,
              rhs.backgroundColor,
@@ -158,7 +152,6 @@ bool TextAttributes::operator==(const TextAttributes& rhs) const {
              rhs.allowFontScaling,
              rhs.dynamicTypeRamp,
              rhs.alignment,
-             rhs.textAlignVertical,
              rhs.baseWritingDirection,
              rhs.lineBreakStrategy,
              rhs.textDecorationColor,
@@ -171,8 +164,7 @@ bool TextAttributes::operator==(const TextAttributes& rhs) const {
              rhs.layoutDirection,
              rhs.accessibilityRole,
              rhs.role,
-             rhs.textTransform,
-             rhs.textAlignVertical) &&
+             rhs.textTransform) &&
       floatEquality(maxFontSizeMultiplier, rhs.maxFontSizeMultiplier) &&
       floatEquality(opacity, rhs.opacity) &&
       floatEquality(fontSize, rhs.fontSize) &&
@@ -289,11 +281,6 @@ SharedDebugStringConvertibleList TextAttributes::getDebugProps() const {
           accessibilityRole,
           textAttributes.accessibilityRole),
       debugStringConvertibleItem("role", role, textAttributes.role),
-
-      debugStringConvertibleItem(
-          "textAlignVertical",
-          textAlignVertical,
-          textAttributes.textAlignVertical),
   };
 }
 #endif

packages/react-native/ReactCommon/react/renderer/attributedstring/TextAttributes.h

@@ -86,8 +86,6 @@ class TextAttributes : public DebugStringConvertible {
   std::optional<AccessibilityRole> accessibilityRole{};
   std::optional<Role> role{};
 
-  std::optional<TextAlignmentVertical> textAlignVertical{};
-
 #pragma mark - Operations
 
   void apply(TextAttributes textAttributes);
@@ -127,7 +125,6 @@ struct hash<facebook::react::TextAttributes> {
         textAttributes.textTransform,
         textAttributes.lineHeight,
         textAttributes.alignment,
-        textAttributes.textAlignVertical,
         textAttributes.baseWritingDirection,
         textAttributes.lineBreakStrategy,
         textAttributes.lineBreakMode,
@@ -141,8 +138,7 @@ struct hash<facebook::react::TextAttributes> {
         textAttributes.isPressable,
         textAttributes.layoutDirection,
         textAttributes.accessibilityRole,
-        textAttributes.role,
-        textAttributes.textAlignVertical);
+        textAttributes.role);
   }
 };
 } // namespace std

packages/react-native/ReactCommon/react/renderer/attributedstring/conversions.h

@@ -21,7 +21,6 @@
 #include <react/renderer/core/conversions.h>
 #include <react/renderer/core/graphicsConversions.h>
 #include <react/renderer/core/propsConversions.h>
-#include <cmath>
 #include <unordered_map>
 
 #ifdef RN_SERIALIZABLE_STATE
@@ -978,6 +977,12 @@ inline ParagraphAttributes convertRawProp(
       "android_hyphenationFrequency",
       sourceParagraphAttributes.android_hyphenationFrequency,
       defaultParagraphAttributes.android_hyphenationFrequency);
+  paragraphAttributes.textAlignVertical = convertRawProp(
+      context,
+      rawProps,
+      "textAlignVertical",
+      sourceParagraphAttributes.textAlignVertical,
+      defaultParagraphAttributes.textAlignVertical);
 
   return paragraphAttributes;
 }
@@ -1060,6 +1065,7 @@ constexpr static MapBuffer::Key PA_KEY_INCLUDE_FONT_PADDING = 4;
 constexpr static MapBuffer::Key PA_KEY_HYPHENATION_FREQUENCY = 5;
 constexpr static MapBuffer::Key PA_KEY_MINIMUM_FONT_SIZE = 6;
 constexpr static MapBuffer::Key PA_KEY_MAXIMUM_FONT_SIZE = 7;
+constexpr static MapBuffer::Key PA_KEY_TEXT_ALIGN_VERTICAL = 8;
 
 inline MapBuffer toMapBuffer(const ParagraphAttributes& paragraphAttributes) {
   auto builder = MapBufferBuilder();
@@ -1077,6 +1083,11 @@ inline MapBuffer toMapBuffer(const ParagraphAttributes& paragraphAttributes) {
   builder.putString(
       PA_KEY_HYPHENATION_FREQUENCY,
       toString(paragraphAttributes.android_hyphenationFrequency));
+  if (paragraphAttributes.textAlignVertical.has_value()) {
+    builder.putString(
+        PA_KEY_TEXT_ALIGN_VERTICAL,
+        toString(*paragraphAttributes.textAlignVertical));
+  }
   builder.putDouble(
       PA_KEY_MINIMUM_FONT_SIZE, paragraphAttributes.minimumFontSize);
   builder.putDouble(
@@ -1220,10 +1231,6 @@ inline MapBuffer toMapBuffer(const TextAttributes& textAttributes) {
   if (textAttributes.role.has_value()) {
     builder.putInt(TA_KEY_ROLE, static_cast<int32_t>(*textAttributes.role));
   }
-  if (textAttributes.textAlignVertical.has_value()) {
-    builder.putString(
-        TA_KEY_ALIGNMENT_VERTICAL, toString(*textAttributes.textAlignVertical));
-  }
   return builder.build();
 }
 

packages/react-native/ReactCommon/react/renderer/components/text/BaseTextProps.cpp

@@ -98,12 +98,6 @@ static TextAttributes convertRawProp(
       "textTransform",
       sourceTextAttributes.textTransform,
       defaultTextAttributes.textTransform);
-  textAttributes.textAlignVertical = convertRawProp(
-      context,
-      rawProps,
-      "textAlignVertical",
-      sourceTextAttributes.textAlignVertical,
-      defaultTextAttributes.textAlignVertical);
 
   // Paragraph
   textAttributes.lineHeight = convertRawProp(
@@ -287,12 +281,6 @@ void BaseTextProps::setProp(
         defaults, value, textAttributes, lineHeight, "lineHeight");
     REBUILD_FIELD_SWITCH_CASE(
         defaults, value, textAttributes, alignment, "textAlign");
-    REBUILD_FIELD_SWITCH_CASE(
-        defaults,
-        value,
-        textAttributes,
-        textAlignVertical,
-        "textAlignVertical");
     REBUILD_FIELD_SWITCH_CASE(
         defaults,
         value,
@@ -439,13 +427,6 @@ void BaseTextProps::appendTextAttributesProps(
         : nullptr;
   }
 
-  if (textAttributes.textAlignVertical !=
-      oldProps->textAttributes.textAlignVertical) {
-    result["textAlignVertical"] = textAttributes.textAlignVertical.has_value()
-        ? toString(textAttributes.textAlignVertical.value())
-        : nullptr;
-  }
-
   if (!floatEquality(
           textAttributes.lineHeight, oldProps->textAttributes.lineHeight)) {
     result["lineHeight"] = textAttributes.lineHeight;

packages/react-native/ReactCommon/react/renderer/components/text/ParagraphProps.cpp

@@ -126,6 +126,12 @@ void ParagraphProps::setProp(
         paragraphAttributes,
         android_hyphenationFrequency,
         "android_hyphenationFrequency");
+    REBUILD_FIELD_SWITCH_CASE(
+        paDefaults,
+        value,
+        paragraphAttributes,
+        textAlignVertical,
+        "textAlignVertical");
   }
 
   switch (hash) {
@@ -219,6 +225,14 @@ folly::dynamic ParagraphProps::getDiffProps(const Props* prevProps) const {
         toString(paragraphAttributes.android_hyphenationFrequency);
   }
 
+  if (paragraphAttributes.textAlignVertical !=
+      oldProps->paragraphAttributes.textAlignVertical) {
+    result["textAlignVertical"] =
+        paragraphAttributes.textAlignVertical.has_value()
+        ? toString(paragraphAttributes.textAlignVertical.value())
+        : nullptr;
+  }
+
   if (isSelectable != oldProps->isSelectable) {
     result["selectable"] = isSelectable;
   }

packages/react-native/ReactCommon/react/renderer/components/textinput/BaseTextInputProps.cpp

@@ -201,6 +201,12 @@ void BaseTextInputProps::setProp(
         paragraphAttributes,
         android_hyphenationFrequency,
         "android_hyphenationFrequency");
+    REBUILD_FIELD_SWITCH_CASE(
+        paDefaults,
+        value,
+        paragraphAttributes,
+        textAlignVertical,
+        "textAlignVertical");
   }
 
   switch (hash) {

packages/react-native/ReactCommon/react/renderer/components/textinput/platform/android/react/renderer/components/androidtextinput/AndroidTextInputProps.cpp

@@ -425,6 +425,16 @@ folly::dynamic AndroidTextInputProps::getDiffProps(
         toString(paragraphAttributes.android_hyphenationFrequency);
   }
 
+  if (paragraphAttributes.textAlignVertical !=
+      oldProps->paragraphAttributes.textAlignVertical) {
+    if (!paragraphAttributes.textAlignVertical.has_value()) {
+      result["textAlignVertical"] = nullptr;
+    } else {
+      result["textAlignVertical"] =
+          toString(*paragraphAttributes.textAlignVertical);
+    }
+  }
+
   // Base text input props
   if (defaultValue != oldProps->defaultValue) {
     result["defaultValue"] = defaultValue;