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

package/android/src/main/java/com/swmansion/enriched/markdown/utils/text/interaction/TaskListTapUtils.kt

@@ -0,0 +1,249 @@
+package com.swmansion.enriched.markdown.utils.text.interaction
+
+import android.text.Spannable
+import android.text.SpannableStringBuilder
+import android.text.Spanned
+import android.text.style.ForegroundColorSpan
+import android.text.style.StrikethroughSpan
+import android.widget.TextView
+import com.swmansion.enriched.markdown.renderer.SpanStyleCache
+import com.swmansion.enriched.markdown.spans.BaseListSpan
+import com.swmansion.enriched.markdown.spans.TaskListSpan
+import com.swmansion.enriched.markdown.styles.StyleConfig
+import com.swmansion.enriched.markdown.utils.text.span.SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE
+
+data class TaskListHitTestResult(
+  val taskIndex: Int,
+  val checked: Boolean,
+  val itemText: String,
+)
+
+object TaskListToggleUtils {
+  private val TASK_PATTERN = Regex("""^([ \t]*[-*+][ \t]+)\[[ xX]]""", RegexOption.MULTILINE)
+
+  fun toggleAtIndex(
+    markdown: String,
+    index: Int,
+    checked: Boolean,
+  ): String {
+    val matches = TASK_PATTERN.findAll(markdown).toList()
+    if (index < 0 || index >= matches.size) return markdown
+
+    val match = matches[index]
+    val prefix = match.groupValues[1]
+
+    val replacement = "$prefix[${if (checked) "x" else " "}]"
+
+    return markdown.replaceRange(match.range, replacement)
+  }
+}
+
+object TaskListTapUtils {
+  fun hitTest(
+    textView: TextView,
+    rawX: Float,
+    rawY: Float,
+  ): TaskListHitTestResult? =
+    with(textView) {
+      val layout = layout ?: return null
+      val spannable = text as? Spanned ?: return null
+
+      val x = rawX.toInt() - totalPaddingLeft + scrollX
+      val y = rawY.toInt() - totalPaddingTop + scrollY
+
+      val line = layout.getLineForVertical(y)
+
+      val taskSpan =
+        spannable
+          .getSpans(
+            layout.getLineStart(line),
+            layout.getLineEnd(line),
+            TaskListSpan::class.java,
+          ).maxByOrNull { it.depth } ?: return null
+
+      val isRtl = layout.getParagraphDirection(line) == android.text.Layout.DIR_RIGHT_TO_LEFT
+      if (isRtl) {
+        val lineRight = layout.getLineRight(line).toInt()
+        val indentWidth = lineRight - layout.getParagraphRight(line).toInt()
+        if (x <= layout.width - indentWidth) return null
+      } else {
+        val lineLeft = layout.getLineLeft(line).toInt()
+        val indentWidth = layout.getParagraphLeft(line).toInt() - lineLeft
+        if (x >= indentWidth) return null
+      }
+
+      val spanStart = spannable.getSpanStart(taskSpan)
+      val spanEnd = spannable.getSpanEnd(taskSpan)
+
+      val itemText =
+        spannable
+          .subSequence(spanStart, spanEnd)
+          .toString()
+          .substringBefore('\n')
+          .trim()
+
+      return TaskListHitTestResult(
+        taskIndex = taskSpan.taskIndex,
+        checked = taskSpan.isChecked,
+        itemText = itemText,
+      )
+    }
+
+  fun updateTaskListItemCheckedState(
+    textView: TextView,
+    targetIndex: Int,
+    newChecked: Boolean,
+    styleConfig: StyleConfig,
+  ): Boolean {
+    val text = textView.text
+    if (text !is Spannable) {
+      return false
+    }
+
+    val spannable = SpannableStringBuilder(text)
+    val taskSpans = spannable.getSpans(0, spannable.length, TaskListSpan::class.java)
+
+    val targetSpan = taskSpans.firstOrNull { it.taskIndex == targetIndex }
+    if (targetSpan == null) {
+      return false
+    }
+
+    if (targetSpan.isChecked == newChecked) {
+      return true
+    }
+
+    val spanStart = spannable.getSpanStart(targetSpan)
+    val spanEnd = spannable.getSpanEnd(targetSpan)
+    val itemDepth = targetSpan.depth
+
+    val styleCache = SpanStyleCache(styleConfig)
+    val newTaskSpan =
+      TaskListSpan(
+        taskStyle = styleConfig.taskListStyle,
+        listStyle = styleConfig.listStyle,
+        depth = itemDepth,
+        context = textView.context,
+        styleCache = styleCache,
+        taskIndex = targetIndex,
+        isChecked = newChecked,
+      )
+
+    spannable.removeSpan(targetSpan)
+    spannable.setSpan(newTaskSpan, spanStart, spanEnd, SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE)
+
+    val verifySpans = spannable.getSpans(spanStart, spanEnd, TaskListSpan::class.java)
+    val verifySpan = verifySpans.firstOrNull { it.taskIndex == targetIndex }
+    if (verifySpan == null || verifySpan.isChecked != newChecked) {
+      return false
+    }
+
+    val taskStyle = styleConfig.taskListStyle
+    val checkedTextColor = taskStyle.checkedTextColor
+    val strikethrough = taskStyle.checkedStrikethrough
+
+    val excludedRanges =
+      spannable
+        .getSpans(spanStart, spanEnd, BaseListSpan::class.java)
+        .filter { it.depth > itemDepth }
+        .map { spannable.getSpanStart(it) to spannable.getSpanEnd(it) }
+        .sortedBy { it.first }
+
+    applyDecorationsToRanges(
+      spannable = spannable,
+      spanStart = spanStart,
+      spanEnd = spanEnd,
+      excludedRanges = excludedRanges,
+      isChecked = newChecked,
+      checkedTextColor = checkedTextColor,
+      strikethrough = strikethrough,
+      styleConfig = styleConfig,
+    )
+
+    val imageSpans = text.getSpans(0, text.length, com.swmansion.enriched.markdown.spans.ImageSpan::class.java).toList()
+    val originalSpanStarts = imageSpans.associateWith { text.getSpanStart(it) }
+
+    textView.text = spannable
+
+    val newImageSpans = spannable.getSpans(0, spannable.length, com.swmansion.enriched.markdown.spans.ImageSpan::class.java)
+    imageSpans.forEach { originalSpan ->
+      val matchingSpan =
+        newImageSpans.firstOrNull {
+          it.imageUrl == originalSpan.imageUrl &&
+            spannable.getSpanStart(it) == originalSpanStarts[originalSpan]
+        }
+      (matchingSpan ?: originalSpan).registerTextView(textView)
+    }
+
+    textView.invalidate()
+
+    return true
+  }
+
+  private fun applyDecorationsToRanges(
+    spannable: Spannable,
+    spanStart: Int,
+    spanEnd: Int,
+    excludedRanges: List<Pair<Int, Int>>,
+    isChecked: Boolean,
+    checkedTextColor: Int,
+    strikethrough: Boolean,
+    styleConfig: StyleConfig,
+  ) {
+    var currentPos = spanStart
+    for ((start, end) in excludedRanges) {
+      if (start > currentPos) {
+        if (isChecked) {
+          applyCheckedSpans(spannable, currentPos, start, checkedTextColor, strikethrough)
+        } else {
+          removeCheckedSpans(spannable, currentPos, start, styleConfig)
+        }
+      }
+      currentPos = maxOf(currentPos, end)
+    }
+    if (currentPos < spanEnd) {
+      if (isChecked) {
+        applyCheckedSpans(spannable, currentPos, spanEnd, checkedTextColor, strikethrough)
+      } else {
+        removeCheckedSpans(spannable, currentPos, spanEnd, styleConfig)
+      }
+    }
+  }
+
+  private fun applyCheckedSpans(
+    spannable: Spannable,
+    start: Int,
+    end: Int,
+    color: Int,
+    strikethrough: Boolean,
+  ) {
+    if (color != 0) {
+      spannable.setSpan(ForegroundColorSpan(color), start, end, SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE)
+    }
+    if (strikethrough) {
+      spannable.setSpan(StrikethroughSpan(), start, end, SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE)
+    }
+  }
+
+  private fun removeCheckedSpans(
+    spannable: Spannable,
+    start: Int,
+    end: Int,
+    styleConfig: StyleConfig,
+  ) {
+    val strikethroughSpans = spannable.getSpans(start, end, StrikethroughSpan::class.java)
+    strikethroughSpans.forEach { spannable.removeSpan(it) }
+
+    val colorSpans = spannable.getSpans(start, end, ForegroundColorSpan::class.java)
+    colorSpans.forEach { spannable.removeSpan(it) }
+
+    val listStyleColor = styleConfig.listStyle.color
+    if (listStyleColor != 0) {
+      spannable.setSpan(
+        ForegroundColorSpan(listStyleColor),
+        start,
+        end,
+        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE,
+      )
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/utils/text/span/BlockSpacing.kt

@@ -0,0 +1,89 @@
+package com.swmansion.enriched.markdown.utils.text.span
+
+import android.text.SpannableStringBuilder
+import com.swmansion.enriched.markdown.spans.ImageSpan
+import com.swmansion.enriched.markdown.spans.LineHeightSpan
+import com.swmansion.enriched.markdown.spans.MarginBottomSpan
+import com.swmansion.enriched.markdown.utils.text.span.SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE
+import android.text.style.LineHeightSpan as AndroidLineHeightSpan
+
+fun createLineHeightSpan(lineHeight: Float): AndroidLineHeightSpan = LineHeightSpan(lineHeight)
+
+/**
+ * Applies [LineHeightSpan] to [start]..[end] but skips ranges occupied by
+ * block [ImageSpan]s (and their trailing '\n'). Without this, the fixed line
+ * height would re-clamp the metrics that [ImageSpan.chooseHeight] expanded,
+ * causing the image to overflow downward and overlap subsequent content.
+ */
+fun applyLineHeightSkippingImages(
+  builder: SpannableStringBuilder,
+  start: Int,
+  end: Int,
+  lineHeight: Float,
+) {
+  val blockImageRanges =
+    builder
+      .getSpans(start, end, ImageSpan::class.java)
+      .filter { !it.isInline }
+      .map { builder.getSpanStart(it) to builder.getSpanEnd(it) }
+      .sortedBy { it.first }
+
+  var pos = start
+  for ((imgStart, imgEnd) in blockImageRanges) {
+    if (pos < imgStart) {
+      builder.setSpan(
+        createLineHeightSpan(lineHeight),
+        pos,
+        imgStart,
+        SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
+      )
+    }
+    val skipEnd = if (imgEnd < end && builder[imgEnd] == '\n') imgEnd + 1 else imgEnd
+    pos = maxOf(pos, skipEnd)
+  }
+  if (pos < end) {
+    builder.setSpan(
+      createLineHeightSpan(lineHeight),
+      pos,
+      end,
+      SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
+    )
+  }
+}
+
+fun applyMarginTop(
+  builder: SpannableStringBuilder,
+  insertionPoint: Int,
+  marginTop: Float,
+) {
+  if (marginTop <= 0) return
+
+  // Insert a newline character to act as a vertical spacer
+  builder.insert(insertionPoint, "\n")
+
+  // Apply MarginBottomSpan to the spacer character to create the gap before the content
+  builder.setSpan(
+    MarginBottomSpan(marginTop),
+    insertionPoint,
+    insertionPoint + 1,
+    SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
+  )
+}
+
+fun applyMarginBottom(
+  builder: SpannableStringBuilder,
+  marginBottom: Float,
+) {
+  val spacerStart = builder.length
+  builder.append("\n")
+  // Always create a MarginBottomSpan, even when marginBottom = 0.
+  // This ensures removeTrailingMargin can correctly identify the LAST element's
+  // margin value. Without a span on the last element, it would pick up a previous
+  // element's span (e.g. blockquote with marginBottom: 16) and use that wrong value.
+  builder.setSpan(
+    MarginBottomSpan(marginBottom),
+    spacerStart,
+    builder.length,
+    SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
+  )
+}

package/android/src/main/java/com/swmansion/enriched/markdown/utils/text/span/SpanFlags.kt

@@ -0,0 +1,17 @@
+package com.swmansion.enriched.markdown.utils.text.span
+
+import android.text.SpannableString
+import android.text.Spanned
+
+const val SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE = SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE
+
+/**
+ * `SPAN_EXCLUSIVE_EXCLUSIVE` with the maximum span priority.
+ *
+ * Higher-priority spans are iterated — and therefore drawn — first, so any
+ * lower-priority span on the same line ends up painted *on top* visually.
+ * Use this for full-width container backgrounds (e.g. blockquote fill in
+ * [BlockquoteSpan]) that must sit under inline pill/chip backgrounds.
+ */
+const val SPAN_FLAGS_CONTAINER_BACKGROUND =
+  Spanned.SPAN_EXCLUSIVE_EXCLUSIVE or Spanned.SPAN_PRIORITY

package/android/src/main/java/com/swmansion/enriched/markdown/utils/text/view/LinkEvents.kt

@@ -0,0 +1,43 @@
+package com.swmansion.enriched.markdown.utils.text.view
+
+import android.view.MotionEvent
+import android.view.View
+import android.widget.TextView
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.NativeGestureUtil
+import com.swmansion.enriched.markdown.events.LinkLongPressEvent
+import com.swmansion.enriched.markdown.events.LinkPressEvent
+
+fun View.emitLinkPressEvent(url: String) {
+  val reactContext = context as? ReactContext ?: return
+  val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+  val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+  dispatcher?.dispatchEvent(LinkPressEvent(surfaceId, id, url))
+}
+
+fun View.emitLinkLongPressEvent(url: String) {
+  val reactContext = context as? ReactContext ?: return
+  val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+  val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+  dispatcher?.dispatchEvent(LinkLongPressEvent(surfaceId, id, url))
+}
+
+/**
+ * Cancels the JS touch for an active link tap, preventing parent
+ * Pressable/TouchableOpacity from firing onPress for the same tap.
+ */
+fun TextView.cancelJSTouchForLinkTap(event: MotionEvent) {
+  val currentMovementMethod = movementMethod
+  if (currentMovementMethod is LinkLongPressMovementMethod && currentMovementMethod.isLinkTouchActive) {
+    NativeGestureUtil.notifyNativeGestureStarted(this, event)
+  }
+}
+
+/**
+ * Cancels the JS touch unconditionally, preventing parent
+ * Pressable/TouchableOpacity from firing onPress for the same gesture.
+ */
+fun View.cancelJSTouchForCheckboxTap(event: MotionEvent) {
+  NativeGestureUtil.notifyNativeGestureStarted(this, event)
+}

package/android/src/main/java/com/swmansion/enriched/markdown/utils/text/view/LinkLongPressMovementMethod.kt

@@ -0,0 +1,187 @@
+package com.swmansion.enriched.markdown.utils.text.view
+
+import android.os.Handler
+import android.os.Looper
+import android.text.Selection
+import android.text.Spannable
+import android.text.method.LinkMovementMethod
+import android.view.MotionEvent
+import android.view.ViewConfiguration
+import android.widget.TextView
+import com.swmansion.enriched.markdown.spans.LinkSpan
+import com.swmansion.enriched.markdown.spans.SpoilerSpan
+import com.swmansion.enriched.markdown.spoiler.SpoilerCapable
+import kotlin.math.abs
+
+class LinkLongPressMovementMethod : LinkMovementMethod() {
+  private val handler = Handler(Looper.getMainLooper())
+  private var longPressRunnable: Runnable? = null
+
+  private var startX = 0f
+  private var startY = 0f
+
+  var isLinkTouchActive: Boolean = false
+    private set
+
+  override fun onTouchEvent(
+    widget: TextView,
+    buffer: Spannable,
+    event: MotionEvent,
+  ): Boolean {
+    when (event.action) {
+      MotionEvent.ACTION_DOWN -> {
+        startX = event.x
+        startY = event.y
+
+        val span = findLinkSpan(widget, buffer, event)
+        isLinkTouchActive = span != null
+        span?.let { scheduleLongPress(widget, it) }
+      }
+
+      MotionEvent.ACTION_MOVE -> {
+        val config = ViewConfiguration.get(widget.context)
+        if (abs(event.x - startX) > config.scaledTouchSlop ||
+          abs(event.y - startY) > config.scaledTouchSlop
+        ) {
+          cancelLongPress()
+          isLinkTouchActive = false
+        }
+      }
+
+      MotionEvent.ACTION_UP -> {
+        cancelLongPress()
+        isLinkTouchActive = false
+        if (widget.hasSelection()) {
+          Selection.removeSelection(buffer)
+        }
+        if (handleSpoilerTap(widget, buffer, event)) {
+          Selection.removeSelection(buffer)
+          return true
+        }
+      }
+
+      MotionEvent.ACTION_CANCEL -> {
+        cancelLongPress()
+        isLinkTouchActive = false
+        if (widget.hasSelection()) {
+          Selection.removeSelection(buffer)
+        }
+      }
+    }
+
+    val result = super.onTouchEvent(widget, buffer, event)
+
+    // LinkMovementMethod sets a Selection highlight around the link on ACTION_DOWN,
+    // which causes a visible selection color on the link text while pressed.
+    // We remove that selection immediately so the user never sees it.
+    if (event.action == MotionEvent.ACTION_DOWN) {
+      Selection.removeSelection(buffer)
+    }
+
+    return result
+  }
+
+  private fun scheduleLongPress(
+    widget: TextView,
+    span: LinkSpan,
+  ) {
+    cancelLongPress()
+
+    longPressRunnable =
+      Runnable {
+        if (widget.hasSelection()) {
+          Selection.removeSelection(widget.text as Spannable)
+        }
+        // Execute the long click logic on the span
+        if (span.onLongClick(widget)) {
+          // If consumed, cancel the system's own long-press logic (like context menus)
+          widget.cancelLongPress()
+        }
+        longPressRunnable = null
+      }.also {
+        handler.postDelayed(it, ViewConfiguration.getLongPressTimeout().toLong())
+      }
+  }
+
+  private fun cancelLongPress() {
+    longPressRunnable?.let(handler::removeCallbacks)
+    longPressRunnable = null
+  }
+
+  private fun charOffsetAt(
+    widget: TextView,
+    event: MotionEvent,
+  ): Int? {
+    val x = event.x.toInt() - widget.totalPaddingLeft + widget.scrollX
+    val y = event.y.toInt() - widget.totalPaddingTop + widget.scrollY
+    val layout = widget.layout ?: return null
+    return layout.getOffsetForHorizontal(layout.getLineForVertical(y), x.toFloat())
+  }
+
+  private fun findLinkSpan(
+    widget: TextView,
+    buffer: Spannable,
+    event: MotionEvent,
+  ): LinkSpan? {
+    val offset = charOffsetAt(widget, event) ?: return null
+    return buffer.getSpans(offset, offset, LinkSpan::class.java).firstOrNull()
+  }
+
+  private fun handleSpoilerTap(
+    widget: TextView,
+    buffer: Spannable,
+    event: MotionEvent,
+  ): Boolean {
+    val offset = charOffsetAt(widget, event) ?: return false
+    val tappedSpan =
+      buffer
+        .getSpans(offset, offset, SpoilerSpan::class.java)
+        .firstOrNull { !it.revealed && !it.revealing } ?: return false
+
+    val drawer = (widget as? SpoilerCapable)?.spoilerOverlayDrawer ?: return false
+    val spans = expandContiguousSpoilers(buffer, tappedSpan)
+    val remaining = intArrayOf(spans.size)
+
+    for (span in spans) {
+      drawer.revealSpan(span) {
+        remaining[0]--
+        if (remaining[0] <= 0) widget.invalidate()
+      }
+    }
+    widget.invalidate()
+    return true
+  }
+
+  private fun expandContiguousSpoilers(
+    buffer: Spannable,
+    seed: SpoilerSpan,
+  ): List<SpoilerSpan> {
+    val allSpans = buffer.getSpans(0, buffer.length, SpoilerSpan::class.java)
+    if (allSpans.size <= 1) return listOf(seed)
+
+    val result = mutableSetOf(seed)
+    var rangeStart = buffer.getSpanStart(seed)
+    var rangeEnd = buffer.getSpanEnd(seed)
+    var changed = true
+    while (changed) {
+      changed = false
+      for (span in allSpans) {
+        if (span in result) continue
+        val spanStart = buffer.getSpanStart(span)
+        val spanEnd = buffer.getSpanEnd(span)
+        if (spanEnd >= rangeStart && spanStart <= rangeEnd) {
+          result.add(span)
+          if (spanStart < rangeStart) rangeStart = spanStart
+          if (spanEnd > rangeEnd) rangeEnd = spanEnd
+          changed = true
+        }
+      }
+    }
+    return result.sortedBy { buffer.getSpanStart(it) }
+  }
+
+  companion object {
+    @JvmStatic
+    fun createInstance(): LinkLongPressMovementMethod = LinkLongPressMovementMethod()
+  }
+}