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

package/android/src/main/java/com/swmansion/enriched/markdown/utils/text/view/LinkLayoutCollector.kt

@@ -0,0 +1,100 @@
+package com.swmansion.enriched.markdown.utils.text.view
+
+import android.text.Layout
+import android.text.Spanned
+import android.widget.TextView
+import com.facebook.react.uimanager.PixelUtil
+import com.swmansion.enriched.markdown.spans.LinkChipBackgroundSpan
+import com.swmansion.enriched.markdown.spans.LinkSpacers
+import com.swmansion.enriched.markdown.spans.LinkSpan
+import kotlin.math.max
+import kotlin.math.min
+
+/** One laid-out line of a link, in dp relative to the reporting view. Covers the drawn chip. */
+data class LinkLayoutFragment(
+  val linkIndex: Int,
+  val url: String,
+  val text: String,
+  val x: Float,
+  val y: Float,
+  val width: Float,
+  val height: Float,
+)
+
+object LinkLayoutCollector {
+  /**
+   * Collects the chip rect of every link fragment laid out in [textView], for `onLinkLayout`.
+   * Rects are offset by the text view's own padding plus [offsetXPx]/[offsetYPx] (a segment's
+   * position inside its container), then converted to dp. Links are numbered in document order
+   * from [indexBase]; returns the fragments and the number of links found.
+   */
+  fun collect(
+    textView: TextView,
+    offsetXPx: Int = 0,
+    offsetYPx: Int = 0,
+    indexBase: Int = 0,
+  ): Pair<List<LinkLayoutFragment>, Int> {
+    val layout = textView.layout ?: return emptyList<LinkLayoutFragment>() to 0
+    val text = textView.text as? Spanned ?: return emptyList<LinkLayoutFragment>() to 0
+
+    // LinkRenderer sets one LinkChipBackgroundSpan per link, spacers included.
+    val chips =
+      text
+        .getSpans(0, text.length, LinkChipBackgroundSpan::class.java)
+        .sortedBy { text.getSpanStart(it) }
+    val originX = offsetXPx + textView.totalPaddingLeft
+    val originY = offsetYPx + textView.totalPaddingTop
+
+    val fragments = mutableListOf<LinkLayoutFragment>()
+    chips.forEachIndexed { i, chipSpan ->
+      val start = text.getSpanStart(chipSpan)
+      val end = text.getSpanEnd(chipSpan)
+      if (start !in 0 until end) return@forEachIndexed
+
+      val url = text.getSpans(start, end, LinkSpan::class.java).firstOrNull()?.url ?: ""
+      val linkText = LinkSpacers.strip(text.subSequence(start, end)).toString()
+      val (ascent, descent) = LinkChipBackgroundSpan.linkFontMetrics(text, start, end, textView.paint)
+      val paddingVertical = chipSpan.chip.paddingVertical
+
+      for (line in layout.getLineForOffset(start)..layout.getLineForOffset(end - 1)) {
+        val fragmentStart = max(start, layout.getLineStart(line))
+        val fragmentEnd =
+          LinkChipBackgroundSpan.trimTrailingWhitespace(text, fragmentStart, min(end, layout.getLineEnd(line)))
+        if (fragmentEnd <= fragmentStart) continue
+
+        val left = layout.getPrimaryHorizontal(fragmentStart)
+        val right = lineEndHorizontal(layout, line, fragmentEnd)
+        val baseline = layout.getLineBaseline(line).toFloat()
+        val top = baseline + ascent - paddingVertical
+        val bottom = baseline + descent + paddingVertical
+
+        fragments +=
+          LinkLayoutFragment(
+            linkIndex = indexBase + i,
+            url = url,
+            text = linkText,
+            x = PixelUtil.toDIPFromPixel(min(left, right) + originX),
+            y = PixelUtil.toDIPFromPixel(top + originY),
+            width = PixelUtil.toDIPFromPixel(kotlin.math.abs(right - left)),
+            height = PixelUtil.toDIPFromPixel(bottom - top),
+          )
+      }
+    }
+    return fragments to chips.size
+  }
+
+  /**
+   * x of [offset] on [line]. At a line's end offset `getPrimaryHorizontal` reports the start
+   * of the next line (the same offset), so a fragment cut mid-word uses the line's right edge.
+   */
+  private fun lineEndHorizontal(
+    layout: Layout,
+    line: Int,
+    offset: Int,
+  ): Float =
+    if (offset >= layout.getLineEnd(line) && line < layout.lineCount - 1) {
+      layout.getLineRight(line)
+    } else {
+      layout.getPrimaryHorizontal(offset)
+    }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/utils/text/view/SelectionActionMode.kt

@@ -12,6 +12,7 @@ import android.widget.TextView
 import com.swmansion.enriched.markdown.EnrichedMarkdown
 import com.swmansion.enriched.markdown.EnrichedMarkdownText
 import com.swmansion.enriched.markdown.spans.ImageSpan
+import com.swmansion.enriched.markdown.spans.LinkSpacers
 import com.swmansion.enriched.markdown.styles.StyleConfig
 import com.swmansion.enriched.markdown.utils.common.layout.isLayoutRTL
 import com.swmansion.enriched.markdown.utils.text.conversion.HTMLGenerator
@@ -211,7 +212,8 @@ private fun TextView.copyWithHTML() {
   if (start < 0 || end < 0 || start >= end) return
 
   val spannable = text as? Spannable ?: return
-  val selectedText = spannable.subSequence(start, end)
+  // Link spacers only reserve layout space; keep them out of every copied flavor.
+  val selectedText = LinkSpacers.strip(spannable.subSequence(start, end))
   val plainText = selectedText.toString()
 
   val styleConfig =
@@ -243,7 +245,7 @@ private fun TextView.requestCopy(onCopyRequest: (markdown: String, text: String,
   val end = selectionEnd
   if (start < 0 || end < 0 || start >= end) return
 
-  val selectedText = text.subSequence(start, end).toString()
+  val selectedText = LinkSpacers.strip(text.subSequence(start, end)).toString()
   val markdown = MarkdownExtractor.getMarkdownForSelection(this) ?: selectedText
   // Same threshold MarkdownExtractor uses to return the original markdown.
   onCopyRequest(markdown, selectedText, start == 0 && end >= text.length - 1)

package/android/src/main/java/com/swmansion/enriched/markdown/utils/text/view/SelectionChangeReporter.kt

@@ -0,0 +1,230 @@
+package com.swmansion.enriched.markdown.utils.text.view
+
+import android.text.Layout
+import android.text.Selection
+import android.text.Spannable
+import android.view.View
+import android.widget.TextView
+import com.facebook.react.uimanager.PixelUtil
+import com.swmansion.enriched.markdown.spans.LinkSpacers
+import com.swmansion.enriched.markdown.utils.text.conversion.MarkdownExtractor
+import kotlin.math.max
+import kotlin.math.min
+
+/** A rect in dp, relative to the reporting view. */
+data class SelectionRect(
+  val x: Float,
+  val y: Float,
+  val width: Float,
+  val height: Float,
+) {
+  companion object {
+    val ZERO = SelectionRect(0f, 0f, 0f, 0f)
+
+    /** Converts a px rect (already in the reporting view's coordinates) to dp. */
+    fun fromPx(
+      left: Float,
+      top: Float,
+      right: Float,
+      bottom: Float,
+    ) = SelectionRect(
+      PixelUtil.toDIPFromPixel(min(left, right)),
+      PixelUtil.toDIPFromPixel(min(top, bottom)),
+      PixelUtil.toDIPFromPixel(kotlin.math.abs(right - left)),
+      PixelUtil.toDIPFromPixel(kotlin.math.abs(bottom - top)),
+    )
+  }
+}
+
+/** Payload of `onSelectionChange`. Compared structurally for deduplication. */
+data class SelectionSnapshot(
+  val active: Boolean,
+  val source: String,
+  val text: String,
+  val markdown: String,
+  val whole: Boolean,
+  val rect: SelectionRect,
+  val startRect: SelectionRect,
+  val endRect: SelectionRect,
+) {
+  companion object {
+    val INACTIVE =
+      SelectionSnapshot(false, "selection", "", "", false, SelectionRect.ZERO, SelectionRect.ZERO, SelectionRect.ZERO)
+
+    /** A long-pressed block: `whole`, and every rect is the block's frame. */
+    fun block(
+      source: String,
+      markdown: String,
+      text: String,
+      rect: SelectionRect,
+    ) = SelectionSnapshot(true, source, text, markdown, true, rect, rect, rect)
+  }
+}
+
+/** A text view's current selection, before the owner applies its `whole` rule. */
+data class TextSelection(
+  val text: String,
+  val markdown: String,
+  // Same threshold MarkdownExtractor uses to return the original markdown.
+  val fullSelection: Boolean,
+  val rect: SelectionRect,
+  val startRect: SelectionRect,
+  val endRect: SelectionRect,
+)
+
+/**
+ * Reads the selection of this text view with its rects offset by [offsetXPx]/[offsetYPx]
+ * (a segment's position inside its container). `rect` spans the full content width when the
+ * selection covers several lines; `startRect`/`endRect` cover the selected part of the first
+ * and last line. Returns null when nothing is selected.
+ */
+fun TextView.currentTextSelection(
+  offsetXPx: Int = 0,
+  offsetYPx: Int = 0,
+): TextSelection? {
+  val start = selectionStart
+  val end = selectionEnd
+  if (start < 0 || end <= start) return null
+  val layout = layout ?: return null
+  val content = text ?: return null
+
+  val selectedText = LinkSpacers.strip(content.subSequence(start, end)).toString()
+  val markdown = MarkdownExtractor.getMarkdownForSelection(this) ?: selectedText
+
+  val originX = (offsetXPx + totalPaddingLeft - scrollX).toFloat()
+  val originY = (offsetYPx + totalPaddingTop - scrollY).toFloat()
+
+  val startLine = layout.getLineForOffset(start)
+  // An end at a line break belongs to the line it closes, not the next one.
+  val endLine = layout.getLineForOffset(max(start, end - 1))
+  val startX = layout.getPrimaryHorizontal(start)
+  val endX = lineEndHorizontal(layout, endLine, end)
+
+  fun lineRect(
+    line: Int,
+    left: Float,
+    right: Float,
+  ) = SelectionRect.fromPx(
+    left + originX,
+    layout.getLineTop(line) + originY,
+    right + originX,
+    layout.getLineBottom(line) + originY,
+  )
+
+  val startRect: SelectionRect
+  val endRect: SelectionRect
+  val rect: SelectionRect
+  if (startLine == endLine) {
+    startRect = lineRect(startLine, startX, endX)
+    endRect = startRect
+    rect = startRect
+  } else {
+    startRect = lineRect(startLine, startX, layout.getLineRight(startLine))
+    endRect = lineRect(endLine, layout.getLineLeft(endLine), endX)
+    rect =
+      SelectionRect.fromPx(
+        originX,
+        layout.getLineTop(startLine) + originY,
+        layout.width + originX,
+        layout.getLineBottom(endLine) + originY,
+      )
+  }
+
+  return TextSelection(
+    text = selectedText,
+    markdown = markdown,
+    fullSelection = start == 0 && end >= content.length - 1,
+    rect = rect,
+    startRect = startRect,
+    endRect = endRect,
+  )
+}
+
+/** Clears this text view's selection, which also ends its selection ActionMode. */
+fun TextView.clearTextSelection() {
+  val spannable = text as? Spannable ?: return
+  Selection.removeSelection(spannable)
+}
+
+/**
+ * x of [offset] on [line]. At a line's end offset `getPrimaryHorizontal` reports the start
+ * of the next line, so a selection ending there uses the line's right edge.
+ */
+private fun lineEndHorizontal(
+  layout: Layout,
+  line: Int,
+  offset: Int,
+): Float =
+  if (offset >= layout.getLineEnd(line) && line < layout.lineCount - 1) {
+    layout.getLineRight(line)
+  } else {
+    layout.getPrimaryHorizontal(offset)
+  }
+
+/**
+ * Coalesces selection changes into at most one `onSelectionChange` per frame. The payload is
+ * read when the frame fires, so the latest state always reaches JS; a cleared selection is
+ * reported right away and drops any pending update. Identical payloads are sent once, so the
+ * `setText` passes of streaming don't repeat `active: false`.
+ */
+class SelectionChangeReporter(
+  private val view: View,
+  private val snapshot: () -> SelectionSnapshot,
+  private val emit: (SelectionSnapshot) -> Unit,
+) {
+  var enabled = false
+    set(value) {
+      if (field == value) return
+      field = value
+      cancel()
+      lastReported = SelectionSnapshot.INACTIVE
+      if (value) schedule()
+    }
+
+  private var lastReported = SelectionSnapshot.INACTIVE
+  private var pending = false
+  private val flushRunnable =
+    Runnable {
+      pending = false
+      report()
+    }
+
+  /** Reports the current state on the next frame. */
+  fun schedule() {
+    if (!enabled || pending) return
+    pending = true
+    view.postOnAnimation(flushRunnable)
+  }
+
+  fun onSelectionChanged(hasSelection: Boolean) {
+    if (hasSelection) schedule() else flushNow()
+  }
+
+  /** Reports the current state right away, dropping any pending frame. */
+  fun flushNow() {
+    cancel()
+    report()
+  }
+
+  /**
+   * Makes the next report go out even if it equals the last one — a block long-pressed
+   * again is a new request for the app's menu, not a repeat.
+   */
+  fun forgetLastReported() {
+    lastReported = SelectionSnapshot.INACTIVE
+  }
+
+  fun cancel() {
+    if (!pending) return
+    pending = false
+    view.removeCallbacks(flushRunnable)
+  }
+
+  private fun report() {
+    if (!enabled) return
+    val current = snapshot()
+    if (current == lastReported) return
+    lastReported = current
+    emit(current)
+  }
+}

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

@@ -70,6 +70,10 @@ class CodeBlockContainerView(
   // control, not a context menu, and stays.
   var contextMenuHidden: Boolean = false
 
+  // Called instead of the menu on long press while contextMenuHidden is on, so
+  // the owner can report the block (onSelectionChange) and show its own UI.
+  var onMenuSuppressed: ((markdown: String, text: String) -> Unit)? = null
+
   // Copy / Copy as Markdown visibility, Copy format and the header copy button.
   // The header button always copies the raw code.
   var menuOptions: BlockMenuOptions = BlockMenuOptions()
@@ -259,7 +263,13 @@ class CodeBlockContainerView(
   // the event when there is one (a pending block has no menu yet, and a hidden
   // one never does).
   private fun showContextMenu(anchor: View): Boolean {
-    if (pending || contextMenuHidden || !menuOptions.hasItems) return false
+    if (pending) return false
+    if (contextMenuHidden) {
+      val onSuppressed = onMenuSuppressed ?: return false
+      onSuppressed(CodeBlockNode.fencedMarkdown(code, language, fenceChar), code)
+      return true
+    }
+    if (!menuOptions.hasItems) return false
     ContextMenuPopup.show(anchor, this) {
       blockCopyItems(
         menuOptions,

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

@@ -24,6 +24,7 @@ import com.swmansion.enriched.markdown.accessibility.AccessibilityLabels
 import com.swmansion.enriched.markdown.parser.MarkdownASTNode
 import com.swmansion.enriched.markdown.parser.MarkdownASTNode.NodeType
 import com.swmansion.enriched.markdown.renderer.Renderer
+import com.swmansion.enriched.markdown.spans.LinkChipBackgroundSpan
 import com.swmansion.enriched.markdown.styles.StyleConfig
 import com.swmansion.enriched.markdown.styles.TableStyle
 import com.swmansion.enriched.markdown.utils.common.layout.isLayoutRTL
@@ -66,6 +67,10 @@ class TableContainerView(
   var contextMenuHidden: Boolean = false
   var menuOptions: BlockMenuOptions = BlockMenuOptions()
 
+  // Called instead of the menu on long press while contextMenuHidden is on, so
+  // the owner can report the block (onSelectionChange) and show its own UI.
+  var onMenuSuppressed: ((markdown: String, text: String) -> Unit)? = null
+
   private val scrollView =
     HorizontalScrollView(context).apply {
       isHorizontalScrollBarEnabled = true
@@ -81,6 +86,19 @@ class TableContainerView(
 
   val rowCount: Int get() = rows.size
 
+  /**
+   * Number of links across all cells. Tables are not reported by `onLinkLayout`, but their links
+   * still count so later link indices stay in document order.
+   */
+  val linkCount: Int
+    get() =
+      rows.sumOf { row ->
+        row.sumOf { cell ->
+          // LinkRenderer attaches one LinkChipBackgroundSpan per link.
+          cell.attributedText.getSpans(0, cell.attributedText.length, LinkChipBackgroundSpan::class.java).size
+        }
+      }
+
   fun animateNewRows(
     previousRowCount: Int,
     durationMs: Long,
@@ -364,7 +382,10 @@ class TableContainerView(
   }
 
   private fun showContextMenu(anchor: View) {
-    if (contextMenuHidden) return
+    if (contextMenuHidden) {
+      onMenuSuppressed?.invoke(tableMarkdown, buildPlainText())
+      return
+    }
     val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
     ContextMenuPopup.show(anchor, this) {
       blockCopyItems(menuOptions, copyLabel, copyAsMarkdownLabel, markdown = { tableMarkdown }, rawText = ::buildPlainText, copyRaw = {

package/android/src/math/java/com/swmansion/enriched/markdown/views/MathContainerView.kt

@@ -44,6 +44,10 @@ class MathContainerView(
   var contextMenuHidden: Boolean = false
   var menuOptions: BlockMenuOptions = BlockMenuOptions()
 
+  // Called instead of the menu on long press while contextMenuHidden is on, so
+  // the owner can report the block (onSelectionChange) and show its own UI.
+  var onMenuSuppressed: ((markdown: String, text: String) -> Unit)? = null
+
   override val segmentMarginTop: Int get() = mathStyle.marginTop.toInt()
   override val segmentMarginBottom: Int get() = mathStyle.marginBottom.toInt()
 
@@ -119,7 +123,10 @@ class MathContainerView(
   }
 
   private fun showContextMenu(anchor: View) {
-    if (contextMenuHidden) return
+    if (contextMenuHidden) {
+      onMenuSuppressed?.invoke("$$\n$cachedLatex\n$$", cachedLatex)
+      return
+    }
     val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
     ContextMenuPopup.show(anchor, this) {
       blockCopyItems(menuOptions, copyLabel, copyAsMarkdownLabel, markdown = {

package/docs/API_REFERENCE.md

@@ -69,6 +69,59 @@ Callback when a link is long pressed. Access URL via `event.url`. On iOS, automa
 />
 ```
 
+### `renderLinkDecoration`
+
+Renders a React Native view on top of each link — for example a badge or sparkle on a [link chip](STYLES.md#link-chips). Return `null` to leave a link undecorated.
+
+| Type                                                   | Default Value | Platform |
+| ------------------------------------------------------ | ------------- | -------- |
+| `(info: LinkDecorationInfo) => ReactNode \| null`       | -             | Both     |
+
+`LinkDecorationInfo`:
+
+| Field   | Type         | Description |
+| ------- | ------------ | ----------- |
+| `index` | `number`     | Position of the link in the document (0-based). Stable key for the link |
+| `url`   | `string`     | Link URL |
+| `text`  | `string`     | Visible link text |
+| `rect`  | `LinkRect`   | Anchor rect: the drawn chip (glyphs + horizontal/vertical padding) of the link's **last** line fragment |
+| `rects` | `LinkRect[]` | Every line fragment, in order (several when the link wraps) |
+
+`LinkRect` is `{ x, y, width, height }` in dp, relative to the component's content box (inside `containerStyle` padding).
+
+The returned node is placed inside an absolutely positioned box matching `rect`, with `pointerEvents="box-none"`, so position it relative to that box. Negative offsets let it overflow the chip:
+
+```tsx
+<EnrichedMarkdownText
+  markdown="Read the [guide](https://example.com/guide) first."
+  markdownStyle={{
+    link: {
+      backgroundColor: '#DCE2FF',
+      borderRadius: 5,
+      paddingHorizontal: 7,
+      underline: false,
+    },
+  }}
+  renderLinkDecoration={({ url }) =>
+    url.startsWith('https://') ? (
+      <View style={{ position: 'absolute', top: -8, right: -8 }}>
+        <SparkleIcon />
+      </View>
+    ) : null
+  }
+/>
+```
+
+Notes and limitations:
+
+- When this prop is not set the component renders exactly as before: no wrapper view and no layout events.
+- Setting it wraps the native view in a `View` (which takes `containerStyle`). Switching between set and unset remounts the native view.
+- Rects are measured natively after layout and sent to JS, so decorations appear one frame after the text. Updates are deduplicated — streaming does not re-render decorations unless a link actually moves.
+- Links inside tables (`flavor="github"`) are not reported.
+- On Android, parts of a decoration that overflow the component's bounds do not receive touches.
+- Web: `rect` is the link's whole inline box and `rects` is `[rect]`; for a wrapping link the decoration anchors to that box rather than the last line.
+- Not supported by `EnrichedMarkdownTextInput`.
+
 ### `onTaskListItemPress`
 
 Callback when a task list checkbox is tapped. Receives `index` (0-based), `checked` (new state after toggling), and `text` (item text).
@@ -170,6 +223,62 @@ import * as Clipboard from 'expo-clipboard';
 />
 ```
 
+### `onSelectionChange`
+
+Reports the text selection so the app can draw its own selection menu. Pair it with [`contextMenuHidden`](#contextmenuhidden) to replace the native menu entirely.
+
+| Type                                     | Default Value | Platform |
+| ---------------------------------------- | ------------- | -------- |
+| `(event: SelectionChangeEvent) => void`  | -             | Both     |
+
+```ts
+interface SelectionRect { x: number; y: number; width: number; height: number }
+
+interface SelectionChangeEvent {
+  /** `false` once the selection is gone; every other field is then empty / zero. */
+  active: boolean;
+  /** `'selection'` for text, or the kind of a long-pressed block. */
+  source: 'selection' | 'math' | 'table' | 'code';
+  /** Same as `CopyEvent.text` / `CopyEvent.markdown` / `CopyEvent.whole`. */
+  text: string;
+  markdown: string;
+  whole: boolean;
+  /** Bounding box (full content width when it spans several lines). */
+  rect: SelectionRect;
+  /** Selected part of the first / last line — anchor a menu above the start or below the end. */
+  startRect: SelectionRect;
+  endRect: SelectionRect;
+}
+```
+
+- Fires at most once per frame while the selection changes (payloads are deduplicated), and with `active: false` right away once it is gone — including when new `markdown` replaces the text.
+- Rects are in dp, relative to the component's native view: add the origin from `ref.current.measureInWindow` to get window coordinates. Re-measure after scrolling instead of waiting for a new event.
+- With `contextMenuHidden`, a long press on a table, math or code block (`flavor="github"`) fires the event with `source` set to the block kind, `whole: true` and every rect set to the block's frame. These blocks have no text selection, so without this they would offer no way to copy. Without `contextMenuHidden` the block menu shows as usual and no event fires.
+- There is no "dragging" flag. Debounce before showing your menu, so it doesn't flicker while a handle is dragged.
+- Within one component only one part holds a selection at a time: selecting in another text segment clears the previous one. To keep a single selection across several components, call `clearSelection()` on the previous one.
+- Ignored on macOS and web.
+
+**Imperative handle.** `ref` exposes `clearSelection()`, which clears the selection (and any long-pressed block) and fires `active: false`. It also forwards `measure`, `measureInWindow` and `measureLayout`.
+
+```tsx
+const ref = useRef<EnrichedMarkdownTextInstance>(null);
+
+<EnrichedMarkdownText
+  ref={ref}
+  markdown={content}
+  contextMenuHidden
+  onSelectionChange={(e) => {
+    if (!e.active) return hideMenu();
+    ref.current?.measureInWindow((x, y) =>
+      showMenuDebounced({ x: x + e.startRect.x, y: y + e.startRect.y }, e.markdown)
+    );
+  }}
+/>;
+
+// After the menu action:
+ref.current?.clearSelection();
+```
+
 ### `enableLinkPreview`
 
 Controls the native link preview on long press (iOS only). Automatically set to `false` when `onLinkLongPress` is provided.
@@ -228,6 +337,8 @@ Notes:
   prop suppresses it the same way.
 - Applies to `EnrichedMarkdownText` only — it does not affect
   `EnrichedMarkdownTextInput`.
+- To show your own menu instead, use [`onSelectionChange`](#onselectionchange);
+  with this prop on, block long-presses are reported through it as well.
 
 ### `selectionColor`
 

package/docs/MENTIONS.md

@@ -69,7 +69,14 @@ linkVariants: {
 }
 ```
 
-Each key is a regex tested against the link URL. First match wins. Unspecified properties inherit from the base `link` style. Patterns are auto-sorted longest-first.
+Each key is a regex tested against the link URL. First match wins. Patterns are auto-sorted longest-first.
+
+Inheritance from the base `link` style is split in two groups:
+
+- **Text** (`color`, `underline`): unspecified properties inherit from `link`.
+- **Box** (`backgroundColor`, `borderRadius`, `paddingHorizontal`, `paddingVertical`, `borderColor`, `borderWidth`): never inherited. A variant that sets none of them renders without a chip, even when `link` is a chip.
+
+`fontFamily` is only configurable on `link` and applies to every variant. See [Link chips](STYLES.md#link-chips) for the box properties.
 
 ## Positioning the Suggestion List
 

package/docs/STYLES.md

@@ -368,6 +368,33 @@ Per-token foreground colors for syntax highlighting, keyed on the highlight toke
 | `fontFamily` | `string` | Font family for links. Overrides the parent block's font family when set |
 | `color` | `string` | Link text color |
 | `underline` | `boolean` | Show underline |
+| `backgroundColor` | `string` | Chip background, drawn behind the link's glyphs (ascender to descender) plus padding |
+| `borderRadius` | `number` | Chip corner radius |
+| `paddingHorizontal` | `number` | Space added before and after the link text. It takes real room in the line, so it affects wrapping and measured size |
+| `paddingVertical` | `number` | Extends the chip above and below the text. Drawn only: it does not change the line height, so it can overlap neighbouring lines (or be clipped at the component's top/bottom edge) if the line height is too small |
+| `borderColor` | `string` | Chip border color |
+| `borderWidth` | `number` | Chip border width, drawn inset (does not grow the chip) |
+
+#### Link chips
+
+Setting `backgroundColor`, `borderRadius`, padding or a border turns a link into a chip. When a link wraps, each line gets its own piece of the chip; only the outer ends are rounded and the border is left open where the link breaks.
+
+```tsx
+link: {
+  color: '#3346C8',
+  underline: false,
+  backgroundColor: '#DCE2FF',
+  borderRadius: 5,
+  paddingHorizontal: 7,
+  paddingVertical: 4,
+}
+```
+
+Horizontal padding is reserved with an invisible non-breaking spacer at each end of the link, so the padding always stays attached to the text on wrap. The spacer is removed from copied text (plain, HTML, RTF, Markdown and `onCopy`) and is part of the link's tap area.
+
+On iOS (and in RTF copies), links inside table cells fall back to a plain text background: `backgroundColor` and `paddingHorizontal` are kept (the background covers the horizontal padding), but `borderRadius`, `paddingVertical` and the border are not drawn.
+
+Use [`renderLinkDecoration`](API_REFERENCE.md#renderlinkdecoration) to draw a React Native view on top of a chip (e.g. a badge or icon).
 
 ### Strong-specific
 

package/docs/TEXT.md

@@ -95,6 +95,8 @@ Links in Markdown are interactive and can be handled with the `onLinkPress` and
 
 See the [API Reference](API_REFERENCE.md#onlinkpress) for detailed examples and usage.
 
+Links can be styled as chips (background, radius, padding, border — see [Link chips](STYLES.md#link-chips)) and decorated with your own views via [`renderLinkDecoration`](API_REFERENCE.md#renderlinkdecoration).
+
 ## Supported Markdown Elements
 
 `react-native-enriched-markdown-scaffold` supports a comprehensive set of Markdown elements. See [Element Structure](ELEMENTS_STRUCTURE.md) for a detailed overview of all supported elements, their syntax, block vs inline categorization, nesting behavior, and how elements inherit typography from their parent blocks.