@mathers101/react-native-render-rich-text 0.0.0-stage → 0.1.9

package/android/src/main/java/com/renderrichtext/spans/MarginBottomSpan.kt

@@ -0,0 +1,76 @@
+package com.renderrichtext.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/renderrichtext/spans/MentionChipSpan.kt

@@ -0,0 +1,132 @@
+package com.renderrichtext.spans
+
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.RectF
+import android.graphics.Typeface
+import android.os.Build
+import android.text.style.ReplacementSpan
+import kotlin.math.ceil
+
+/**
+ * One unbreakable chip for a mention. Material chips stay on a single line, so the
+ * whole `@name` is one replacement run: the line breaker wraps it as a unit, and the
+ * horizontal padding is part of that width rather than a separate gap that can be
+ * left behind on the previous line.
+ *
+ * Each line fragment of an iOS mention is its own rounded rect. Android does not
+ * split the chip, which is how inline people-chips behave in Material text.
+ */
+class MentionChipSpan(
+  private val backgroundColor: Int,
+  private val textColor: Int,
+  private val paddingX: Float,
+  private val paddingY: Float,
+) : ReplacementSpan() {
+  /** True while a finger is down. The movement method sets this and re-sets the span so the new fill is recorded. */
+  var pressed: Boolean = false
+
+  private val fillPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { style = Paint.Style.FILL }
+  private val rect = RectF()
+  private var cachedSource: Typeface? = null
+  private var cachedMedium: Typeface? = null
+
+  override fun getSize(
+    paint: Paint,
+    text: CharSequence,
+    start: Int,
+    end: Int,
+    fm: Paint.FontMetricsInt?,
+  ): Int {
+    var width = 0
+    paint.usingMedium {
+      if (fm != null) {
+        paint.getFontMetricsInt(fm)
+        val extra = ceil(paddingY).toInt()
+        fm.ascent -= extra
+        fm.top -= extra
+        fm.descent += extra
+        fm.bottom += extra
+      }
+      width = ceil(paint.measureText(text, start, end) + paddingX * 2f).toInt()
+    }
+    return width
+  }
+
+  override fun draw(
+    canvas: Canvas,
+    text: CharSequence,
+    start: Int,
+    end: Int,
+    x: Float,
+    top: Int,
+    y: Int,
+    bottom: Int,
+    paint: Paint,
+  ) {
+    paint.usingMedium {
+      val textWidth = paint.measureText(text, start, end)
+      val metrics = paint.fontMetrics
+      rect.set(
+        x,
+        y + metrics.ascent - paddingY,
+        x + textWidth + paddingX * 2f,
+        y + metrics.descent + paddingY,
+      )
+      val radius = 10f
+      var fill = backgroundColor
+      if (pressed) fill = darken(fill)
+      if (Color.alpha(fill) > 0) {
+        fillPaint.color = fill
+        canvas.drawRoundRect(rect, radius, radius, fillPaint)
+      }
+
+      val previousColor = paint.color
+      paint.color = textColor
+      canvas.drawText(text, start, end, x + paddingX, y.toFloat(), paint)
+      paint.color = previousColor
+    }
+  }
+
+  private fun darken(color: Int): Int =
+    Color.argb(
+      Color.alpha(color),
+      (Color.red(color) * PRESSED_DARKEN).toInt(),
+      (Color.green(color) * PRESSED_DARKEN).toInt(),
+      (Color.blue(color) * PRESSED_DARKEN).toInt(),
+    )
+
+  /**
+   * Medium is the Android weight for a name in body text. API 28 keeps the surrounding
+   * family. Older releases have no weight axis, so the face becomes sans-serif-medium.
+   */
+  private fun mediumTypeface(base: Typeface?): Typeface {
+    if (cachedMedium != null && cachedSource === base) return cachedMedium!!
+    val source = base ?: Typeface.SANS_SERIF
+    val italic = source.style and Typeface.ITALIC != 0
+    val created =
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+        Typeface.create(source, 500, italic)
+      } else {
+        Typeface.create("sans-serif-medium", if (italic) Typeface.ITALIC else Typeface.NORMAL)
+      }
+    cachedSource = base
+    cachedMedium = created
+    return created
+  }
+
+  private inline fun Paint.usingMedium(block: () -> Unit) {
+    val original = typeface
+    typeface = mediumTypeface(original)
+    try {
+      block()
+    } finally {
+      typeface = original
+    }
+  }
+
+  companion object {
+    private const val PRESSED_DARKEN = 0.82f
+  }
+}

package/android/src/main/java/com/renderrichtext/spans/MentionSpan.kt

