react-native-enriched-html 0.0.0 → 1.0.0

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

@@ -0,0 +1,361 @@
+package com.swmansion.enriched.text
+
+import android.content.ClipData
+import android.content.ClipboardManager
+import android.content.Context
+import android.graphics.Color
+import android.graphics.text.LineBreaker
+import android.os.Build
+import android.text.Spannable
+import android.text.SpannableString
+import android.text.Spanned
+import android.text.TextUtils
+import android.util.AttributeSet
+import android.util.Log
+import android.util.TypedValue
+import android.view.MotionEvent
+import androidx.appcompat.widget.AppCompatTextView
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.common.ReactConstants
+import com.facebook.react.uimanager.ViewDefaults
+import com.facebook.react.views.text.ReactTypefaceUtils.applyStyles
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontStyle
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
+import com.swmansion.enriched.common.EnrichedConstants
+import com.swmansion.enriched.common.GumboNormalizer
+import com.swmansion.enriched.common.parser.EnrichedParser
+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 kotlin.math.ceil
+
+class EnrichedTextView : AppCompatTextView {
+  private var valueDirty = false
+  private var value: String? = null
+  private var typefaceDirty = false
+  private var fontFamily: String? = null
+  private var fontStyle: Int = ReactConstants.UNSET
+  private var fontWeight: Int = ReactConstants.UNSET
+  private var fontSize: Float = EnrichedConstants.TEXT_DEFAULT_FONT_SIZE
+  private var fontSizeRaw: 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) }
+    }
+
+  private var enrichedStyle: EnrichedTextStyle? = null
+  private val spannableFactory = EnrichedTextSpanFactory()
+
+  // We keep the parsedText around so that when an async image finishes loading we can re-call
+  // setText with the same instance and force the TextView to rebuild its layout.
+  private var parsedText: CharSequence? = null
+
+  var useHtmlNormalizer = false
+
+  constructor(context: Context) : super(context) {
+    prepareComponent()
+  }
+
+  constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
+    prepareComponent()
+  }
+
+  constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(
+    context,
+    attrs,
+    defStyleAttr,
+  ) {
+    prepareComponent()
+  }
+
+  private fun prepareComponent() {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+      breakStrategy = LineBreaker.BREAK_STRATEGY_HIGH_QUALITY
+    }
+
+    setPadding(0, 0, 0, 0)
+    setFontSize(EnrichedConstants.TEXT_DEFAULT_FONT_SIZE)
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    val spanned = text as? Spanned
+    val action = event.action
+
+    if (spanned == null || layout == null) {
+      return super.onTouchEvent(event)
+    }
+
+    if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_DOWN || action == MotionEvent.ACTION_CANCEL) {
+      val x = (event.x - totalPaddingLeft + scrollX).toInt()
+      val y = (event.y - totalPaddingTop + scrollY).toInt()
+
+      val line = layout.getLineForVertical(y)
+      val off = layout.getOffsetForHorizontal(line, x.toFloat())
+
+      val inLineBounds = x >= layout.getLineLeft(line) && x <= layout.getLineRight(line)
+      val links =
+        if (inLineBounds) {
+          spanned.getSpans(off, off, EnrichedTextClickableSpan::class.java)
+        } else {
+          emptyArray()
+        }
+
+      if (links.isNotEmpty()) {
+        val link = links[0]
+
+        when (action) {
+          MotionEvent.ACTION_DOWN -> {
+            link.isPressed = true
+          }
+
+          MotionEvent.ACTION_UP -> {
+            link.onClick(this)
+            link.isPressed = false
+            performClick()
+          }
+
+          MotionEvent.ACTION_CANCEL -> {
+            link.isPressed = false
+          }
+        }
+
+        invalidate()
+        return true
+      } else {
+        val allSpans = spanned.getSpans(0, spanned.length, EnrichedTextClickableSpan::class.java)
+        allSpans.forEach { it.isPressed = false }
+        invalidate()
+      }
+    }
+
+    return super.onTouchEvent(event)
+  }
+
+  // Required for accessibility when overriding onTouchEvent.
+  override fun performClick(): Boolean {
+    super.performClick()
+    return true
+  }
+
+  override fun onTextContextMenuItem(id: Int): Boolean {
+    when (id) {
+      android.R.id.copy -> {
+        handleCustomCopy()
+        return true
+      }
+    }
+    return super.onTextContextMenuItem(id)
+  }
+
+  private fun handleCustomCopy() {
+    val start = selectionStart
+    val end = selectionEnd
+    val spannable = text as Spannable
+
+    if (start < end) {
+      val selectedText = spannable.subSequence(start, end) as Spannable
+      val selectedHtml = EnrichedParser.toHtml(selectedText)
+
+      val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
+      val clip = ClipData.newHtmlText(EnrichedConstants.CLIPBOARD_TAG, selectedText, selectedHtml)
+      clipboard.setPrimaryClip(clip)
+    }
+  }
+
+  private fun updateValue() {
+    val text = value ?: return
+    val style = enrichedStyle ?: return
+    if (!valueDirty) return
+
+    valueDirty = false
+
+    val parsed = parseText(text, style)
+    if (parsed != null) {
+      parsedText = parsed
+      setText(parsed, BufferType.NORMAL)
+      observeAsyncImages()
+    } else {
+      parsedText = null
+      this.text = text
+    }
+  }
+
+  private fun parseText(
+    text: String,
+    style: EnrichedTextStyle,
+  ): CharSequence? {
+    val isInternalHtml = text.startsWith("<html>") && text.endsWith("</html>")
+
+    if (isInternalHtml) {
+      try {
+        val parsed = EnrichedParser.fromHtml(text, style, spannableFactory)
+        return parsed.trimEnd('\n')
+      } catch (e: Exception) {
+        Log.e(TAG, "Error parsing HTML: ${e.message}")
+        return normalizeHtmlIfNeeded(text, style)
+      }
+    }
+
+    return normalizeHtmlIfNeeded(text, style)
+  }
+
+  private fun normalizeHtmlIfNeeded(
+    text: String,
+    style: EnrichedTextStyle,
+  ): CharSequence? {
+    if (!useHtmlNormalizer) return null
+    return parseNormalizedHtml(text, style)
+  }
+
+  private fun parseNormalizedHtml(
+    text: String,
+    style: EnrichedTextStyle,
+  ): CharSequence? {
+    val normalized = GumboNormalizer.normalizeHtml(text) ?: return null
+
+    return try {
+      val parsed: Spanned = EnrichedParser.fromHtml(normalized, style, spannableFactory)
+      parsed.trimEnd('\n')
+    } catch (e: Exception) {
+      Log.e(TAG, "Error parsing normalized HTML: ${e.message}")
+      null
+    }
+  }
+
+  private fun observeAsyncImages() {
+    val spanned = parsedText as? Spanned ?: return
+    val spans = spanned.getSpans(0, spanned.length, EnrichedTextImageSpan::class.java)
+    for (span in spans) {
+      span.observeAsyncDrawableLoaded {
+        // Rebuild the TextView layout with the newly loaded drawable bounds.
+        parsedText?.let { setText(it, BufferType.NORMAL) }
+      }
+    }
+  }
+
+  private fun updateTypeface() {
+    if (!typefaceDirty) return
+    typefaceDirty = false
+
+    val newTypeface = applyStyles(typeface, fontStyle, fontWeight, fontFamily, context.assets)
+    typeface = newTypeface
+    paint.typeface = newTypeface
+  }
+
+  fun setValue(text: String?) {
+    value = text
+    valueDirty = true
+  }
+
+  fun setHtmlStyle(style: ReadableMap?) {
+    if (style == null) return
+
+    htmlStyleMap = style
+    val enrichedStyle =
+      EnrichedTextStyle.fromReadableMap(context as ReactContext, fontSize.toInt(), style, allowFontScaling)
+    this.enrichedStyle = enrichedStyle
+
+    val currentText = text ?: return
+    if (currentText.isEmpty()) return
+
+    val spannable = SpannableString(currentText)
+    val spans = spannable.getSpans(0, spannable.length, EnrichedTextSpan::class.java)
+    var modified = false
+
+    for (span in spans) {
+      val start = spannable.getSpanStart(span)
+      val end = spannable.getSpanEnd(span)
+      val flags = spannable.getSpanFlags(span)
+
+      if (start == -1 || end == -1) continue
+
+      spannable.removeSpan(span)
+      val newSpan = span.rebuildWithStyle(enrichedStyle)
+      spannable.setSpan(newSpan, start, end, flags)
+      modified = true
+    }
+
+    if (modified) {
+      this.text = spannable
+    }
+  }
+
+  fun setColor(colorInt: Int?) {
+    if (colorInt == null) {
+      setTextColor(Color.BLACK)
+      return
+    }
+
+    setTextColor(colorInt)
+  }
+
+  fun setFontSize(size: Float) {
+    if (size == 0f) return
+
+    fontSizeRaw = size
+    val sizeInt = ceil(pixelFromSpOrDp(size, allowFontScaling))
+    fontSize = sizeInt
+    setTextSize(TypedValue.COMPLEX_UNIT_PX, sizeInt)
+  }
+
+  fun setFontFamily(family: String?) {
+    if (family != fontFamily) {
+      fontFamily = family
+      typefaceDirty = true
+    }
+  }
+
+  fun setFontWeight(weight: String?) {
+    val fontWeight = parseFontWeight(weight)
+
+    if (fontWeight != this.fontWeight) {
+      this.fontWeight = fontWeight
+      typefaceDirty = true
+    }
+  }
+
+  fun setFontStyle(style: String?) {
+    val fontStyle = parseFontStyle(style)
+
+    if (fontStyle != this.fontStyle) {
+      this.fontStyle = fontStyle
+      typefaceDirty = true
+    }
+  }
+
+  fun setSelectionColor(colorInt: Int?) {
+    if (colorInt == null) return
+
+    highlightColor = colorInt
+  }
+
+  fun setEllipsizeMode(mode: String?) {
+    ellipsize =
+      when (mode) {
+        "tail" -> TextUtils.TruncateAt.END
+        "head" -> TextUtils.TruncateAt.START
+        "middle" -> TextUtils.TruncateAt.MIDDLE
+        "clip" -> null
+        else -> TextUtils.TruncateAt.END
+      }
+  }
+
+  fun setNumberOfLines(lines: Int) {
+    maxLines = if (lines == 0) ViewDefaults.NUMBER_OF_LINES else lines
+  }
+
+  fun afterUpdateTransaction() {
+    updateTypeface()
+    updateValue()
+  }
+
+  companion object {
+    private const val TAG = "EnrichedTextView"
+  }
+}

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

