Skip to content

feat(TextField): support css white-space and text-overflow #10737

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(TextField): support css white-space and text-overflow #10737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7acc03b
feat(TextField): support css white-space and text-overflow
NathanWalker May 7, 2025
e0e2682
chore: cleanup and add example to toolbox
NathanWalker May 7, 2025
8522566
Merge branch 'main' into feat/textfield-word-wrap
NathanWalker May 7, 2025
4a97ccb
Merge branch 'main' into feat/textfield-word-wrap
NathanWalker May 29, 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
6 changes: 6 additions & 0 deletions apps/toolbox/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,4 +260,10 @@ Button {

.no-shadow {
box-shadow: none;
}

.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
4 changes: 4 additions & 0 deletions apps/toolbox/src/pages/forms.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion packages/core/core-types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/core/ui/text-base/text-base-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
9 changes: 0 additions & 9 deletions packages/core/ui/text-field/index.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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;
41 changes: 40 additions & 1 deletion packages/core/ui/text-field/index.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -317,4 +317,43 @@ 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;
case 'wrap':
paragraphStyle = NSMutableParagraphStyle.new();
paragraphStyle.lineBreakMode = NSLineBreakMode.ByWordWrapping;
break;
}

if (paragraphStyle) {
let attributedString = NSMutableAttributedString.alloc().initWithString(this.nativeViewProtected.text);
attributedString.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, NSRangeFromString(`{0,${attributedString.length}}`));

this.nativeViewProtected.attributedText = attributedString;
}
}
Comment on lines +329 to +358
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Improve robustness of text handling in adjustLineBreak method.

The core logic correctly implements CSS white-space and text-overflow behavior, but there's a potential null reference issue that should be addressed.

Apply this diff to handle null/undefined text safely:

 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;
 		case 'wrap':
 			paragraphStyle = NSMutableParagraphStyle.new();
 			paragraphStyle.lineBreakMode = NSLineBreakMode.ByWordWrapping;
 			break;
 	}

 	if (paragraphStyle) {
-		let attributedString = NSMutableAttributedString.alloc().initWithString(this.nativeViewProtected.text);
+		const text = this.nativeViewProtected.text || '';
+		let attributedString = NSMutableAttributedString.alloc().initWithString(text);
-		attributedString.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, NSRangeFromString(`{0,${attributedString.length}}`));
+		attributedString.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, NSMakeRange(0, attributedString.length));

 		this.nativeViewProtected.attributedText = attributedString;
 	}
 }

Improvements:

  1. Null safety: Handle potential null/undefined text values that could cause initWithString to fail
  2. Standard API usage: Use NSMakeRange(0, length) instead of NSRangeFromString for better performance and clarity
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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;
case 'wrap':
paragraphStyle = NSMutableParagraphStyle.new();
paragraphStyle.lineBreakMode = NSLineBreakMode.ByWordWrapping;
break;
}
if (paragraphStyle) {
let attributedString = NSMutableAttributedString.alloc().initWithString(this.nativeViewProtected.text);
attributedString.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, NSRangeFromString(`{0,${attributedString.length}}`));
this.nativeViewProtected.attributedText = attributedString;
}
}
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;
case 'wrap':
paragraphStyle = NSMutableParagraphStyle.new();
paragraphStyle.lineBreakMode = NSLineBreakMode.ByWordWrapping;
break;
}
if (paragraphStyle) {
const text = this.nativeViewProtected.text || '';
let attributedString = NSMutableAttributedString.alloc().initWithString(text);
attributedString.addAttributeValueRange(
NSParagraphStyleAttributeName,
paragraphStyle,
NSMakeRange(0, attributedString.length)
);
this.nativeViewProtected.attributedText = attributedString;
}
}
🤖 Prompt for AI Agents 
In packages/core/ui/text-field/index.ios.ts around lines 329 to 358, the
adjustLineBreak method does not safely handle cases where
this.nativeViewProtected.text might be null or undefined, which can cause
initWithString to fail. To fix this, add a check to ensure the text is a valid
string before calling initWithString, defaulting to an empty string if
necessary. Also, replace the use of NSRangeFromString with NSMakeRange(0,
attributedString.length) for defining the range when adding the paragraph style
attribute, improving clarity and performance.

}