react-native-enriched-markdown-scaffold 1.0.2-scaffold.3 → 1.0.2-scaffold.5

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

@@ -25,11 +25,19 @@ import com.swmansion.enriched.markdown.utils.common.RenderedSegment
 import com.swmansion.enriched.markdown.utils.common.SegmentReconciler
 import com.swmansion.enriched.markdown.utils.common.StreamingMarkdownFilter
 import com.swmansion.enriched.markdown.utils.common.TableStreamingMode
+import com.swmansion.enriched.markdown.utils.common.emitLinkLayout
+import com.swmansion.enriched.markdown.utils.common.emitSelectionChange
 import com.swmansion.enriched.markdown.utils.common.isReducedMotionEnabled
 import com.swmansion.enriched.markdown.utils.common.splitASTIntoSegments
 import com.swmansion.enriched.markdown.utils.text.TailFadeInAnimator
+import com.swmansion.enriched.markdown.utils.text.view.LinkLayoutCollector
+import com.swmansion.enriched.markdown.utils.text.view.LinkLayoutFragment
+import com.swmansion.enriched.markdown.utils.text.view.SelectionChangeReporter
 import com.swmansion.enriched.markdown.utils.text.view.SelectionMenuConfig
+import com.swmansion.enriched.markdown.utils.text.view.SelectionRect
+import com.swmansion.enriched.markdown.utils.text.view.SelectionSnapshot
 import com.swmansion.enriched.markdown.utils.text.view.applySelectionColors
+import com.swmansion.enriched.markdown.utils.text.view.currentTextSelection
 import com.swmansion.enriched.markdown.views.BlockMenuOptions
 import com.swmansion.enriched.markdown.views.BlockSegmentView
 import com.swmansion.enriched.markdown.views.CodeBlockContainerView
@@ -99,6 +107,23 @@ class EnrichedMarkdown
     private var selectionMenuConfig = SelectionMenuConfig()
     private var accessibilityLabels = AccessibilityLabels()
     private var textBreakStrategy: String = BreakStrategyUtils.DEFAULT_STRATEGY
+    private var linkLayoutEnabled = false
+    private var lastLinkLayout: List<LinkLayoutFragment>? = null
+
+    // At most one segment holds a selection; a new one clears the previous.
+    private var selectionOwner: EnrichedMarkdownInternalText? = null
+
+    // A block long-pressed while contextMenuHidden is on, reported as the selection.
+    private class ActiveBlock(
+      val view: View,
+      val source: String,
+      val markdown: String,
+      val text: String,
+    )
+
+    private var activeBlock: ActiveBlock? = null
+    private val selectionReporter =
+      SelectionChangeReporter(this, ::selectionSnapshot) { snapshot -> emitSelectionChange(this, snapshot) }
 
     private var onLinkPressCallback: ((String) -> Unit)? = null
     private var onLinkLongPressCallback: ((String) -> Unit)? = null
@@ -393,6 +418,78 @@ class EnrichedMarkdown
       onContextMenuItemPressCallback?.invoke(itemText, selectedText, selectionStart, selectionEnd)
     }
 