@@ -0,0 +1,157 @@
+package com.swmansion.enriched.text
+
+import android.content.Context
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.EnrichedTextViewManagerDelegate
+import com.facebook.react.viewmanagers.EnrichedTextViewManagerInterface
+import com.facebook.yoga.YogaMeasureMode
+import com.swmansion.enriched.text.events.OnLinkPressEvent
+import com.swmansion.enriched.text.events.OnMentionPressEvent
+
+@ReactModule(name = EnrichedTextViewManager.NAME)
+class EnrichedTextViewManager :
+  SimpleViewManager<EnrichedTextView>(),
+  EnrichedTextViewManagerInterface<EnrichedTextView> {
+  private val mDelegate: ViewManagerDelegate<EnrichedTextView> =
+    EnrichedTextViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<EnrichedTextView>? = mDelegate
+
+  override fun getName(): String = NAME
+
+  public override fun createViewInstance(context: ThemedReactContext): EnrichedTextView = EnrichedTextView(context)
+
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
+    val map = mutableMapOf<String, Any>()
+    map.put(OnLinkPressEvent.EVENT_NAME, mapOf("registrationName" to OnLinkPressEvent.EVENT_NAME))
+    map.put(OnMentionPressEvent.EVENT_NAME, mapOf("registrationName" to OnMentionPressEvent.EVENT_NAME))
+    return map
+  }
+
+  override fun setText(
+    view: EnrichedTextView?,
+    value: String?,
+  ) {
+    view?.setValue(value)
+  }
+
+  override fun setColor(
+    view: EnrichedTextView?,
+    value: Int?,
+  ) {
+    view?.setColor(value)
+  }
+
+  override fun setFontSize(
+    view: EnrichedTextView?,
+    value: Float,
+  ) {
+    view?.setFontSize(value)
+  }
+
+  override fun setFontFamily(
+    view: EnrichedTextView?,
+    value: String?,
+  ) {
+    view?.setFontFamily(value)
+  }
+
+  override fun setFontWeight(
+    view: EnrichedTextView?,
+    value: String?,
+  ) {
+    view?.setFontWeight(value)
+  }
+
+  override fun setFontStyle(
+    view: EnrichedTextView?,
+    value: String?,
+  ) {
+    view?.setFontStyle(value)
+  }
+
+  override fun setPadding(
+    view: EnrichedTextView?,
+    left: Int,
+    top: Int,
+    right: Int,
+    bottom: Int,
+  ) {
+    super.setPadding(view, left, top, right, bottom)
+
+    view?.setPadding(left, top, right, bottom)
+  }
+
+  override fun setSelectionColor(
+    view: EnrichedTextView?,
+    value: Int?,
+  ) {
+    view?.setSelectionColor(value)
+  }
+
+  override fun setSelectable(
+    view: EnrichedTextView?,
+    value: Boolean,
+  ) {
+    view?.setTextIsSelectable(value)
+  }
+
+  override fun setEllipsizeMode(
+    view: EnrichedTextView?,
+    value: String?,
+  ) {
+    view?.setEllipsizeMode(value)
+  }
+
+  override fun setNumberOfLines(
+    view: EnrichedTextView?,
+    value: Int,
+  ) {
+    view?.setNumberOfLines(value)
+  }
+
+  override fun setHtmlStyle(
+    view: EnrichedTextView?,
+    value: ReadableMap?,
+  ) {
+    view?.setHtmlStyle(value)
+  }
+
+  override fun setAllowFontScaling(
+    view: EnrichedTextView?,
+    value: Boolean,
+  ) {
+    view?.allowFontScaling = value
+  }
+
+  override fun setUseHtmlNormalizer(
+    view: EnrichedTextView?,
+    value: Boolean,
+  ) {
+    view?.useHtmlNormalizer = value
+  }
+
+  override fun onAfterUpdateTransaction(view: EnrichedTextView) {
+    view.afterUpdateTransaction()
+  }
+
+  override fun measure(
+    context: Context,
+    localData: ReadableMap?,
+    props: ReadableMap?,
+    state: ReadableMap?,
+    width: Float,
+    widthMode: YogaMeasureMode?,
+    height: Float,
+    heightMode: YogaMeasureMode?,
+    attachmentsPositions: FloatArray?,
+  ): Long = MeasurementStore.getMeasureById(context, width, height, heightMode, props)
+
+  companion object {
+    const val NAME = "EnrichedTextView"
+  }
+}

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