@@ -0,0 +1,46 @@
+package com.renderrichtext.spans
+
+import android.text.TextPaint
+import android.text.style.ClickableSpan
+import android.view.View
+import com.renderrichtext.EnrichedTiptapText
+
+/**
+ * Click and long-press target for a mention. The chip span draws the glyphs, so this
+ * only supplies the text color and the gestures. No underline: a mention is a chip,
+ * not a link.
+ */
+class MentionSpan(
+  val mentionId: String,
+  val label: String,
+  private val textColor: Int,
+  private val onMentionPress: ((String, String) -> Unit)?,
+  private val onMentionLongPress: ((String, String) -> Unit)?,
+) : ClickableSpan() {
+  /** True while a finger is down on this mention. The chip's own flag is what it draws. */
+  var pressed: Boolean = false
+
+  @Volatile
+  private var longPressTriggered = false
+
+  override fun onClick(widget: View) {
+    if (longPressTriggered) {
+      longPressTriggered = false
+      return
+    }
+    onMentionPress?.invoke(mentionId, label)
+      ?: (widget as? EnrichedTiptapText)?.emitOnMentionPress(mentionId, label)
+  }
+
+  fun onLongClick(widget: View): Boolean {
+    longPressTriggered = true
+    onMentionLongPress?.invoke(mentionId, label)
+      ?: (widget as? EnrichedTiptapText)?.emitOnMentionLongPress(mentionId, label)
+    return true
+  }
+
+  override fun updateDrawState(textPaint: TextPaint) {
+    textPaint.color = textColor
+    textPaint.isUnderlineText = false
+  }
+}

package/android/src/main/java/com/renderrichtext/spans/OrderedListSpan.kt

@@ -0,0 +1,127 @@
+package com.renderrichtext.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.renderrichtext.renderer.BlockStyle
+import com.renderrichtext.renderer.SpanStyleCache
+import com.renderrichtext.styles.ListStyle
+import kotlin.math.ceil
+
+class OrderedListSpan(
+  private val listStyle: ListStyle,
+  depth: Int,
+  context: Context,
+  styleCache: SpanStyleCache,
+  drawsMarker: Boolean = true,
+  override val markerExtraWidth: Float = 0f,
+  ancestorMarkerOffset: Float = 0f,
+  parentMarkerWidth: Float? = null,
+) : 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,
+    drawsMarker = drawsMarker,
+    ancestorMarkerOffset = ancestorMarkerOffset,
+    parentMarkerWidth = parentMarkerWidth,
+  ) {
+  companion object {
+    private val sharedMarkerPaint = TextPaint().apply { isAntiAlias = true }
+
+    /** Column every bullet and numbered list reserves, wide enough for `99.`. */
+    fun defaultMarkerColumnWidth(
+      listStyle: ListStyle,
+      context: Context,
+    ): Float {
+      val paint = markerPaint(listStyle, markerTypeface(listStyle, context))
+      return listStyle.effectiveMarkerWidth(paint.measureText("99."))
+    }
+
+    /**
+     * How far the `99.` column every ordered list reserves must grow to fit each of [numbers].
+     * Whole pixels, so the Int leading margins and the float marker positions agree at every depth.
+     */
+    fun measureExtraWidth(
+      listStyle: ListStyle,
+      context: Context,
+      numbers: Iterable<Int>,
+    ): Float {
+      val paint = markerPaint(listStyle, markerTypeface(listStyle, context))
+      val default = paint.measureText("99.")
+      val widest = numbers.fold(default) { width, number -> maxOf(width, paint.measureText("$number.")) }
+      return ceil(listStyle.effectiveMarkerWidth(widest) - listStyle.effectiveMarkerWidth(default))
+    }
+
+    private fun markerTypeface(
+      listStyle: ListStyle,
+      context: Context,
+    ): Typeface =
+      applyStyles(
+        null,
+        ReactConstants.UNSET,
+        parseFontWeight(listStyle.markerFontWeight),
+        listStyle.fontFamily.takeIf { it.isNotEmpty() },
+        context.assets,
+      )
+
+    private fun markerPaint(
+      listStyle: ListStyle,
+      typeface: Typeface,
+    ): TextPaint =
+      sharedMarkerPaint.apply {
+        textSize = listStyle.fontSize
+        color = listStyle.markerColor
+        this.typeface = typeface
+      }
+  }
+
+  private val markerTypeface = markerTypeface(listStyle, context)
+  private val defaultMarkerWidth = defaultMarkerColumnWidth(listStyle, context)
+
+  override fun getMarkerWidth(): Float = defaultMarkerWidth + markerExtraWidth
+
+  override val baselineMarkerWidth: Float get() = defaultMarkerWidth
+
+  var itemNumber: Int = 1
+    private set
+
+  override fun drawMarker(
+    canvas: Canvas,
+    paint: Paint,
+    x: Int,
+    dir: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    layout: Layout?,
+    start: Int,
+  ) {
+    val markerPaint = markerPaint(listStyle, markerTypeface)
+    val text = if (dir < 0) ".$itemNumber" else "$itemNumber."
+    val textWidth = markerPaint.measureText(text)
+
+    val markerRightEdge = x + (depth * marginLeft + ancestorMarkerOffset + getMarkerWidth()) * dir
+    val markerX = if (dir > 0) markerRightEdge - textWidth else markerRightEdge
+
+    canvas.drawText(text, markerX, baseline.toFloat(), markerPaint)
+  }
+
+  fun setItemNumber(number: Int) {
+    itemNumber = number
+  }
+}

