-
Notifications
You must be signed in to change notification settings - Fork 67
fix(iOS, Android): list styling #738
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.
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
base: main
Are you sure you want to change the base?
Changes from 15 commits
510d308
b05bd53
1493c35
999f54c
edf431c
478de71
4d3ec61
b4b98cf
84963b1
540b211
07f3960
ab42817
c5008f0
35f2ca3
af7834f
3e28bba
c9ed47f
3ce8b5d
05079bb
af516e3
64d4ada
7e781a5
cabe778
b1643b8
d196f44
5c8b66a
1582dce
8fef696
1175c57
aff020e
4784ab8
23dc283
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| appId: swmansion.enriched.example | ||
| --- | ||
| # Validates that ordered list margins dynamically adjust when transitioning | ||
| # between single-digit (9) and double-digit (10) indexes. | ||
| - launchApp | ||
|
|
||
| - tapOn: | ||
| id: 'toggle-screen-button' | ||
|
|
||
| - runFlow: | ||
| file: '../subflows/set_editor_value.yaml' | ||
| env: | ||
| VALUE: > | ||
| <html> | ||
| <ol> | ||
| <li>A</li> | ||
| <li>B</li> | ||
| <li>C</li> | ||
| <li>D</li> | ||
| <li>E</li> | ||
| <li>F</li> | ||
| <li>G</li> | ||
| <li>H</li> | ||
| <li>I</li> | ||
| </ol> | ||
| </html> | ||
|
|
||
| - tapOn: | ||
| id: 'size-max-button' | ||
|
|
||
| - runFlow: | ||
| file: '../subflows/capture_or_assert_screenshot.yaml' | ||
| env: | ||
| SCREENSHOT_NAME: 'dynamic_ol_markers_before' | ||
|
|
||
| - tapOn: | ||
| id: "editor-input" | ||
| point: "50%, 95%" | ||
| - pressKey: Enter | ||
| - inputText: "J" | ||
|
|
||
| - runFlow: | ||
| file: '../subflows/capture_or_assert_screenshot.yaml' | ||
| env: | ||
| SCREENSHOT_NAME: 'dynamic_ol_markers_after' | ||
|
|
||
| - tapOn: | ||
| id: "editor-input" | ||
| point: "50%, 95%" | ||
| - pressKey: Backspace | ||
| - pressKey: Backspace | ||
|
|
||
| - runFlow: | ||
| file: '../subflows/capture_or_assert_screenshot.yaml' | ||
| env: | ||
| SCREENSHOT_NAME: 'dynamic_ol_markers_revert' |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| appId: swmansion.enriched.example | ||
| --- | ||
| # Validates that ordered list margins dynamically adjust when transitioning | ||
| # between single-digit (9) and double-digit (10) indexes. | ||
| - launchApp | ||
|
|
||
| - tapOn: | ||
| id: 'toggle-screen-button' | ||
|
|
||
| - tapOn: | ||
| id: 'toggle-enriched-text-screen-button' | ||
|
|
||
| - runFlow: | ||
| file: '../subflows/set_enriched_text_value.yaml' | ||
| env: | ||
| VALUE: > | ||
| <html> | ||
| <ol> | ||
| <li>A</li> | ||
| <li>B</li> | ||
| <li>C</li> | ||
| </ol> | ||
| <br> | ||
| <ol> | ||
| <li>A</li> | ||
| <li>B</li> | ||
| <li>C</li> | ||
| <li>D</li> | ||
| <li>E</li> | ||
| <li>F</li> | ||
| <li>G</li> | ||
| <li>H</li> | ||
| <li>I</li> | ||
| <li>J</li> | ||
| </ol> | ||
| </html> | ||
|
|
||
| - runFlow: | ||
| file: '../subflows/capture_or_assert_screenshot.yaml' | ||
| env: | ||
| SCREENSHOT_NAME: 'dynamic_ol_markers' |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| package com.swmansion.enriched.common | ||
|
|
||
| import android.graphics.Paint | ||
| import android.text.Spannable | ||
| import android.text.style.ParagraphStyle | ||
| import com.swmansion.enriched.common.spans.EnrichedOrderedListSpan | ||
| import com.swmansion.enriched.textinput.utils.getSafeSpanBoundaries | ||
|
|
||
| // Recomputes the shared marker column width for every ordered-list item. | ||
| // Returns true when any item's column width changed, so callers can force a relayout. | ||
| fun updateOrderedListColumnMargins( | ||
| text: Spannable, | ||
| paint: Paint, | ||
| ) { | ||
| val spans = text.getSpans(0, text.length, EnrichedOrderedListSpan::class.java) | ||
| val sortedSpans = spans.sortedBy { text.getSpanStart(it) } | ||
|
|
||
| var changed = false | ||
| var previousIndex = 0 | ||
| var highestIndex = 0 | ||
| for (span in sortedSpans.reversed()) { | ||
| val currentIndex = span.index | ||
| if (currentIndex > previousIndex) { | ||
| highestIndex = currentIndex | ||
| } | ||
| if (span.updateColumnMargin(paint, highestIndex)) changed = true | ||
|
|
||
| previousIndex = currentIndex | ||
| } | ||
|
|
||
| // Ordered list margins got updated, so we need to force a re-layout of that list. | ||
| // Uses the same empty ParagraphStyle trick as EnrichedSpanWatcher.updateNextLineLayout. | ||
| if (changed) { | ||
| forceOrderedListRelayout(text, sortedSpans) | ||
| } | ||
| } | ||
|
|
||
| private fun forceOrderedListRelayout( | ||
| text: Spannable, | ||
| sortedSpans: List<EnrichedOrderedListSpan>, | ||
| ) { | ||
| if (sortedSpans.isEmpty()) return | ||
|
|
||
| class EmptySpan : ParagraphStyle | ||
|
|
||
| val start = text.getSpanStart(sortedSpans.first()) | ||
| val end = text.getSpanEnd(sortedSpans.last()) | ||
| val (safeStart, safeEnd) = text.getSafeSpanBoundaries(start, end) | ||
| text.getSpans(safeStart, safeEnd, EmptySpan::class.java).forEach { text.removeSpan(it) } | ||
| text.setSpan(EmptySpan(), safeStart, safeEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE) | ||
| } | ||
|
hejsztynx marked this conversation as resolved.
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,8 +4,10 @@ import android.text.Editable | |
| import android.text.Spannable | ||
| import android.text.SpannableStringBuilder | ||
| import android.text.Spanned | ||
| import android.text.style.ParagraphStyle | ||
| import com.swmansion.enriched.common.EnrichedConstants | ||
| import com.swmansion.enriched.common.EnrichedSpanFlags | ||
| import com.swmansion.enriched.common.updateOrderedListColumnMargins | ||
| import com.swmansion.enriched.textinput.EnrichedTextInputView | ||
| import com.swmansion.enriched.textinput.spans.EnrichedInputCheckboxListSpan | ||
| import com.swmansion.enriched.textinput.spans.EnrichedInputOrderedListSpan | ||
|
|
@@ -115,6 +117,8 @@ class ListStyles( | |
| val index = getOrderedListIndex(text, spanStart) | ||
| span.setListIndex(index) | ||
| } | ||
|
|
||
| updateOrderedListColumnMargins(text, view.paint) | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We are already going span by span in the
Collaborator
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. How would you see it? iteration inside |
||
| } | ||
|
|
||
| private fun toggleStyle( | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't use such approach anywhere in the code. Instead, helper span class should be implemented, as we do in other places
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe I've misunderstood, but there is this code in
EnrichedSpanWatcher:But I agree, it's better to define a helper class