react-native-enriched-markdown 0.1.0 → 0.2.0

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

@@ -0,0 +1,135 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Typeface
+import android.text.Layout
+import android.text.Spanned
+import android.text.TextPaint
+import android.text.style.LeadingMarginSpan
+import android.text.style.MetricAffectingSpan
+import com.swmansion.enriched.markdown.renderer.BlockStyle
+import com.swmansion.enriched.markdown.renderer.SpanStyleCache
+import com.swmansion.enriched.markdown.styles.BlockquoteStyle
+import com.swmansion.enriched.markdown.utils.applyBlockStyleFont
+import com.swmansion.enriched.markdown.utils.applyColorPreserving
+
+class BlockquoteSpan(
+  private val blockquoteStyle: BlockquoteStyle,
+  val depth: Int,
+  private val context: Context,
+  private val styleCache: SpanStyleCache,
+) : MetricAffectingSpan(),
+  LeadingMarginSpan {
+  private val levelSpacing: Float = blockquoteStyle.borderWidth + blockquoteStyle.gapWidth
+  private val blockStyle =
+    BlockStyle(
+      fontSize = blockquoteStyle.fontSize,
+      fontFamily = blockquoteStyle.fontFamily,
+      fontWeight = blockquoteStyle.fontWeight,
+      color = blockquoteStyle.color,
+    )
+
+  // Cache for shouldSkipDrawing to avoid repeated getSpans() calls during draw passes
+  private var cachedText: CharSequence? = null
+  private var cachedMaxDepthByPosition = mutableMapOf<Int, Int>()
+
+  override fun updateMeasureState(tp: TextPaint) = applyTextStyle(tp)
+
+  override fun updateDrawState(tp: TextPaint) = applyTextStyle(tp)
+
+  override fun getLeadingMargin(first: Boolean): Int = levelSpacing.toInt()
+
+  override fun drawLeadingMargin(
+    c: Canvas,
+    p: Paint,
+    x: Int,
+    dir: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    first: Boolean,
+    layout: Layout?,
+  ) {
+    // Essential check from original: only the deepest span draws to prevent over-rendering background
+    if (shouldSkipDrawing(text, start)) return
+
+    drawBackground(c, top, bottom, layout)
+
+    val borderPaint = configureBorderPaint()
+    val borderTop = top.toFloat()
+    val borderBottom = bottom.toFloat()
+    val containerLeft = layout?.getLineLeft(0) ?: 0f
+
+    for (level in 0..depth) {
+      val borderX = containerLeft + (levelSpacing * level * dir)
+      val borderRight = borderX + (blockquoteStyle.borderWidth * dir)
+      c.drawRect(borderX, borderTop, borderRight, borderBottom, borderPaint)
+    }
+  }
+
+  @SuppressLint("WrongConstant") // Result of mask is always valid: 0, 1, 2, or 3
+  private fun applyTextStyle(tp: TextPaint) {
+    tp.textSize = blockStyle.fontSize
+    val preserved = (tp.typeface?.style ?: 0) and BOLD_ITALIC_MASK
+    tp.applyBlockStyleFont(blockStyle, context)
+    if (preserved != 0) {
+      tp.typeface = Typeface.create(tp.typeface ?: Typeface.DEFAULT, preserved)
+    }
+    tp.applyColorPreserving(blockStyle.color, *styleCache.colorsToPreserve)
+  }
+
+  companion object {
+    private const val BOLD_ITALIC_MASK = Typeface.BOLD or Typeface.ITALIC
+
+    private val sharedBorderPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { style = Paint.Style.FILL }
+    private val sharedBackgroundPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { style = Paint.Style.FILL }
+  }
+
+  private fun configureBorderPaint(): Paint =
+    sharedBorderPaint.apply {
+      color = blockquoteStyle.borderColor
+    }
+
+  private fun configureBackgroundPaint(bgColor: Int): Paint =
+    sharedBackgroundPaint.apply {
+      color = bgColor
+    }
+
+  private fun shouldSkipDrawing(
+    text: CharSequence?,
+    start: Int,
+  ): Boolean {
+    if (text !is Spanned) return false
+
+    if (cachedText !== text) {
+      cachedText = text
+      cachedMaxDepthByPosition.clear()
+    }
+
+    val maxDepth =
+      cachedMaxDepthByPosition.getOrPut(start) {
+        val spans = text.getSpans(start, start + 1, BlockquoteSpan::class.java)
+        spans.maxOfOrNull { it.depth } ?: -1
+      }
+
+    return maxDepth > depth
+  }
+
+  private fun drawBackground(
+    c: Canvas,
+    top: Int,
+    bottom: Int,
+    layout: Layout?,
+  ) {
+    val bgColor = blockquoteStyle.backgroundColor?.takeIf { it != Color.TRANSPARENT } ?: return
+    val backgroundPaint = configureBackgroundPaint(bgColor)
+    c.drawRect(0f, top.toFloat(), layout?.width?.toFloat() ?: 0f, bottom.toFloat(), backgroundPaint)
+  }
+}

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

