react-native-enriched-markdown 0.1.0 → 0.1.1

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 (must be > 0)
+ */
+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/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
+  }
+}

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

@@ -0,0 +1,69 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.text.Layout
+import com.swmansion.enriched.markdown.renderer.BlockStyle
+import com.swmansion.enriched.markdown.renderer.SpanStyleCache
+import com.swmansion.enriched.markdown.styles.ListStyle
+
+class UnorderedListSpan(
+  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 sharedBulletPaint =
+      Paint(Paint.ANTI_ALIAS_FLAG).apply {
+        style = Paint.Style.FILL
+      }
+  }
+
+  private val radius: Float = listStyle.bulletSize / 2f
+
+  private fun configureBulletPaint(): Paint =
+    sharedBulletPaint.apply {
+      color = listStyle.bulletColor
+    }
+
+  override fun getMarkerWidth(): Float = radius
+
+  override fun drawMarker(
+    c: Canvas,
+    p: Paint,
+    x: Int,
+    dir: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    layout: Layout?,
+    start: Int,
+  ) {
+    val bulletPaint = configureBulletPaint()
+
+    // Calculate bullet position based on depth
+    // depth 0: radius, depth 1: marginLeft + radius, etc.
+    val bulletX = (depth * marginLeft + radius) * dir
+
+    // Vertical centering based on font metrics
+    val fm = p.fontMetrics
+    val bulletY = baseline + (fm.ascent + fm.descent) / 2f
+
+    c.drawCircle(bulletX, bulletY, radius, bulletPaint)
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/BaseBlockStyle.kt

@@ -0,0 +1,10 @@
+package com.swmansion.enriched.markdown.styles
+
+interface BaseBlockStyle {
+  val fontSize: Float
+  val fontFamily: String
+  val fontWeight: String
+  val color: Int
+  val marginBottom: Float
+  val lineHeight: Float
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/BlockquoteStyle.kt

@@ -0,0 +1,48 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class BlockquoteStyle(
+  override val fontSize: Float,
+  override val fontFamily: String,
+  override val fontWeight: String,
+  override val color: Int,
+  override val marginBottom: Float,
+  override val lineHeight: Float,
+  val borderColor: Int,
+  val borderWidth: Float,
+  val gapWidth: Float,
+  val backgroundColor: Int?,
+) : BaseBlockStyle {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): BlockquoteStyle {
+      val fontSize = parser.toPixelFromSP(map.getDouble("fontSize").toFloat())
+      val fontFamily = parser.parseString(map, "fontFamily")
+      val fontWeight = parser.parseString(map, "fontWeight", "normal")
+      val color = parser.parseColor(map, "color")
+      val marginBottom = parser.toPixelFromDIP(map.getDouble("marginBottom").toFloat())
+      val lineHeightRaw = map.getDouble("lineHeight").toFloat()
+      val lineHeight = parser.toPixelFromSP(lineHeightRaw)
+      val borderColor = parser.parseColor(map, "borderColor")
+      val borderWidth = parser.toPixelFromDIP(map.getDouble("borderWidth").toFloat())
+      val gapWidth = parser.toPixelFromDIP(map.getDouble("gapWidth").toFloat())
+      val backgroundColor = parser.parseOptionalColor(map, "backgroundColor")
+
+      return BlockquoteStyle(
+        fontSize,
+        fontFamily,
+        fontWeight,
+        color,
+        marginBottom,
+        lineHeight,
+        borderColor,
+        borderWidth,
+        gapWidth,
+        backgroundColor,
+      )
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/CodeBlockStyle.kt

@@ -0,0 +1,51 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class CodeBlockStyle(
+  override val fontSize: Float,
+  override val fontFamily: String,
+  override val fontWeight: String,
+  override val color: Int,
+  override val marginBottom: Float,
+  override val lineHeight: Float,
+  val backgroundColor: Int,
+  val borderColor: Int,
+  val borderRadius: Float,
+  val borderWidth: Float,
+  val padding: Float,
+) : BaseBlockStyle {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): CodeBlockStyle {
+      val fontSize = parser.toPixelFromSP(map.getDouble("fontSize").toFloat())
+      val fontFamily = parser.parseString(map, "fontFamily")
+      val fontWeight = parser.parseString(map, "fontWeight", "normal")
+      val color = parser.parseColor(map, "color")
+      val marginBottom = parser.toPixelFromDIP(map.getDouble("marginBottom").toFloat())
+      val lineHeightRaw = map.getDouble("lineHeight").toFloat()
+      val lineHeight = parser.toPixelFromSP(lineHeightRaw)
+      val backgroundColor = parser.parseColor(map, "backgroundColor")
+      val borderColor = parser.parseColor(map, "borderColor")
+      val borderRadius = parser.toPixelFromDIP(map.getDouble("borderRadius").toFloat())
+      val borderWidth = parser.toPixelFromDIP(map.getDouble("borderWidth").toFloat())
+      val padding = parser.toPixelFromDIP(map.getDouble("padding").toFloat())
+
+      return CodeBlockStyle(
+        fontSize,
+        fontFamily,
+        fontWeight,
+        color,
+        marginBottom,
+        lineHeight,
+        backgroundColor,
+        borderColor,
+        borderRadius,
+        borderWidth,
+        padding,
+      )
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/CodeStyle.kt

@@ -0,0 +1,21 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class CodeStyle(
+  val color: Int,
+  val backgroundColor: Int,
+  val borderColor: Int,
+) {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): CodeStyle {
+      val color = parser.parseColor(map, "color")
+      val backgroundColor = parser.parseColor(map, "backgroundColor")
+      val borderColor = parser.parseColor(map, "borderColor")
+      return CodeStyle(color, backgroundColor, borderColor)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/EmphasisStyle.kt

@@ -0,0 +1,17 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class EmphasisStyle(
+  val color: Int?,
+) {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): EmphasisStyle {
+      val color = parser.parseOptionalColor(map, "color")
+      return EmphasisStyle(color)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/HeadingStyle.kt

@@ -0,0 +1,29 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class HeadingStyle(
+  override val fontSize: Float,
+  override val fontFamily: String,
+  override val fontWeight: String,
+  override val color: Int,
+  override val marginBottom: Float,
+  override val lineHeight: Float,
+) : BaseBlockStyle {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): HeadingStyle {
+      val fontSize = parser.toPixelFromSP(map.getDouble("fontSize").toFloat())
+      val fontFamily = parser.parseString(map, "fontFamily")
+      val fontWeight = parser.parseString(map, "fontWeight", "normal")
+      val color = parser.parseColor(map, "color")
+      val marginBottom = parser.toPixelFromDIP(map.getDouble("marginBottom").toFloat())
+      val lineHeightRaw = map.getDouble("lineHeight").toFloat()
+      val lineHeight = parser.toPixelFromSP(lineHeightRaw)
+
+      return HeadingStyle(fontSize, fontFamily, fontWeight, color, marginBottom, lineHeight)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/ImageStyle.kt

@@ -0,0 +1,21 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class ImageStyle(
+  val height: Float,
+  val borderRadius: Float,
+  val marginBottom: Float,
+) {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): ImageStyle {
+      val height = parser.toPixelFromDIP(map.getDouble("height").toFloat())
+      val borderRadius = parser.toPixelFromDIP(map.getDouble("borderRadius").toFloat())
+      val marginBottom = parser.toPixelFromDIP(map.getDouble("marginBottom").toFloat())
+      return ImageStyle(height, borderRadius, marginBottom)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/InlineImageStyle.kt

@@ -0,0 +1,17 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class InlineImageStyle(
+  val size: Float,
+) {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): InlineImageStyle {
+      val size = parser.toPixelFromDIP(map.getDouble("size").toFloat())
+      return InlineImageStyle(size)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/LinkStyle.kt

@@ -0,0 +1,19 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class LinkStyle(
+  val color: Int,
+  val underline: Boolean,
+) {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): LinkStyle {
+      val color = parser.parseColor(map, "color")
+      val underline = map.getBoolean("underline")
+      return LinkStyle(color, underline)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/ListStyle.kt

@@ -0,0 +1,54 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class ListStyle(
+  override val fontSize: Float,
+  override val fontFamily: String,
+  override val fontWeight: String,
+  override val color: Int,
+  override val marginBottom: Float,
+  override val lineHeight: Float,
+  val bulletColor: Int,
+  val bulletSize: Float,
+  val markerColor: Int,
+  val markerFontWeight: String,
+  val gapWidth: Float,
+  val marginLeft: Float,
+) : BaseBlockStyle {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): ListStyle {
+      val fontSize = parser.toPixelFromSP(map.getDouble("fontSize").toFloat())
+      val fontFamily = parser.parseString(map, "fontFamily")
+      val fontWeight = parser.parseString(map, "fontWeight", "normal")
+      val color = parser.parseColor(map, "color")
+      val marginBottom = parser.toPixelFromDIP(map.getDouble("marginBottom").toFloat())
+      val lineHeightRaw = map.getDouble("lineHeight").toFloat()
+      val lineHeight = parser.toPixelFromSP(lineHeightRaw)
+      val bulletColor = parser.parseColor(map, "bulletColor")
+      val bulletSize = parser.toPixelFromDIP(map.getDouble("bulletSize").toFloat())
+      val markerColor = parser.parseColor(map, "markerColor")
+      val markerFontWeight = parser.parseString(map, "markerFontWeight", "normal")
+      val gapWidth = parser.toPixelFromDIP(map.getDouble("gapWidth").toFloat())
+      val marginLeft = parser.toPixelFromDIP(map.getDouble("marginLeft").toFloat())
+
+      return ListStyle(
+        fontSize,
+        fontFamily,
+        fontWeight,
+        color,
+        marginBottom,
+        lineHeight,
+        bulletColor,
+        bulletSize,
+        markerColor,
+        markerFontWeight,
+        gapWidth,
+        marginLeft,
+      )
+    }
+  }
+}