+    fun setEmitSelectionChange(enabled: Boolean) {
+      selectionReporter.enabled = enabled
+    }
+
+    /** Clears the selection of every segment (and any active block) and reports `active: false`. */
+    fun clearSelection() {
+      val owner = selectionOwner
+      selectionOwner = null
+      activeBlock = null
+      owner?.clearSelection()
+      selectionReporter.flushNow()
+    }
+
+    private fun onSegmentSelectionChanged(
+      view: EnrichedMarkdownInternalText,
+      hasSelection: Boolean,
+    ) {
+      if (hasSelection) {
+        // Take ownership first so the previous owner's own "cleared" callback is ignored.
+        val previous = selectionOwner
+        selectionOwner = view
+        activeBlock = null
+        if (previous !== view) previous?.clearSelection()
+        selectionReporter.schedule()
+      } else if (selectionOwner === view) {
+        selectionReporter.onSelectionChanged(false)
+      }
+    }
+
+    private fun onBlockMenuSuppressed(
+      view: View,
+      source: String,
+      markdown: String,
+      text: String,
+    ) {
+      if (!selectionReporter.enabled) return
+      val previous = selectionOwner
+      selectionOwner = null
+      previous?.clearSelection()
+      activeBlock = ActiveBlock(view, source, markdown, text)
+      selectionReporter.forgetLastReported()
+      selectionReporter.flushNow()
+    }
+
+    private fun selectionSnapshot(): SelectionSnapshot {
+      activeBlock?.let { block ->
+        if (block.view.parent !== this) return SelectionSnapshot.INACTIVE
+        val rect =
+          SelectionRect.fromPx(
+            block.view.left.toFloat(),
+            block.view.top.toFloat(),
+            block.view.right.toFloat(),
+            block.view.bottom.toFloat(),
+          )
+        return SelectionSnapshot.block(block.source, block.markdown, block.text, rect)
+      }
+      val owner = selectionOwner?.takeIf { it.parent === this } ?: return SelectionSnapshot.INACTIVE
+      val selection = owner.currentTextSelection(owner.left, owner.top) ?: return SelectionSnapshot.INACTIVE
+      // Same rule as forwardSegmentCopyRequest.
+      val whole = selection.fullSelection && segmentViews.size == 1 && currentMarkdown.isNotEmpty()
+      return SelectionSnapshot(
+        active = true,
+        source = "selection",
+        text = selection.text,
+        markdown = if (whole) currentMarkdown else selection.markdown,
+        whole = whole,
+        rect = selection.rect,
+        startRect = selection.startRect,
+        endRect = selection.endRect,
+      )
+    }
+
     private fun recreateStyleConfig() {
       markdownStyleMap?.let {
         markdownStyle =
@@ -493,6 +590,9 @@ class EnrichedMarkdown
       segmentSignatures.clear()
       segmentSignatures.addAll(result.signatures)
 
+      if (selectionOwner?.let { owner -> segmentViews.none { it === owner } } == true) selectionOwner = null
+      if (activeBlock?.let { block -> segmentViews.none { it === block.view } } == true) activeBlock = null
+
       // A just-closed block has unchanged content, so the reconciler reuses it
       // without an update; sync pending here to trigger its deferred highlight.
       segmentViews.forEachIndexed { index, view ->
@@ -632,6 +732,7 @@ class EnrichedMarkdown
           this@EnrichedMarkdown.onTaskListItemPressCallback?.invoke(taskIndex, checked, itemText)
         }
         onCopyRequest = ::forwardSegmentCopyRequest
+        onSelectionChangedCallback = ::onSegmentSelectionChanged
 
         if (contextMenuItemTexts.isNotEmpty()) {
           setContextMenuItems(contextMenuItemTexts, ::forwardContextMenuItemPress)
@@ -653,6 +754,7 @@ class EnrichedMarkdown
       copyAsMarkdownLabel = this@EnrichedMarkdown.selectionMenuConfig.copyAsMarkdownLabel
       contextMenuHidden = this@EnrichedMarkdown.contextMenuHidden
       menuOptions = blockMenuOptions("table")
+      onMenuSuppressed = { markdown, text -> onBlockMenuSuppressed(this, "table", markdown, text) }
       applyTableNode(segment.node)
     }
 
@@ -664,6 +766,7 @@ class EnrichedMarkdown
       copyAsMarkdownLabel = this@EnrichedMarkdown.selectionMenuConfig.copyAsMarkdownLabel
       contextMenuHidden = this@EnrichedMarkdown.contextMenuHidden
       menuOptions = blockMenuOptions("code")
+      onMenuSuppressed = { markdown, text -> onBlockMenuSuppressed(this, "code", markdown, text) }
       onCopyPress = { code, language ->
         this@EnrichedMarkdown.onCopyPressCallback?.invoke(code, language)
       }
@@ -697,6 +800,12 @@ class EnrichedMarkdown
           .getMethod("setMenuOptions", BlockMenuOptions::class.java)
           .invoke(view, blockMenuOptions("math"))
         setMathContextMenuHidden(view)
+        val onMenuSuppressed: (String, String) -> Unit = { markdown, text ->
+          onBlockMenuSuppressed(view, "math", markdown, text)
+        }
+        runCatching {
+          resolvedClass.getMethod("setOnMenuSuppressed", Function2::class.java).invoke(view, onMenuSuppressed)
+        }.onFailure { Log.e(TAG, "Failed to set onMenuSuppressed on math view", it) }
         resolvedClass.getMethod("applyLatex", String::class.java).invoke(view, segment.latex)
         view
       } catch (e: Exception) {
@@ -782,6 +891,41 @@ class EnrichedMarkdown
           currentY += segment?.segmentMarginBottom ?: 0
         }
       }