@@ -0,0 +1,180 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.RectF
+import android.text.Spanned
+import android.text.StaticLayout
+import android.text.TextPaint
+import android.text.style.LineBackgroundSpan
+import com.swmansion.enriched.markdown.styles.StyleConfig
+import kotlin.math.max
+import kotlin.math.min
+
+class CodeBackgroundSpan(
+  private val styleConfig: StyleConfig,
+) : LineBackgroundSpan {
+  companion object {
+    private const val CORNER_RADIUS = 6.0f
+    private const val BORDER_WIDTH = 1.0f
+
+    private val sharedBackgroundPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { style = Paint.Style.FILL }
+    private val sharedBorderPaint =
+      Paint(Paint.ANTI_ALIAS_FLAG).apply {
+        style = Paint.Style.STROKE
+        strokeWidth = BORDER_WIDTH
+        strokeJoin = Paint.Join.ROUND
+        strokeCap = Paint.Cap.ROUND
+      }
+  }
+
+  // Reusable drawing objects per instance
+  private val rect = RectF()
+  private val path = Path()
+
+  override fun drawBackground(
+    canvas: Canvas,
+    p: Paint,
+    left: Int,
+    right: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    text: CharSequence,
+    start: Int,
+    end: Int,
+    lineNum: Int,
+  ) {
+    if (text !is Spanned) return
+
+    val spanStart = text.getSpanStart(this)
+    val spanEnd = text.getSpanEnd(this)
+    if (spanStart !in 0 until spanEnd) return
+
+    // 1. Determine relative positioning
+    val isFirst = spanStart >= start
+    val isLast = spanEnd <= end
+
+    // 2. Calculate coordinates
+    val finalBottom = adjustBottomForMargin(text, end, bottom)
+    val startX = if (isFirst) getHorizontalOffset(text, start, end, spanStart, p) + left else left.toFloat()
+    val endX = if (isLast) getHorizontalOffset(text, start, end, spanEnd, p) + left else right.toFloat()
+
+    rect.set(min(startX, endX), top.toFloat(), max(startX, endX), finalBottom.toFloat())
+
+    // 3. Apply Style
+    val codeStyle = styleConfig.codeStyle
+    sharedBackgroundPaint.color = codeStyle.backgroundColor
+    sharedBorderPaint.color = codeStyle.borderColor
+
+    drawShapes(canvas, isFirst, isLast)
+  }
+
+  private fun getHorizontalOffset(
+    text: CharSequence,
+    lineStart: Int,
+    lineEnd: Int,
+    index: Int,
+    paint: Paint,
+  ): Float {
+    if (index <= lineStart) return 0f
+    val lineText = text.subSequence(lineStart, lineEnd)
+    val textPaint = paint as? TextPaint ?: TextPaint(paint)
+    val layout = StaticLayout.Builder.obtain(lineText, 0, lineText.length, textPaint, 10000).build()
+    return layout.getPrimaryHorizontal(index - lineStart)
+  }
+
+  private fun drawShapes(
+    canvas: Canvas,
+    isFirst: Boolean,
+    isLast: Boolean,
+  ) {
+    val radii = createRadii(isFirst, isLast)
+
+    path.reset()
+    path.addRoundRect(rect, radii, Path.Direction.CW)
+    canvas.drawPath(path, sharedBackgroundPaint)
+
+    if (isFirst && isLast) {
+      canvas.drawPath(path, sharedBorderPaint)
+    } else {
+      drawOpenBorders(canvas, isFirst, isLast)
+    }
+  }
+
+  private fun drawOpenBorders(
+    canvas: Canvas,
+    isFirst: Boolean,
+    isLast: Boolean,
+  ) {
+    val r = CORNER_RADIUS
+    path.reset()
+
+    if (isFirst) {
+      path.moveTo(rect.right, rect.top)
+      path.lineTo(rect.left + r, rect.top)
+      path.quadTo(rect.left, rect.top, rect.left, rect.top + r)
+      path.lineTo(rect.left, rect.bottom - r)
+      path.quadTo(rect.left, rect.bottom, rect.left + r, rect.bottom)
+      path.lineTo(rect.right, rect.bottom)
+    } else if (isLast) {
+      path.moveTo(rect.left, rect.top)
+      path.lineTo(rect.right - r, rect.top)
+      path.quadTo(rect.right, rect.top, rect.right, rect.top + r)
+      path.lineTo(rect.right, rect.bottom - r)
+      path.quadTo(rect.right, rect.bottom, rect.right - r, rect.bottom)
+      path.lineTo(rect.left, rect.bottom)
+    } else {
+      path.moveTo(rect.left, rect.top)
+      path.lineTo(rect.right, rect.top)
+      path.moveTo(rect.left, rect.bottom)
+      path.lineTo(rect.right, rect.bottom)
+    }
+    canvas.drawPath(path, sharedBorderPaint)
+  }
+
+  private fun createRadii(
+    isFirst: Boolean,
+    isLast: Boolean,
+  ) = when {
+    isFirst && isLast -> {
+      floatArrayOf(
+        CORNER_RADIUS,
+        CORNER_RADIUS,
+        CORNER_RADIUS,
+        CORNER_RADIUS,
+        CORNER_RADIUS,
+        CORNER_RADIUS,
+        CORNER_RADIUS,
+        CORNER_RADIUS,
+      )
+    }
+
+    isFirst -> {
+      floatArrayOf(CORNER_RADIUS, CORNER_RADIUS, 0f, 0f, 0f, 0f, CORNER_RADIUS, CORNER_RADIUS)
+    }
+
+    isLast -> {
+      floatArrayOf(0f, 0f, CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS, 0f, 0f)
+    }
+
+    else -> {
+      floatArrayOf(0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f)
+    }
+  }
+
+  private fun adjustBottomForMargin(
+    text: Spanned,
+    lineEnd: Int,
+    bottom: Int,
+  ): Int {
+    if (lineEnd <= 0 || lineEnd > text.length || text[lineEnd - 1] != '\n') return bottom
+    val marginSpans = text.getSpans(lineEnd - 1, lineEnd, MarginBottomSpan::class.java)
+    var adjusted = bottom
+    for (span in marginSpans) {
+      if (text.getSpanEnd(span) == lineEnd) adjusted -= span.marginBottom.toInt()
+    }
+    return adjusted
+  }
+}

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

