Text : Added EllipsizeMode for tail and clip alignment

change/react-native-windows-1efdb03b-a0af-4ffa-a274-a0c43f757681.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updated ellipsis to respect tail and clip behaviour , for head , middle follow defaulty tail behaviour",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap

@@ -342,8 +342,8 @@ exports[`LegacyTextHitTestTest WrappedLTRInRTLFlowEdgeCaseNotPressable 1`] = `
     "AutomationId": "pressed-state",
     "ControlType": 50020,
     "LocalizedControlType": "text",
-    "Name": "Pressed: 1 times.",
-    "TextRangePattern.GetText": "Pressed: 1 times.",
+    "Name": "Pressed: 0 times.",
+    "TextRangePattern.GetText": "Pressed: 0 times.",
   },
   "Component Tree": {
     "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",

vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp

@@ -63,6 +63,10 @@ void ParagraphComponentView::updateProps(
     updateTextAlignment(newViewProps.textAttributes.alignment);
   }
 
+  // Reset m_textLayout when ellipsizeMode changes
+  if (oldViewProps.paragraphAttributes.ellipsizeMode != newViewProps.paragraphAttributes.ellipsizeMode) {
+    m_textLayout = nullptr;
+  }
   if (oldViewProps.paragraphAttributes.adjustsFontSizeToFit != newViewProps.paragraphAttributes.adjustsFontSizeToFit) {
     m_requireRedraw = true;
   }
@@ -100,7 +104,7 @@ void ParagraphComponentView::FinalizeUpdates(
 
 facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPoint(
     facebook::react::Point pt) noexcept {
-  if (m_attributedStringBox.getValue().getFragments().size()) {
+  if (m_attributedStringBox.getValue().getFragments().size() && m_textLayout) {
     BOOL isTrailingHit = false;
     BOOL isInside = false;
     DWRITE_HIT_TEST_METRICS metrics;
@@ -123,35 +127,8 @@ facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPo
 
 void ParagraphComponentView::updateTextAlignment(
     const std::optional<facebook::react::TextAlignment> &fbAlignment) noexcept {
+  // Reset text layout to force recreation with new alignment
   m_textLayout = nullptr;
-  if (!m_textLayout)
-    return;
-
-  DWRITE_TEXT_ALIGNMENT alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
-  if (fbAlignment) {
-    switch (*fbAlignment) {
-      case facebook::react::TextAlignment::Center:
-        alignment = DWRITE_TEXT_ALIGNMENT_CENTER;
-        break;
-      case facebook::react::TextAlignment::Justified:
-        alignment = DWRITE_TEXT_ALIGNMENT_JUSTIFIED;
-        break;
-      case facebook::react::TextAlignment::Left:
-        alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
-        break;
-      case facebook::react::TextAlignment::Right:
-        alignment = DWRITE_TEXT_ALIGNMENT_TRAILING;
-        break;
-      // TODO use LTR values
-      case facebook::react::TextAlignment::Natural:
-        alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
-        break;
-      default:
-        assert(false);
-    }
-  }
-  // TODO
-  // m_textFormat->SetTextAlignment(alignment);
 }
 
 void ParagraphComponentView::OnRenderingDeviceLost() noexcept {
@@ -163,7 +140,6 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
 
   // TODO
   // updateTextAlignment(paragraphProps.textAttributes.alignment);
-
   if (!m_textLayout) {
     facebook::react::LayoutConstraints constraints;
     constraints.maximumSize.width =
@@ -174,6 +150,35 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
     facebook::react::WindowsTextLayoutManager::GetTextLayout(
         m_attributedStringBox, m_paragraphAttributes, constraints, m_textLayout);
 
+    // Apply text alignment after creating the text layout
+    if (m_textLayout) {
+      const auto &props = paragraphProps();
+      DWRITE_TEXT_ALIGNMENT alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+      if (props.textAttributes.alignment) {
+        switch (*props.textAttributes.alignment) {
+          case facebook::react::TextAlignment::Center:
+            alignment = DWRITE_TEXT_ALIGNMENT_CENTER;
+            break;
+          case facebook::react::TextAlignment::Justified:
+            alignment = DWRITE_TEXT_ALIGNMENT_JUSTIFIED;
+            break;
+          case facebook::react::TextAlignment::Left:
+            alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+            break;
+          case facebook::react::TextAlignment::Right:
+            alignment = DWRITE_TEXT_ALIGNMENT_TRAILING;
+            break;
+          case facebook::react::TextAlignment::Natural:
+            alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+            break;
+          default:
+            alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+            break;
+        }
+      }
+      winrt::check_hresult(m_textLayout->SetTextAlignment(alignment));
+    }
+
     requireNewBrush = true;
   }
 
@@ -277,16 +282,54 @@ void ParagraphComponentView::DrawText() noexcept {
                                        : D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
 
       const auto &props = paragraphProps();
+      if (m_textLayout) {
+        DWRITE_TEXT_METRICS metrics;
+        winrt::check_hresult(m_textLayout->GetMetrics(&metrics));
+
+        float maxWidth =
+            m_layoutMetrics.frame.size.width - m_layoutMetrics.contentInsets.left - m_layoutMetrics.contentInsets.right;
+
+        if (metrics.width > maxWidth) {
+          m_textLayout->SetMaxWidth(maxWidth);
+        }
 
-      RenderText(
-          *d2dDeviceContext,
-          *m_textLayout,
-          m_attributedStringBox.getValue(),
-          props.textAttributes,
-          {static_cast<float>(offset.x) + m_layoutMetrics.contentInsets.left,
-           static_cast<float>(offset.y) + m_layoutMetrics.contentInsets.top},
-          m_layoutMetrics.pointScaleFactor,
-          *theme());
+        // Apply DWRITE_TRIMMING for ellipsizeMode
+        DWRITE_TRIMMING trimming = {};
+        winrt::com_ptr<IDWriteInlineObject> ellipsisSign;
+
+        switch (props.paragraphAttributes.ellipsizeMode) {
+          case facebook::react::EllipsizeMode::Tail:
+            trimming.granularity = DWRITE_TRIMMING_GRANULARITY_CHARACTER;
+            break;
+          case facebook::react::EllipsizeMode::Clip:
+            trimming.granularity = DWRITE_TRIMMING_GRANULARITY_NONE;
+            break;
+          default:
+            trimming.granularity = DWRITE_TRIMMING_GRANULARITY_CHARACTER; // Default to tail behavior
+            break;
+        }
+
+        // Use IDWriteFactory to create the ellipsis trimming sign
+        winrt::com_ptr<IDWriteFactory> dwriteFactory;
+        HRESULT hr = DWriteCreateFactory(
+            DWRITE_FACTORY_TYPE_SHARED, __uuidof(IDWriteFactory), reinterpret_cast<IUnknown **>(dwriteFactory.put()));
+        if (SUCCEEDED(hr)) {
+          hr = dwriteFactory->CreateEllipsisTrimmingSign(m_textLayout.get(), ellipsisSign.put());
+          if (SUCCEEDED(hr)) {
+            m_textLayout->SetTrimming(&trimming, ellipsisSign.get());
+          }
+        }
+
+        RenderText(
+            *d2dDeviceContext,
+            *m_textLayout,
+            m_attributedStringBox.getValue(),
+            props.textAttributes,
+            {static_cast<float>(offset.x) + m_layoutMetrics.contentInsets.left,
+             static_cast<float>(offset.y) + m_layoutMetrics.contentInsets.top},
+            m_layoutMetrics.pointScaleFactor,
+            *theme());
+      }
 
       if (!isnan(props.opacity)) {
         Visual().Opacity(props.opacity);