fix: recalculating layout after changing html styles - Android (#233)

### Description

If we change the HTML styles on Android, they will not be applied in any
way until we first enter any styles. We also got a bug with the initial
defaultValue, because everything started to depend on who was the first
to be counted (it depends on who was the first to be passed from JS to
the component).
Thus, I added the calculation of the lead when changing the HTML style
on Android.


### Videos

Before:


https://github.com/user-attachments/assets/0ccaae0c-d5e0-4270-b000-534260803ea3



https://github.com/user-attachments/assets/e89536be-c787-477a-8aba-fba2e0a6919d



After:


https://github.com/user-attachments/assets/6d27d9f7-cbbf-40f3-9010-557298a3eaf7

---------

Co-authored-by: Igor Furgala <exploif@icloud.com>
Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com>

Author: IvanIhnatsiuk

android/src/main/java/com/swmansion/enriched/EnrichedTextInputView.kt

@@ -30,8 +30,12 @@ import com.swmansion.enriched.events.MentionHandler
 import com.swmansion.enriched.events.OnInputBlurEvent
 import com.swmansion.enriched.events.OnInputFocusEvent
 import com.swmansion.enriched.events.OnRequestHtmlResultEvent
+import com.swmansion.enriched.spans.EnrichedH1Span
+import com.swmansion.enriched.spans.EnrichedH2Span
+import com.swmansion.enriched.spans.EnrichedH3Span
 import com.swmansion.enriched.spans.EnrichedImageSpan
 import com.swmansion.enriched.spans.EnrichedSpans
+import com.swmansion.enriched.spans.interfaces.EnrichedSpan
 import com.swmansion.enriched.styles.InlineStyles
 import com.swmansion.enriched.styles.ListStyles
 import com.swmansion.enriched.styles.ParagraphStyles
@@ -60,6 +64,13 @@ class EnrichedTextInputView : AppCompatEditText {
 
   val mentionHandler: MentionHandler? = MentionHandler(this)
   var htmlStyle: HtmlStyle = HtmlStyle(this, null)
+    set(value) {
+        if (field != value) {
+            val prev = field
+            field = value
+            reApplyHtmlStyleForSpans(prev, value)
+        }
+    }
   var spanWatcher: EnrichedSpanWatcher? = null
   var layoutManager: EnrichedTextInputViewLayoutManager = EnrichedTextInputViewLayoutManager(this)
 
@@ -336,6 +347,7 @@ class EnrichedTextInputView : AppCompatEditText {
     // This ensured that newly created spans will take the new font size into account
     htmlStyle.invalidateStyles()
     layoutManager.invalidateLayout()
+    forceScrollToSelection()
   }
 
   fun setFontFamily(family: String?) {
@@ -592,6 +604,72 @@ class EnrichedTextInputView : AppCompatEditText {
     }
   }
 
+    private fun forceScrollToSelection() {
+      val textLayout = layout ?: return
+      val cursorOffset = selectionStart
+      if (cursorOffset <= 0) return
+
+      val selectedLineIndex = textLayout.getLineForOffset(cursorOffset)
+      val selectedLineTop = textLayout.getLineTop(selectedLineIndex)
+      val selectedLineBottom = textLayout.getLineBottom(selectedLineIndex)
+      val visibleTextHeight = height - paddingTop - paddingBottom
+
+      if (visibleTextHeight <= 0) return
+
+      val visibleTop = scrollY
+      val visibleBottom = scrollY + visibleTextHeight
+      var targetScrollY = scrollY
+
+      if (selectedLineTop < visibleTop) {
+        targetScrollY = selectedLineTop
+      } else if (selectedLineBottom > visibleBottom) {
+        targetScrollY = selectedLineBottom - visibleTextHeight
+      }
+
+      val maxScrollY = (textLayout.height - visibleTextHeight).coerceAtLeast(0)
+      targetScrollY = targetScrollY.coerceIn(0, maxScrollY)
+      scrollTo(scrollX, targetScrollY)
+    }
+
+  private fun reApplyHtmlStyleForSpans(previousHtmlStyle: HtmlStyle, nextHtmlStyle: HtmlStyle) {
+    val shouldRemoveBoldSpanFromH1Span = !previousHtmlStyle.h1Bold && nextHtmlStyle.h1Bold
+    val shouldRemoveBoldSpanFromH2Span = !previousHtmlStyle.h2Bold && nextHtmlStyle.h2Bold
+    val shouldRemoveBoldSpanFromH3Span = !previousHtmlStyle.h3Bold && nextHtmlStyle.h3Bold
+
+    val spannable = text as? Spannable ?: return
+    if (spannable.isEmpty()) return
+
+    var shouldEmitStateChange = false
+
+    runAsATransaction {
+      val spans = spannable.getSpans(0, spannable.length, EnrichedSpan::class.java)
+      for (span in spans) {
+        if (!span.dependsOnHtmlStyle) continue
+
+        val start = spannable.getSpanStart(span)
+        val end = spannable.getSpanEnd(span)
+        val flags = spannable.getSpanFlags(span)
+
+        if (start == -1 || end == -1) continue
+
+        if ((span is EnrichedH1Span && shouldRemoveBoldSpanFromH1Span) || (span is EnrichedH2Span && shouldRemoveBoldSpanFromH2Span) || (span is EnrichedH3Span && shouldRemoveBoldSpanFromH3Span)) {
+          val isRemoved = removeStyle(EnrichedSpans.BOLD, start, end)
+          if (isRemoved) shouldEmitStateChange = true
+        }
+
+        spannable.removeSpan(span)
+        val newSpan = span.rebuildWithStyle(htmlStyle)
+        spannable.setSpan(newSpan, start, end, flags)
+      }
+
+      if (shouldEmitStateChange) {
+        selection?.validateStyles()
+      }
+    }
+    layoutManager.invalidateLayout()
+    forceScrollToSelection()
+  }
+
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
 

android/src/main/java/com/swmansion/enriched/spans/EnrichedBlockQuoteSpan.kt

@@ -11,6 +11,8 @@ import com.swmansion.enriched.styles.HtmlStyle
 
 // https://android.googlesource.com/platform/frameworks/base/+/refs/heads/main/core/java/android/text/style/QuoteSpan.java
 class EnrichedBlockQuoteSpan(private val htmlStyle: HtmlStyle) : MetricAffectingSpan(), LeadingMarginSpan, EnrichedBlockSpan {
+  override val dependsOnHtmlStyle: Boolean = true
+
   override fun updateMeasureState(p0: TextPaint) {
     // Do nothing, but inform layout that this span affects text metrics
   }
@@ -35,4 +37,8 @@ class EnrichedBlockQuoteSpan(private val htmlStyle: HtmlStyle) : MetricAffecting
       textPaint?.color = color
     }
   }
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedBlockQuoteSpan {
+    return EnrichedBlockQuoteSpan(htmlStyle)
+  }
 }

