Skip to content

feat(ios): add textAlignment - #403

Merged
kacperzolkiewski merged 33 commits into
mainfrom
@kacperzolkiewski/text-alignment
May 15, 2026
Merged

feat(ios): add textAlignment#403
kacperzolkiewski merged 33 commits into
mainfrom
@kacperzolkiewski/text-alignment

Conversation

@kacperzolkiewski

@kacperzolkiewski kacperzolkiewski commented Jan 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Summary

This PR:

  1. Adds textAlignment support on iOS
  2. Applies a minimal NSKernAttributeName to zero-width spaces (\u200B).
  • ZWS has zero advance width, NSLayoutManager produces a zero-width usedRect for ZWS-only lines, which under right/center alignment collapses the line height. The minimal kerning gives the glyph a non-zero advance, preserving line geometry while remaining invisible.

Test Plan

Run example app and play with textAlignment when different styles are toggled.
Check if paragraphs/lists with different textAlignment than left are properly parsed and contain style="text-align:center|right|justify" inside HTML

Screenshots / Videos

Screen.Recording.2026-05-08.at.08.34.04.mov

Compatibility

OS Implemented
iOS ✅
Android ❌

@kacperzolkiewski
kacperzolkiewski marked this pull request as ready for review March 11, 2026 10:17
@kacperzolkiewski
kacperzolkiewski requested review from exploIF and szydlovsky and removed request for szydlovsky March 11, 2026 10:17
@kacperzolkiewski kacperzolkiewski mentioned this pull request Mar 11, 2026
Closed
@MartycFly321

MartycFly321 commented Mar 14, 2026

Copy link
Copy Markdown

@kacperzolkiewski Awesome feature! Would love to see it implemented.
I remember from the foreground color PR that it only gets approved if it works for IOS AND Android:

#266 (comment)
"Hey @IvanIhnatsiuk, it's super nice to get such verbose contribution from the community! While the feature is potentially interesting for us we cannot really proceed with it for now; we want the API and new features to be working on both mobile platforms from the get-go. Either way, great work!"

szydlovsky
szydlovsky reviewed Mar 20, 2026
View reviewed changes

@szydlovsky szydlovsky left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Overall solid, left a few comments.
I wonder if we can just make the alignment just another style? It would simplify a few things because this implementation kinda looks all over the place. Either way I'm open for discussion 😄

Comment thread ios/inputParser/InputParser.mm Outdated
Comment thread ios/inputParser/InputParser.mm Outdated
Comment thread ios/inputParser/InputParser.mm Outdated
Comment thread ios/inputParser/InputParser.mm Outdated
Comment thread ios/utils/AlignmentUtils.mm Outdated
Comment thread ios/utils/AlignmentUtils.mm Outdated
@kacperzolkiewski kacperzolkiewski changed the title feat(ios): add textAlignment feat(ios): add textAlignment for EnrichedTextInput May 6, 2026
@kacperzolkiewski
kacperzolkiewski marked this pull request as draft May 6, 2026 12:48
@kacperzolkiewski kacperzolkiewski changed the title feat(ios): add textAlignment for EnrichedTextInput feat(ios): add textAlignment May 7, 2026
@kacperzolkiewski

kacperzolkiewski commented May 8, 2026

Copy link
Copy Markdown
Collaborator Author

Currently, the cursor is not properly aligned on empty lines when active formatting (such as alignment or headings) is applied. Fixing this requires a refactor of the attribute application logic, so it will be addressed in a separate PR.

Screen.Recording.2026-05-08.at.08.35.53.mov

@kacperzolkiewski
kacperzolkiewski marked this pull request as ready for review May 8, 2026 06:44
@kacperzolkiewski
kacperzolkiewski requested a review from pkaramon May 8, 2026 06:45
szydlovsky
szydlovsky reviewed May 14, 2026
View reviewed changes
Comment thread .maestro/enrichedInput/flows/paragraph_styles_alignment_visual.yaml Outdated
Comment thread apps/example/src/screens/DevScreen.tsx
Comment thread ios/enrichedInputTextView/EnrichedInputTextView/EnrichedInputTextView.mm Outdated
Comment thread ios/utils/TextListsUtils.h
Comment thread ios/utils/TextListUtils.h Outdated
Comment thread ios/utils/ParagraphAttributesUtils.mm Outdated
Comment thread ios/inputAttributesManager/InputAttributesManager.mm Outdated
Comment thread ios/htmlParser/HtmlParser.mm Outdated
Comment thread ios/htmlParser/HtmlParser.mm Outdated
Comment thread ios/htmlParser/HtmlParser.mm
kacperzolkiewski and others added 8 commits May 14, 2026 16:13
@kacperzolkiewski @szydlovsky
Update ios/utils/TextListUtils.h
180e643 
Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com>
@kacperzolkiewski @szydlovsky
Update .maestro/enrichedInput/flows/paragraph_styles_alignment_visual…
8d5ee49 
….yaml

Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com>
@kacperzolkiewski @szydlovsky
Update ios/enrichedInputTextView/EnrichedInputTextView/EnrichedInputT…
f94e12b 
…extView.mm

Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com>
@kacperzolkiewski @szydlovsky
Update ios/utils/TextListUtils.h
611eded 
Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com>
@kacperzolkiewski @szydlovsky
Update ios/utils/ParagraphAttributesUtils.mm
a3a4d9c 
Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com>
@kacperzolkiewski @szydlovsky
Update ios/utils/TextListUtils.h
ee57d0c 
Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com>
@kacperzolkiewski
fix: review changes
555181a
@kacperzolkiewski
fix: parser
9a965d1
szydlovsky
szydlovsky approved these changes May 15, 2026
View reviewed changes

@szydlovsky szydlovsky left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Looks solid 💣

@kacperzolkiewski
kacperzolkiewski merged commit 596a75b into main May 15, 2026
7 checks passed
@kacperzolkiewski
kacperzolkiewski deleted the @kacperzolkiewski/text-alignment branch May 15, 2026 14:28
@kacperzolkiewski kacperzolkiewski mentioned this pull request May 26, 2026
Merged
2 tasks
kacperzolkiewski added a commit that referenced this pull request May 29, 2026
@kacperzolkiewski
fix(iOS): inline styles parsing (#617)
521e7d6 
# Summary

We introduced a parser regression after merging #403, causing the
`inline_styles_display.yaml` test to fail.
When multiple inline styles are applied to the same word, the styles
incorrectly extend onto the surrounding text
<img width="1266" height="424" alt="image"
src="https://github.com/user-attachments/assets/a50ccadf-1421-4215-b42c-1f7dd76980a0"
/>

Also fixes applying alignment inside input from parsed html
## Test Plan

`inline_styles_display.yaml` test passes.
Parsing works properly when alignment set

## Screenshots / Videos

n/a

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅     |
| Android |    ❌     |

## Checklist

- [X] E2E tests are passing
- [ ] Required E2E tests have been added (if applicable)
@kacperzolkiewski kacperzolkiewski mentioned this pull request Jul 9, 2026
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@szydlovsky szydlovsky szydlovsky approved these changes
@exploIF exploIF Awaiting requested review from exploIF
@pkaramon pkaramon Awaiting requested review from pkaramon

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@kacperzolkiewski @MartycFly321 @szydlovsky