+
+      emitLinkLayoutIfNeeded()
+      // Segments may have moved or been replaced; re-read the selection (deduplicated).
+      if (selectionOwner != null || activeBlock != null) selectionReporter.schedule() else selectionReporter.flushNow()
+    }
+
+    fun setEmitLinkLayout(enabled: Boolean) {
+      if (linkLayoutEnabled == enabled) return
+      linkLayoutEnabled = enabled
+      lastLinkLayout = null
+      emitLinkLayoutIfNeeded()
+    }
+
+    /**
+     * Reports link rects of every text segment (offset by the segment's position) to JS for
+     * `renderLinkDecoration`. Tables are skipped: their cells scroll horizontally, so rects would
+     * go stale. Runs after each segment layout pass; deduplicated so an unchanged layout sends nothing.
+     */
+    private fun emitLinkLayoutIfNeeded() {
+      if (!linkLayoutEnabled || width <= 0) return
+      val fragments = mutableListOf<LinkLayoutFragment>()
+      var linkCount = 0
+      segmentViews.forEach { view ->
+        if (view is TableContainerView) {
+          linkCount += view.linkCount
+          return@forEach
+        }
+        if (view !is EnrichedMarkdownInternalText) return@forEach
+        val (segmentFragments, segmentLinks) = LinkLayoutCollector.collect(view, view.left, view.top, linkCount)
+        fragments += segmentFragments
+        linkCount += segmentLinks
+      }
+      if (fragments == lastLinkLayout) return
+      lastLinkLayout = fragments
+      emitLinkLayout(this, fragments)
     }
 
     private fun computeSegmentsTotalHeight(): Int {
@@ -799,6 +943,7 @@ class EnrichedMarkdown
     }
 
     fun cleanup() {
+      selectionReporter.cancel()
       executor.shutdownNow()
     }
 

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

@@ -18,6 +18,7 @@ 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.cancelJSTouchForCheckboxTap
 import com.swmansion.enriched.markdown.utils.text.view.cancelJSTouchForLinkTap
+import com.swmansion.enriched.markdown.utils.text.view.clearTextSelection
 import com.swmansion.enriched.markdown.utils.text.view.createSelectionActionModeCallback
 import com.swmansion.enriched.markdown.utils.text.view.reallowParentInterceptIfLinkReleased
 import com.swmansion.enriched.markdown.utils.text.view.setupAsMarkdownTextView
@@ -57,6 +58,10 @@ class EnrichedMarkdownInternalText
     private var onContextMenuItemPress: ((itemText: String, selectedText: String, selectionStart: Int, selectionEnd: Int) -> Unit)? = null
     var selectionMenuConfig: SelectionMenuConfig = SelectionMenuConfig()
     var onCopyRequest: ((markdown: String, text: String, fullSelection: Boolean) -> Unit)? = null
+
+    // Read from onSelectionChanged, which TextView already calls from its own
+    // constructor — so it must stay nullable.
+    var onSelectionChangedCallback: ((view: EnrichedMarkdownInternalText, hasSelection: Boolean) -> Unit)? = null
     private var activeActionMode: ActionMode? = null
     var contextMenuHidden: Boolean = false
       set(value) {
@@ -115,6 +120,20 @@ class EnrichedMarkdownInternalText
       applySelectableState(selectable)
     }
 
+    override fun onSelectionChanged(
+      selStart: Int,
+      selEnd: Int,
+    ) {
+      super.onSelectionChanged(selStart, selEnd)
+      onSelectionChangedCallback?.invoke(this, selEnd > selStart)
+    }
+
+    /** Clears the selection and ends its ActionMode. */
+    fun clearSelection() {
+      clearTextSelection()
+      activeActionMode?.finish()
+    }
+
     fun setContextMenuItems(
       items: List<String>,
       onPress: (itemText: String, selectedText: String, selectionStart: Int, selectionEnd: Int) -> Unit,

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

@@ -177,6 +177,28 @@ class EnrichedMarkdownManager :
     view?.setContextMenuHidden(contextMenuHidden)
   }
 
