react-native-enriched-markdown 0.1.0 → 0.2.0

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

@@ -0,0 +1,173 @@
+package com.swmansion.enriched.markdown
+
+import android.content.Context
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.EnrichedMarkdownTextManagerDelegate
+import com.facebook.react.viewmanagers.EnrichedMarkdownTextManagerInterface
+import com.facebook.yoga.YogaMeasureMode
+import com.swmansion.enriched.markdown.events.LinkLongPressEvent
+import com.swmansion.enriched.markdown.events.LinkPressEvent
+import com.swmansion.enriched.markdown.parser.Md4cFlags
+
+@ReactModule(name = EnrichedMarkdownTextManager.NAME)
+class EnrichedMarkdownTextManager :
+  SimpleViewManager<EnrichedMarkdownText>(),
+  EnrichedMarkdownTextManagerInterface<EnrichedMarkdownText> {
+  private val mDelegate: ViewManagerDelegate<EnrichedMarkdownText> = EnrichedMarkdownTextManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<EnrichedMarkdownText>? = mDelegate
+
+  override fun getName(): String = NAME
+
+  override fun createViewInstance(reactContext: ThemedReactContext): EnrichedMarkdownText = EnrichedMarkdownText(reactContext)
+
+  override fun onDropViewInstance(view: EnrichedMarkdownText) {
+    super.onDropViewInstance(view)
+    MeasurementStore.clearFontScalingSettings(view.id)
+    view.layoutManager.releaseMeasurementStore()
+  }
+
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
+    val map = mutableMapOf<String, Any>()
+    map.put(LinkPressEvent.EVENT_NAME, mapOf("registrationName" to LinkPressEvent.EVENT_NAME))
+    map.put(LinkLongPressEvent.EVENT_NAME, mapOf("registrationName" to LinkLongPressEvent.EVENT_NAME))
+    return map
+  }
+
+  @ReactProp(name = "markdown")
+  override fun setMarkdown(
+    view: EnrichedMarkdownText?,
+    markdown: String?,
+  ) {
+    view?.setOnLinkPressCallback { url ->
+      emitOnLinkPress(view, url)
+    }
+
+    view?.setOnLinkLongPressCallback { url ->
+      emitOnLinkLongPress(view, url)
+    }
+
+    view?.setMarkdownContent(markdown ?: "No markdown content")
+  }
+
+  @ReactProp(name = "markdownStyle")
+  override fun setMarkdownStyle(
+    view: EnrichedMarkdownText?,
+    style: com.facebook.react.bridge.ReadableMap?,
+  ) {
+    view?.setMarkdownStyle(style)
+  }
+
+  @ReactProp(name = "selectable", defaultBoolean = true)
+  override fun setSelectable(
+    view: EnrichedMarkdownText?,
+    selectable: Boolean,
+  ) {
+    view?.setIsSelectable(selectable)
+  }
+
+  @ReactProp(name = "md4cFlags")
+  override fun setMd4cFlags(
+    view: EnrichedMarkdownText?,
+    flags: ReadableMap?,
+  ) {
+    val md4cFlags =
+      Md4cFlags(
+        underline = flags?.getBoolean("underline") ?: false,
+      )
+    view?.setMd4cFlags(md4cFlags)
+  }
+
+  @ReactProp(name = "allowFontScaling", defaultBoolean = true)
+  override fun setAllowFontScaling(
+    view: EnrichedMarkdownText?,
+    allowFontScaling: Boolean,
+  ) {
+    view?.setAllowFontScaling(allowFontScaling)
+  }
+
+  @ReactProp(name = "maxFontSizeMultiplier", defaultFloat = 0f)
+  override fun setMaxFontSizeMultiplier(
+    view: EnrichedMarkdownText?,
+    maxFontSizeMultiplier: Float,
+  ) {
+    view?.setMaxFontSizeMultiplier(maxFontSizeMultiplier)
+  }
+
+  @ReactProp(name = "allowTrailingMargin", defaultBoolean = false)
+  override fun setAllowTrailingMargin(
+    view: EnrichedMarkdownText?,
+    allowTrailingMargin: Boolean,
+  ) {
+    view?.setAllowTrailingMargin(allowTrailingMargin)
+  }
+
+  @ReactProp(name = "enableLinkPreview", defaultBoolean = true)
+  override fun setEnableLinkPreview(
+    view: EnrichedMarkdownText?,
+    enableLinkPreview: Boolean,
+  ) {
+    // This prop is only used on iOS (to control the system link preview on long press).
+    // Required by the codegen interface but is a no-op on Android.
+  }
+
+  override fun setPadding(
+    view: EnrichedMarkdownText,
+    left: Int,
+    top: Int,
+    right: Int,
+    bottom: Int,
+  ) {
+    super.setPadding(view, left, top, right, bottom)
+    view.setPadding(left, top, right, bottom)
+  }
+
+  private fun emitOnLinkPress(
+    view: EnrichedMarkdownText,
+    url: String,
+  ) {
+    val context = view.context as com.facebook.react.bridge.ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(context)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, view.id)
+    val event = LinkPressEvent(surfaceId, view.id, url)
+
+    eventDispatcher?.dispatchEvent(event)
+  }
+
+  private fun emitOnLinkLongPress(
+    view: EnrichedMarkdownText,
+    url: String,
+  ) {
+    val context = view.context as com.facebook.react.bridge.ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(context)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, view.id)
+    val event = LinkLongPressEvent(surfaceId, view.id, url)
+
+    eventDispatcher?.dispatchEvent(event)
+  }
+
+  override fun measure(
+    context: Context,
+    localData: ReadableMap?,
+    props: ReadableMap?,
+    state: ReadableMap?,
+    width: Float,
+    widthMode: YogaMeasureMode?,
+    height: Float,
+    heightMode: YogaMeasureMode?,
+    attachmentsPositions: FloatArray?,
+  ): Long {
+    val id = localData?.getInt("viewTag")
+    return MeasurementStore.getMeasureById(context, id, width, height, heightMode, props)
+  }
+
+  companion object {
+    const val NAME = "EnrichedMarkdownText"
+  }
+}

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

