From 7acc03bb92c2726ad6cb5c9104b71bfff1b059e9 Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Tue, 6 May 2025 19:42:28 -0700
Subject: [PATCH 1/2] feat(TextField): support css white-space and
 text-overflow

---
 packages/core/ui/text-field/index.ios.ts | 37 +++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/packages/core/ui/text-field/index.ios.ts b/packages/core/ui/text-field/index.ios.ts
index 4239f56379..ffb5e42dd4 100644
--- a/packages/core/ui/text-field/index.ios.ts
+++ b/packages/core/ui/text-field/index.ios.ts
@@ -1,5 +1,5 @@
 import { TextFieldBase, secureProperty } from './text-field-common';
-import { textProperty } from '../text-base';
+import { textOverflowProperty, textProperty, whiteSpaceProperty } from '../text-base';
 import { hintProperty, placeholderColorProperty, _updateCharactersInRangeReplacementString } from '../editable-text-base';
 import { CoreTypes } from '../../core-types';
 import { Color } from '../../color';
@@ -317,4 +317,39 @@ export class TextField extends TextFieldBase {
 	[paddingLeftProperty.setNative](value: CoreTypes.LengthType) {
 		// Padding is realized via UITextFieldImpl.textRectForBounds method
 	}
+
+	[whiteSpaceProperty.setNative](value: CoreTypes.WhiteSpaceType) {
+		this.adjustLineBreak();
+	}
+
+	[textOverflowProperty.setNative](value: CoreTypes.TextOverflowType) {
+		this.adjustLineBreak();
+	}
+
+	private adjustLineBreak() {
+		let paragraphStyle: NSMutableParagraphStyle;
+
+		switch (this.whiteSpace) {
+			case 'nowrap':
+				switch (this.textOverflow) {
+					case 'clip':
+						paragraphStyle = NSMutableParagraphStyle.new();
+						paragraphStyle.lineBreakMode = NSLineBreakMode.ByClipping;
+						break;
+					default:
+						// ellipsis
+						paragraphStyle = NSMutableParagraphStyle.new();
+						paragraphStyle.lineBreakMode = NSLineBreakMode.ByTruncatingTail;
+						break;
+				}
+				break;
+		}
+
+		if (paragraphStyle) {
+			let attributedString = NSMutableAttributedString.alloc().initWithString(this.nativeViewProtected.text);
+			attributedString.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, NSRangeFromString(`{0,${attributedString.length}}`));
+
+			this.nativeViewProtected.attributedText = attributedString;
+		}
+	}
 }

From e0e26829ac823ea921057bbef6d88925b9a84238 Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Wed, 7 May 2025 11:37:55 -0700
Subject: [PATCH 2/2] chore: cleanup and add example to toolbox

---
 apps/toolbox/src/app.css                       | 6 ++++++
 apps/toolbox/src/pages/forms.xml               | 4 ++++
 packages/core/core-types/index.ts              | 2 +-
 packages/core/ui/text-base/text-base-common.ts | 2 +-
 packages/core/ui/text-field/index.android.ts   | 9 ---------
 packages/core/ui/text-field/index.ios.ts       | 4 ++++
 6 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/apps/toolbox/src/app.css b/apps/toolbox/src/app.css