android/src/main/java/com/swmansion/enriched/spans/EnrichedBoldSpan.kt

@@ -2,9 +2,15 @@ package com.swmansion.enriched.spans
 
 import android.graphics.Typeface
 import android.text.style.StyleSpan
+import com.swmansion.enriched.spans.interfaces.EnrichedBlockSpan
 import com.swmansion.enriched.spans.interfaces.EnrichedInlineSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
 @Suppress("UNUSED_PARAMETER")
 class EnrichedBoldSpan(htmlStyle: HtmlStyle) : StyleSpan(Typeface.BOLD), EnrichedInlineSpan {
+  override val dependsOnHtmlStyle: Boolean = false
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedBoldSpan {
+    return EnrichedBoldSpan(htmlStyle)
+  }
 }

android/src/main/java/com/swmansion/enriched/spans/EnrichedCodeBlockSpan.kt

@@ -13,6 +13,8 @@ import com.swmansion.enriched.spans.interfaces.EnrichedBlockSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
 class EnrichedCodeBlockSpan(private val htmlStyle: HtmlStyle) : MetricAffectingSpan(), LineBackgroundSpan, EnrichedBlockSpan {
+  override val dependsOnHtmlStyle: Boolean = true
+
   override fun updateDrawState(paint: TextPaint) {
     paint.typeface = Typeface.MONOSPACE
     paint.color = htmlStyle.codeBlockColor
@@ -74,4 +76,8 @@ class EnrichedCodeBlockSpan(private val htmlStyle: HtmlStyle) : MetricAffectingS
     canvas.drawPath(path, p)
     p.color = previousColor
   }
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedCodeBlockSpan {
+    return EnrichedCodeBlockSpan(htmlStyle)
+  }
 }

android/src/main/java/com/swmansion/enriched/spans/EnrichedH1Span.kt

@@ -7,11 +7,17 @@ import com.swmansion.enriched.spans.interfaces.EnrichedHeadingSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
 class EnrichedH1Span(private val style: HtmlStyle) : AbsoluteSizeSpan(style.h1FontSize), EnrichedHeadingSpan {
+  override val dependsOnHtmlStyle: Boolean = true
+
   override fun updateDrawState(tp: TextPaint) {
     super.updateDrawState(tp)
     val bold = style.h1Bold
     if (bold) {
       tp.typeface = Typeface.create(tp.typeface, Typeface.BOLD)
     }
   }
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedH1Span {
+    return EnrichedH1Span(htmlStyle)
+  }
 }

