react-native-enriched-markdown 0.1.0 → 0.2.0

package/android/src/main/java/com/swmansion/enriched/markdown/spans/ImageSpan.kt

@@ -0,0 +1,321 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.content.Context
+import android.content.res.Resources
+import android.graphics.BitmapFactory
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.drawable.Drawable
+import android.os.Build
+import android.text.Spannable
+import android.util.Log
+import androidx.core.graphics.drawable.toDrawable
+import androidx.core.graphics.withSave
+import com.swmansion.enriched.markdown.EnrichedMarkdownText
+import com.swmansion.enriched.markdown.styles.StyleConfig
+import com.swmansion.enriched.markdown.utils.AsyncDrawable
+import java.lang.ref.WeakReference
+import android.text.style.ImageSpan as AndroidImageSpan
+import android.text.style.LineHeightSpan as AndroidLineHeightSpan
+
+/**
+ * Custom ImageSpan for rendering markdown images.
+ * Handles both inline and block images with async loading support.
+ */
+class ImageSpan(
+  context: Context,
+  val imageUrl: String,
+  styleConfig: StyleConfig,
+  val isInline: Boolean = false,
+  val altText: String = "",
+) : AndroidImageSpan(
+    createInitialDrawable(styleConfig, imageUrl, isInline),
+    imageUrl,
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) ALIGN_CENTER else ALIGN_BASELINE,
+  ),
+  AndroidLineHeightSpan {
+  private var loadedDrawable: Drawable? = null
+  private val imageStyle = styleConfig.imageStyle
+  private val height: Int = if (isInline) calculateInlineImageSize(styleConfig) else imageStyle.height.toInt()
+  private val borderRadiusPx: Int = (imageStyle.borderRadius * context.resources.displayMetrics.density).toInt()
+
+  private var cachedWidth: Int = MINIMUM_VALID_DIMENSION
+  private val initialDrawable: Drawable = super.getDrawable()
+  private var viewRef: WeakReference<EnrichedMarkdownText>? = null
+
+  init {
+    setupLoadingLogic()
+  }
+
+  private fun setupLoadingLogic() {
+    val d = initialDrawable
+    if (d is AsyncDrawable) {
+      // Set up the callback immediately. If already loaded, it triggers next frame.
+      d.onLoaded = { handleImageLoaded(d) }
+      if (d.isLoaded) handleImageLoaded(d)
+    } else if (d.intrinsicWidth > 0) {
+      // Local file or resource
+      wrapAndAssignDrawable(d)
+    }
+  }
+
+  private fun handleImageLoaded(asyncDrawable: AsyncDrawable) {
+    val rawDrawable = asyncDrawable.internalDrawable
+    wrapAndAssignDrawable(rawDrawable)
+  }
+
+  private fun wrapAndAssignDrawable(base: Drawable) {
+    val view = viewRef?.get()
+    val targetWidth =
+      if (isInline) {
+        height
+      } else {
+        val available = view?.let { getAvailableWidth(it) } ?: cachedWidth
+        available.coerceAtLeast(MINIMUM_VALID_DIMENSION)
+      }
+
+    loadedDrawable =
+      ScaledImageDrawable(
+        imageDrawable = base,
+        targetWidth = targetWidth,
+        targetHeight = height,
+        borderRadius = borderRadiusPx,
+        isBlockImage = !isInline,
+      )
+    requestReflow()
+  }
+
+  private fun requestReflow() {
+    val view = viewRef?.get() ?: return
+    val text = view.text
+    if (text is Spannable) {
+      val start = text.getSpanStart(this)
+      val end = text.getSpanEnd(this)
+      if (start != -1 && end != -1) {
+        // Notifying the spannable that the span changed triggers a re-layout
+        text.setSpan(this, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+      }
+    } else {
+      view.invalidate()
+      view.requestLayout()
+    }
+  }
+
+  fun registerTextView(view: EnrichedMarkdownText) {
+    viewRef = WeakReference(view)
+    if (!isInline) {
+      val availableWidth = getAvailableWidth(view)
+      if (availableWidth > MINIMUM_VALID_DIMENSION) {
+        updateWidthAndRecreate(availableWidth)
+      }
+      // Ensure we catch the width after the first layout pass
+      view.post {
+        val postWidth = getAvailableWidth(view)
+        if (postWidth != cachedWidth) updateWidthAndRecreate(postWidth)
+      }
+    }
+  }
+
+  private fun updateWidthAndRecreate(newWidth: Int) {
+    if (newWidth <= MINIMUM_VALID_DIMENSION || cachedWidth == newWidth) return
+    cachedWidth = newWidth
+
+    // If we already have a loaded source, recreate the scaled wrapper with new width
+    val base = (initialDrawable as? AsyncDrawable)?.internalDrawable ?: initialDrawable
+    if (base.intrinsicWidth > 0) {
+      wrapAndAssignDrawable(base)
+    }
+  }
+
+  private fun getAvailableWidth(view: EnrichedMarkdownText): Int = view.layout?.width ?: view.width
+
+  override fun getDrawable(): Drawable {
+    val drawable = loadedDrawable ?: initialDrawable
+    if (drawable !is ScaledImageDrawable) {
+      val dWidth = if (isInline) height else cachedWidth.takeIf { it > 0 } ?: drawable.intrinsicWidth
+      val dHeight = if (isInline) height else height
+      drawable.setBounds(0, 0, dWidth.coerceAtLeast(0), dHeight.coerceAtLeast(0))
+    }
+    return drawable
+  }
+
+  override fun getSize(
+    paint: Paint,
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    fm: Paint.FontMetricsInt?,
+  ): Int = getDrawable().bounds.right
+
+  override fun chooseHeight(
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    spanstartv: Int,
+    lineHeight: Int,
+    fm: Paint.FontMetricsInt?,
+  ) {
+    if (fm == null || isInline) return
+    val currentLineHeight = fm.descent - fm.ascent
+    if (height > currentLineHeight) {
+      val extraHeight = height - currentLineHeight
+      fm.descent += extraHeight
+      fm.bottom += extraHeight
+    }
+  }
+
+  override fun draw(
+    canvas: Canvas,
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    x: Float,
+    top: Int,
+    y: Int,
+    bottom: Int,
+    paint: Paint,
+  ) {
+    val drawable = getDrawable()
+    canvas.withSave {
+      if (isInline) {
+        val imageHeight = drawable.bounds.height()
+        translate(x, (y - imageHeight + (imageHeight * 0.1f)))
+      } else {
+        translate(x, top.toFloat())
+      }
+      drawable.draw(this)
+    }
+  }
+
+  // --- Helper Classes ---
+
+  private class ScaledImageDrawable(
+    private val imageDrawable: Drawable,
+    private val targetWidth: Int,
+    private val targetHeight: Int,
+    private val borderRadius: Int,
+    isBlockImage: Boolean,
+  ) : Drawable() {
+    private val clipPath: Path? =
+      if (borderRadius > 0) {
+        Path().apply {
+          addRoundRect(
+            0f,
+            0f,
+            targetWidth.toFloat(),
+            targetHeight.toFloat(),
+            borderRadius.toFloat(),
+            borderRadius.toFloat(),
+            Path.Direction.CW,
+          )
+        }
+      } else {
+        null
+      }
+
+    init {
+      setBounds(0, 0, targetWidth, targetHeight)
+      val iW = imageDrawable.intrinsicWidth
+      val iH = imageDrawable.intrinsicHeight
+
+      val (sW, sH) =
+        if (iW > 0 && iH > 0) {
+          if (isBlockImage) {
+            val scale = targetWidth.toFloat() / iW
+            targetWidth to (iH * scale).toInt()
+          } else {
+            val scale = minOf(targetWidth.toFloat() / iW, targetHeight.toFloat() / iH)
+            (iW * scale).toInt() to (iH * scale).toInt()
+          }
+        } else {
+          targetWidth to targetHeight
+        }
+
+      val left = (targetWidth - sW) / 2
+      val top = (targetHeight - sH) / 2
+      imageDrawable.setBounds(left, top, left + sW, top + sH)
+    }
+
+    override fun draw(canvas: Canvas) {
+      if (clipPath != null) {
+        canvas.withSave {
+          clipPath(clipPath)
+          imageDrawable.draw(canvas)
+        }
+      } else {
+        imageDrawable.draw(canvas)
+      }
+    }
+
+    override fun setAlpha(alpha: Int) {
+      imageDrawable.alpha = alpha
+    }
+
+    override fun setColorFilter(cf: android.graphics.ColorFilter?) {
+      imageDrawable.colorFilter = cf
+    }
+
+    @Suppress("DEPRECATION")
+    @Deprecated("Deprecated in Java")
+    override fun getOpacity(): Int = imageDrawable.opacity
+
+    override fun getIntrinsicWidth(): Int = targetWidth
+
+    override fun getIntrinsicHeight(): Int = targetHeight
+  }
+
+  companion object {
+    private const val MINIMUM_VALID_DIMENSION = 0
+
+    private fun calculateInlineImageSize(style: StyleConfig): Int = style.inlineImageStyle.size.toInt()
+
+    private fun createInitialDrawable(
+      style: StyleConfig,
+      url: String,
+      isInline: Boolean,
+    ): Drawable {
+      val imgStyle = style.imageStyle
+      val size = if (isInline) calculateInlineImageSize(style) else imgStyle.height.toInt()
+
+      return prepareDrawable(url, size, size) ?: PlaceholderDrawable(size, size)
+    }
+
+    private fun prepareDrawable(
+      src: String,
+      tw: Int,
+      th: Int,
+    ): Drawable? {
+      if (src.startsWith("http")) {
+        return AsyncDrawable(src).apply { setBounds(0, 0, tw, th) }
+      }
+      val path = src.removePrefix("file://")
+      return try {
+        BitmapFactory.decodeFile(path)?.toDrawable(Resources.getSystem())?.apply {
+          setBounds(0, 0, intrinsicWidth, intrinsicHeight)
+        }
+      } catch (e: Exception) {
+        Log.w("ImageSpan", "Failed to load local image: $path", e)
+        null
+      }
+    }
+
+    private class PlaceholderDrawable(
+      private val w: Int,
+      private val h: Int,
+    ) : Drawable() {
+      override fun draw(canvas: Canvas) {}
+
+      override fun setAlpha(alpha: Int) {}
+
+      override fun setColorFilter(cf: android.graphics.ColorFilter?) {}
+
+      @Deprecated("Deprecated in Java")
+      override fun getOpacity(): Int = android.graphics.PixelFormat.TRANSLUCENT
+
+      override fun getIntrinsicWidth(): Int = w
+
+      override fun getIntrinsicHeight(): Int = h
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spans/LineHeightSpan.kt

@@ -0,0 +1,27 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.graphics.Paint
+import kotlin.math.ceil
+import kotlin.math.floor
+import android.text.style.LineHeightSpan as AndroidLineHeightSpan
+
+class LineHeightSpan(
+  height: Float,
+) : AndroidLineHeightSpan {
+  private val lineHeight: Int = ceil(height.toDouble()).toInt()
+
+  override fun chooseHeight(
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    spanstartv: Int,
+    v: Int,
+    fm: Paint.FontMetricsInt?,
+  ) {
+    if (fm == null) return
+
+    val leading = lineHeight - ((-fm.ascent) + fm.descent)
+    fm.ascent -= ceil(leading / 2.0f).toInt()
+    fm.descent += floor(leading / 2.0f).toInt()
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spans/LinkSpan.kt

@@ -0,0 +1,51 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.content.Context
+import android.text.TextPaint
+import android.text.style.ClickableSpan
+import android.view.View
+import com.swmansion.enriched.markdown.EnrichedMarkdownText
+import com.swmansion.enriched.markdown.renderer.BlockStyle
+import com.swmansion.enriched.markdown.renderer.SpanStyleCache
+import com.swmansion.enriched.markdown.utils.applyBlockStyleFont
+
+class LinkSpan(
+  val url: String,
+  private val onLinkPress: ((String) -> Unit)?,
+  private val onLinkLongPress: ((String) -> Unit)?,
+  private val styleCache: SpanStyleCache,
+  private val blockStyle: BlockStyle,
+  private val context: Context,
+) : ClickableSpan() {
+  @Volatile
+  private var longPressTriggered = false
+
+  override fun onClick(widget: View) {
+    if (longPressTriggered) {
+      longPressTriggered = false
+      return
+    }
+
+    onLinkPress?.invoke(url) ?: (widget as? EnrichedMarkdownText)?.emitOnLinkPress(url)
+  }
+
+  fun onLongClick(widget: View): Boolean {
+    longPressTriggered = true
+
+    (widget as? EnrichedMarkdownText)?.emitOnLinkLongPress(url)
+
+    onLinkLongPress?.invoke(url)
+
+    return true
+  }
+
+  override fun updateDrawState(textPaint: TextPaint) {
+    super.updateDrawState(textPaint)
+
+    textPaint.textSize = blockStyle.fontSize
+    textPaint.applyBlockStyleFont(blockStyle, context)
+
+    textPaint.color = styleCache.linkColor
+    textPaint.isUnderlineText = styleCache.linkUnderline
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spans/MarginBottomSpan.kt

@@ -0,0 +1,76 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.graphics.Paint
+import android.text.style.LineHeightSpan
+
+/**
+ * Adds bottom margin to a block element (paragraphs/headings) using LineHeightSpan.
+ *
+ * For spacer lines (single newline), sets the line height to exactly marginBottom.
+ * For regular lines, adds marginBottom only at paragraph boundaries to preserve lineHeight.
+ *
+ * @param marginBottom The margin in pixels to add below the block (0 = no margin)
+ */
+class MarginBottomSpan(
+  val marginBottom: Float,
+) : LineHeightSpan {
+  override fun chooseHeight(
+    text: CharSequence,
+    start: Int,
+    end: Int,
+    spanstartv: Int,
+    lineHeight: Int,
+    fm: Paint.FontMetricsInt,
+  ) {
+    // Only process lines that end with a newline
+    if (end <= start || text[end - 1] != '\n') {
+      return
+    }
+
+    val marginPixels = marginBottom.toInt()
+
+    // Handle spacer lines (single newline character)
+    if (end - start == 1 && text[start] == '\n') {
+      if (hasContentAfter(text, end)) {
+        // Set line height to exactly marginBottom for spacer lines
+        fm.top = 0
+        fm.ascent = 0
+        fm.descent = marginPixels
+        fm.bottom = marginPixels
+      } else {
+        // No content after - collapse the spacer line to zero height
+        fm.top = 0
+        fm.ascent = 0
+        fm.descent = 0
+        fm.bottom = 0
+      }
+      return
+    }
+
+    // For regular lines, add spacing only if there's content after
+    if (hasContentAfter(text, end)) {
+      fm.descent += marginPixels
+      fm.bottom += marginPixels
+    }
+  }
+
+  /**
+   * Checks if there's non-newline content after the given position.
+   * Used to determine if spacing should be applied (between items) or skipped (after last item).
+   */
+  private fun hasContentAfter(
+    text: CharSequence,
+    pos: Int,
+  ): Boolean {
+    if (pos >= text.length) return false
+
+    // If the next character is a newline, check the character after that
+    if (text[pos] == '\n') {
+      val nextPos = pos + 1
+      if (nextPos >= text.length) return false
+      return text[nextPos] != '\n' // Non-newline = content exists
+    }
+
+    return true // Non-newline content immediately after
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spans/OrderedListSpan.kt

@@ -0,0 +1,87 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.Typeface
+import android.text.Layout
+import android.text.TextPaint
+import com.facebook.react.common.ReactConstants
+import com.facebook.react.views.text.ReactTypefaceUtils.applyStyles
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
+import com.swmansion.enriched.markdown.renderer.BlockStyle
+import com.swmansion.enriched.markdown.renderer.SpanStyleCache
+import com.swmansion.enriched.markdown.styles.ListStyle
+
+class OrderedListSpan(
+  private val listStyle: ListStyle,
+  depth: Int,
+  context: Context,
+  styleCache: SpanStyleCache,
+) : BaseListSpan(
+    depth = depth,
+    context = context,
+    styleCache = styleCache,
+    blockStyle =
+      BlockStyle(
+        fontSize = listStyle.fontSize,
+        fontFamily = listStyle.fontFamily,
+        fontWeight = listStyle.fontWeight,
+        color = listStyle.color,
+      ),
+    marginLeft = listStyle.marginLeft,
+    gapWidth = listStyle.gapWidth,
+  ) {
+  companion object {
+    private val sharedMarkerPaint = TextPaint().apply { isAntiAlias = true }
+  }
+
+  private val markerTypeface: Typeface =
+    run {
+      val fontFamily = listStyle.fontFamily.takeIf { it.isNotEmpty() }
+      val fontWeight = parseFontWeight(listStyle.markerFontWeight)
+      applyStyles(null, ReactConstants.UNSET, fontWeight, fontFamily, context.assets)
+    }
+
+  private fun configureMarkerPaint(): TextPaint =
+    sharedMarkerPaint.apply {
+      textSize = listStyle.fontSize
+      color = listStyle.markerColor
+      typeface = markerTypeface
+    }
+
+  override fun getMarkerWidth(): Float {
+    val paint = configureMarkerPaint()
+    return paint.measureText("99.")
+  }
+
+  var itemNumber: Int = 1
+    private set
+
+  override fun drawMarker(
+    c: Canvas,
+    p: Paint,
+    x: Int,
+    dir: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    layout: Layout?,
+    start: Int,
+  ) {
+    val markerPaint = configureMarkerPaint()
+    val text = "$itemNumber."
+    val textWidth = markerPaint.measureText(text)
+
+    // Calculate marker position based on depth
+    // depth 0: markerWidth, depth 1: marginLeft + markerWidth, etc.
+    val markerRightEdge = (depth * marginLeft + getMarkerWidth()) * dir
+    val markerX = markerRightEdge - textWidth * dir
+
+    c.drawText(text, markerX, baseline.toFloat(), markerPaint)
+  }
+
+  fun setItemNumber(number: Int) {
+    itemNumber = number
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spans/StrikethroughSpan.kt

@@ -0,0 +1,12 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.text.TextPaint
+import android.text.style.CharacterStyle
+
+class StrikethroughSpan(
+  private val strikethroughColor: Int,
+) : CharacterStyle() {
+  override fun updateDrawState(tp: TextPaint) {
+    tp.isStrikeThruText = true
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spans/StrongSpan.kt

@@ -0,0 +1,37 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.graphics.Typeface
+import android.text.TextPaint
+import android.text.style.MetricAffectingSpan
+import com.swmansion.enriched.markdown.renderer.BlockStyle
+import com.swmansion.enriched.markdown.renderer.SpanStyleCache
+import com.swmansion.enriched.markdown.utils.applyColorPreserving
+
+class StrongSpan(
+  private val styleCache: SpanStyleCache,
+  private val blockStyle: BlockStyle,
+) : MetricAffectingSpan() {
+  private val strongColor = styleCache.getStrongColorFor(blockStyle.color)
+
+  override fun updateDrawState(tp: TextPaint) {
+    applyStrongStyle(tp)
+    tp.applyColorPreserving(strongColor, *styleCache.colorsToPreserve)
+  }
+
+  override fun updateMeasureState(tp: TextPaint) {
+    applyStrongStyle(tp)
+  }
+
+  private fun applyStrongStyle(tp: TextPaint) {
+    // Preserve code fontSize if code is nested inside strong text
+    val codeFontSize = blockStyle.fontSize * 0.85f
+    if (kotlin.math.abs(tp.textSize - codeFontSize) > 0.1f) {
+      tp.textSize = blockStyle.fontSize
+    }
+
+    val currentTypeface = tp.typeface ?: Typeface.DEFAULT
+    val isItalic = (currentTypeface.style) and Typeface.ITALIC != 0
+    val style = if (isItalic) Typeface.BOLD_ITALIC else Typeface.BOLD
+    tp.typeface = Typeface.create(currentTypeface, style)
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spans/TextSpan.kt

@@ -0,0 +1,26 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.content.Context
+import android.text.TextPaint
+import android.text.style.MetricAffectingSpan
+import com.swmansion.enriched.markdown.renderer.BlockStyle
+import com.swmansion.enriched.markdown.utils.applyBlockStyleFont
+
+class TextSpan(
+  private val blockStyle: BlockStyle,
+  private val context: Context,
+) : MetricAffectingSpan() {
+  override fun updateDrawState(tp: TextPaint) {
+    applyBlockStyle(tp)
+  }
+
+  override fun updateMeasureState(tp: TextPaint) {
+    applyBlockStyle(tp)
+  }
+
+  private fun applyBlockStyle(tp: TextPaint) {
+    tp.textSize = blockStyle.fontSize
+    tp.color = blockStyle.color
+    tp.applyBlockStyleFont(blockStyle, context)
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spans/ThematicBreakSpan.kt

@@ -0,0 +1,69 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.text.style.ReplacementSpan
+
+class ThematicBreakSpan(
+  private val lineColor: Int,
+  private val lineHeight: Float,
+  private val marginTop: Float,
+  private val marginBottom: Float,
+) : ReplacementSpan() {
+  override fun getSize(
+    paint: Paint,
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    fm: Paint.FontMetricsInt?,
+  ): Int {
+    val totalHeight = (marginTop + lineHeight + marginBottom).toInt()
+
+    fm?.apply {
+      ascent = -totalHeight
+      top = -totalHeight
+      descent = 0
+      bottom = 0
+    }
+
+    return 0
+  }
+
+  override fun draw(
+    canvas: Canvas,
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    x: Float,
+    top: Int,
+    y: Int,
+    bottom: Int,
+    paint: Paint,
+  ) {
+    paint.withStyle(lineColor, lineHeight) {
+      val lineY = top + marginTop + (lineHeight / 2f)
+
+      canvas.drawLine(0f, lineY, canvas.width.toFloat(), lineY, paint)
+    }
+  }
+
+  private inline fun Paint.withStyle(
+    color: Int,
+    width: Float,
+    action: () -> Unit,
+  ) {
+    val oldColor = this.color
+    val oldWidth = this.strokeWidth
+    val oldStyle = this.style
+
+    this.color = color
+    this.strokeWidth = width
+    this.style = Paint.Style.STROKE
+
+    action()
+
+    this.color = oldColor
+    this.strokeWidth = oldWidth
+    this.style = oldStyle
+  }
+}