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

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

@@ -0,0 +1,255 @@
+package com.swmansion.enriched.markdown
+
+import android.content.Context
+import com.facebook.react.bridge.ReadableArray
+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.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.EnrichedMarkdownManagerDelegate
+import com.facebook.react.viewmanagers.EnrichedMarkdownManagerInterface
+import com.facebook.yoga.YogaMeasureMode
+import com.swmansion.enriched.markdown.spoiler.SpoilerOverlay
+import com.swmansion.enriched.markdown.utils.common.TableStreamingMode
+import com.swmansion.enriched.markdown.utils.common.emitContextMenuItemPress
+import com.swmansion.enriched.markdown.utils.common.emitLinkLongPress
+import com.swmansion.enriched.markdown.utils.common.emitLinkPress
+import com.swmansion.enriched.markdown.utils.common.emitTaskListItemPress
+import com.swmansion.enriched.markdown.utils.common.markdownEventTypeConstants
+import com.swmansion.enriched.markdown.utils.common.parseContextMenuItems
+import com.swmansion.enriched.markdown.utils.common.parseMd4cFlags
+import com.swmansion.enriched.markdown.utils.common.parseSelectionMenuConfig
+import com.swmansion.enriched.markdown.utils.text.interaction.TaskListToggleUtils
+
+@ReactModule(name = EnrichedMarkdownManager.NAME)
+class EnrichedMarkdownManager :
+  SimpleViewManager<EnrichedMarkdown>(),
+  EnrichedMarkdownManagerInterface<EnrichedMarkdown> {
+  private val mDelegate: ViewManagerDelegate<EnrichedMarkdown> = EnrichedMarkdownManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<EnrichedMarkdown>? = mDelegate
+
+  override fun getName(): String = NAME
+
+  override fun createViewInstance(reactContext: ThemedReactContext): EnrichedMarkdown {
+    val view = EnrichedMarkdown(reactContext)
+    view.onContextMenuItemPressCallback = { itemText, selectedText, selectionStart, selectionEnd ->
+      emitContextMenuItemPress(view, itemText, selectedText, selectionStart, selectionEnd)
+    }
+
+    view.setOnLinkPressCallback { url ->
+      emitLinkPress(view, url)
+    }
+
+    view.setOnLinkLongPressCallback { url ->
+      emitLinkLongPress(view, url)
+    }
+
+    view.setOnTaskListItemPressCallback { taskIndex, checked, itemText ->
+      val newChecked = !checked
+      val updatedMarkdown = TaskListToggleUtils.toggleAtIndex(view.currentMarkdown, taskIndex, newChecked)
+      view.setMarkdownContent(updatedMarkdown)
+      view.commitProps()
+      emitTaskListItemPress(view, taskIndex, newChecked, itemText)
+    }
+
+    return view
+  }
+
+  override fun onAfterUpdateTransaction(view: EnrichedMarkdown) {
+    super.onAfterUpdateTransaction(view)
+    view.commitProps()
+  }
+
+  override fun onDropViewInstance(view: EnrichedMarkdown) {
+    super.onDropViewInstance(view)
+    view.cleanup()
+    MeasurementStore.release(view.id)
+    MeasurementStore.clearStreamingTableMode(view.id)
+    MeasurementStore.clearBreakStrategy(view.id)
+  }
+
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> = markdownEventTypeConstants()
+
+  @ReactProp(name = "markdown")
+  override fun setMarkdown(
+    view: EnrichedMarkdown?,
+    markdown: String?,
+  ) {
+    view?.setMarkdownContent(markdown ?: "")
+  }
+
+  @ReactProp(name = "markdownStyle")
+  override fun setMarkdownStyle(
+    view: EnrichedMarkdown?,
+    style: ReadableMap?,
+  ) {
+    view?.setMarkdownStyle(style)
+  }
+
+  @ReactProp(name = "selectable", defaultBoolean = true)
+  override fun setSelectable(
+    view: EnrichedMarkdown?,
+    selectable: Boolean,
+  ) {
+    view?.setIsSelectable(selectable)
+  }
+
+  override fun setSelectionColor(
+    view: EnrichedMarkdown?,
+    value: Int?,
+  ) {
+    view?.setSelectionColor(value)
+  }
+
+  override fun setSelectionHandleColor(
+    view: EnrichedMarkdown?,
+    value: Int?,
+  ) {
+    view?.setSelectionHandleColor(value)
+  }
+
+  @ReactProp(name = "md4cFlags")
+  override fun setMd4cFlags(
+    view: EnrichedMarkdown?,
+    flags: ReadableMap?,
+  ) {
+    view?.setMd4cFlags(parseMd4cFlags(flags))
+  }
+
+  @ReactProp(name = "allowFontScaling", defaultBoolean = true)
+  override fun setAllowFontScaling(
+    view: EnrichedMarkdown?,
+    allowFontScaling: Boolean,
+  ) {
+    view?.setAllowFontScaling(allowFontScaling)
+  }
+
+  @ReactProp(name = "maxFontSizeMultiplier", defaultFloat = 0f)
+  override fun setMaxFontSizeMultiplier(
+    view: EnrichedMarkdown?,
+    maxFontSizeMultiplier: Float,
+  ) {
+    view?.setMaxFontSizeMultiplier(maxFontSizeMultiplier)
+  }
+
+  @ReactProp(name = "allowTrailingMargin", defaultBoolean = false)
+  override fun setAllowTrailingMargin(
+    view: EnrichedMarkdown?,
+    allowTrailingMargin: Boolean,
+  ) {
+    view?.setAllowTrailingMargin(allowTrailingMargin)
+  }
+
+  @ReactProp(name = "enableLinkPreview", defaultBoolean = true)
+  override fun setEnableLinkPreview(
+    view: EnrichedMarkdown?,
+    enableLinkPreview: Boolean,
+  ) {
+    // No-op on Android — only used on iOS
+  }
+
+  @ReactProp(name = "lineBreakStrategyIOS")
+  override fun setLineBreakStrategyIOS(
+    view: EnrichedMarkdown?,
+    strategy: String?,
+  ) {
+    // No-op on Android — only used on iOS
+  }
+
+  @ReactProp(name = "writingDirection")
+  override fun setWritingDirection(
+    view: EnrichedMarkdown?,
+    value: String?,
+  ) {
+    // No-op on Android — first-strong per-paragraph resolution is the platform default
+  }
+
+  @ReactProp(name = "streamingAnimation", defaultBoolean = false)
+  override fun setStreamingAnimation(
+    view: EnrichedMarkdown?,
+    streamingAnimation: Boolean,
+  ) {
+    view?.streamingAnimation = streamingAnimation
+  }
+
+  @ReactProp(name = "streamingConfig")
+  override fun setStreamingConfig(
+    view: EnrichedMarkdown?,
+    config: ReadableMap?,
+  ) {
+    if (view == null) return
+    val tableMode =
+      when (config?.getString("tableMode")) {
+        "hidden" -> TableStreamingMode.HIDDEN
+        else -> TableStreamingMode.PROGRESSIVE
+      }
+    view.tableStreamingMode = tableMode
+  }
+
+  @ReactProp(name = "spoilerOverlay")
+  override fun setSpoilerOverlay(
+    view: EnrichedMarkdown?,
+    mode: String?,
+  ) {
+    view?.spoilerOverlay = SpoilerOverlay.fromString(mode)
+  }
+
+  @ReactProp(name = "textBreakStrategy")
+  override fun setTextBreakStrategy(
+    view: EnrichedMarkdown?,
+    strategy: String?,
+  ) {
+    view?.setTextBreakStrategy(strategy ?: "highQuality")
+  }
+
+  @ReactProp(name = "contextMenuItems")
+  override fun setContextMenuItems(
+    view: EnrichedMarkdown?,
+    value: ReadableArray?,
+  ) {
+    if (view == null) return
+    view.setContextMenuItems(parseContextMenuItems(value))
+  }
+
+  @ReactProp(name = "selectionMenuConfig")
+  override fun setSelectionMenuConfig(
+    view: EnrichedMarkdown?,
+    value: ReadableMap?,
+  ) {
+    if (view == null) return
+    view.setSelectionMenuConfig(parseSelectionMenuConfig(value))
+  }
+
+  override fun setPadding(
+    view: EnrichedMarkdown,
+    left: Int,
+    top: Int,
+    right: Int,
+    bottom: Int,
+  ) {
+    super.setPadding(view, left, top, right, bottom)
+    view.setPadding(left, top, right, bottom)
+  }
+
+  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, splitTableSegments = true)
+  }
+
+  companion object {
+    const val NAME = "EnrichedMarkdown"
+  }
+}

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

