feat(android): add html support (#52)

* feat(android): add html support

- add Android Nitro module with Kotlin view, Fabric state updater, and JNI bridge

- share component descriptor/state logic so Fabric can hydrate props on Android

- update TypeScript entrypoint, codegen pipeline, and example app for Android support

* feat: add support for `onTextLayout`

* feat: implement fragment background color support in NitroText

* feat(android): html support

Author: patrickkabwe

android/CMakeLists.txt

@@ -25,6 +25,8 @@ include_directories(
 # Add custom ShadowNode implementation
 target_sources(
         ${PACKAGE_NAME} PRIVATE
+        ../cpp/NitroHtmlUtils.cpp
+        ../cpp/NitroHtmlUtils.hpp
         ../cpp/NitroTextShadowNode.cpp
         ../cpp/NitroTextShadowNode.hpp
         ../cpp/NitroTextComponentDescriptor.cpp

android/build.gradle

@@ -137,6 +137,8 @@ dependencies {
   // Add a dependency on NitroModules
   implementation project(":react-native-nitro-modules")
 
+  implementation "org.jsoup:jsoup:1.18.1"
+
 }
 
 if (isNewArchitectureEnabled()) {
@@ -145,4 +147,4 @@ if (isNewArchitectureEnabled()) {
     libraryName = "NitroText"
     codegenJavaPackageName = "com.nitrotext"
   }
-}
+}

android/src/main/java/com/nitrotext/HtmlLinkMovementMethod.kt

@@ -0,0 +1,47 @@
+package com.nitrotext
+
+import android.text.Selection
+import android.text.Spannable
+import android.text.method.MovementMethod
+import android.text.style.ClickableSpan
+import android.view.MotionEvent
+import android.widget.TextView
+
+internal object HtmlLinkMovementMethod : MovementMethod {
+  override fun initialize(widget: TextView?, text: Spannable?) = Unit
+  override fun onKeyDown(widget: TextView?, text: Spannable?, keyCode: Int, event: android.view.KeyEvent?) = false
+  override fun onKeyUp(widget: TextView?, text: Spannable?, keyCode: Int, event: android.view.KeyEvent?) = false
+  override fun onKeyOther(widget: TextView?, text: Spannable?, event: android.view.KeyEvent?) = false
+  override fun onTrackballEvent(widget: TextView?, text: Spannable?, event: MotionEvent?) = false
+  override fun onTakeFocus(widget: TextView?, text: Spannable?, direction: Int) = Unit
+  override fun canSelectArbitrarily() = false
+  override fun onGenericMotionEvent(widget: TextView?, text: Spannable?, event: MotionEvent?) = false
+
+  override fun onTouchEvent(widget: TextView, buffer: Spannable, event: MotionEvent): Boolean {
+    val action = event.action
+    
+    if (action != MotionEvent.ACTION_UP && action != MotionEvent.ACTION_DOWN) {
+      return false
+    }
+
+    val layout = widget.layout ?: return false
+    val x = event.x.toInt() - widget.totalPaddingLeft + widget.scrollX
+    val y = event.y.toInt() - widget.totalPaddingTop + widget.scrollY
+
+    val line = layout.getLineForVertical(y)
+    val offset = layout.getOffsetForHorizontal(line, x.toFloat())
+
+    val links = buffer.getSpans(offset, offset, ClickableSpan::class.java)
+    if (links.isNotEmpty()) {
+      val link = links[0]
+      if (action == MotionEvent.ACTION_UP) {
+        link.onClick(widget)
+      } else {
+        Selection.setSelection(buffer, buffer.getSpanStart(link), buffer.getSpanEnd(link))
+      }
+      return true
+    }
+    
+    return false
+  }
+}

android/src/main/java/com/nitrotext/HybridNitroText.kt

@@ -22,6 +22,18 @@ class HybridNitroText(val context: ThemedReactContext) : HybridNitroTextSpec(),
       impl.setFragments(value)
     }
 
+  override var renderer: NitroRenderer?
+    get() = null
+    set(value) {
+      impl.setRenderer(value)
+    }
+
+  override var richTextStyleRules: Array<RichTextStyleRule>?
+    get() = null
+    set(value) {
+      impl.setRichTextStyleRules(value)
+    }
+
   override var selectable: Boolean?
     get() = null
     set(value) {

android/src/main/java/com/nitrotext/NitroTextImpl.kt

@@ -7,21 +7,28 @@ import android.text.SpannableStringBuilder
 import android.text.TextUtils
 import android.text.style.AbsoluteSizeSpan
 import android.text.style.BackgroundColorSpan
+import android.text.style.ClickableSpan
 import android.text.style.ForegroundColorSpan
 import android.text.style.StrikethroughSpan
 import android.text.style.StyleSpan
 import android.text.style.TypefaceSpan
 import android.text.style.UnderlineSpan
 import android.view.Gravity
+import android.text.method.ArrowKeyMovementMethod
+import android.text.method.LinkMovementMethod
 import androidx.appcompat.widget.AppCompatTextView
 import com.facebook.react.uimanager.PixelUtil
 import com.margelo.nitro.nitrotext.*
 import androidx.core.graphics.toColorInt
+import com.nitrotext.renderers.NitroHtmlRenderer
+import com.nitrotext.spans.NitroLineHeightSpan
 
 class NitroTextImpl(private val view: AppCompatTextView) {
   // Stored props
   private var fragments: Array<Fragment>? = null
   private var text: String? = null
+  private var renderer: NitroRenderer = NitroRenderer.PLAINTEXT
+  private var richTextStyleRules: Array<RichTextStyleRule>? = null
 
   private var selectable: Boolean? = null
   private var selectionColor: String? = null
@@ -56,7 +63,11 @@ class NitroTextImpl(private val view: AppCompatTextView) {
     applyAlignment()
 
     val frags = fragments
-    if (!frags.isNullOrEmpty()) {
+    val content = text
+    
+    if (renderer == NitroRenderer.HTML && !content.isNullOrEmpty()) {
+      applyHtml(content)
+    } else if (!frags.isNullOrEmpty()) {
       applyFragments(frags)
     } else {
       applySimpleText()
@@ -68,6 +79,8 @@ class NitroTextImpl(private val view: AppCompatTextView) {
   // Setters
   fun setFragments(value: Array<Fragment>?) { fragments = value }
   fun setText(value: String?) { text = value }
+  fun setRenderer(value: NitroRenderer?) { renderer = value ?: NitroRenderer.PLAINTEXT }
+  fun setRichTextStyleRules(value: Array<RichTextStyleRule>?) { richTextStyleRules = value }
 
   fun setSelectable(value: Boolean?) { selectable = value }
   fun setSelectionColor(value: String?) { selectionColor = value }
@@ -212,7 +225,7 @@ class NitroTextImpl(private val view: AppCompatTextView) {
     }
     containerLineHeightPx?.let { applyLineHeightSpan(builder, 0, builder.length, it) }
     view.text = builder
-
+    
     // Apply default text color for runs without explicit color
     view.setTextColor(resolvedFontColor())
   }
@@ -265,6 +278,59 @@ class NitroTextImpl(private val view: AppCompatTextView) {
     return parsed ?: Color.BLACK
   }
 
+  private fun baseRichTextStyle(): RichTextStyle {
+    return RichTextStyle(
+      fontColor = fontColor,
+      fragmentBackgroundColor = fragmentBackgroundColor,
+      fontSize = fontSize,
+      fontWeight = fontWeight,
+      fontStyle = fontStyle,
+      fontFamily = fontFamily,
+      lineHeight = lineHeight,
+      letterSpacing = letterSpacing,
+      textAlign = textAlign,
+      textTransform = textTransform,
+      textDecorationLine = textDecorationLine,
+      textDecorationColor = textDecorationColor,
+      textDecorationStyle = textDecorationStyle,
+      marginTop = null,
+      marginBottom = null,
+      marginLeft = null,
+      marginRight = null,
+    )
+  }
+
+  private fun applyHtml(html: String) {
+    val renderer = NitroHtmlRenderer(
+      context = view.context,
+      defaultTextSizePx = view.textSize,
+      allowFontScaling = allowFontScaling,
+      maxFontSizeMultiplier = maxFontSizeMultiplier,
+    )
+    val spannable = renderer.render(html, baseRichTextStyle(), richTextStyleRules)
+    trimTrailingNewlines(spannable)
+    view.text = spannable
+    val hasLinks = spannable.getSpans(0, spannable.length, ClickableSpan::class.java).isNotEmpty()
+    view.linksClickable = hasLinks
+    val isSelectable = selectable == true
+    view.movementMethod = when {
+      hasLinks && isSelectable -> LinkMovementMethod.getInstance()
+      hasLinks -> HtmlLinkMovementMethod
+      isSelectable -> ArrowKeyMovementMethod.getInstance()
+      else -> null
+    }
+    view.setTextIsSelectable(isSelectable)
+    view.setTextColor(resolvedFontColor())
+  }
+
+  private fun trimTrailingNewlines(builder: SpannableStringBuilder) {
+    var length = builder.length
+    while (length > 0 && builder[length - 1] == '\n') {
+      builder.delete(length - 1, length)
+      length = builder.length
+    }
+  }
+
   private fun resolveLineHeight(value: Double?): Float? {
     val raw = value ?: return null
     val px = if (allowFontScaling) {
@@ -294,8 +360,4 @@ class NitroTextImpl(private val view: AppCompatTextView) {
     }
     builder.setSpan(NitroLineHeightSpan(lineHeightPx), start, end, flags)
   }
-
-  companion object {
-    private const val TAG = "NitroTextImpl"
-  }
 }