fix(iOS, Android): list styling - #738
Draft
hejsztynx wants to merge 12 commits into
Draft
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR aligns ordered/unordered list marker indentation and marker-column sizing across iOS and Android, including dynamic ordered-list marker column expansion to prevent marker/text overlap, and adds E2E coverage for the new behavior.
Changes:
- iOS: Fix unordered-list indent calculation to include bullet size, and implement dynamic ordered-list marker column sizing across contiguous lists (including re-styling adjacent lists on edits).
- Android: Remove the previous
olMarginLeft“lead margin” hack and implement dynamic ordered-list marker column sizing (with relayout forcing when margins change). - E2E: Add Maestro flows + baseline updates for dynamic ordered-list markers (single-digit → double-digit transitions).
Reviewed changes
Copilot reviewed 16 out of 58 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| ios/styles/UnorderedListStyle.mm | Includes bulletSize in unordered-list indent computation. |
| ios/styles/OrderedListStyle.mm | Adds dynamic ordered-list marker-column sizing and contiguous-list reindent/recalc logic. |
| ios/interfaces/StyleHeaders.h | Exposes ordered-list recalculation API for edited ranges. |
| ios/inputAttributesManager/InputAttributesManager.mm | Triggers ordered-list margin recalculation around edited ranges. |
| ios/extensions/LayoutManagerExtension.mm | Adjusts iOS ordered-list marker X positioning to align within marker column. |
| apps/example/src/constants/editorConfig.ts | Updates example ol styling values to reflect new behavior. |
| android/src/main/java/com/swmansion/enriched/textinput/watchers/EnrichedSpanWatcher.kt | Updates ordered-list index/margin recomputation call signature. |
| android/src/main/java/com/swmansion/enriched/textinput/styles/ListStyles.kt | Recomputes ordered-list indexes globally, updates marker-column margins, and forces relayout when margins change. |
| android/src/main/java/com/swmansion/enriched/textinput/styles/HtmlStyle.kt | Removes computed olMarginLeft offset; uses configured margin directly. |
| android/src/main/java/com/swmansion/enriched/textinput/EnrichedTextInputView.kt | Precomputes ordered-list marker-column margins before setText for correct first layout. |
| android/src/main/java/com/swmansion/enriched/text/EnrichedTextView.kt | Ensures ordered-list marker-column margins are computed before/when setting text. |
| android/src/main/java/com/swmansion/enriched/text/EnrichedTextStyle.kt | Removes computed olMarginLeft offset; uses configured margin directly. |
| android/src/main/java/com/swmansion/enriched/common/spans/EnrichedOrderedListSpan.kt | Adds per-list columnMargin + updates marker positioning and leading margin behavior. |
| android/src/main/java/com/swmansion/enriched/common/OrderedListMargins.kt | Introduces shared ordered-list marker-column margin recomputation helper. |
| .maestro/enrichedText/flows/dynamic_ol_markers.yaml | Adds E2E flow verifying dynamic ordered-list marker column behavior in EnrichedText. |
| .maestro/enrichedInput/flows/dynamic_ol_markers.yaml | Adds E2E flow verifying dynamic ordered-list marker column behavior in EnrichedInput while editing. |
Suppressed comments (1)
android/src/main/java/com/swmansion/enriched/common/spans/EnrichedOrderedListSpan.kt:67
widthandxPositionare computed before applyingolMarkerFontWeight, but the marker is drawn after changing the typeface. If the marker font is bolder/wider than the body font, this produces incorrect right-alignment and can reintroduce overlap. Apply marker styling before measuring width/position, then draw.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+117
to
125
| NSParagraphStyle *existing = (NSParagraphStyle *)value; | ||
| // skip re-styling paragraphs that don't require it | ||
| if (existing != nullptr && | ||
| existing.headIndent == listHeadIndent && | ||
| existing.firstLineHeadIndent == listHeadIndent) { | ||
| return; | ||
| } | ||
| NSMutableParagraphStyle *pStyle = [existing mutableCopy]; | ||
| pStyle.headIndent = listHeadIndent; |
Comment on lines
+26
to
+36
| fun updateColumnMargin( | ||
| paint: Paint, | ||
| highestIndex: Int, | ||
| ): Boolean { | ||
| val highestIndexText = "$highestIndex." | ||
| val highestIndexWidth = ceil(paint.measureText(highestIndexText)).toInt() | ||
| val newColumnMargin = max(enrichedStyle.olMarginLeft, highestIndexWidth) | ||
| if (newColumnMargin == columnMargin) return false | ||
| columnMargin = newColumnMargin | ||
| return true | ||
| } |
Comment on lines
+133
to
+138
| class EmptySpan : ParagraphStyle | ||
|
|
||
| val start = text.getSpanStart(sortedSpans.first()) | ||
| val end = text.getSpanEnd(sortedSpans.last()) | ||
| val (safeStart, safeEnd) = text.getSafeSpanBoundaries(start, end) | ||
| text.setSpan(EmptySpan(), safeStart, safeEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
There were some inconsistencies regarding the list styling between native platforms
bulletSizewas not applied when computing the list indentolmargins on both platforms. By default it uses the margin provided viahtmlStyle, but if the rendered ordinal doesn't fit in it, it gets sufficiently increased. This solves an issue where markers would overlap the text. Equivalent fix was introduced in fix(web): list styling #730marginLeft, to suppress the issue from the previous point - now this mechanism is removed, as no longer neededTest Plan
experiment around with the htmlStyle in example app's
editorConfig.tsScreenshots / Videos
Before:
After:
You can see the margin got extended, after introducing double-digit ordinals
Compatibility
Checklist