-
Notifications
You must be signed in to change notification settings - Fork 66
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 all 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
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,7 @@ | ||
| package com.swmansion.enriched.common | ||
|
|
||
| import android.text.style.ParagraphStyle | ||
|
|
||
| // A no-op ParagraphStyle. Setting one over a range forces | ||
| // Android to re-layout it. | ||
| class EmptyParagraphSpan : ParagraphStyle |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| package com.swmansion.enriched.common | ||
|
|
||
| import android.graphics.Paint | ||
| import android.text.Spannable | ||
| 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. | ||
| fun updateOrderedListColumnMargins( | ||
| text: Spannable, | ||
| paint: Paint, | ||
| ) { | ||
| val spans = text.getSpans(0, text.length, EnrichedOrderedListSpan::class.java) | ||
| val sortedSpans = spans.sortedBy { text.getSpanStart(it) } | ||
|
|
||
| val changedLists = mutableSetOf<MutableList<EnrichedOrderedListSpan>>() | ||
| var currentList = mutableListOf<EnrichedOrderedListSpan>() | ||
| var currentListChanged = false | ||
| var previousIndex = 0 | ||
| var highestIndex = 0 | ||
|
|
||
| for (span in sortedSpans.reversed()) { | ||
| if (span.index >= previousIndex) { | ||
| if (currentListChanged) { | ||
| // we'll re-layout that list | ||
| changedLists.add(currentList) | ||
| } | ||
|
|
||
| // we entered a new distinct list | ||
| currentList = mutableListOf() | ||
| currentListChanged = false | ||
| highestIndex = span.index | ||
| } | ||
|
|
||
| currentList.add(span) | ||
| if (span.updateColumnMargin(paint, highestIndex)) { | ||
| currentListChanged = true | ||
| } | ||
|
|
||
| previousIndex = span.index | ||
| } | ||
|
|
||
| if (currentListChanged) { | ||
| changedLists.add(currentList) | ||
| } | ||
|
|
||
| // A single empty ParagraphStyle over the whole list forces one re-layout of it. | ||
| // Uses the same trick as EnrichedSpanWatcher.updateNextLineLayout. | ||
| for (list in changedLists) { | ||
| forceOrderedListRelayout(text, list) | ||
| } | ||
| } | ||
|
|
||
| private fun forceOrderedListRelayout( | ||
| text: Spannable, | ||
| listSpans: List<EnrichedOrderedListSpan>, | ||
| ) { | ||
| if (listSpans.isEmpty()) return | ||
|
|
||
| // Because the list was populated during a reversed() loop, the elements | ||
| // are in descending order. last() is the start of the list, first() is the end. | ||
| val start = text.getSpanStart(listSpans.last()) | ||
| val end = text.getSpanEnd(listSpans.first()) | ||
|
|
||
| if (start < 0 || end < 0 || start > end) return | ||
|
|
||
| val (safeStart, safeEnd) = text.getSafeSpanBoundaries(start, end) | ||
| text.getSpans(safeStart, safeEnd, EmptyParagraphSpan::class.java).forEach { text.removeSpan(it) } | ||
| text.setSpan(EmptyParagraphSpan(), safeStart, safeEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE) | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,6 +6,7 @@ import android.text.SpannableStringBuilder | |
| import android.text.Spanned | ||
| 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 +116,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( | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.