@@ -0,0 +1,17 @@
+package com.swmansion.enriched.markdown
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+import java.util.ArrayList
+
+class EnrichedMarkdownTextPackage : ReactPackage {
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    val viewManagers: MutableList<ViewManager<*, *>> = ArrayList()
+    viewManagers.add(EnrichedMarkdownTextManager())
+    return viewManagers
+  }
+
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> = emptyList()
+}

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

@@ -0,0 +1,385 @@
+package com.swmansion.enriched.markdown
+
+import android.content.Context
+import android.graphics.Typeface
+import android.graphics.text.LineBreaker
+import android.os.Build
+import android.text.StaticLayout
+import android.text.TextPaint
+import android.util.Log
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.yoga.YogaMeasureMode
+import com.facebook.yoga.YogaMeasureOutput
+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.styles.StyleConfig
+import com.swmansion.enriched.markdown.utils.getBooleanOrDefault
+import com.swmansion.enriched.markdown.utils.getMapOrNull
+import com.swmansion.enriched.markdown.utils.getStringOrDefault
+import java.util.concurrent.ConcurrentHashMap
+import kotlin.math.ceil
+
+/**
+ * Manages text measurements for ShadowNode layout.
+ * Parses and renders markdown to Spannable at measure time for accurate height calculation.
+ */
+object MeasurementStore {
+  private const val TAG = "MeasurementStore"
+
+  private data class PaintParams(
+    val typeface: Typeface,
+    val fontSize: Float,
+  )
+
+  private data class MeasurementParams(
+    val cachedWidth: Float,
+    val cachedSize: Long,
+    val spannable: CharSequence?,
+    val paintParams: PaintParams,
+    val markdownHash: Int,
+  )
+
+  private val data = ConcurrentHashMap<Int, MeasurementParams>()
+
+  // Store font scaling settings per view ID
+  private data class FontScalingSettings(
+    val allowFontScaling: Boolean = true,
+    val maxFontSizeMultiplier: Float = 0f,
+  )
+
+  private val fontScalingSettings = ConcurrentHashMap<Int, FontScalingSettings>()
+
+  private fun resolveFontScalingSettings(
+    viewId: Int?,
+    props: ReadableMap?,
+  ): FontScalingSettings {
+    val stored = viewId?.let { fontScalingSettings[it] }
+    return FontScalingSettings(
+      allowFontScaling =
+        props?.takeIf { it.hasKey("allowFontScaling") }?.getBoolean("allowFontScaling")
+          ?: stored?.allowFontScaling
+          ?: true,
+      maxFontSizeMultiplier =
+        props?.takeIf { it.hasKey("maxFontSizeMultiplier") }?.getDouble("maxFontSizeMultiplier")?.toFloat()
+          ?: stored?.maxFontSizeMultiplier
+          ?: 0f,
+    )
+  }
+
+  private val measurePaint = TextPaint()
+  private val measureRenderer = Renderer()
+
+  @Volatile
+  private var lastKnownFontScale: Float = 1.0f
+
+  /** Updates measurement with rendered Spannable. Returns true if height changed. */
+  fun store(
+    id: Int,
+    spannable: CharSequence?,
+    paint: TextPaint,
+  ): Boolean {
+    val cached = data[id]
+    val width = cached?.cachedWidth ?: 0f
+    val oldSize = cached?.cachedSize ?: 0L
+    val existingHash = cached?.markdownHash ?: 0
+    val paintParams = PaintParams(paint.typeface ?: Typeface.DEFAULT, paint.textSize)
+
+    val newSize = measure(width, spannable, paint)
+    data[id] = MeasurementParams(width, newSize, spannable, paintParams, existingHash)
+    return oldSize != newSize
+  }
+
+  fun release(id: Int) {
+    data.remove(id)
+  }
+
+  /** Main entry point for ShadowNode measurement. */
+  fun getMeasureById(
+    context: Context,
+    id: Int?,
+    width: Float,
+    height: Float,
+    heightMode: YogaMeasureMode?,
+    props: ReadableMap?,
+  ): Long {
+    // Early exit for empty markdown
+    val markdown = props.getStringOrDefault("markdown", "")
+    if (markdown.isEmpty()) {
+      return YogaMeasureOutput.make(PixelUtil.toDIPFromPixel(width), 0f)
+    }
+
+    val size = getMeasureByIdInternal(context, id, width, props)
+    val resultHeight = YogaMeasureOutput.getHeight(size)
+
+    if (heightMode === YogaMeasureMode.AT_MOST) {
+      val maxHeight = PixelUtil.toDIPFromPixel(height)
+      val finalHeight = resultHeight.coerceAtMost(maxHeight)
+      return YogaMeasureOutput.make(
+        YogaMeasureOutput.getWidth(size),
+        finalHeight,
+      )
+    }
+
+    return size
+  }
+
+  fun updateFontScalingSettings(
+    viewId: Int,
+    allowFontScaling: Boolean,
+    maxFontSizeMultiplier: Float,
+  ) {
+    fontScalingSettings[viewId] = FontScalingSettings(allowFontScaling, maxFontSizeMultiplier)
+  }
+
+  fun clearFontScalingSettings(viewId: Int) {
+    fontScalingSettings.remove(viewId)
+  }
+
+  private fun getMeasureByIdInternal(
+    context: Context,
+    id: Int?,
+    width: Float,
+    props: ReadableMap?,
+  ): Long {
+    val (allowFontScaling, maxFontSizeMultiplier) = resolveFontScalingSettings(id, props)
+
+    val fontScale = checkAndUpdateFontScale(context, allowFontScaling, maxFontSizeMultiplier)
+
+    val safeId = id ?: return measureAndCache(context, null, width, props, allowFontScaling, fontScale, maxFontSizeMultiplier)
+    val cached = data[safeId] ?: return measureAndCache(context, safeId, width, props, allowFontScaling, fontScale, maxFontSizeMultiplier)
+
+    val currentHash = computePropsHash(props, allowFontScaling, fontScale, maxFontSizeMultiplier)
+
+    if (cached.markdownHash != currentHash) {
+      return measureAndCache(context, safeId, width, props, allowFontScaling, fontScale, maxFontSizeMultiplier)
+    }
+
+    // Width changed - re-measure with cached spannable
+    if (cached.cachedWidth != width) {
+      val newSize = measure(width, cached.spannable, cached.paintParams)
+      data[safeId] = cached.copy(cachedWidth = width, cachedSize = newSize)
+      return newSize
+    }
+
+    return cached.cachedSize
+  }
+
+  private fun computePropsHash(
+    props: ReadableMap?,
+    allowFontScaling: Boolean,
+    fontScale: Float,
+    maxFontSizeMultiplier: Float,
+  ): Int {
+    val markdown = props.getStringOrDefault("markdown", "")
+    val styleMap = props.getMapOrNull("markdownStyle")
+    val md4cFlagsMap = props.getMapOrNull("md4cFlags")
+    val allowTrailingMargin = props.getBooleanOrDefault("allowTrailingMargin", false)
+    var result = markdown.hashCode()
+    result = 31 * result + (styleMap?.hashCode() ?: 0)
+    result = 31 * result + (md4cFlagsMap?.hashCode() ?: 0)
+    result = 31 * result + fontScale.toBits()
+    result = 31 * result + allowFontScaling.hashCode()
+    result = 31 * result + maxFontSizeMultiplier.toBits()
+    result = 31 * result + allowTrailingMargin.hashCode()
+    return result
+  }
+
+  private fun checkAndUpdateFontScale(
+    context: Context,
+    allowFontScaling: Boolean,
+    maxFontSizeMultiplier: Float,
+  ): Float {
+    if (!allowFontScaling) {
+      // Clear cache if we switched from scaling to non-scaling
+      if (lastKnownFontScale != 1.0f) {
+        lastKnownFontScale = 1.0f
+        data.clear()
+      }
+      return 1.0f
+    }
+
+    var currentFontScale = context.resources.configuration.fontScale
+
+    if (maxFontSizeMultiplier >= 1.0f && currentFontScale > maxFontSizeMultiplier) {
+      currentFontScale = maxFontSizeMultiplier
+    }
+    if (currentFontScale != lastKnownFontScale) {
+      lastKnownFontScale = currentFontScale
+      data.clear()
+    }
+    return currentFontScale
+  }
+
+  private fun measureAndCache(
+    context: Context,
+    id: Int?,
+    width: Float,
+    props: ReadableMap?,
+    allowFontScaling: Boolean,
+    fontScale: Float,
+    maxFontSizeMultiplier: Float,
+  ): Long {
+    // 1. Extract Props & Setup
+    val markdown = props.getStringOrDefault("markdown", "")
+    val styleMap = props.getMapOrNull("markdownStyle")
+    val md4cFlags = Md4cFlags(underline = props.getMapOrNull("md4cFlags").getBooleanOrDefault("underline", false))
+
+    val fontSize = getInitialFontSize(styleMap, context, allowFontScaling, fontScale, maxFontSizeMultiplier)
+    val propsHash = computePropsHash(props, allowFontScaling, fontScale, maxFontSizeMultiplier)
+
+    // 2. Render & Measure
+    val spannable = tryRenderMarkdown(markdown, styleMap, context, md4cFlags, allowFontScaling, maxFontSizeMultiplier)
+    val textToMeasure = spannable ?: markdown
+    val (size, _) = measureWithLayout(width, textToMeasure, measurePaint)
+
+    // 3. Calculate Margin
+    val allowTrailingMargin = props.getBooleanOrDefault("allowTrailingMargin", false)
+    val marginBottom =
+      if (allowTrailingMargin && spannable != null) {
+        PixelUtil.toDIPFromPixel(measureRenderer.getLastElementMarginBottom())
+      } else {
+        0f
+      }
+
+    // 4. Finalize Height
+    val currentWidth = YogaMeasureOutput.getWidth(size)
+    val currentHeight = YogaMeasureOutput.getHeight(size)
+    val adjustedSize = YogaMeasureOutput.make(currentWidth, currentHeight + marginBottom)
+
+    if (id != null) {
+      data[id] = MeasurementParams(width, adjustedSize, textToMeasure, PaintParams(Typeface.DEFAULT, fontSize), propsHash)
+    }
+
+    return adjustedSize
+  }
+
+  private fun tryRenderMarkdown(
+    markdown: String,
+    styleMap: ReadableMap?,
+    context: Context,
+    md4cFlags: Md4cFlags,
+    allowFontScaling: Boolean,
+    maxFontSizeMultiplier: Float,
+  ): CharSequence? {
+    if (styleMap == null) return null
+
+    return try {
+      val ast = Parser.shared.parseMarkdown(markdown, md4cFlags) ?: return null
+      val style = StyleConfig(styleMap, context, allowFontScaling, maxFontSizeMultiplier)
+      measureRenderer.configure(style, context)
+      measureRenderer.renderDocument(ast, null)
+    } catch (e: Exception) {
+      Log.w(TAG, "Failed to render markdown for measurement, falling back to raw text", e)
+      null
+    }
+  }
+
+  private fun getInitialFontSize(
+    styleMap: ReadableMap?,
+    context: Context,
+    allowFontScaling: Boolean,
+    fontScale: Float,
+    maxFontSizeMultiplier: Float,
+  ): Float {
+    val fontSizeSp = styleMap?.getMap("paragraph")?.getDouble("fontSize")?.toFloat() ?: 16f
+    val density = context.resources.displayMetrics.density
+
+    if (!allowFontScaling) {
+      return ceil(fontSizeSp * density)
+    }
+
+    val cappedFontScale =
+      if (maxFontSizeMultiplier >= 1.0f && fontScale > maxFontSizeMultiplier) {
+        maxFontSizeMultiplier
+      } else {
+        fontScale
+      }
+    return ceil(fontSizeSp * cappedFontScale * density)
+  }
+
+  private fun measure(
+    maxWidth: Float,
+    text: CharSequence?,
+    paintParams: PaintParams,
+  ): Long {
+    measurePaint.reset()
+    measurePaint.typeface = paintParams.typeface
+    measurePaint.textSize = paintParams.fontSize
+    return measure(maxWidth, text, measurePaint)
+  }
+
+  private fun measure(
+    maxWidth: Float,
+    text: CharSequence?,
+    paint: TextPaint,
+  ): Long {
+    val content = text ?: ""
+    val safeWidth = ceil(maxWidth).toInt().coerceAtLeast(1)
+
+    val builder =
+      StaticLayout.Builder
+        .obtain(content, 0, content.length, paint, safeWidth)
+        .setIncludePad(false)
+        .setLineSpacing(0f, 1f)
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+      builder.setBreakStrategy(LineBreaker.BREAK_STRATEGY_HIGH_QUALITY)
+    }
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+      builder.setUseLineSpacingFromFallbacks(true)
+    }
+
+    val layout = builder.build()
+    val measuredHeight = layout.height.toFloat()
+
+    // Calculate actual content width (widest line)
+    val measuredWidth = (0 until layout.lineCount).maxOfOrNull { layout.getLineWidth(it) } ?: 0f
+
+    return YogaMeasureOutput.make(
+      PixelUtil.toDIPFromPixel(ceil(measuredWidth)),
+      PixelUtil.toDIPFromPixel(measuredHeight),
+    )
+  }
+
+  /**
+   * Measures text and returns both the size and the layout for calculating last line descent.
+   */
+  private fun measureWithLayout(
+    maxWidth: Float,
+    text: CharSequence?,
+    paint: TextPaint,
+  ): Pair<Long, StaticLayout> {
+    val content = text ?: ""
+    val widthPx = ceil(maxWidth).toInt().coerceAtLeast(1)
+
+    val layout =
+      StaticLayout.Builder
+        .obtain(content, 0, content.length, paint, widthPx)
+        .setIncludePad(false)
+        .setLineSpacing(0f, 1f)
+        .apply {
+          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+            setBreakStrategy(LineBreaker.BREAK_STRATEGY_HIGH_QUALITY)
+          }
+          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+            setUseLineSpacingFromFallbacks(true)
+          }
+        }.build()
+
+    // Find the widest line to get the actual content width
+    val maxLineWidth =
+      (0 until layout.lineCount)
+        .maxOfOrNull { layout.getLineWidth(it) } ?: 0f
+
+    val size =
+      YogaMeasureOutput.make(
+        PixelUtil.toDIPFromPixel(ceil(maxLineWidth)),
+        PixelUtil.toDIPFromPixel(layout.height.toFloat()),
+      )
+
+    return size to layout
+  }
+}