@@ -0,0 +1,196 @@
+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 android.text.Spanned
+import android.text.TextPaint
+import android.text.style.LeadingMarginSpan
+import android.text.style.LineBackgroundSpan
+import android.text.style.MetricAffectingSpan
+import androidx.core.graphics.withSave
+import com.swmansion.enriched.markdown.renderer.BlockStyle
+import com.swmansion.enriched.markdown.renderer.SpanStyleCache
+import com.swmansion.enriched.markdown.styles.CodeBlockStyle
+import com.swmansion.enriched.markdown.utils.applyBlockStyleFont
+import com.swmansion.enriched.markdown.utils.applyColorPreserving
+
+class CodeBlockSpan(
+  private val codeBlockStyle: CodeBlockStyle,
+  private val context: Context,
+  private val styleCache: SpanStyleCache,
+) : MetricAffectingSpan(),
+  LineBackgroundSpan,
+  LeadingMarginSpan {
+  private val blockStyle =
+    BlockStyle(
+      fontSize = codeBlockStyle.fontSize,
+      fontFamily = codeBlockStyle.fontFamily,
+      fontWeight = codeBlockStyle.fontWeight,
+      color = codeBlockStyle.color,
+    )
+
+  private val path = Path()
+  private val rect = RectF()
+  private val arcRect = RectF()
+  private val radiiArray = FloatArray(8)
+
+  companion object {
+    private val sharedBackgroundPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { style = Paint.Style.FILL }
+    private val sharedBorderPaint =
+      Paint(Paint.ANTI_ALIAS_FLAG).apply {
+        style = Paint.Style.STROKE
+        strokeCap = Paint.Cap.BUTT
+        strokeJoin = Paint.Join.ROUND
+      }
+  }
+
+  private fun configureBackgroundPaint(): Paint =
+    sharedBackgroundPaint.apply {
+      color = codeBlockStyle.backgroundColor
+    }
+
+  private fun configureBorderPaint(): Paint =
+    sharedBorderPaint.apply {
+      strokeWidth = codeBlockStyle.borderWidth
+      color = codeBlockStyle.borderColor
+    }
+
+  override fun getLeadingMargin(first: Boolean): Int = codeBlockStyle.padding.toInt()
+
+  override fun drawLeadingMargin(
+    c: Canvas?,
+    p: Paint?,
+    x: Int,
+    dir: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    first: Boolean,
+    layout: Layout?,
+  ) { /* Leading margin is handled by getLeadingMargin */ }
+
+  override fun updateMeasureState(tp: TextPaint) = applyTextStyle(tp)
+
+  override fun updateDrawState(tp: TextPaint) = applyTextStyle(tp)
+
+  override fun drawBackground(
+    canvas: Canvas,
+    p: Paint,
+    left: Int,
+    right: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    text: CharSequence,
+    start: Int,
+    end: Int,
+    lineNum: Int,
+  ) {
+    if (text !is Spanned) return
+
+    val spanStart = text.getSpanStart(this)
+    val spanEnd = text.getSpanEnd(this)
+    if (spanStart !in 0 until spanEnd) return
+
+    val isFirstLine = start == spanStart
+    val isLastLine = end == spanEnd || (spanEnd <= end && (spanEnd == text.length || text[spanEnd - 1] == '\n'))
+
+    val inset = codeBlockStyle.borderWidth / 2f
+
+    rect.set(
+      left.toFloat() + inset,
+      top.toFloat() + (if (isFirstLine) inset else 0f),
+      right.toFloat() - inset,
+      bottom.toFloat() - (if (isLastLine) inset else 0f),
+    )
+
+    val radius = codeBlockStyle.borderRadius
+    val adjRadius = if (radius > inset) radius - inset else radius
+
+    // Reset and fill radii array based on boundary state
+    radiiArray.fill(0f)
+    if (isFirstLine) {
+      radiiArray[0] = adjRadius
+      radiiArray[1] = adjRadius // Top-Left
+      radiiArray[2] = adjRadius
+      radiiArray[3] = adjRadius // Top-Right
+    }
+    if (isLastLine) {
+      radiiArray[4] = adjRadius
+      radiiArray[5] = adjRadius // Bottom-Right
+      radiiArray[6] = adjRadius
+      radiiArray[7] = adjRadius // Bottom-Left
+    }
+
+    path.reset()
+    path.addRoundRect(rect, radiiArray, Path.Direction.CW)
+
+    val backgroundPaint = configureBackgroundPaint()
+    val borderPaint = configureBorderPaint()
+
+    canvas.withSave {
+      drawPath(path, backgroundPaint)
+
+      if (codeBlockStyle.borderWidth > 0) {
+        val bLeft = rect.left
+        val bRight = rect.right
+        val bTop = rect.top
+        val bBottom = rect.bottom
+
+        when {
+          // Case: Single-line code block
+          isFirstLine && isLastLine -> {
+            drawPath(path, borderPaint)
+          }
+
+          // Case: Top of a multi-line block
+          isFirstLine -> {
+            drawLine(bLeft + adjRadius, bTop, bRight - adjRadius, bTop, borderPaint)
+            drawLine(bLeft, bTop + adjRadius, bLeft, bBottom, borderPaint)
+            drawLine(bRight, bTop + adjRadius, bRight, bBottom, borderPaint)
+
+            arcRect.set(bLeft, bTop, bLeft + 2 * adjRadius, bTop + 2 * adjRadius)
+            drawArc(arcRect, 180f, 90f, false, borderPaint)
+
+            arcRect.set(bRight - 2 * adjRadius, bTop, bRight, bTop + 2 * adjRadius)
+            drawArc(arcRect, 270f, 90f, false, borderPaint)
+          }
+
+          // Case: Bottom of a multi-line block
+          isLastLine -> {
+            drawLine(bLeft + adjRadius, bBottom, bRight - adjRadius, bBottom, borderPaint)
+            drawLine(bLeft, bTop, bLeft, bBottom - adjRadius, borderPaint)
+            drawLine(bRight, bTop, bRight, bBottom - adjRadius, borderPaint)
+
+            arcRect.set(bLeft, bBottom - 2 * adjRadius, bLeft + 2 * adjRadius, bBottom)
+            drawArc(arcRect, 90f, 90f, false, borderPaint)
+
+            arcRect.set(bRight - 2 * adjRadius, bBottom - 2 * adjRadius, bRight, bBottom)
+            drawArc(arcRect, 0f, 90f, false, borderPaint)
+          }
+
+          // Case: Middle lines only need vertical sides
+          else -> {
+            drawLine(bLeft, bTop, bLeft, bBottom, borderPaint)
+            drawLine(bRight, bTop, bRight, bBottom, borderPaint)
+          }
+        }
+      }
+    }
+  }
+
+  private fun applyTextStyle(tp: TextPaint) {
+    tp.textSize = blockStyle.fontSize
+
+    tp.applyBlockStyleFont(blockStyle, context)
+
+    tp.applyColorPreserving(blockStyle.color, *styleCache.colorsToPreserve)
+  }
+}

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

