feat(android): enriched text lineHeight

Author: kacperzolkiewski

android/src/main/java/com/swmansion/enriched/text/EnrichedTextView.kt

@@ -30,6 +30,7 @@ import com.swmansion.enriched.common.pixelFromSpOrDp
 import com.swmansion.enriched.text.spans.EnrichedTextImageSpan
 import com.swmansion.enriched.text.spans.interfaces.EnrichedTextClickableSpan
 import com.swmansion.enriched.text.spans.interfaces.EnrichedTextSpan
+import com.swmansion.enriched.textinput.spans.EnrichedLineHeightSpan
 import kotlin.math.ceil
 
 class EnrichedTextView : AppCompatTextView {
@@ -41,13 +42,15 @@ class EnrichedTextView : AppCompatTextView {
   private var fontWeight: Int = ReactConstants.UNSET
   private var fontSize: Float = EnrichedConstants.TEXT_DEFAULT_FONT_SIZE
   private var fontSizeRaw: Float? = null
+  private var lineHeight: Float? = null
   private var htmlStyleMap: ReadableMap? = null
   var allowFontScaling: Boolean = EnrichedConstants.ALLOW_FONT_SCALING_DEFAULT
     set(value) {
       if (field == value) return
       field = value
       fontSizeRaw?.let { setFontSize(it) }
       htmlStyleMap?.let { setHtmlStyle(it) }
+      applyLineSpacing()
     }
 
   private var enrichedStyle: EnrichedTextStyle? = null
@@ -185,6 +188,7 @@ class EnrichedTextView : AppCompatTextView {
       parsedText = null
       this.text = text
     }
+    applyLineSpacing()
   }
 
   private fun parseText(
@@ -305,6 +309,33 @@ class EnrichedTextView : AppCompatTextView {
     setTextSize(TypedValue.COMPLEX_UNIT_PX, sizeInt)
   }
 
+  fun setLineHeight(height: Float) {
+    lineHeight = if (height == 0f) null else height
+    applyLineSpacing()
+  }
+
+  private fun applyLineSpacing() {
+    val currentText = text ?: return
+    val spannable =
+      currentText as? Spannable ?: SpannableString(currentText)
+    spannable
+      .getSpans(0, spannable.length, EnrichedLineHeightSpan::class.java)
+      .forEach { spannable.removeSpan(it) }
+
+    lineHeight?.let {
+      spannable.setSpan(
+        EnrichedLineHeightSpan(it, allowFontScaling),
+        0,
+        spannable.length,
+        Spannable.SPAN_INCLUSIVE_INCLUSIVE,
+      )
+    }
+
+    if (spannable !== currentText) {
+      setText(spannable, BufferType.SPANNABLE)
+    }
+  }
+
   fun setFontFamily(family: String?) {
     if (family != fontFamily) {
       fontFamily = family

android/src/main/java/com/swmansion/enriched/text/EnrichedTextViewManager.kt

@@ -53,6 +53,13 @@ class EnrichedTextViewManager :
     view?.setFontSize(value)
   }
 
+  override fun setLineHeight(
+    view: EnrichedTextView?,
+    value: Float,
+  ) {
+    view?.setLineHeight(value)
+  }
+
   override fun setFontFamily(
     view: EnrichedTextView?,
     value: String?,

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

@@ -4,6 +4,8 @@ import android.content.Context
 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.text.TextUtils
@@ -21,6 +23,7 @@ import com.swmansion.enriched.common.GumboNormalizer
 import com.swmansion.enriched.common.allowFontScalingFromProps
 import com.swmansion.enriched.common.parser.EnrichedParser
 import com.swmansion.enriched.common.pixelFromSpOrDp
+import com.swmansion.enriched.textinput.spans.EnrichedLineHeightSpan
 import kotlin.math.ceil
 
 object MeasurementStore {
@@ -134,6 +137,13 @@ object MeasurementStore {
     return props.getBoolean("useHtmlNormalizer")
   }
 
+  private fun lineHeightFromProps(props: ReadableMap?): Float {
+    if (props == null || !props.hasKey("lineHeight") || props.isNull("lineHeight")) {
+      return 0f
+    }
+    return props.getDouble("lineHeight").toFloat()
+  }
+
   private fun getInitialFontSize(props: ReadableMap?): Float {
     val propsFontSize = props?.getDouble("fontSize")?.toFloat() ?: EnrichedConstants.TEXT_DEFAULT_FONT_SIZE
     val fontSize =
@@ -151,15 +161,31 @@ object MeasurementStore {
     props: ReadableMap?,
   ): Long {
     val fontSize = getInitialFontSize(props)
-    val text = getInitialText(context, fontSize.toInt(), props)
+    val rawText = getInitialText(context, fontSize.toInt(), props)
+    val lineHeight = lineHeightFromProps(props)
+    val allowFontScaling = allowFontScalingFromProps(props)
+
+    val measuredText: CharSequence =
+      if (lineHeight > 0f) {
+        val spannable = SpannableString(rawText)
+        spannable.setSpan(
+          EnrichedLineHeightSpan(lineHeight, allowFontScaling),
+          0,
+          spannable.length,
+          Spannable.SPAN_INCLUSIVE_INCLUSIVE,
+        )
+        spannable
+      } else {
+        rawText
+      }
 
     val fontFamily = props?.getString("fontFamily")
     val numberOfLines = props?.getInt("numberOfLines") ?: 0
     val ellipsizeMode = props?.getString("ellipsizeMode")
     val fontStyle = parseFontStyle(props?.getString("fontStyle"))
     val fontWeight = parseFontWeight(props?.getString("fontWeight"))
     val typeface = applyStyles(null, fontStyle, fontWeight, fontFamily, context.assets)
-    val size = measure(width, text, typeface, fontSize, numberOfLines, ellipsizeMode)
+    val size = measure(width, measuredText, typeface, fontSize, numberOfLines, ellipsizeMode)
 
     return size
   }

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

@@ -29,11 +29,6 @@ class EnrichedLineHeightSpan(
     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 = pixelFromSpOrDp(lineHeight, allowFontScaling)
     val currentHeight = (fm.descent - fm.ascent).toFloat()
     if (lineHeightPx <= currentHeight) return

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

@@ -34,6 +34,7 @@ inline folly::dynamic toDynamic(const EnrichedTextViewProps &props) {
   serializedProps["fontWeight"] = props.fontWeight;
   serializedProps["fontStyle"] = props.fontStyle;
   serializedProps["fontFamily"] = props.fontFamily;
+  serializedProps["lineHeight"] = props.lineHeight;
   serializedProps["numberOfLines"] = props.numberOfLines;
   serializedProps["ellipsizeMode"] = props.ellipsizeMode;
   serializedProps["allowFontScaling"] = props.allowFontScaling;