react-native-enriched-markdown-scaffold 0.6.0-scaffold.4

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

@@ -0,0 +1,134 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.RectF
+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
+import com.swmansion.enriched.markdown.styles.TaskListStyle
+
+class TaskListSpan(
+  private val taskStyle: TaskListStyle,
+  private val listStyle: ListStyle,
+  depth: Int,
+  context: Context,
+  styleCache: SpanStyleCache,
+  val taskIndex: Int,
+  val isChecked: Boolean,
+) : 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,
+  ) {
+  private val checkboxSize = taskStyle.checkboxSize
+  private val markerColumnWidth = listStyle.effectiveMarkerWidth(checkboxSize)
+  private val cornerRadius = taskStyle.checkboxBorderRadius
+  private val rect = RectF()
+  private val checkPath = Path()
+
+  companion object {
+    private const val CAP_HEIGHT_RATIO = 0.72f
+    private const val HALF_DIVISOR = 2f
+    private const val CHECKMARK_MIN_STROKE_WIDTH = 1.5f
+    private const val CHECKMARK_STROKE_RATIO = 0.12f
+    private const val CHECKMARK_INSET_RATIO = 0.22f
+    private const val CHECKMARK_MID_OFFSET_RATIO = 0.05f
+    private const val BORDER_MIN_STROKE_WIDTH = 1f
+    private const val BORDER_STROKE_RATIO = 0.09f
+  }
+
+  private val boxPaint =
+    Paint(Paint.ANTI_ALIAS_FLAG).apply {
+      strokeCap = Paint.Cap.ROUND
+      strokeJoin = Paint.Join.ROUND
+    }
+
+  override fun getMarkerWidth(): Float = markerColumnWidth
+
+  override fun drawMarker(
+    canvas: Canvas,
+    paint: Paint,
+    x: Int,
+    dir: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    layout: Layout?,
+    start: Int,
+  ) {
+    val fontMetrics = paint.fontMetrics
+    val capHeight = -fontMetrics.ascent * CAP_HEIGHT_RATIO
+    val centerY = baseline - capHeight / HALF_DIVISOR
+    // Right-align the checkbox inside the reserved marker column so it hugs
+    // the gap before the text. At the default (markerColumnWidth ==
+    // checkboxSize) this is identical to the previous flush-left layout.
+    val centerX = x + (depth * marginLeft + markerColumnWidth - checkboxSize / HALF_DIVISOR) * dir
+    val half = checkboxSize / HALF_DIVISOR
+    rect.set(centerX - half, centerY - half, centerX + half, centerY + half)
+
+    if (isChecked) {
+      drawChecked(canvas, centerY)
+    } else {
+      drawUnchecked(canvas)
+    }
+  }
+
+  private fun drawChecked(
+    canvas: Canvas,
+    centerY: Float,
+  ) {
+    boxPaint.apply {
+      style = Paint.Style.FILL
+      color = taskStyle.checkedColor
+    }
+    canvas.drawRoundRect(rect, cornerRadius, cornerRadius, boxPaint)
+
+    boxPaint.apply {
+      style = Paint.Style.STROKE
+      color = taskStyle.checkmarkColor
+      strokeWidth = maxOf(CHECKMARK_MIN_STROKE_WIDTH, checkboxSize * CHECKMARK_STROKE_RATIO)
+    }
+
+    val inset = checkboxSize * CHECKMARK_INSET_RATIO
+    val midOffset = checkboxSize * CHECKMARK_MID_OFFSET_RATIO
+
+    checkPath.run {
+      reset()
+      moveTo(rect.left + inset, centerY)
+      lineTo(rect.centerX() - midOffset, rect.bottom - inset)
+      lineTo(rect.right - inset, rect.top + inset)
+    }
+    canvas.drawPath(checkPath, boxPaint)
+  }
+
+  private fun drawUnchecked(canvas: Canvas) {
+    boxPaint.apply {
+      style = Paint.Style.STROKE
+      color = taskStyle.borderColor
+      strokeWidth = maxOf(BORDER_MIN_STROKE_WIDTH, checkboxSize * BORDER_STROKE_RATIO)
+    }
+
+    val halfStroke = boxPaint.strokeWidth / 2f
+    val insetRect =
+      RectF(
+        rect.left + halfStroke,
+        rect.top + halfStroke,
+        rect.right - halfStroke,
+        rect.bottom - halfStroke,
+      )
+    canvas.drawRoundRect(insetRect, cornerRadius, cornerRadius, boxPaint)
+  }
+}

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.text.extensions.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,92 @@
+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 val ringStrokeWidth: Float = radius * 0.3f
+  private val markerColumnWidth: Float = listStyle.effectiveMarkerWidth(radius)
+
+  private fun configureBulletPaint(): Paint =
+    sharedBulletPaint.apply {
+      color = listStyle.bulletColor
+      style = Paint.Style.FILL
+      strokeWidth = 0f
+    }
+
+  override fun getMarkerWidth(): Float = markerColumnWidth
+
+  override fun drawMarker(
+    canvas: Canvas,
+    paint: Paint,
+    x: Int,
+    dir: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    layout: Layout?,
+    start: Int,
+  ) {
+    val bulletPaint = configureBulletPaint()
+    // Center the bullet at the right edge of the reserved marker column so
+    // it hugs the gap before the text — matches iOS behavior and stays
+    // visually flush-left when the column width equals the bullet radius
+    // (the default).
+    val bulletX = x + (depth * marginLeft + markerColumnWidth) * dir
+    val fontMetrics = paint.fontMetrics
+    val bulletY = baseline + (fontMetrics.ascent + fontMetrics.descent) / 2f
+
+    when (depth) {
+      0 -> {
+        canvas.drawCircle(bulletX, bulletY, radius, bulletPaint)
+      }
+
+      1 -> {
+        bulletPaint.style = Paint.Style.STROKE
+        bulletPaint.strokeWidth = ringStrokeWidth
+        canvas.drawCircle(bulletX, bulletY, radius - ringStrokeWidth / 2f, bulletPaint)
+      }
+
+      else -> {
+        canvas.drawRect(
+          bulletX - radius,
+          bulletY - radius,
+          bulletX + radius,
+          bulletY + radius,
+          bulletPaint,
+        )
+      }
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spoiler/ParticleStrategy.kt

@@ -0,0 +1,68 @@
+package com.swmansion.enriched.markdown.spoiler
+
+import android.graphics.Canvas
+import android.graphics.Paint
+import com.swmansion.enriched.markdown.spans.SpoilerSpan
+import com.swmansion.enriched.markdown.styles.SpoilerStyle
+
+class ParticleStrategy(
+  private val animator: SpoilerAnimator,
+) : SpoilerStrategy {
+  private val segments = mutableMapOf<SegmentKey, SpoilerParticleDrawable>()
+  private val backgroundPaint = Paint()
+
+  private var particleColor = 0
+  private var particleDensity = 0f
+  private var particleSpeed = 0f
+
+  override fun applyStyle(style: SpoilerStyle) {
+    this.particleColor = style.color
+    this.particleDensity = style.particleDensity
+    this.particleSpeed = style.particleSpeed
+  }
+
+  override fun drawSegment(
+    canvas: Canvas,
+    context: SpoilerDrawContext,
+    key: SegmentKey,
+    rect: SegmentRect,
+  ) {
+    val drawable =
+      segments.getOrPut(key) {
+        SpoilerParticleDrawable(particleColor, particleDensity, particleSpeed)
+          .also { animator.register(it) }
+      }
+    drawable.setSize(rect.width, rect.height)
+
+    backgroundPaint.color = colorWithAlpha(context.backgroundColor, drawable.overallAlpha)
+    canvas.drawRect(rect.left, rect.top, rect.left + rect.width, rect.top + rect.height, backgroundPaint)
+    drawable.draw(canvas, rect.left, rect.top)
+  }
+
+  override fun pruneStaleSegments(activeKeys: Set<SegmentKey>) {
+    val staleKeys = segments.keys - activeKeys
+    for (key in staleKeys) {
+      segments.remove(key)?.let { animator.unregister(it) }
+    }
+  }
+
+  override fun revealSpan(
+    span: SpoilerSpan,
+    context: SpoilerDrawContext,
+    onAllComplete: () -> Unit,
+  ) {
+    revealSegments(
+      span = span,
+      segmentKeys = segments.keys,
+      onAllComplete = onAllComplete,
+      cleanup = { keys -> keys.forEach { segments.remove(it)?.let { d -> animator.unregister(d) } } },
+      onSegment = { key, onComplete -> segments[key]?.startReveal(onComplete) },
+    )
+    animator.ensureRunning()
+  }
+
+  override fun stop() {
+    segments.values.forEach { animator.unregister(it) }
+    segments.clear()
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spoiler/SegmentKey.kt

@@ -0,0 +1,13 @@
+package com.swmansion.enriched.markdown.spoiler
+
+data class SegmentKey(
+  val spanIdentity: Int,
+  val line: Int,
+)
+
+data class SegmentRect(
+  val left: Float,
+  val top: Float,
+  val width: Float,
+  val height: Float,
+)

package/android/src/main/java/com/swmansion/enriched/markdown/spoiler/SolidStrategy.kt

@@ -0,0 +1,95 @@
+package com.swmansion.enriched.markdown.spoiler
+
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.RectF
+import android.os.SystemClock
+import com.swmansion.enriched.markdown.spans.SpoilerSpan
+import com.swmansion.enriched.markdown.styles.SpoilerStyle
+
+class SolidStrategy : SpoilerStrategy {
+  private class SegmentState(
+    var alpha: Float = 1f,
+    var revealing: Boolean = false,
+    var revealStartTime: Long = -1L,
+    var revealFinished: Boolean = false,
+    var revealCallback: (() -> Unit)? = null,
+  )
+
+  private val segments = mutableMapOf<SegmentKey, SegmentState>()
+  private val solidPaint = Paint()
+  private val rectF = RectF()
+
+  private var color = 0
+  private var borderRadius = 0f
+
+  override fun applyStyle(style: SpoilerStyle) {
+    this.color = style.color
+    this.borderRadius = style.solidBorderRadius *
+      android.content.res.Resources
+        .getSystem()
+        .displayMetrics.density
+  }
+
+  override fun drawSegment(
+    canvas: Canvas,
+    context: SpoilerDrawContext,
+    key: SegmentKey,
+    rect: SegmentRect,
+  ) {
+    val state = segments.getOrPut(key) { SegmentState() }
+
+    if (state.revealing) {
+      val now = SystemClock.uptimeMillis()
+      if (state.revealStartTime < 0L) state.revealStartTime = now
+      val progress = ((now - state.revealStartTime).toFloat() / REVEAL_DURATION_MS).coerceIn(0f, 1f)
+      state.alpha = (1f - progress) * (1f - progress)
+      if (progress >= 1f && !state.revealFinished) {
+        state.revealFinished = true
+        state.revealCallback?.invoke()
+        state.revealCallback = null
+      }
+    }
+
+    if (!state.revealFinished) {
+      solidPaint.color = colorWithAlpha(this.color, state.alpha)
+      rectF.set(rect.left, rect.top, rect.left + rect.width, rect.top + rect.height)
+      canvas.drawRoundRect(rectF, borderRadius, borderRadius, solidPaint)
+    }
+
+    if (state.revealing && !state.revealFinished) {
+      context.textView.postInvalidateOnAnimation()
+    }
+  }
+
+  override fun pruneStaleSegments(activeKeys: Set<SegmentKey>) {
+    val staleKeys = segments.keys - activeKeys
+    for (key in staleKeys) {
+      segments.remove(key)
+    }
+  }
+
+  override fun revealSpan(
+    span: SpoilerSpan,
+    context: SpoilerDrawContext,
+    onAllComplete: () -> Unit,
+  ) {
+    revealSegments(
+      span = span,
+      segmentKeys = segments.keys,
+      onAllComplete = onAllComplete,
+      cleanup = { keys -> keys.forEach { segments.remove(it) } },
+      onSegment = { key, onComplete ->
+        segments[key]?.let { state ->
+          state.revealing = true
+          state.revealCallback = onComplete
+        }
+      },
+    )
+    context.textView.invalidate()
+  }
+
+  override fun stop() {
+    segments.clear()
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spoiler/SpoilerAnimator.kt

@@ -0,0 +1,89 @@
+package com.swmansion.enriched.markdown.spoiler
+
+import android.view.Choreographer
+import android.widget.TextView
+import java.lang.ref.WeakReference
+
+class SpoilerAnimator(
+  textView: TextView,
+) {
+  private val textViewReference = WeakReference(textView)
+  private val drawables = mutableListOf<SpoilerParticleDrawable>()
+  private var running = false
+  private var lastFrameTime = 0L
+
+  // Deferred removals to avoid ConcurrentModificationException during iteration.
+  private val pendingRemovals = mutableListOf<SpoilerParticleDrawable>()
+  private var isIterating = false
+
+  private val frameCallback =
+    object : Choreographer.FrameCallback {
+      override fun doFrame(frameTimeNanos: Long) {
+        if (!running) return
+
+        val textView =
+          textViewReference.get() ?: run {
+            stop()
+            return
+          }
+
+        val currentTimeMs = frameTimeNanos / 1_000_000L
+        val deltaTime =
+          if (lastFrameTime == 0L) {
+            16f / 1000f
+          } else {
+            ((currentTimeMs - lastFrameTime).coerceIn(1, 64)).toFloat() / 1000f
+          }
+        lastFrameTime = currentTimeMs
+
+        isIterating = true
+        for (drawable in drawables) {
+          drawable.update(deltaTime, currentTimeMs)
+        }
+        isIterating = false
+        drainPendingRemovals()
+
+        textView.invalidate()
+
+        if (drawables.isNotEmpty()) {
+          Choreographer.getInstance().postFrameCallback(this)
+        } else {
+          running = false
+        }
+      }
+    }
+
+  fun register(drawable: SpoilerParticleDrawable) {
+    if (drawable !in drawables) drawables.add(drawable)
+    ensureRunning()
+  }
+
+  fun unregister(drawable: SpoilerParticleDrawable) {
+    if (isIterating) {
+      pendingRemovals.add(drawable)
+    } else {
+      drawables.remove(drawable)
+      if (drawables.isEmpty()) stop()
+    }
+  }
+
+  fun ensureRunning() {
+    if (running || drawables.isEmpty()) return
+    running = true
+    lastFrameTime = 0L
+    Choreographer.getInstance().postFrameCallback(frameCallback)
+  }
+
+  fun stop() {
+    running = false
+    Choreographer.getInstance().removeFrameCallback(frameCallback)
+    drawables.clear()
+    pendingRemovals.clear()
+  }
+
+  private fun drainPendingRemovals() {
+    if (pendingRemovals.isEmpty()) return
+    drawables.removeAll(pendingRemovals.toSet())
+    pendingRemovals.clear()
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spoiler/SpoilerCapable.kt

@@ -0,0 +1,5 @@
+package com.swmansion.enriched.markdown.spoiler
+
+interface SpoilerCapable {
+  val spoilerOverlayDrawer: SpoilerOverlayDrawer?
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spoiler/SpoilerConstants.kt

@@ -0,0 +1,3 @@
+package com.swmansion.enriched.markdown.spoiler
+
+internal const val REVEAL_DURATION_MS = 450L

package/android/src/main/java/com/swmansion/enriched/markdown/spoiler/SpoilerDrawContext.kt

@@ -0,0 +1,33 @@
+package com.swmansion.enriched.markdown.spoiler
+
+import android.graphics.Color
+import android.graphics.Paint
+import android.text.Layout
+import android.text.Spanned
+import android.view.View
+import android.widget.TextView
+import com.facebook.react.uimanager.BackgroundStyleApplicator
+import com.swmansion.enriched.markdown.spans.SpoilerSpan
+
+class SpoilerDrawContext(
+  val textView: TextView,
+  val layout: Layout,
+  val text: Spanned,
+  val spans: Array<SpoilerSpan>,
+  val paddingLeft: Float,
+  val paddingTop: Float,
+  val fontMetrics: Paint.FontMetrics,
+  val backgroundColor: Int,
+) {
+  companion object {
+    fun resolveBackgroundColor(textView: TextView): Int {
+      var view: View? = textView
+      while (view != null) {
+        val color = BackgroundStyleApplicator.getBackgroundColor(view)
+        if (color != null && Color.alpha(color) > 0) return color
+        view = view.parent as? View
+      }
+      return Color.WHITE
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spoiler/SpoilerDrawUtils.kt

@@ -0,0 +1,40 @@
+package com.swmansion.enriched.markdown.spoiler
+
+import android.graphics.Color
+import android.graphics.Paint
+import android.text.Layout
+
+internal fun computeSegmentRect(
+  layout: Layout,
+  line: Int,
+  segmentStart: Int,
+  segmentEnd: Int,
+  fontMetrics: Paint.FontMetrics,
+  paddingLeft: Float,
+  paddingTop: Float,
+): SegmentRect? {
+  val startHorizontal = layout.getPrimaryHorizontal(segmentStart)
+  val endHorizontal =
+    if (segmentEnd >= layout.getLineEnd(line)) {
+      layout.getLineRight(line)
+    } else {
+      layout.getPrimaryHorizontal(segmentEnd)
+    }
+  val baseline = layout.getLineBaseline(line).toFloat()
+
+  val left = minOf(startHorizontal, endHorizontal) + paddingLeft
+  val right = maxOf(startHorizontal, endHorizontal) + paddingLeft
+  val top = baseline + fontMetrics.ascent + paddingTop
+  val bottom = baseline + fontMetrics.descent + paddingTop
+  val width = right - left
+  val height = bottom - top
+  return if (width > 0 && height > 0) SegmentRect(left, top, width, height) else null
+}
+
+internal fun colorWithAlpha(
+  color: Int,
+  alpha: Float,
+): Int {
+  val alphaComponent = (Color.alpha(color) * alpha).toInt().coerceIn(0, 255)
+  return Color.argb(alphaComponent, Color.red(color), Color.green(color), Color.blue(color))
+}

package/android/src/main/java/com/swmansion/enriched/markdown/spoiler/SpoilerOverlay.kt

@@ -0,0 +1,17 @@
+package com.swmansion.enriched.markdown.spoiler
+
+enum class SpoilerOverlay(
+  internal val createStrategy: (SpoilerAnimator) -> SpoilerStrategy,
+) {
+  PARTICLES({ animator -> ParticleStrategy(animator) }),
+  SOLID({ _ -> SolidStrategy() }),
+  ;
+
+  companion object {
+    fun fromString(value: String?): SpoilerOverlay =
+      when (value) {
+        "solid" -> SOLID
+        else -> PARTICLES
+      }
+  }
+}