feat: implement spoiler overlay strategies and enhance markdown rendering

Author: hryhoriiK97

android/src/main/java/com/swmansion/enriched/markdown/EnrichedMarkdown.kt

@@ -16,6 +16,7 @@ import com.swmansion.enriched.markdown.parser.Md4cFlags
 import com.swmansion.enriched.markdown.parser.Parser
 import com.swmansion.enriched.markdown.renderer.Renderer
 import com.swmansion.enriched.markdown.spans.ImageSpan
+import com.swmansion.enriched.markdown.spoiler.SpoilerMode
 import com.swmansion.enriched.markdown.styles.StyleConfig
 import com.swmansion.enriched.markdown.utils.common.FeatureFlags
 import com.swmansion.enriched.markdown.utils.text.view.emitLinkLongPressEvent
@@ -77,6 +78,14 @@ class EnrichedMarkdown
     private var onTaskListItemPressCallback: ((Int, Boolean, String) -> Unit)? = null
     private var contextMenuItemTexts: List<String> = emptyList()
     var onContextMenuItemPressCallback: ((itemText: String, selectedText: String, selectionStart: Int, selectionEnd: Int) -> Unit)? = null
+    var spoilerMode: SpoilerMode = SpoilerMode.PARTICLES
+      set(value) {
+        if (field == value) return
+        field = value
+        segmentViews.filterIsInstance<EnrichedMarkdownInternalText>().forEach {
+          it.spoilerMode = value
+        }
+      }
 
     fun setMarkdownContent(markdown: String) {
       if (currentMarkdown == markdown) return
@@ -268,6 +277,7 @@ class EnrichedMarkdown
 
     private fun createTextView(segment: RenderSegment.Text) =
       EnrichedMarkdownInternalText(context).apply {
+        spoilerMode = this@EnrichedMarkdown.spoilerMode
         setIsSelectable(selectable)
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && segment.needsJustify) {
           justificationMode = android.text.Layout.JUSTIFICATION_MODE_INTER_WORD

android/src/main/java/com/swmansion/enriched/markdown/EnrichedMarkdownInternalText.kt

@@ -7,6 +7,7 @@ import android.util.AttributeSet
 import android.view.MotionEvent
 import androidx.appcompat.widget.AppCompatTextView
 import com.swmansion.enriched.markdown.accessibility.MarkdownAccessibilityHelper
+import com.swmansion.enriched.markdown.spoiler.SpoilerMode
 import com.swmansion.enriched.markdown.spoiler.SpoilerOverlayDrawer
 import com.swmansion.enriched.markdown.utils.text.interaction.CheckboxTouchHelper
 import com.swmansion.enriched.markdown.utils.text.view.LinkLongPressMovementMethod
@@ -41,6 +42,7 @@ class EnrichedMarkdownInternalText
 
     var spoilerOverlayDrawer: SpoilerOverlayDrawer? = null
       private set
+    var spoilerMode: SpoilerMode = SpoilerMode.PARTICLES
     private var contextMenuItemTexts: List<String> = emptyList()
     private var onContextMenuItemPress: ((itemText: String, selectedText: String, selectionStart: Int, selectionEnd: Int) -> Unit)? = null
 
@@ -63,7 +65,7 @@ class EnrichedMarkdownInternalText
         movementMethod = LinkLongPressMovementMethod.createInstance()
       }
 
-      spoilerOverlayDrawer = SpoilerOverlayDrawer.setupIfNeeded(this, styledText, spoilerOverlayDrawer)
+      spoilerOverlayDrawer = SpoilerOverlayDrawer.setupIfNeeded(this, styledText, spoilerOverlayDrawer, spoilerMode)
       accessibilityHelper.invalidateAccessibilityItems()
     }
 

android/src/main/java/com/swmansion/enriched/markdown/EnrichedMarkdownManager.kt

@@ -17,6 +17,7 @@ import com.swmansion.enriched.markdown.events.LinkLongPressEvent
 import com.swmansion.enriched.markdown.events.LinkPressEvent
 import com.swmansion.enriched.markdown.events.TaskListItemPressEvent
 import com.swmansion.enriched.markdown.parser.Md4cFlags
+import com.swmansion.enriched.markdown.spoiler.SpoilerMode
 import com.swmansion.enriched.markdown.utils.common.FeatureFlags
 import com.swmansion.enriched.markdown.utils.text.interaction.TaskListToggleUtils
 
@@ -142,6 +143,14 @@ class EnrichedMarkdownManager :
     // Currently only supported with flavor="commonmark" (single TextView).
   }
 
