Skip to content

Text : Added EllipsizeMode for tail and clip alignment #14660

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Jun 6, 2025
Merged

Text : Added EllipsizeMode for tail and clip alignment #14660

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
9356308
updated ellipsis to respect tail and clip behaviour , for head , mid…
iamAbhi-916 May 12, 2025
b13ee85
patched updateTextAlignment method
iamAbhi-916 May 12, 2025
ec05616
Change files
iamAbhi-916 May 12, 2025
b524e54
Merge branch 'main' into ellipsis
iamAbhi-916 May 12, 2025
7498fd4
Merge branch 'main' into ellipsis
iamAbhi-916 May 13, 2025
64124c5
Merge branch 'main' into ellipsis
iamAbhi-916 May 14, 2025
50c6159
Merge branch 'main' into ellipsis
iamAbhi-916 Jun 3, 2025
5bfb6d0
pathced branch , lint fix , lint format
iamAbhi-916 Jun 4, 2025
a09c1aa
updated snapshots
iamAbhi-916 Jun 4, 2025
705677f
added layout changes to TextLayoutManager
iamAbhi-916 Jun 5, 2025
6aee963
lint fix and format
iamAbhi-916 Jun 5, 2025
ed948af
updated snapshots
iamAbhi-916 Jun 5, 2025
77d3183
updated snapshot Pressable component
iamAbhi-916 Jun 5, 2025
972877f
updated to remove extra text_layout null check
iamAbhi-916 Jun 6, 2025
f3dd11b
removed comments
iamAbhi-916 Jun 6, 2025
f768e7f
format and lint:fix
iamAbhi-916 Jun 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/react-native-windows-1efdb03b-a0af-4ffa-a274-a0c43f757681.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
4 changes: 2 additions & 2 deletions packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ onFocus
"Visual Tree": {
"Comment": "textinput-log",
"Offset": "0, 0, 0",
"Size": "998, 839",
"Size": "998, 745",
"Visual Type": "SpriteVisual",
},
}
Expand Down
54 changes: 27 additions & 27 deletions packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`Text Tests Padding can be added to Text 1`] = `
"Visual Tree": {
"Comment": "text-padding",
"Offset": "0, 0, 0",
"Size": "916, 39",
"Size": "916, 40",
"Visual Type": "SpriteVisual",
},
}
Expand Down Expand Up @@ -234,7 +234,7 @@ exports[`Text Tests Text can be restricted to one line 1`] = `
"Visual Tree": {
"Comment": "text-one-line",
"Offset": "0, 0, 0",
"Size": "300, 19",
"Size": "300, 20",
"Visual Type": "SpriteVisual",
},
}
Expand All @@ -258,7 +258,7 @@ exports[`Text Tests Text can be selectable 1`] = `
"Visual Tree": {
"Comment": "text-selectable",
"Offset": "0, 0, 0",
"Size": "916, 20",
"Size": "916, 19",
"Visual Type": "SpriteVisual",
},
}
Expand All @@ -282,7 +282,7 @@ exports[`Text Tests Text can have a color 1`] = `
"Visual Tree": {
"Comment": "text-color",
"Offset": "0, 0, 0",
"Size": "916, 20",
"Size": "916, 19",
"Visual Type": "SpriteVisual",
},
}
Expand All @@ -306,7 +306,7 @@ exports[`Text Tests Text can have a customized selection color 1`] = `
"Visual Tree": {
"Comment": "text-selection-color",
"Offset": "0, 0, 0",
"Size": "916, 19",
"Size": "916, 20",
"Visual Type": "SpriteVisual",
},
}
Expand All @@ -330,7 +330,7 @@ exports[`Text Tests Text can have a size 1`] = `
"Visual Tree": {
"Comment": "text-size",
"Offset": "0, 0, 0",
"Size": "916, 31",
"Size": "916, 32",
"Visual Type": "SpriteVisual",
},
}
Expand Down Expand Up @@ -482,12 +482,12 @@ exports[`Text Tests Text can have advanced borders 1`] = `
},
{
"Offset": "0, 38, 0",
"Size": "916, 39",
"Size": "916, 40",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Offset": "0, 0, 0",
"Size": "916, 39",
"Size": "916, 40",
"Visual Type": "SpriteVisual",
"__Children": [
{
Expand Down Expand Up @@ -523,7 +523,7 @@ exports[`Text Tests Text can have advanced borders 1`] = `
"Color": "rgba(0, 0, 255, 255)",
},
"Offset": "-10, 20, 0",
"Size": "10, 13",
"Size": "10, 14",
"Visual Type": "SpriteVisual",
},
{
Expand Down Expand Up @@ -559,7 +559,7 @@ exports[`Text Tests Text can have advanced borders 1`] = `
"Color": "rgba(0, 0, 255, 255)",
},
"Offset": "0, 22, 0",
"Size": "20, 9",
"Size": "20, 10",
"Visual Type": "SpriteVisual",
},
],
Expand All @@ -568,12 +568,12 @@ exports[`Text Tests Text can have advanced borders 1`] = `
},
{
"Offset": "0, 77, 0",
"Size": "916, 22",
"Size": "916, 21",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Offset": "0, 0, 0",
"Size": "916, 22",
"Size": "916, 21",
"Visual Type": "SpriteVisual",
"__Children": [
{
Expand Down Expand Up @@ -609,7 +609,7 @@ exports[`Text Tests Text can have advanced borders 1`] = `
"Color": "rgba(0, 128, 0, 255)",
},
"Offset": "-1, 4, 0",
"Size": "1, 14",
"Size": "1, 13",
"Visual Type": "SpriteVisual",
},
{
Expand Down Expand Up @@ -645,7 +645,7 @@ exports[`Text Tests Text can have advanced borders 1`] = `
"Color": "rgba(0, 128, 0, 255)",
},
"Offset": "0, 4, 0",
"Size": "1, 14",
"Size": "1, 13",
"Visual Type": "SpriteVisual",
},
],
Expand Down Expand Up @@ -799,12 +799,12 @@ exports[`Text Tests Text can have borders 1`] = `
},
{
"Offset": "100, 127, 0",
"Size": "716, 138",
"Size": "716, 139",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Offset": "0, 0, 0",
"Size": "716, 138",
"Size": "716, 139",
"Visual Type": "SpriteVisual",
"__Children": [
{
Expand Down Expand Up @@ -886,7 +886,7 @@ exports[`Text Tests Text can have decoration lines: Solid Line Through 1`] = `
"Visual Tree": {
"Comment": "text-decoration-solid-linethru",
"Offset": "0, 0, 0",
"Size": "916, 19",
"Size": "916, 20",
"Visual Type": "SpriteVisual",
},
}
Expand Down Expand Up @@ -1042,24 +1042,24 @@ exports[`Text Tests Text can have nested views 1`] = `
"__Children": [
{
"Offset": "0, 0, 0",
"Size": "916, 19",
"Size": "916, 20",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Offset": "0, 0, 0",
"Size": "916, 19",
"Size": "916, 20",
"Visual Type": "SpriteVisual",
},
],
},
{
"Offset": "0, 18, 0",
"Size": "916, 24",
"Size": "916, 23",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Offset": "0, 0, 0",
"Size": "916, 24",
"Size": "916, 23",
"Visual Type": "SpriteVisual",
"__Children": [
{
Expand Down Expand Up @@ -1105,7 +1105,7 @@ exports[`Text Tests Text can have shadows 1`] = `
"Visual Tree": {
"Comment": "text-shadow",
"Offset": "0, 0, 0",
"Size": "916, 28",
"Size": "916, 27",
"Visual Type": "SpriteVisual",
},
}
Expand All @@ -1129,7 +1129,7 @@ exports[`Text Tests Text can wrap 1`] = `
"Visual Tree": {
"Comment": "text-wrap",
"Offset": "0, 0, 0",
"Size": "300, 38",
"Size": "300, 39",
"Visual Type": "SpriteVisual",
},
}
Expand Down Expand Up @@ -1228,12 +1228,12 @@ exports[`Text Tests Texts can clip inline View/Images 1`] = `
"__Children": [
{
"Offset": "0, 0, 0",
"Size": "916, 19",
"Size": "916, 20",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Offset": "0, 0, 0",
"Size": "916, 19",
"Size": "916, 20",
"Visual Type": "SpriteVisual",
},
],
Expand Down Expand Up @@ -1286,12 +1286,12 @@ exports[`Text Tests Texts can clip inline View/Images 1`] = `
},
{
"Offset": "0, 103, 0",
"Size": "916, 20",
"Size": "916, 19",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Offset": "0, 0, 0",
"Size": "916, 20",
"Size": "916, 19",
"Visual Type": "SpriteVisual",
},
],
Expand Down
67 changes: 35 additions & 32 deletions vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@ void ParagraphComponentView::updateProps(
updateTextAlignment(newViewProps.textAttributes.alignment);
}

if (oldViewProps.paragraphAttributes.ellipsizeMode != newViewProps.paragraphAttributes.ellipsizeMode) {
m_textLayout = nullptr;
}

if (oldViewProps.paragraphAttributes.adjustsFontSizeToFit != newViewProps.paragraphAttributes.adjustsFontSizeToFit) {
m_requireRedraw = true;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not related to this PR. But I think we need to reset the textlayout here, not just redraw.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

makes sense , let me create an issue for the same and add this fix.

}
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -163,7 +140,6 @@ void ParagraphComponentView::updateVisualBrush() noexcept {

// TODO
// updateTextAlignment(paragraphProps.textAttributes.alignment);

if (!m_textLayout) {
facebook::react::LayoutConstraints constraints;
constraints.maximumSize.width =
Expand All @@ -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;
}

Expand Down Expand Up @@ -275,9 +280,7 @@ void ParagraphComponentView::DrawText() noexcept {
d2dDeviceContext->Clear(
viewProps()->backgroundColor ? theme()->D2DColor(*viewProps()->backgroundColor)
: D2D1::ColorF(D2D1::ColorF::Black, 0.0f));

const auto &props = paragraphProps();

RenderText(
*d2dDeviceContext,
*m_textLayout,
Expand Down
Loading