index 56535dbbb1..348e6261cc 100644
--- a/apps/toolbox/src/app.css
+++ b/apps/toolbox/src/app.css
@@ -260,4 +260,10 @@ Button {
 
 .no-shadow {
     box-shadow: none;
+}
+
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
\ No newline at end of file
diff --git a/apps/toolbox/src/pages/forms.xml b/apps/toolbox/src/pages/forms.xml
index d451a16dc1..cca44dafab 100644
--- a/apps/toolbox/src/pages/forms.xml
+++ b/apps/toolbox/src/pages/forms.xml
@@ -24,6 +24,10 @@
       <TextView hint="Type text..." style.placeholderColor="silver" textChange="{{textChangeArea}}" color="black" width="80%" borderColor="silver" borderWidth="1" height="200" borderRadius="4" fontSize="14">
       </TextView>
 
+      <Label text="TextField white-space + text-overflow" fontWeight="bold" marginTop="12" />
+      <TextField text="https://a.very.long.url.that.needs.to.be.truncated.com/" class="truncate" marginTop="6" backgroundColor="#efefef" padding="8" fontSize="18" height="60">
+      </TextField>
+
     </StackLayout>
   </ScrollView>
 </Page>
diff --git a/packages/core/core-types/index.ts b/packages/core/core-types/index.ts
index 195a6121f4..30c31c9ccd 100644
--- a/packages/core/core-types/index.ts
+++ b/packages/core/core-types/index.ts
@@ -91,7 +91,7 @@ export namespace CoreTypes {
 		export const lowercase = 'lowercase';
 	}
 
-	export type WhiteSpaceType = 'normal' | 'nowrap' | CSSWideKeywords;
+	export type WhiteSpaceType = 'normal' | 'nowrap' | 'wrap' | CSSWideKeywords;
 	export namespace WhiteSpace {
 		export const normal = 'normal';
 		export const nowrap = 'nowrap';
diff --git a/packages/core/ui/text-base/text-base-common.ts b/packages/core/ui/text-base/text-base-common.ts
index 4f42c1d254..b458953a7f 100644
--- a/packages/core/ui/text-base/text-base-common.ts
+++ b/packages/core/ui/text-base/text-base-common.ts
@@ -318,7 +318,7 @@ export const textStrokeProperty = new InheritedCssProperty<Style, string | Strok
 });
 textStrokeProperty.register(Style);
 
-const whiteSpaceConverter = makeParser<CoreTypes.WhiteSpaceType>(makeValidator<CoreTypes.WhiteSpaceType>('normal', 'nowrap'));
+const whiteSpaceConverter = makeParser<CoreTypes.WhiteSpaceType>(makeValidator<CoreTypes.WhiteSpaceType>('normal', 'nowrap', 'wrap'));
 export const whiteSpaceProperty = new InheritedCssProperty<Style, CoreTypes.WhiteSpaceType>({
 	name: 'whiteSpace',
 	cssName: 'white-space',
diff --git a/packages/core/ui/text-field/index.android.ts b/packages/core/ui/text-field/index.android.ts
index 66fd1ce165..04c5cf9d33 100644
--- a/packages/core/ui/text-field/index.android.ts
+++ b/packages/core/ui/text-field/index.android.ts
@@ -1,7 +1,5 @@
 import { TextFieldBase, secureProperty } from './text-field-common';
-import { whiteSpaceProperty } from '../text-base';
 import { keyboardTypeProperty } from '../editable-text-base';
-import { CoreTypes } from '../../core-types';
 
 export * from './text-field-common';
 
@@ -96,13 +94,6 @@ export class TextField extends TextFieldBase {
 
 		this._setInputType(inputType);
 	}
-
-	[whiteSpaceProperty.getDefault](): CoreTypes.WhiteSpaceType {
-		return 'nowrap';
-	}
-	[whiteSpaceProperty.setNative](value: CoreTypes.WhiteSpaceType) {
-		// Don't change it otherwise TextField will go to multiline mode.
-	}
 }
 
 TextField.prototype._isSingleLine = true;
diff --git a/packages/core/ui/text-field/index.ios.ts b/packages/core/ui/text-field/index.ios.ts
index ffb5e42dd4..a9b82dfafa 100644
--- a/packages/core/ui/text-field/index.ios.ts
+++ b/packages/core/ui/text-field/index.ios.ts
@@ -343,6 +343,10 @@ export class TextField extends TextFieldBase {
 						break;
 				}
 				break;
+			case 'wrap':
+				paragraphStyle = NSMutableParagraphStyle.new();
+				paragraphStyle.lineBreakMode = NSLineBreakMode.ByWordWrapping;
+				break;
 		}
 
 		if (paragraphStyle) {