+  @ReactProp(name = "spoilerMode")
+  override fun setSpoilerMode(
+    view: EnrichedMarkdown?,
+    mode: String?,
+  ) {
+    view?.spoilerMode = SpoilerMode.fromString(mode)
+  }
+
   @ReactProp(name = "contextMenuItems")
   override fun setContextMenuItems(
     view: EnrichedMarkdown?,

android/src/main/java/com/swmansion/enriched/markdown/EnrichedMarkdownText.kt

@@ -16,6 +16,7 @@ import com.swmansion.enriched.markdown.accessibility.MarkdownAccessibilityHelper
 import com.swmansion.enriched.markdown.parser.Md4cFlags
 import com.swmansion.enriched.markdown.parser.Parser
 import com.swmansion.enriched.markdown.renderer.Renderer
+import com.swmansion.enriched.markdown.spoiler.SpoilerMode
 import com.swmansion.enriched.markdown.spoiler.SpoilerOverlayDrawer
 import com.swmansion.enriched.markdown.styles.StyleConfig
 import com.swmansion.enriched.markdown.utils.text.TailFadeInAnimator
@@ -80,6 +81,7 @@ class EnrichedMarkdownText
     private var fadeAnimator: TailFadeInAnimator? = null
     var spoilerOverlayDrawer: SpoilerOverlayDrawer? = null
       private set
+    var spoilerMode: SpoilerMode = SpoilerMode.PARTICLES
 
     init {
       setupAsMarkdownTextView(accessibilityHelper)
@@ -236,7 +238,7 @@ class EnrichedMarkdownText
         span.registerTextView(this)
       }
 
-      spoilerOverlayDrawer = SpoilerOverlayDrawer.setupIfNeeded(this, styledText, spoilerOverlayDrawer)
+      spoilerOverlayDrawer = SpoilerOverlayDrawer.setupIfNeeded(this, styledText, spoilerOverlayDrawer, spoilerMode)
 
       layoutManager.invalidateLayout()
       accessibilityHelper.invalidateAccessibilityItems()

android/src/main/java/com/swmansion/enriched/markdown/EnrichedMarkdownTextManager.kt

@@ -17,6 +17,7 @@ import com.swmansion.enriched.markdown.events.LinkLongPressEvent
 import com.swmansion.enriched.markdown.events.LinkPressEvent
 import com.swmansion.enriched.markdown.events.TaskListItemPressEvent
 import com.swmansion.enriched.markdown.parser.Md4cFlags
+import com.swmansion.enriched.markdown.spoiler.SpoilerMode
 import com.swmansion.enriched.markdown.utils.common.FeatureFlags
 import com.swmansion.enriched.markdown.utils.text.interaction.TaskListTapUtils
 import com.swmansion.enriched.markdown.utils.text.interaction.TaskListToggleUtils
@@ -162,6 +163,14 @@ class EnrichedMarkdownTextManager :
     view?.setStreamingAnimation(streamingAnimation)
   }
 
+  @ReactProp(name = "spoilerMode")
+  override fun setSpoilerMode(
+    view: EnrichedMarkdownText?,
+    mode: String?,
+  ) {
+    view?.spoilerMode = SpoilerMode.fromString(mode)
+  }
+
   @ReactProp(name = "contextMenuItems")
   override fun setContextMenuItems(
     view: EnrichedMarkdownText?,

android/src/main/java/com/swmansion/enriched/markdown/renderer/SpanStyleCache.kt

@@ -23,9 +23,10 @@ class SpanStyleCache(
   val codeFontFamily: String = style.codeStyle.fontFamily
   val codeFontSize: Float = style.codeStyle.fontSize
   val codeColor: Int = style.codeStyle.color
-  val spoilerParticleColor: Int = style.spoilerStyle.particleColor
+  val spoilerColor: Int = style.spoilerStyle.color
   val spoilerParticleDensity: Float = style.spoilerStyle.particleDensity
   val spoilerParticleSpeed: Float = style.spoilerStyle.particleSpeed
+  val spoilerSolidBorderRadius: Float = style.spoilerStyle.solidBorderRadius
 
   private fun buildColorsToPreserve(style: StyleConfig): IntArray {
     val paragraphColor = style.paragraphStyle.color

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

@@ -0,0 +1,72 @@
+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
+
+/**
+ * Draws animated particles over unrevealed spoiler spans.
+ * On reveal, particles scatter outward and the overlay fades.
+ */
+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 = SpoilerOverlayDrawer.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()
+  }
+}

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

@@ -0,0 +1,6 @@
+package com.swmansion.enriched.markdown.spoiler
+
+data class SegmentKey(
+  val spanIdentity: Int,
+  val line: Int,
+)

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

@@ -0,0 +1,103 @@
+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
+
+/**
+ * Draws an opaque solid rectangle over unrevealed spoiler spans (Discord-style).
+ * On reveal, the rectangle fades out with a quadratic ease-out curve.
+ */
+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 = SpoilerOverlayDrawer.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()
+  }
+
+  companion object {
+    private const val REVEAL_DURATION_MS = 450L
+  }
+}

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

@@ -45,17 +45,15 @@ class SpoilerAnimator(
         lastFrameTime = currentTimeMs
 
         isIterating = true
-        var hasActiveDrawables = false
         for (drawable in drawables) {
           drawable.update(deltaTime, currentTimeMs)
-          if (drawable.hasActiveParticles()) hasActiveDrawables = true
         }
         isIterating = false
         drainPendingRemovals()
 
         textView.invalidate()
 
-        if (hasActiveDrawables || drawables.isNotEmpty()) {
+        if (drawables.isNotEmpty()) {
           Choreographer.getInstance().postFrameCallback(this)
         } else {
           running = false
@@ -87,6 +85,8 @@ class SpoilerAnimator(
   fun stop() {
     running = false
     Choreographer.getInstance().removeFrameCallback(frameCallback)
+    drawables.clear()
+    pendingRemovals.clear()
   }
 
   private fun drainPendingRemovals() {