[Fabric] Implement textAlign prop in TextInput (#14407)

* Introduce support for textAlign

* Add playground textinputs demonstrating textAlign

* Oops, let's remove textAlignOnUpdateProps

* Change files

* Lint fixes

* Nit

* Make textAlign to be of facebook::react::TextAlignment type

* Lint fixes

* Don't reinvent the wheel :D

* Nit: yarn format

Author: danielayala94

change/react-native-windows-b25b85e4-b99c-4ba7-92db-ac45afed3cc9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implemented textAlign in TextInput for Fabric",
+  "packageName": "react-native-windows",
+  "email": "14967941+danielayala94@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/playground/Samples/textinput.tsx

@@ -101,6 +101,24 @@ export default class Bootstrap extends React.Component<{}, any> {
             autoCapitalize="characters"
             placeholder={'autoCapitalize characters'}
           />
+          <TextInput
+            style={styles.input}
+            textAlign={'left'}
+            autoCapitalize="none"
+            placeholder={'Text aligned to the left'}
+          />
+          <TextInput
+            style={styles.input}
+            textAlign={'center'}
+            autoCapitalize="none"
+            placeholder={'Text aligned to the center'}
+          />
+          <TextInput
+            style={styles.input}
+            textAlign={'right'}
+            autoCapitalize="none"
+            placeholder={'Text aligned to the right'}
+          />
           <TextInput
             // @ts-ignore
             ref={ref => (textInputRef = ref)}

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -1042,6 +1042,12 @@ void WindowsTextInputComponentView::updateProps(
     autoCapitalizeOnUpdateProps(oldTextInputProps.autoCapitalize, newTextInputProps.autoCapitalize);
   }
 
+  if (oldTextInputProps.textAlign != newTextInputProps.textAlign) {
+    // Let UpdateParaFormat() to refresh the text field with the new text alignment.
+    m_propBitsMask |= TXTBIT_PARAFORMATCHANGE;
+    m_propBits |= TXTBIT_PARAFORMATCHANGE;
+  }
+
   UpdatePropertyBits();
 }
 
@@ -1305,7 +1311,15 @@ void WindowsTextInputComponentView::UpdateParaFormat() noexcept {
   m_pf.cbSize = sizeof(PARAFORMAT2);
   m_pf.dwMask = PFM_ALL;
 
-  m_pf.wAlignment = PFA_LEFT;
+  auto &textAlign = windowsTextInputProps().textAlign;
+
+  if (textAlign == facebook::react::TextAlignment::Center) {
+    m_pf.wAlignment = PFA_CENTER;
+  } else if (textAlign == facebook::react::TextAlignment::Right) {
+    m_pf.wAlignment = PFA_RIGHT;
+  } else {
+    m_pf.wAlignment = PFA_LEFT;
+  }
 
   m_pf.cTabCount = 1;
   m_pf.rgxTabs[0] = lDefaultTab;
@@ -1525,4 +1539,4 @@ void WindowsTextInputComponentView::autoCapitalizeOnUpdateProps(
   }
 }
 
-} // namespace winrt::Microsoft::ReactNative::Composition::implementation
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputProps.cpp

@@ -47,7 +47,10 @@ WindowsTextInputProps::WindowsTextInputProps(
       autoCapitalize(convertRawProp(context, rawProps, "autoCapitalize", sourceProps.autoCapitalize, {})),
       clearTextOnSubmit(convertRawProp(context, rawProps, "clearTextOnSubmit", sourceProps.clearTextOnSubmit, {false})),
       submitKeyEvents(convertRawProp(context, rawProps, "submitKeyEvents", sourceProps.submitKeyEvents, {})),
-      autoFocus(convertRawProp(context, rawProps, "autoFocus", sourceProps.autoFocus, {false})) {}
+      autoFocus(convertRawProp(context, rawProps, "autoFocus", sourceProps.autoFocus, {false})),
+      textAlign(
+          convertRawProp(context, rawProps, "textAlign", sourceProps.textAlign, facebook::react::TextAlignment::Left)) {
+}
 
 void WindowsTextInputProps::setProp(
     const PropsParserContext &context,

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputProps.h

@@ -4,6 +4,7 @@
 #pragma once
 
 #include <react/components/rnwcore/Props.h>
+#include <react/renderer/attributedstring/conversions.h>
 #include <react/renderer/components/text/BaseTextProps.h>
 #include <react/renderer/core/propsConversions.h>
 
@@ -118,6 +119,7 @@ class WindowsTextInputProps final : public ViewProps, public BaseTextProps {
   bool clearTextOnSubmit{false};
   std::vector<CompWindowsTextInputSubmitKeyEventsStruct> submitKeyEvents{};
   bool autoFocus{false};
+  facebook::react::TextAlignment textAlign{};
 };
 
 } // namespace facebook::react