@@ -0,0 +1,27 @@
+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
+
+class CodeSpan(
+  private val styleCache: SpanStyleCache,
+  private val blockStyle: BlockStyle,
+) : MetricAffectingSpan() {
+  override fun updateDrawState(tp: TextPaint) {
+    applyMonospacedFont(tp)
+    tp.color = styleCache.codeColor
+  }
+
+  override fun updateMeasureState(tp: TextPaint) {
+    applyMonospacedFont(tp)
+  }
+
+  private fun applyMonospacedFont(paint: TextPaint) {
+    paint.textSize = blockStyle.fontSize * 0.85f
+    val preservedStyle = (paint.typeface?.style ?: 0) and (Typeface.BOLD or Typeface.ITALIC)
+    paint.typeface = SpanStyleCache.getMonospaceTypeface(preservedStyle)
+  }
+}

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

@@ -0,0 +1,34 @@
+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 EmphasisSpan(
+  private val styleCache: SpanStyleCache,
+  private val blockStyle: BlockStyle,
+) : MetricAffectingSpan() {
+  override fun updateDrawState(tp: TextPaint) {
+    applyEmphasisStyle(tp)
+    applyEmphasisColor(tp)
+  }
+
+  override fun updateMeasureState(tp: TextPaint) {
+    applyEmphasisStyle(tp)
+  }
+
+  private fun applyEmphasisStyle(tp: TextPaint) {
+    val currentTypeface = tp.typeface ?: Typeface.DEFAULT
+    val isBold = (currentTypeface.style) and Typeface.BOLD != 0
+    val style = if (isBold) Typeface.BOLD_ITALIC else Typeface.ITALIC
+    tp.typeface = Typeface.create(currentTypeface, style)
+  }
+
+  private fun applyEmphasisColor(tp: TextPaint) {
+    val colorToUse = styleCache.getEmphasisColorFor(blockStyle.color, tp.color)
+    tp.applyColorPreserving(colorToUse, *styleCache.colorsToPreserve)
+  }
+}

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