android/src/main/java/com/swmansion/enriched/spans/EnrichedH2Span.kt

@@ -7,11 +7,17 @@ import com.swmansion.enriched.spans.interfaces.EnrichedHeadingSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
 class EnrichedH2Span(private val htmlStyle: HtmlStyle) : AbsoluteSizeSpan(htmlStyle.h2FontSize), EnrichedHeadingSpan {
+  override val dependsOnHtmlStyle: Boolean = true
+
   override fun updateDrawState(tp: TextPaint) {
     super.updateDrawState(tp)
     val bold = htmlStyle.h2Bold
     if (bold) {
       tp.typeface = Typeface.create(tp.typeface, Typeface.BOLD)
     }
   }
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedH2Span {
+    return EnrichedH2Span(htmlStyle)
+  }
 }

android/src/main/java/com/swmansion/enriched/spans/EnrichedH3Span.kt

@@ -7,11 +7,17 @@ import com.swmansion.enriched.spans.interfaces.EnrichedHeadingSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
 class EnrichedH3Span(private val htmlStyle: HtmlStyle) : AbsoluteSizeSpan(htmlStyle.h3FontSize), EnrichedHeadingSpan {
+  override val dependsOnHtmlStyle: Boolean = true
+
   override fun updateDrawState(tp: TextPaint) {
     super.updateDrawState(tp)
     val bold = htmlStyle.h3Bold
     if (bold) {
       tp.typeface = Typeface.create(tp.typeface, Typeface.BOLD)
     }
   }
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedH3Span {
+    return EnrichedH3Span(htmlStyle)
+  }
 }

android/src/main/java/com/swmansion/enriched/spans/EnrichedImageSpan.kt

@@ -18,9 +18,12 @@ import com.swmansion.enriched.utils.AsyncDrawable
 import androidx.core.graphics.drawable.toDrawable
 import com.swmansion.enriched.R
 import com.swmansion.enriched.spans.utils.ForceRedrawSpan
+import com.swmansion.enriched.styles.HtmlStyle
 import com.swmansion.enriched.utils.ResourceManager
 
 class EnrichedImageSpan : ImageSpan, EnrichedInlineSpan {
+  override val dependsOnHtmlStyle: Boolean = false
+
   private var width: Int = 0
   private var height: Int = 0
 
@@ -119,6 +122,8 @@ class EnrichedImageSpan : ImageSpan, EnrichedInlineSpan {
     return height
   }
 
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedImageSpan = this
+
   companion object {
     fun createEnrichedImageSpan(src: String, width: Int, height: Int): EnrichedImageSpan {
       var imgDrawable = prepareDrawableForImage(src)

android/src/main/java/com/swmansion/enriched/spans/EnrichedInlineCodeSpan.kt

@@ -7,6 +7,8 @@ import com.swmansion.enriched.spans.interfaces.EnrichedInlineSpan
 import com.swmansion.enriched.styles.HtmlStyle
 
 class EnrichedInlineCodeSpan(private val htmlStyle: HtmlStyle) : MetricAffectingSpan(), EnrichedInlineSpan {
+  override val dependsOnHtmlStyle: Boolean = true
+
   override fun updateDrawState(textPaint: TextPaint) {
     val typeface = Typeface.create(Typeface.MONOSPACE, Typeface.NORMAL)
     textPaint.typeface = typeface
@@ -18,4 +20,8 @@ class EnrichedInlineCodeSpan(private val htmlStyle: HtmlStyle) : MetricAffecting
     val typeface = Typeface.create(Typeface.MONOSPACE, Typeface.NORMAL)
     textPaint.typeface = typeface
   }
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedInlineCodeSpan {
+    return EnrichedInlineCodeSpan(htmlStyle)
+  }
 }

android/src/main/java/com/swmansion/enriched/spans/EnrichedItalicSpan.kt

@@ -7,4 +7,9 @@ import com.swmansion.enriched.styles.HtmlStyle
 
 @Suppress("UNUSED_PARAMETER")
 class EnrichedItalicSpan(private val htmlStyle: HtmlStyle) : StyleSpan(Typeface.ITALIC), EnrichedInlineSpan {
+  override val dependsOnHtmlStyle: Boolean = false
+
+  override fun rebuildWithStyle(htmlStyle: HtmlStyle): EnrichedItalicSpan {
+    return EnrichedItalicSpan(htmlStyle)
+  }
 }