+  @ReactProp(name = "emitLinkLayout", defaultBoolean = false)
+  override fun setEmitLinkLayout(
+    view: EnrichedMarkdown?,
+    emitLinkLayout: Boolean,
+  ) {
+    view?.setEmitLinkLayout(emitLinkLayout)
+  }
+
+  @ReactProp(name = "emitSelectionChange", defaultBoolean = false)
+  override fun setEmitSelectionChange(
+    view: EnrichedMarkdown?,
+    emitSelectionChange: Boolean,
+  ) {
+    view?.setEmitSelectionChange(emitSelectionChange)
+  }
+
+  // Commands
+
+  override fun clearSelection(view: EnrichedMarkdown?) {
+    view?.clearSelection()
+  }
+
   @ReactProp(name = "enableLinkPreview", defaultBoolean = true)
   override fun setEnableLinkPreview(
     view: EnrichedMarkdown?,

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

@@ -24,15 +24,23 @@ 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.common.emitLinkLayout
+import com.swmansion.enriched.markdown.utils.common.emitSelectionChange
 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.LinkLayoutCollector
+import com.swmansion.enriched.markdown.utils.text.view.LinkLayoutFragment
 import com.swmansion.enriched.markdown.utils.text.view.LinkLongPressMovementMethod
+import com.swmansion.enriched.markdown.utils.text.view.SelectionChangeReporter
 import com.swmansion.enriched.markdown.utils.text.view.SelectionMenuConfig
+import com.swmansion.enriched.markdown.utils.text.view.SelectionSnapshot
 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.clearTextSelection
 import com.swmansion.enriched.markdown.utils.text.view.createSelectionActionModeCallback
+import com.swmansion.enriched.markdown.utils.text.view.currentTextSelection
 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.reallowParentInterceptIfLinkReleased
@@ -102,8 +110,17 @@ class EnrichedMarkdownText
     private var contextMenuHidden = false
     private var activeActionMode: ActionMode? = null
 
+    private var linkLayoutEnabled = false
+    private var lastLinkLayout: List<LinkLayoutFragment>? = null
+
+    // Nullable and assigned in init: TextView calls onSelectionChanged from its
+    // own constructor, before this class's fields exist.
+    private var selectionReporter: SelectionChangeReporter? = null
+
     init {
       setupAsMarkdownTextView()
+      selectionReporter =
+        SelectionChangeReporter(this, ::selectionSnapshot) { snapshot -> emitSelectionChange(this, snapshot) }
       customSelectionActionModeCallback =
         createSelectionActionModeCallback(
           this,
@@ -310,6 +327,73 @@ class EnrichedMarkdownText
       }
 
       applySelectionColors(selectionColor, selectionHandleColor)
+      emitLinkLayoutIfNeeded()
+      // New text drops the selection; report it if setText didn't already.
+      selectionReporter?.schedule()
+    }
+
+    fun setEmitSelectionChange(enabled: Boolean) {
+      selectionReporter?.enabled = enabled
+    }
+
+    /** Clears the selection (ending its ActionMode) and reports `active: false`. */
+    fun clearSelection() {
+      clearTextSelection()
+      activeActionMode?.finish()
+      selectionReporter?.flushNow()
+    }
+
+    override fun onSelectionChanged(
+      selStart: Int,
+      selEnd: Int,
+    ) {
+      super.onSelectionChanged(selStart, selEnd)
+      selectionReporter?.onSelectionChanged(selEnd > selStart)
+    }
+
+    private fun selectionSnapshot(): SelectionSnapshot {
+      val selection = currentTextSelection() ?: return SelectionSnapshot.INACTIVE
+      return SelectionSnapshot(
+        active = true,
+        source = "selection",
+        text = selection.text,
+        markdown = selection.markdown,
+        // Same rule as onCopyRequest: a full selection already carries the original markdown.
+        whole = selection.fullSelection && currentMarkdown.isNotEmpty(),
+        rect = selection.rect,
+        startRect = selection.startRect,
+        endRect = selection.endRect,
+      )
+    }
+
+    fun setEmitLinkLayout(enabled: Boolean) {
+      if (linkLayoutEnabled == enabled) return
+      linkLayoutEnabled = enabled
+      lastLinkLayout = null
+      emitLinkLayoutIfNeeded()
+    }
+
+    /**
+     * Reports link rects to JS (for `renderLinkDecoration`) after every render and layout;
+     * deduplicated so an unchanged layout — the common case while streaming — sends nothing.
+     */
+    private fun emitLinkLayoutIfNeeded() {
+      if (!linkLayoutEnabled || layout == null || width <= 0) return
+      val (fragments, _) = LinkLayoutCollector.collect(this)
+      if (fragments == lastLinkLayout) return
+      lastLinkLayout = fragments
+      emitLinkLayout(this, fragments)
+    }
+
+    override fun onLayout(
+      changed: Boolean,
+      left: Int,
+      top: Int,
+      right: Int,
+      bottom: Int,
+    ) {
+      super.onLayout(changed, left, top, right, bottom)
+      emitLinkLayoutIfNeeded()
     }
 
     // Trailing bottom margin included in the shadow-node measurement — must be
@@ -387,6 +471,7 @@ class EnrichedMarkdownText
     }
 
     override fun onDetachedFromWindow() {
+      selectionReporter?.cancel()
       stopSpoilerAnimations()
       super.onDetachedFromWindow()
     }

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