@@ -0,0 +1,38 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.annotation.SuppressLint
+import android.graphics.Typeface
+import android.text.TextPaint
+import android.text.style.MetricAffectingSpan
+import com.swmansion.enriched.markdown.styles.StyleConfig
+
+class HeadingSpan(
+  val level: Int,
+  styleConfig: StyleConfig,
+) : MetricAffectingSpan() {
+  private val fontSize: Float = styleConfig.headingStyles[level]!!.fontSize
+  private val color: Int = styleConfig.headingStyles[level]!!.color
+  private val cachedTypeface: Typeface? = styleConfig.headingTypefaces[level]
+
+  override fun updateDrawState(tp: TextPaint) {
+    applyHeadingStyle(tp)
+    tp.color = color
+  }
+
+  override fun updateMeasureState(tp: TextPaint) {
+    applyHeadingStyle(tp)
+  }
+
+  @SuppressLint("WrongConstant") // Result of mask is always valid: 0, 1, 2, or 3
+  private fun applyHeadingStyle(tp: TextPaint) {
+    tp.textSize = fontSize
+    cachedTypeface?.let { base ->
+      val preserved = (tp.typeface?.style ?: 0) and BOLD_ITALIC_MASK
+      tp.typeface = if (preserved != 0) Typeface.create(base, preserved) else base
+    }
+  }
+
+  companion object {
+    private const val BOLD_ITALIC_MASK = Typeface.BOLD or Typeface.ITALIC
+  }
+}