react-native-enriched-markdown 0.1.0 → 0.2.0

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

@@ -0,0 +1,69 @@
+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 fun configureBulletPaint(): Paint =
+    sharedBulletPaint.apply {
+      color = listStyle.bulletColor
+    }
+
+  override fun getMarkerWidth(): Float = radius
+
+  override fun drawMarker(
+    c: Canvas,
+    p: Paint,
+    x: Int,
+    dir: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    layout: Layout?,
+    start: Int,
+  ) {
+    val bulletPaint = configureBulletPaint()
+
+    // Calculate bullet position based on depth
+    // depth 0: radius, depth 1: marginLeft + radius, etc.
+    val bulletX = (depth * marginLeft + radius) * dir
+
+    // Vertical centering based on font metrics
+    val fm = p.fontMetrics
+    val bulletY = baseline + (fm.ascent + fm.descent) / 2f
+
+    c.drawCircle(bulletX, bulletY, radius, bulletPaint)
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/BaseBlockStyle.kt

@@ -0,0 +1,11 @@
+package com.swmansion.enriched.markdown.styles
+
+interface BaseBlockStyle {
+  val fontSize: Float
+  val fontFamily: String
+  val fontWeight: String
+  val color: Int
+  val marginTop: Float
+  val marginBottom: Float
+  val lineHeight: Float
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/BlockquoteStyle.kt

@@ -0,0 +1,51 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class BlockquoteStyle(
+  override val fontSize: Float,
+  override val fontFamily: String,
+  override val fontWeight: String,
+  override val color: Int,
+  override val marginTop: Float,
+  override val marginBottom: Float,
+  override val lineHeight: Float,
+  val borderColor: Int,
+  val borderWidth: Float,
+  val gapWidth: Float,
+  val backgroundColor: Int?,
+) : BaseBlockStyle {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): BlockquoteStyle {
+      val fontSize = parser.toPixelFromSP(map.getDouble("fontSize").toFloat())
+      val fontFamily = parser.parseString(map, "fontFamily")
+      val fontWeight = parser.parseString(map, "fontWeight", "normal")
+      val color = parser.parseColor(map, "color")
+      val marginTop = parser.toPixelFromDIP(map.getDouble("marginTop").toFloat())
+      val marginBottom = parser.toPixelFromDIP(map.getDouble("marginBottom").toFloat())
+      val lineHeightRaw = map.getDouble("lineHeight").toFloat()
+      val lineHeight = parser.toPixelFromSP(lineHeightRaw)
+      val borderColor = parser.parseColor(map, "borderColor")
+      val borderWidth = parser.toPixelFromDIP(map.getDouble("borderWidth").toFloat())
+      val gapWidth = parser.toPixelFromDIP(map.getDouble("gapWidth").toFloat())
+      val backgroundColor = parser.parseOptionalColor(map, "backgroundColor")
+
+      return BlockquoteStyle(
+        fontSize,
+        fontFamily,
+        fontWeight,
+        color,
+        marginTop,
+        marginBottom,
+        lineHeight,
+        borderColor,
+        borderWidth,
+        gapWidth,
+        backgroundColor,
+      )
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/CodeBlockStyle.kt

@@ -0,0 +1,54 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class CodeBlockStyle(
+  override val fontSize: Float,
+  override val fontFamily: String,
+  override val fontWeight: String,
+  override val color: Int,
+  override val marginTop: Float,
+  override val marginBottom: Float,
+  override val lineHeight: Float,
+  val backgroundColor: Int,
+  val borderColor: Int,
+  val borderRadius: Float,
+  val borderWidth: Float,
+  val padding: Float,
+) : BaseBlockStyle {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): CodeBlockStyle {
+      val fontSize = parser.toPixelFromSP(map.getDouble("fontSize").toFloat())
+      val fontFamily = parser.parseString(map, "fontFamily")
+      val fontWeight = parser.parseString(map, "fontWeight", "normal")
+      val color = parser.parseColor(map, "color")
+      val marginTop = parser.toPixelFromDIP(map.getDouble("marginTop").toFloat())
+      val marginBottom = parser.toPixelFromDIP(map.getDouble("marginBottom").toFloat())
+      val lineHeightRaw = map.getDouble("lineHeight").toFloat()
+      val lineHeight = parser.toPixelFromSP(lineHeightRaw)
+      val backgroundColor = parser.parseColor(map, "backgroundColor")
+      val borderColor = parser.parseColor(map, "borderColor")
+      val borderRadius = parser.toPixelFromDIP(map.getDouble("borderRadius").toFloat())
+      val borderWidth = parser.toPixelFromDIP(map.getDouble("borderWidth").toFloat())
+      val padding = parser.toPixelFromDIP(map.getDouble("padding").toFloat())
+
+      return CodeBlockStyle(
+        fontSize,
+        fontFamily,
+        fontWeight,
+        color,
+        marginTop,
+        marginBottom,
+        lineHeight,
+        backgroundColor,
+        borderColor,
+        borderRadius,
+        borderWidth,
+        padding,
+      )
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/CodeStyle.kt

@@ -0,0 +1,21 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class CodeStyle(
+  val color: Int,
+  val backgroundColor: Int,
+  val borderColor: Int,
+) {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): CodeStyle {
+      val color = parser.parseColor(map, "color")
+      val backgroundColor = parser.parseColor(map, "backgroundColor")
+      val borderColor = parser.parseColor(map, "borderColor")
+      return CodeStyle(color, backgroundColor, borderColor)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/EmphasisStyle.kt

@@ -0,0 +1,17 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class EmphasisStyle(
+  val color: Int?,
+) {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): EmphasisStyle {
+      val color = parser.parseOptionalColor(map, "color")
+      return EmphasisStyle(color)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/HeadingStyle.kt

@@ -0,0 +1,33 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class HeadingStyle(
+  override val fontSize: Float,
+  override val fontFamily: String,
+  override val fontWeight: String,
+  override val color: Int,
+  override val marginTop: Float,
+  override val marginBottom: Float,
+  override val lineHeight: Float,
+  val textAlign: TextAlignment,
+) : BaseBlockStyle {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): HeadingStyle {
+      val fontSize = parser.toPixelFromSP(map.getDouble("fontSize").toFloat())
+      val fontFamily = parser.parseString(map, "fontFamily")
+      val fontWeight = parser.parseString(map, "fontWeight", "normal")
+      val color = parser.parseColor(map, "color")
+      val marginTop = parser.toPixelFromDIP(map.getDouble("marginTop").toFloat())
+      val marginBottom = parser.toPixelFromDIP(map.getDouble("marginBottom").toFloat())
+      val lineHeightRaw = map.getDouble("lineHeight").toFloat()
+      val lineHeight = parser.toPixelFromSP(lineHeightRaw)
+      val textAlign = parser.parseTextAlign(map, "textAlign")
+
+      return HeadingStyle(fontSize, fontFamily, fontWeight, color, marginTop, marginBottom, lineHeight, textAlign)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/ImageStyle.kt

@@ -0,0 +1,23 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class ImageStyle(
+  val height: Float,
+  val borderRadius: Float,
+  val marginTop: Float,
+  val marginBottom: Float,
+) {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): ImageStyle {
+      val height = parser.toPixelFromDIP(map.getDouble("height").toFloat())
+      val borderRadius = parser.toPixelFromDIP(map.getDouble("borderRadius").toFloat())
+      val marginTop = parser.toPixelFromDIP(map.getDouble("marginTop").toFloat())
+      val marginBottom = parser.toPixelFromDIP(map.getDouble("marginBottom").toFloat())
+      return ImageStyle(height, borderRadius, marginTop, marginBottom)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/InlineImageStyle.kt

@@ -0,0 +1,17 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class InlineImageStyle(
+  val size: Float,
+) {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): InlineImageStyle {
+      val size = parser.toPixelFromDIP(map.getDouble("size").toFloat())
+      return InlineImageStyle(size)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/LinkStyle.kt

@@ -0,0 +1,19 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class LinkStyle(
+  val color: Int,
+  val underline: Boolean,
+) {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): LinkStyle {
+      val color = parser.parseColor(map, "color")
+      val underline = map.getBoolean("underline")
+      return LinkStyle(color, underline)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/ListStyle.kt

@@ -0,0 +1,57 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class ListStyle(
+  override val fontSize: Float,
+  override val fontFamily: String,
+  override val fontWeight: String,
+  override val color: Int,
+  override val marginTop: Float,
+  override val marginBottom: Float,
+  override val lineHeight: Float,
+  val bulletColor: Int,
+  val bulletSize: Float,
+  val markerColor: Int,
+  val markerFontWeight: String,
+  val gapWidth: Float,
+  val marginLeft: Float,
+) : BaseBlockStyle {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): ListStyle {
+      val fontSize = parser.toPixelFromSP(map.getDouble("fontSize").toFloat())
+      val fontFamily = parser.parseString(map, "fontFamily")
+      val fontWeight = parser.parseString(map, "fontWeight", "normal")
+      val color = parser.parseColor(map, "color")
+      val marginTop = parser.toPixelFromDIP(map.getDouble("marginTop").toFloat())
+      val marginBottom = parser.toPixelFromDIP(map.getDouble("marginBottom").toFloat())
+      val lineHeightRaw = map.getDouble("lineHeight").toFloat()
+      val lineHeight = parser.toPixelFromSP(lineHeightRaw)
+      val bulletColor = parser.parseColor(map, "bulletColor")
+      val bulletSize = parser.toPixelFromDIP(map.getDouble("bulletSize").toFloat())
+      val markerColor = parser.parseColor(map, "markerColor")
+      val markerFontWeight = parser.parseString(map, "markerFontWeight", "normal")
+      val gapWidth = parser.toPixelFromDIP(map.getDouble("gapWidth").toFloat())
+      val marginLeft = parser.toPixelFromDIP(map.getDouble("marginLeft").toFloat())
+
+      return ListStyle(
+        fontSize,
+        fontFamily,
+        fontWeight,
+        color,
+        marginTop,
+        marginBottom,
+        lineHeight,
+        bulletColor,
+        bulletSize,
+        markerColor,
+        markerFontWeight,
+        gapWidth,
+        marginLeft,
+      )
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/ParagraphStyle.kt

@@ -0,0 +1,33 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class ParagraphStyle(
+  override val fontSize: Float,
+  override val fontFamily: String,
+  override val fontWeight: String,
+  override val color: Int,
+  override val marginTop: Float,
+  override val marginBottom: Float,
+  override val lineHeight: Float,
+  val textAlign: TextAlignment,
+) : BaseBlockStyle {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): ParagraphStyle {
+      val fontSize = parser.toPixelFromSP(map.getDouble("fontSize").toFloat())
+      val fontFamily = parser.parseString(map, "fontFamily")
+      val fontWeight = parser.parseString(map, "fontWeight", "normal")
+      val color = parser.parseColor(map, "color")
+      val marginTop = parser.toPixelFromDIP(map.getDouble("marginTop").toFloat())
+      val marginBottom = parser.toPixelFromDIP(map.getDouble("marginBottom").toFloat())
+      val lineHeightRaw = map.getDouble("lineHeight").toFloat()
+      val lineHeight = parser.toPixelFromSP(lineHeightRaw)
+      val textAlign = parser.parseTextAlign(map, "textAlign")
+
+      return ParagraphStyle(fontSize, fontFamily, fontWeight, color, marginTop, marginBottom, lineHeight, textAlign)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/StrikethroughStyle.kt

@@ -0,0 +1,17 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class StrikethroughStyle(
+  val color: Int,
+) {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): StrikethroughStyle {
+      val color = parser.parseColor(map, "color")
+      return StrikethroughStyle(color)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/StrongStyle.kt

@@ -0,0 +1,17 @@
+package com.swmansion.enriched.markdown.styles
+
+import com.facebook.react.bridge.ReadableMap
+
+data class StrongStyle(
+  val color: Int?,
+) {
+  companion object {
+    fun fromReadableMap(
+      map: ReadableMap,
+      parser: StyleParser,
+    ): StrongStyle {
+      val color = parser.parseOptionalColor(map, "color")
+      return StrongStyle(color)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/styles/StyleConfig.kt

@@ -0,0 +1,211 @@
+package com.swmansion.enriched.markdown.styles
+
+import android.content.Context
+import android.content.res.AssetManager
+import android.graphics.Typeface
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.common.ReactConstants
+import com.facebook.react.views.text.ReactTypefaceUtils.applyStyles
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
+
+/**
+ * Main style configuration class that parses and caches all markdown element styles.
+ * Uses lazy initialization to defer parsing until styles are actually needed,
+ * improving startup time for documents that don't use all markdown features.
+ */
+class StyleConfig(
+  private val style: ReadableMap,
+  context: Context,
+  allowFontScaling: Boolean,
+  maxFontSizeMultiplier: Float,
+) {
+  private val styleParser = StyleParser(context, allowFontScaling, maxFontSizeMultiplier)
+  private val assets: AssetManager = context.assets
+
+  val paragraphStyle: ParagraphStyle by lazy {
+    val map =
+      requireNotNull(style.getMap("paragraph")) {
+        "Paragraph style not found. JS should always provide defaults."
+      }
+    ParagraphStyle.fromReadableMap(map, styleParser)
+  }
+
+  val headingStyles: Array<HeadingStyle?> by lazy {
+    Array(7) { index ->
+      if (index == 0) {
+        null
+      } else {
+        val levelKey = "h$index"
+        val map =
+          requireNotNull(style.getMap(levelKey)) {
+            "Style for $levelKey not found. JS should always provide defaults."
+          }
+        HeadingStyle.fromReadableMap(map, styleParser)
+      }
+    }
+  }
+
+  // Cache typefaces for heading levels (1-6) - lazily initialized after headingStyles
+  // Uses React Native's applyStyles to properly load custom fonts from assets
+  val headingTypefaces: Array<Typeface?> by lazy {
+    Array(7) { level ->
+      if (level == 0) {
+        null
+      } else {
+        val headingStyle = headingStyles[level]
+        val fontFamily = headingStyle?.fontFamily?.takeIf { it.isNotEmpty() }
+        val fontWeight = parseFontWeight(headingStyle?.fontWeight)
+
+        if (fontFamily != null) {
+          // Use applyStyles with null base typeface to load from assets via ReactFontManager
+          applyStyles(null, ReactConstants.UNSET, fontWeight, fontFamily, assets)
+        } else {
+          null
+        }
+      }
+    }
+  }
+
+  val linkStyle: LinkStyle by lazy {
+    val map =
+      requireNotNull(style.getMap("link")) {
+        "Link style not found. JS should always provide defaults."
+      }
+    LinkStyle.fromReadableMap(map, styleParser)
+  }
+
+  val strongStyle: StrongStyle by lazy {
+    val map =
+      requireNotNull(style.getMap("strong")) {
+        "Strong style not found. JS should always provide defaults."
+      }
+    StrongStyle.fromReadableMap(map, styleParser)
+  }
+
+  val emphasisStyle: EmphasisStyle by lazy {
+    val map =
+      requireNotNull(style.getMap("em")) {
+        "Emphasis style not found. JS should always provide defaults."
+      }
+    EmphasisStyle.fromReadableMap(map, styleParser)
+  }
+
+  val strikethroughStyle: StrikethroughStyle by lazy {
+    val map =
+      requireNotNull(style.getMap("strikethrough")) {
+        "Strikethrough style not found. JS should always provide defaults."
+      }
+    StrikethroughStyle.fromReadableMap(map, styleParser)
+  }
+
+  val underlineStyle: UnderlineStyle by lazy {
+    val map =
+      requireNotNull(style.getMap("underline")) {
+        "Underline style not found. JS should always provide defaults."
+      }
+    UnderlineStyle.fromReadableMap(map, styleParser)
+  }
+
+  val codeStyle: CodeStyle by lazy {
+    val map =
+      requireNotNull(style.getMap("code")) {
+        "Code style not found. JS should always provide defaults."
+      }
+    CodeStyle.fromReadableMap(map, styleParser)
+  }
+
+  val imageStyle: ImageStyle by lazy {
+    val map =
+      requireNotNull(style.getMap("image")) {
+        "Image style not found. JS should always provide defaults."
+      }
+    ImageStyle.fromReadableMap(map, styleParser)
+  }
+
+  val inlineImageStyle: InlineImageStyle by lazy {
+    val map =
+      requireNotNull(style.getMap("inlineImage")) {
+        "InlineImage style not found. JS should always provide defaults."
+      }
+    InlineImageStyle.fromReadableMap(map, styleParser)
+  }
+
+  val blockquoteStyle: BlockquoteStyle by lazy {
+    val map =
+      requireNotNull(style.getMap("blockquote")) {
+        "Blockquote style not found. JS should always provide defaults."
+      }
+    BlockquoteStyle.fromReadableMap(map, styleParser)
+  }
+
+  val listStyle: ListStyle by lazy {
+    val map =
+      requireNotNull(style.getMap("list")) {
+        "List style not found. JS should always provide defaults."
+      }
+    ListStyle.fromReadableMap(map, styleParser)
+  }
+
+  val codeBlockStyle: CodeBlockStyle by lazy {
+    val map =
+      requireNotNull(style.getMap("codeBlock")) {
+        "CodeBlock style not found. JS should always provide defaults."
+      }
+    CodeBlockStyle.fromReadableMap(map, styleParser)
+  }
+
+  val thematicBreakStyle: ThematicBreakStyle by lazy {
+    val map =
+      requireNotNull(style.getMap("thematicBreak")) {
+        "ThematicBreak style not found. JS should always provide defaults."
+      }
+    ThematicBreakStyle.fromReadableMap(map, styleParser)
+  }
+
+  /**
+   * Returns true if any paragraph or heading style uses justify alignment.
+   * Used to enable justification mode on the TextView (API 26+).
+   */
+  val needsJustify: Boolean by lazy {
+    paragraphStyle.textAlign.needsJustify ||
+      headingStyles.filterNotNull().any { it.textAlign.needsJustify }
+  }
+
+  override fun equals(other: Any?): Boolean {
+    if (this === other) return true
+    if (other !is StyleConfig) return false
+
+    return paragraphStyle == other.paragraphStyle &&
+      headingStyles.contentEquals(other.headingStyles) &&
+      linkStyle == other.linkStyle &&
+      strongStyle == other.strongStyle &&
+      emphasisStyle == other.emphasisStyle &&
+      strikethroughStyle == other.strikethroughStyle &&
+      underlineStyle == other.underlineStyle &&
+      codeStyle == other.codeStyle &&
+      imageStyle == other.imageStyle &&
+      inlineImageStyle == other.inlineImageStyle &&
+      blockquoteStyle == other.blockquoteStyle &&
+      listStyle == other.listStyle &&
+      codeBlockStyle == other.codeBlockStyle &&
+      thematicBreakStyle == other.thematicBreakStyle
+  }
+
+  override fun hashCode(): Int {
+    var result = paragraphStyle.hashCode()
+    result = 31 * result + headingStyles.contentHashCode()
+    result = 31 * result + linkStyle.hashCode()
+    result = 31 * result + strongStyle.hashCode()
+    result = 31 * result + emphasisStyle.hashCode()
+    result = 31 * result + strikethroughStyle.hashCode()
+    result = 31 * result + underlineStyle.hashCode()
+    result = 31 * result + codeStyle.hashCode()
+    result = 31 * result + imageStyle.hashCode()
+    result = 31 * result + inlineImageStyle.hashCode()
+    result = 31 * result + blockquoteStyle.hashCode()
+    result = 31 * result + listStyle.hashCode()
+    result = 31 * result + codeBlockStyle.hashCode()
+    result = 31 * result + thematicBreakStyle.hashCode()
+    return result
+  }
+}