@@ -177,6 +177,28 @@ class EnrichedMarkdownTextManager :
     view?.setContextMenuHidden(contextMenuHidden)
   }
 
+  @ReactProp(name = "emitLinkLayout", defaultBoolean = false)
+  override fun setEmitLinkLayout(
+    view: EnrichedMarkdownText?,
+    emitLinkLayout: Boolean,
+  ) {
+    view?.setEmitLinkLayout(emitLinkLayout)
+  }
+
+  @ReactProp(name = "emitSelectionChange", defaultBoolean = false)
+  override fun setEmitSelectionChange(
+    view: EnrichedMarkdownText?,
+    emitSelectionChange: Boolean,
+  ) {
+    view?.setEmitSelectionChange(emitSelectionChange)
+  }
+
+  // Commands
+
+  override fun clearSelection(view: EnrichedMarkdownText?) {
+    view?.clearSelection()
+  }
+
   @ReactProp(name = "enableLinkPreview", defaultBoolean = true)
   override fun setEnableLinkPreview(
     view: EnrichedMarkdownText?,

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

@@ -0,0 +1,36 @@
+package com.swmansion.enriched.markdown.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.swmansion.enriched.markdown.utils.text.view.LinkLayoutFragment
+
+class LinkLayoutEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val fragments: List<LinkLayoutFragment>,
+) : Event<LinkLayoutEvent>(surfaceId, viewId) {
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun getEventData(): WritableMap {
+    val array = Arguments.createArray()
+    fragments.forEach { fragment ->
+      array.pushMap(
+        Arguments.createMap().apply {
+          putInt("linkIndex", fragment.linkIndex)
+          putString("url", fragment.url)
+          putString("text", fragment.text)
+          putDouble("x", fragment.x.toDouble())
+          putDouble("y", fragment.y.toDouble())
+          putDouble("width", fragment.width.toDouble())
+          putDouble("height", fragment.height.toDouble())
+        },
+      )
+    }
+    return Arguments.createMap().apply { putArray("fragments", array) }
+  }
+
+  companion object {
+    const val EVENT_NAME: String = "onLinkLayout"
+  }
+}

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

@@ -0,0 +1,42 @@
+package com.swmansion.enriched.markdown.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.swmansion.enriched.markdown.utils.text.view.SelectionRect
+import com.swmansion.enriched.markdown.utils.text.view.SelectionSnapshot
+
+class SelectionChangeEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val snapshot: SelectionSnapshot,
+) : Event<SelectionChangeEvent>(surfaceId, viewId) {
+  override fun getEventName(): String = EVENT_NAME
+
+  // Every state is distinct (active/inactive flips must all arrive), so never merge.
+  override fun canCoalesce(): Boolean = false
+
+  override fun getEventData(): WritableMap =
+    Arguments.createMap().apply {
+      putBoolean("active", snapshot.active)
+      putString("source", snapshot.source)
+      putString("text", snapshot.text)
+      putString("markdown", snapshot.markdown)
+      putBoolean("whole", snapshot.whole)
+      putMap("rect", snapshot.rect.toWritableMap())
+      putMap("startRect", snapshot.startRect.toWritableMap())
+      putMap("endRect", snapshot.endRect.toWritableMap())
+    }
+
+  private fun SelectionRect.toWritableMap(): WritableMap =
+    Arguments.createMap().apply {
+      putDouble("x", x.toDouble())
+      putDouble("y", y.toDouble())
+      putDouble("width", width.toDouble())
+      putDouble("height", height.toDouble())
+    }
+
+  companion object {
+    const val EVENT_NAME: String = "onSelectionChange"
+  }
+}

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

