feat(Android): line height (#431)

# Summary

Adds support for lineHeight style on Android.

## Test Plan

- Specify `lineHeight` style prop
- Notice that line height is properly updated

## Screenshots / Videos


https://github.com/user-attachments/assets/51488bc8-7156-42f4-ac53-104df858c240


## Compatibility

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

---------

Co-authored-by: Kacper Żółkiewski <kacper.zolkiewski@swmansion.com>

Author: exploIF

android/src/main/java/com/swmansion/enriched/common/spans/EnrichedCheckboxListSpan.kt

@@ -80,8 +80,9 @@ open class EnrichedCheckboxListSpan(
     if (spannedText.getSpanStart(this) == start) {
       checkboxDrawable.update(isChecked)
 
-      val lineCenter = (top + bottom) / 2f
-      val drawableTop = lineCenter - (enrichedStyle.ulCheckboxBoxSize / 2f)
+      val fm = paint.fontMetricsInt
+      val textCenter = baseline + (fm.ascent + fm.descent) / 2f
+      val drawableTop = textCenter - (enrichedStyle.ulCheckboxBoxSize / 2f)
 
       canvas.withTranslation(x.toFloat() + enrichedStyle.ulCheckboxMarginLeft, drawableTop) {
         checkboxDrawable.draw(this)

android/src/main/java/com/swmansion/enriched/common/spans/EnrichedUnorderedListSpan.kt

@@ -49,7 +49,8 @@ open class EnrichedUnorderedListSpan(
       paint.style = Paint.Style.FILL
 
       val bulletRadius = enrichedStyle.ulBulletSize / 2f
-      val yPosition = (top + bottom) / 2f
+      val fm = paint.fontMetricsInt
+      val yPosition = baseline + (fm.ascent + fm.descent) / 2f
       val xPosition = x + dir * bulletRadius + enrichedStyle.ulMarginLeft
 
       canvas.drawCircle(xPosition, yPosition, bulletRadius, paint)

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

@@ -22,8 +22,6 @@ import android.view.inputmethod.InputConnection
 import android.view.inputmethod.InputMethodManager
 import androidx.appcompat.widget.AppCompatEditText
 import androidx.core.view.ViewCompat
-import androidx.core.view.inputmethod.EditorInfoCompat
-import androidx.core.view.inputmethod.InputConnectionCompat
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.common.ReactConstants
@@ -46,6 +44,7 @@ import com.swmansion.enriched.textinput.spans.EnrichedInputH4Span
 import com.swmansion.enriched.textinput.spans.EnrichedInputH5Span
 import com.swmansion.enriched.textinput.spans.EnrichedInputH6Span
 import com.swmansion.enriched.textinput.spans.EnrichedInputImageSpan
+import com.swmansion.enriched.textinput.spans.EnrichedLineHeightSpan
 import com.swmansion.enriched.textinput.spans.EnrichedSpans
 import com.swmansion.enriched.textinput.spans.interfaces.EnrichedInputSpan
 import com.swmansion.enriched.textinput.styles.HtmlStyle
@@ -96,6 +95,7 @@ class EnrichedTextInputView : AppCompatEditText {
   var experimentalSynchronousEvents: Boolean = false
 
   var fontSize: Float? = null
+  private var lineHeight: Float? = null
   private var autoFocus = false
   private var typefaceDirty = false
   private var didAttachToWindow = false
@@ -312,6 +312,7 @@ class EnrichedTextInputView : AppCompatEditText {
     runAsATransaction {
       val newText = parseText(value)
       setText(newText)
+      applyLineSpacing()
 
       observeAsyncImages()
 
@@ -424,6 +425,28 @@ class EnrichedTextInputView : AppCompatEditText {
     forceScrollToSelection()
   }
 
+  fun setLineHeight(height: Float) {
+    lineHeight = if (height == 0f) null else height
+    applyLineSpacing()
+    layoutManager.invalidateLayout()
+    forceScrollToSelection()
+  }
+
+  private fun applyLineSpacing() {
+    val spannable = text as? Spannable ?: return
+    spannable
+      .getSpans(0, spannable.length, EnrichedLineHeightSpan::class.java)
+      .forEach { spannable.removeSpan(it) }
+
+    val lh = lineHeight ?: return
+    spannable.setSpan(
+      EnrichedLineHeightSpan(lh),
+      0,
+      spannable.length,
+      Spannable.SPAN_INCLUSIVE_INCLUSIVE,
+    )
+  }
+
   fun setFontFamily(family: String?) {
     if (family != fontFamily) {
       fontFamily = family

android/src/main/java/com/swmansion/enriched/textinput/EnrichedTextInputViewManager.kt

@@ -178,7 +178,7 @@ class EnrichedTextInputViewManager :
     view: EnrichedTextInputView?,
     height: Float,
   ) {
-    // no-op
+    view?.setLineHeight(height)
   }
 
   @ReactProp(name = "fontFamily")

android/src/main/java/com/swmansion/enriched/textinput/MeasurementStore.kt

@@ -5,6 +5,7 @@ import android.graphics.Typeface
 import android.graphics.text.LineBreaker
 import android.os.Build
 import android.text.Spannable
+import android.text.SpannableString
 import android.text.StaticLayout
 import android.text.TextPaint
 import android.util.Log
@@ -16,6 +17,7 @@ import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
 import com.facebook.yoga.YogaMeasureMode
 import com.facebook.yoga.YogaMeasureOutput
 import com.swmansion.enriched.common.parser.EnrichedParser
+import com.swmansion.enriched.textinput.spans.EnrichedLineHeightSpan
 import com.swmansion.enriched.textinput.styles.HtmlStyle
 import java.util.concurrent.ConcurrentHashMap
 import kotlin.math.ceil
@@ -141,16 +143,31 @@ object MeasurementStore {
   ): Long {
     val defaultView = EnrichedTextInputView(context)
 
-    val text = getInitialText(defaultView, props)
+    val rawText = getInitialText(defaultView, props)
     val fontSize = getInitialFontSize(defaultView, props)
+    val lineHeight = props?.getDouble("lineHeight")?.toFloat() ?: 0f
 
     val fontFamily = props?.getString("fontFamily")
     val fontStyle = parseFontStyle(props?.getString("fontStyle"))
     val fontWeight = parseFontWeight(props?.getString("fontWeight"))
 
+    val text: CharSequence =
+      if (lineHeight > 0f) {
+        val spannable = SpannableString(rawText)
+        spannable.setSpan(
+          EnrichedLineHeightSpan(lineHeight),
+          0,
+          spannable.length,
+          Spannable.SPAN_INCLUSIVE_INCLUSIVE,
+        )
+        spannable
+      } else {
+        rawText
+      }
+
     val typeface = applyStyles(defaultView.typeface, fontStyle, fontWeight, fontFamily, context.assets)
     val paintParams = PaintParams(typeface, fontSize)
-    val size = measure(width, text, PaintParams(typeface, fontSize))
+    val size = measure(width, text, paintParams)
 
     if (id != null) {
       data[id] = MeasurementParams(true, width, size, text, paintParams)

android/src/main/java/com/swmansion/enriched/textinput/spans/EnrichedLineHeightSpan.kt

@@ -0,0 +1,44 @@
+package com.swmansion.enriched.textinput.spans
+
+import android.graphics.Paint
+import android.text.Spannable
+import android.text.TextPaint
+import android.text.style.LineHeightSpan
+import android.text.style.MetricAffectingSpan
+import com.facebook.react.uimanager.PixelUtil
+import com.swmansion.enriched.common.spans.interfaces.EnrichedHeadingSpan
+
+class EnrichedLineHeightSpan(
+  val lineHeight: Float,
+) : MetricAffectingSpan(),
+  LineHeightSpan {
+  override fun updateDrawState(p0: TextPaint?) {
+    // Do nothing but inform TextView that line height should be recalculated
+  }
+
+  override fun updateMeasureState(p0: TextPaint) {
+    // Do nothing but inform TextView that line height should be recalculated
+  }
+
+  override fun chooseHeight(
+    text: CharSequence,
+    start: Int,
+    end: Int,
+    spanstartv: Int,
+    v: Int,
+    fm: Paint.FontMetricsInt,
+  ) {
+    val spannable = text as? Spannable ?: return
+    // Do not modify line height for headings
+    // In the future we may consider adding custom lineHeight support for each paragraph style
+    if (spannable.getSpans(start, end, EnrichedHeadingSpan::class.java).isNotEmpty()) return
+
+    val lineHeightPx = PixelUtil.toPixelFromSP(lineHeight)
+    val currentHeight = (fm.descent - fm.ascent).toFloat()
+    if (lineHeightPx <= currentHeight) return
+
+    val extra = (lineHeightPx - currentHeight).toInt()
+    fm.ascent -= extra
+    fm.top = minOf(fm.top, fm.ascent)
+  }
+}

android/src/main/new_arch/react/renderer/components/ReactNativeEnrichedSpec/conversions.h

@@ -22,6 +22,7 @@ inline folly::dynamic toDynamic(const EnrichedTextInputViewProps &props) {
   serializedProps["fontWeight"] = props.fontWeight;
   serializedProps["fontStyle"] = props.fontStyle;
   serializedProps["fontFamily"] = props.fontFamily;
+  serializedProps["lineHeight"] = props.lineHeight;
   serializedProps["htmlStyle"] = toDynamic(props.htmlStyle);
 
   return serializedProps;
@@ -35,6 +36,7 @@ inline folly::dynamic toDynamic(const EnrichedTextInputViewProps &props) {
   serializedProps["fontWeight"] = props.fontWeight;
   serializedProps["fontStyle"] = props.fontStyle;
   serializedProps["fontFamily"] = props.fontFamily;
+  serializedProps["lineHeight"] = props.lineHeight;
   // Ideally we should also serialize htmlStyle, but toDynamic function is not
   // generated in this RN version
   // As RN 0.79 and 0.80 is no longer supported, we can skip it for now

docs/API_REFERENCE.md

@@ -476,6 +476,7 @@ Additionally following [TextStyle](https://reactnative.dev/docs/text#style) prop
 - fontFamily
 - fontSize
 - fontWeight
+- lineHeight
 - fontStyle only on Android
 - lineHeight only on iOS