@@ -0,0 +1,170 @@
+package com.swmansion.enriched.text
+
+import android.content.Context
+import android.graphics.Typeface
+import android.graphics.text.LineBreaker
+import android.os.Build
+import android.text.StaticLayout
+import android.text.TextPaint
+import android.text.TextUtils
+import android.util.Log
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.views.text.ReactTypefaceUtils.applyStyles
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontStyle
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
+import com.facebook.yoga.YogaMeasureMode
+import com.facebook.yoga.YogaMeasureOutput
+import com.swmansion.enriched.common.EnrichedConstants
+import com.swmansion.enriched.common.allowFontScalingFromProps
+import com.swmansion.enriched.common.parser.EnrichedParser
+import com.swmansion.enriched.common.pixelFromSpOrDp
+import kotlin.math.ceil
+
+object MeasurementStore {
+  private fun measure(
+    maxWidth: Float,
+    spannable: CharSequence?,
+    typeface: Typeface,
+    fontSize: Float,
+    numberOfLines: Int,
+    ellipsizeMode: String?,
+  ): Long {
+    val text = spannable ?: ""
+    val textLength = text.length
+    val paint =
+      TextPaint().apply {
+        this.typeface = typeface
+        textSize = fontSize
+      }
+
+    val builder =
+      StaticLayout.Builder
+        .obtain(text, 0, textLength, paint, maxWidth.toInt())
+        .setIncludePad(true)
+        .setLineSpacing(0f, 1f)
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+      builder.setBreakStrategy(LineBreaker.BREAK_STRATEGY_HIGH_QUALITY)
+    }
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+      builder.setUseLineSpacingFromFallbacks(true)
+    }
+
+    if (numberOfLines > 0) {
+      val ellipsize =
+        when (ellipsizeMode) {
+          "head" -> TextUtils.TruncateAt.START
+          "middle" -> TextUtils.TruncateAt.MIDDLE
+          "tail" -> TextUtils.TruncateAt.END
+          "clip" -> null
+          else -> null
+        }
+
+      builder.setMaxLines(numberOfLines).setEllipsize(ellipsize)
+    }
+
+    val staticLayout = builder.build()
+
+    // Workaround for Android issue where maxLines >= 2 and ellipsize != TruncateAt.END
+    // In such scenario, StaticLayout always returns lineCount = maxLines even if text fits in less lines
+    val actualLineCount =
+      if (numberOfLines > 0) {
+        staticLayout.lineCount.coerceAtMost(numberOfLines)
+      } else {
+        staticLayout.lineCount
+      }
+
+    // For one line text, use exact line width
+    // For multi line, use all available width
+    val finalWidth =
+      if (staticLayout.lineCount <= 1) {
+        staticLayout.getLineWidth(0)
+      } else {
+        staticLayout.width.toFloat()
+      }
+
+    val finalHeight =
+      if (actualLineCount > 0) {
+        staticLayout.getLineBottom(actualLineCount - 1).toFloat()
+      } else {
+        0f
+      }
+
+    val heightInSP = PixelUtil.toDIPFromPixel(finalHeight)
+    val widthInSP = PixelUtil.toDIPFromPixel(finalWidth)
+    return YogaMeasureOutput.make(widthInSP, heightInSP)
+  }
+
+  private fun getInitialText(
+    context: Context,
+    fontSize: Int,
+    props: ReadableMap?,
+  ): CharSequence {
+    val text = props?.getString("text") ?: ""
+
+    val isHtml = text.startsWith("<html>") && text.endsWith("</html>")
+    if (!isHtml) return text
+
+    try {
+      val style = props?.getMap("htmlStyle") ?: return text
+      val allowFontScaling = allowFontScalingFromProps(props)
+      val enrichedStyle =
+        EnrichedTextStyle.fromReadableMap(context as ReactContext, fontSize, style, allowFontScaling)
+      val factory = EnrichedTextSpanFactory()
+      val parsed = EnrichedParser.fromHtml(text, enrichedStyle, factory)
+      return parsed.trimEnd('\n')
+    } catch (e: Exception) {
+      Log.w("MeasurementStore", "Error parsing initial HTML text: ${e.message}")
+      return text
+    }
+  }
+
+  private fun getInitialFontSize(props: ReadableMap?): Float {
+    val propsFontSize = props?.getDouble("fontSize")?.toFloat() ?: EnrichedConstants.TEXT_DEFAULT_FONT_SIZE
+    val fontSize =
+      when {
+        propsFontSize > 0f -> propsFontSize
+        else -> EnrichedConstants.TEXT_DEFAULT_FONT_SIZE
+      }
+
+    return ceil(pixelFromSpOrDp(fontSize, allowFontScalingFromProps(props)))
+  }
+
+  private fun getMeasureById(
+    context: Context,
+    width: Float,
+    props: ReadableMap?,
+  ): Long {
+    val fontSize = getInitialFontSize(props)
+    val text = getInitialText(context, fontSize.toInt(), props)
+
+    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)
+
+    return size
+  }
+
+  fun getMeasureById(
+    context: Context,
+    width: Float,
+    height: Float,
+    heightMode: YogaMeasureMode?,
+    props: ReadableMap?,
+  ): Long {
+    val size = getMeasureById(context, width, props)
+    if (heightMode !== YogaMeasureMode.AT_MOST) return size
+
+    val calculatedHeight = YogaMeasureOutput.getHeight(size)
+    val atMostHeight = PixelUtil.toDIPFromPixel(height)
+    val finalHeight = calculatedHeight.coerceAtMost(atMostHeight)
+    return YogaMeasureOutput.make(YogaMeasureOutput.getWidth(size), finalHeight)
+  }
+}

package/android/src/main/java/com/swmansion/enriched/text/events/OnLinkPressEvent.kt

@@ -0,0 +1,23 @@
+package com.swmansion.enriched.text.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class OnLinkPressEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val url: String,
+) : Event<OnLinkPressEvent>(surfaceId, viewId) {
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun getEventData(): WritableMap? {
+    val eventData: WritableMap = Arguments.createMap()
+    eventData.putString("url", url)
+    return eventData
+  }
+
+  companion object {
+    const val EVENT_NAME: String = "onLinkPress"
+  }
+}