@@ -2,6 +2,9 @@ package com.swmansion.enriched.markdown.renderer
 
 import android.text.SpannableStringBuilder
 import com.swmansion.enriched.markdown.parser.MarkdownASTNode
+import com.swmansion.enriched.markdown.spans.LinkChipBackgroundSpan
+import com.swmansion.enriched.markdown.spans.LinkSpacerSpan
+import com.swmansion.enriched.markdown.spans.LinkSpacers
 import com.swmansion.enriched.markdown.spans.LinkSpan
 import com.swmansion.enriched.markdown.utils.text.span.SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE
 
@@ -16,14 +19,41 @@ class LinkRenderer(
     factory: RendererFactory,
   ) {
     val url = node.getAttribute("url") ?: return
+    // Chip ("box") properties never fall back to the base link style.
+    val chip = factory.styleCache.linkChipForUrl(url)
+    val padding = chip.paddingHorizontal
 
-    factory.renderWithSpan(builder, { factory.renderChildren(node, builder, onLinkPress, onLinkLongPress) }) { start, end, blockStyle ->
-      builder.setSpan(
-        LinkSpan(url, onLinkPress, onLinkLongPress, factory.styleCache, blockStyle, factory.context),
-        start,
-        end,
-        SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
-      )
+    val start = builder.length
+    // The leading spacer goes in before the children so ranges they register stay valid.
+    if (padding > 0f) appendSpacer(builder, padding)
+    val contentStart = builder.length
+
+    factory.renderChildren(node, builder, onLinkPress, onLinkLongPress)
+
+    if (builder.length == contentStart) {
+      if (contentStart > start) builder.delete(start, contentStart)
+      return
     }
+    if (padding > 0f) appendSpacer(builder, padding)
+    val end = builder.length
+
+    val blockStyle = factory.blockStyleContext.requireBlockStyle()
+    builder.setSpan(
+      LinkSpan(url, onLinkPress, onLinkLongPress, factory.styleCache, blockStyle, factory.context),
+      start,
+      end,
+      SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
+    )
+    // One instance per link: also identifies the link for link-layout reporting.
+    builder.setSpan(LinkChipBackgroundSpan(chip), start, end, SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE)
+  }
+
+  private fun appendSpacer(
+    builder: SpannableStringBuilder,
+    width: Float,
+  ) {
+    val position = builder.length
+    builder.append(LinkSpacers.CHAR)
+    builder.setSpan(LinkSpacerSpan(width), position, position + 1, SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE)
   }
 }

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

@@ -4,6 +4,7 @@ import android.content.res.AssetManager
 import android.graphics.Typeface
 import com.facebook.react.common.ReactConstants
 import com.facebook.react.views.text.ReactTypefaceUtils.applyStyles
+import com.swmansion.enriched.markdown.styles.LinkChipStyle
 import com.swmansion.enriched.markdown.styles.LinkVariantEntry
 import com.swmansion.enriched.markdown.styles.StyleConfig
 
@@ -26,7 +27,7 @@ class SpanStyleCache(
   val linkFontFamily: String = style.linkStyle.fontFamily
   val linkColor: Int = style.linkStyle.color
   val linkUnderline: Boolean = style.linkStyle.underline
-  val linkBackgroundColor: Int = style.linkStyle.backgroundColor
+  val linkChip: LinkChipStyle = style.linkStyle.chip
   val linkVariants: List<LinkVariantEntry> = style.linkVariants
 
   private val compiledVariantPatterns: List<Pair<Regex, LinkVariantEntry>> =
@@ -100,6 +101,9 @@ class SpanStyleCache(
     return compiledVariantPatterns.firstOrNull { (regex, _) -> regex.containsMatchIn(url) }?.second
   }
 
+  /** Chip style for [url]: the matching variant's own, else the base link's (never merged). */
+  fun linkChipForUrl(url: String): LinkChipStyle = resolvedVariantForUrl(url)?.chip ?: linkChip
+
   /**
    * Cached typeface for font family + style (BOLD, ITALIC, BOLD_ITALIC).
    *