package/android/src/main/java/com/renderrichtext/spans/SpoilerSpan.kt

@@ -0,0 +1,33 @@
+package com.renderrichtext.spans
+
+import android.text.TextPaint
+import android.text.style.MetricAffectingSpan
+import com.renderrichtext.renderer.BlockStyle
+import com.renderrichtext.renderer.SpanStyleCache
+
+class SpoilerSpan(
+  val styleCache: SpanStyleCache,
+  val blockStyle: BlockStyle,
+) : MetricAffectingSpan() {
+  var revealed = false
+    private set
+  var revealing = false
+    private set
+
+  fun markRevealing() {
+    revealing = true
+  }
+
+  fun markRevealed() {
+    revealed = true
+    revealing = false
+  }
+
+  override fun updateDrawState(tp: TextPaint) {
+    tp.textSize = blockStyle.fontSize
+  }
+
+  override fun updateMeasureState(tp: TextPaint) {
+    tp.textSize = blockStyle.fontSize
+  }
+}

package/android/src/main/java/com/renderrichtext/spans/StrikethroughSpan.kt

@@ -0,0 +1,12 @@
+package com.renderrichtext.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/renderrichtext/spans/StrongSpan.kt

@@ -0,0 +1,39 @@
+package com.renderrichtext.spans
+
+import android.graphics.Typeface
+import android.text.TextPaint
+import android.text.style.MetricAffectingSpan
+import com.renderrichtext.renderer.BlockStyle
+import com.renderrichtext.renderer.SpanStyleCache
+import com.renderrichtext.utils.text.extensions.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) {
+    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 =
+      if (styleCache.strongFontFamily.isNotEmpty()) {
+        val resolvedStyle = if (styleCache.strongFontWeight == "normal") Typeface.NORMAL else style
+        styleCache.getTypeface(styleCache.strongFontFamily, resolvedStyle)
+      } else {
+        Typeface.create(currentTypeface, style)
+      }
+  }
+}

package/android/src/main/java/com/renderrichtext/spans/TaskListSpan.kt

@@ -0,0 +1,143 @@
+package com.renderrichtext.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.renderrichtext.renderer.BlockStyle
+import com.renderrichtext.renderer.SpanStyleCache
+import com.renderrichtext.styles.ListStyle
+import com.renderrichtext.styles.TaskListStyle
+
+class TaskListSpan(
+  private val taskStyle: TaskListStyle,
+  private val listStyle: ListStyle,
+  depth: Int,
+  context: Context,
+  styleCache: SpanStyleCache,
+  val taskIndex: Int,
+  val isChecked: Boolean,
+  drawsMarker: Boolean = true,
+  ancestorMarkerOffset: Float = 0f,
+  override val markerExtraWidth: Float = 0f,
+  parentMarkerWidth: Float? = null,
+) : 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,
+    drawsMarker = drawsMarker,
+    ancestorMarkerOffset = ancestorMarkerOffset,
+    parentMarkerWidth = parentMarkerWidth,
+  ) {
+  private val checkboxSize = taskStyle.checkboxSize
+  private val checkboxColumnWidth = listStyle.effectiveMarkerWidth(checkboxSize)
+  private val markerColumnWidth = checkboxColumnWidth + markerExtraWidth
+  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 val baselineMarkerWidth: Float get() = checkboxColumnWidth
+
+  override fun drawMarker(
+    canvas: Canvas,
+    paint: Paint,
+    x: Int,
+    dir: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    layout: Layout?,
+    start: Int,
+  ) {
+    val capHeight = -markerFontMetrics.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 + ancestorMarkerOffset + 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/renderrichtext/spans/TextSpan.kt

@@ -0,0 +1,26 @@
+package com.renderrichtext.spans
+
+import android.content.Context
+import android.text.TextPaint
+import android.text.style.MetricAffectingSpan
+import com.renderrichtext.renderer.BlockStyle
+import com.renderrichtext.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)
+  }
+}