@@ -0,0 +1,363 @@
+package com.swmansion.enriched.markdown
+
+import android.content.Context
+import android.content.res.Configuration
+import android.graphics.Canvas
+import android.os.Build
+import android.os.Handler
+import android.os.Looper
+import android.text.Layout
+import android.util.AttributeSet
+import android.util.Log
+import android.view.MotionEvent
+import com.facebook.react.bridge.ReadableMap
+import com.swmansion.enriched.markdown.accessibility.AccessibleMarkdownTextView
+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.spoiler.SpoilerCapable
+import com.swmansion.enriched.markdown.spoiler.SpoilerOverlay
+import com.swmansion.enriched.markdown.spoiler.SpoilerOverlayDrawer
+import com.swmansion.enriched.markdown.styles.StyleConfig
+import com.swmansion.enriched.markdown.utils.common.BreakStrategyUtils
+import com.swmansion.enriched.markdown.utils.text.TailFadeInAnimator
+import com.swmansion.enriched.markdown.utils.text.interaction.CheckboxTouchHelper
+import com.swmansion.enriched.markdown.utils.text.view.LinkLongPressMovementMethod
+import com.swmansion.enriched.markdown.utils.text.view.SelectionMenuConfig
+import com.swmansion.enriched.markdown.utils.text.view.applySelectableState
+import com.swmansion.enriched.markdown.utils.text.view.applySelectionColors
+import com.swmansion.enriched.markdown.utils.text.view.cancelJSTouchForCheckboxTap
+import com.swmansion.enriched.markdown.utils.text.view.cancelJSTouchForLinkTap
+import com.swmansion.enriched.markdown.utils.text.view.createSelectionActionModeCallback
+import com.swmansion.enriched.markdown.utils.text.view.emitLinkLongPressEvent
+import com.swmansion.enriched.markdown.utils.text.view.emitLinkPressEvent
+import com.swmansion.enriched.markdown.utils.text.view.setupAsMarkdownTextView
+import java.util.concurrent.Executors
+
+/**
+ * EnrichedMarkdownText that handles Markdown parsing and rendering on a background thread.
+ * View starts invisible and becomes visible after render completes to avoid layout shift.
+ */
+class EnrichedMarkdownText
+  @JvmOverloads
+  constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0,
+  ) : AccessibleMarkdownTextView(context, attrs, defStyleAttr),
+    SpoilerCapable {
+    private val parser = Parser.shared
+    private val renderer = Renderer()
+    private var onLinkPressCallback: ((String) -> Unit)? = null
+    private var onLinkLongPressCallback: ((String) -> Unit)? = null
+    private val checkboxTouchHelper = CheckboxTouchHelper(this)
+
+    private val mainHandler = Handler(Looper.getMainLooper())
+    private val executor = Executors.newSingleThreadExecutor()
+    private var currentRenderId = 0L
+
+    val layoutManager = EnrichedMarkdownTextLayoutManager(this)
+
+    private var contextMenuItemTexts: List<String> = emptyList()
+    var onContextMenuItemPressCallback: ((itemText: String, selectedText: String, selectionStart: Int, selectionEnd: Int) -> Unit)? = null
+
+    var markdownStyle: StyleConfig? = null
+      private set
+
+    var currentMarkdown: String = ""
+      private set
+
+    var md4cFlags: Md4cFlags = Md4cFlags.DEFAULT
+      private set
+
+    private var lastKnownFontScale: Float = context.resources.configuration.fontScale
+    private var markdownStyleMap: ReadableMap? = null
+
+    private var allowFontScaling: Boolean = true
+    private var maxFontSizeMultiplier: Float = 0f
+    private var allowTrailingMargin: Boolean = false
+
+    private var streamingAnimation: Boolean = false
+    private var previousTextLength: Int = 0
+    private var fadeAnimator: TailFadeInAnimator? = null
+    override var spoilerOverlayDrawer: SpoilerOverlayDrawer? = null
+      private set
+    var spoilerOverlay: SpoilerOverlay = SpoilerOverlay.PARTICLES
+
+    private var pendingStyledText: CharSequence? = null
+
+    private var selectionColor: Int? = null
+    private var selectionHandleColor: Int? = null
+    private var selectionMenuConfig = SelectionMenuConfig()
+
+    init {
+      setupAsMarkdownTextView()
+      customSelectionActionModeCallback =
+        createSelectionActionModeCallback(
+          this,
+          getCustomItemTexts = { contextMenuItemTexts },
+          getSelectionMenuConfig = { selectionMenuConfig },
+          onCustomItemPress = { itemText, selectedText, start, end ->
+            onContextMenuItemPressCallback?.invoke(itemText, selectedText, start, end)
+          },
+        )
+    }
+
+    fun setMarkdownContent(markdown: String) {
+      if (currentMarkdown == markdown) return
+      currentMarkdown = markdown
+      scheduleRender()
+    }
+
+    fun setMarkdownStyle(style: ReadableMap?) {
+      markdownStyleMap = style
+      // Register font scaling settings when style is set (view should have ID by now)
+      updateMeasurementStoreFontScaling()
+      val newStyle = style?.let { StyleConfig(it, context, allowFontScaling, maxFontSizeMultiplier) }
+      if (markdownStyle == newStyle) return
+      markdownStyle = newStyle
+      updateJustificationMode(newStyle)
+      scheduleRender()
+    }
+
+    override fun onConfigurationChanged(newConfig: Configuration) {
+      super.onConfigurationChanged(newConfig)
+
+      if (!allowFontScaling) {
+        return
+      }
+
+      val newFontScale = newConfig.fontScale
+      if (newFontScale != lastKnownFontScale) {
+        lastKnownFontScale = newFontScale
+        recreateStyleConfig()
+        scheduleRenderIfNeeded()
+      }
+    }
+
+    fun setMd4cFlags(flags: Md4cFlags) {
+      if (md4cFlags == flags) return
+      md4cFlags = flags
+      scheduleRenderIfNeeded()
+    }
+
+    fun setAllowFontScaling(allow: Boolean) {
+      if (allowFontScaling == allow) return
+      allowFontScaling = allow
+      updateMeasurementStoreFontScaling()
+      recreateStyleConfig()
+      scheduleRenderIfNeeded()
+    }
+
+    fun setMaxFontSizeMultiplier(multiplier: Float) {
+      if (maxFontSizeMultiplier == multiplier) return
+      maxFontSizeMultiplier = multiplier
+      updateMeasurementStoreFontScaling()
+      recreateStyleConfig()
+      scheduleRenderIfNeeded()
+    }
+
+    fun setAllowTrailingMargin(allow: Boolean) {
+      if (allowTrailingMargin == allow) return
+      allowTrailingMargin = allow
+      scheduleRenderIfNeeded()
+    }
+
+    fun setStreamingAnimation(enabled: Boolean) {
+      if (streamingAnimation == enabled) return
+      streamingAnimation = enabled
+      if (enabled) {
+        previousTextLength = text?.length ?: 0
+      } else {
+        fadeAnimator?.cancelAll()
+        fadeAnimator = null
+        previousTextLength = 0
+      }
+    }
+
+    private fun updateMeasurementStoreFontScaling() {
+      MeasurementStore.updateFontScalingSettings(id, allowFontScaling, maxFontSizeMultiplier)
+    }
+
+    private fun scheduleRenderIfNeeded() {
+      if (currentMarkdown.isNotEmpty()) {
+        scheduleRender()
+      }
+    }
+
+    private fun recreateStyleConfig() {
+      markdownStyleMap?.let { styleMap ->
+        markdownStyle = StyleConfig(styleMap, context, allowFontScaling, maxFontSizeMultiplier)
+        updateJustificationMode(markdownStyle)
+      }
+    }
+
+    private fun updateJustificationMode(style: StyleConfig?) {
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+        justificationMode =
+          if (style?.needsJustify == true) {
+            Layout.JUSTIFICATION_MODE_INTER_WORD
+          } else {
+            Layout.JUSTIFICATION_MODE_NONE
+          }
+      }
+    }
+
+    private fun scheduleRender() {
+      val style = markdownStyle ?: return
+      val markdown = currentMarkdown
+      if (markdown.isEmpty()) return
+
+      val renderId = ++currentRenderId
+
+      executor.execute {
+        try {
+          val ast =
+            parser.parseMarkdown(markdown, md4cFlags) ?: run {
+              mainHandler.post { if (renderId == currentRenderId && isAttachedToWindow) text = "" }
+              return@execute
+            }
+
+          renderer.configure(style, context)
+          val styledText = renderer.renderDocument(ast, onLinkPressCallback, onLinkLongPressCallback)
+
+          mainHandler.post {
+            if (renderId == currentRenderId) {
+              if (isAttachedToWindow) {
+                applyRenderedText(styledText)
+              } else {
+                pendingStyledText = styledText
+              }
+            }
+          }
+        } catch (e: Exception) {
+          Log.e(TAG, "Render failed: ${e.message}", e)
+          mainHandler.post { if (renderId == currentRenderId && isAttachedToWindow) text = "" }
+        }
+      }
+    }
+
+    private fun applyRenderedText(styledText: CharSequence) {
+      val tailStart = previousTextLength
+
+      text = styledText
+
+      if (movementMethod !is LinkLongPressMovementMethod) {
+        movementMethod = LinkLongPressMovementMethod.createInstance()
+      }
+
+      renderer.getCollectedImageSpans().forEach { span ->
+        span.registerTextView(this)
+      }
+
+      spoilerOverlayDrawer = SpoilerOverlayDrawer.setupIfNeeded(this, styledText, spoilerOverlayDrawer, spoilerOverlay)
+
+      layoutManager.invalidateLayout()
+      accessibilityHelper.invalidateAccessibilityItems()
+
+      if (streamingAnimation) {
+        if (fadeAnimator == null) {
+          fadeAnimator = TailFadeInAnimator(this)
+        }
+        fadeAnimator?.animate(tailStart, styledText.length)
+        previousTextLength = styledText.length
+      }
+
+      applySelectionColors(selectionColor, selectionHandleColor)
+    }
+
+    fun setContextMenuItems(items: List<String>) {
+      contextMenuItemTexts = items
+    }
+
+    fun setSelectionMenuConfig(config: SelectionMenuConfig) {
+      if (selectionMenuConfig == config) return
+      selectionMenuConfig = config
+    }
+
+    fun setIsSelectable(selectable: Boolean) {
+      applySelectableState(selectable)
+    }
+
+    fun setSelectionColor(color: Int?) {
+      if (selectionColor == color) return
+      selectionColor = color
+      applySelectionColors(selectionColor, selectionHandleColor)
+    }
+
+    fun setSelectionHandleColor(color: Int?) {
+      if (selectionHandleColor == color) return
+      selectionHandleColor = color
+      applySelectionColors(selectionColor, selectionHandleColor)
+    }
+
+    fun setTextBreakStrategy(strategy: String) {
+      MeasurementStore.updateBreakStrategy(id, strategy)
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+        breakStrategy = BreakStrategyUtils.resolveBreakStrategy(strategy)
+      }
+      MeasurementStore.invalidate(id)
+      scheduleRenderIfNeeded()
+    }
+
+    fun emitOnLinkPress(url: String) {
+      emitLinkPressEvent(url)
+    }
+
+    fun emitOnLinkLongPress(url: String) {
+      emitLinkLongPressEvent(url)
+    }
+
+    fun setOnLinkPressCallback(callback: (String) -> Unit) {
+      onLinkPressCallback = callback
+    }
+
+    fun setOnLinkLongPressCallback(callback: (String) -> Unit) {
+      onLinkLongPressCallback = callback
+    }
+
+    fun setOnTaskListItemPressCallback(callback: ((taskIndex: Int, checked: Boolean, itemText: String) -> Unit)?) {
+      checkboxTouchHelper.onCheckboxTap = callback
+    }
+
+    override fun onAttachedToWindow() {
+      super.onAttachedToWindow()
+      pendingStyledText?.let {
+        pendingStyledText = null
+        applyRenderedText(it)
+      }
+    }
+
+    override fun onDetachedFromWindow() {
+      stopSpoilerAnimations()
+      super.onDetachedFromWindow()
+    }
+
+    override fun onDraw(canvas: Canvas) {
+      super.onDraw(canvas)
+      spoilerOverlayDrawer?.draw(canvas)
+    }
+
+    private fun stopSpoilerAnimations() {
+      spoilerOverlayDrawer?.stop()
+      spoilerOverlayDrawer = null
+    }
+
+    override fun onTouchEvent(event: MotionEvent): Boolean {
+      if (checkboxTouchHelper.onTouchEvent(event)) {
+        if (event.action == MotionEvent.ACTION_DOWN) {
+          cancelJSTouchForCheckboxTap(event)
+        }
+        return true
+      }
+      val result = super.onTouchEvent(event)
+      if (event.action == MotionEvent.ACTION_DOWN) {
+        cancelJSTouchForLinkTap(event)
+      }
+      return result
+    }
+
+    companion object {
+      private const val TAG = "EnrichedMarkdownMeasure"
+    }
+  }

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

@@ -0,0 +1,15 @@
+package com.swmansion.enriched.markdown
+
+class EnrichedMarkdownTextLayoutManager(
+  private val view: EnrichedMarkdownText,
+) {
+  fun invalidateLayout() {
+    val text = view.text
+    val paint = view.paint
+    MeasurementStore.store(view.id, text, paint)
+  }
+
+  fun releaseMeasurementStore() {
+    MeasurementStore.release(view.id)
+  }
+}