react-native-enriched-markdown-scaffold 1.0.2-scaffold.1 → 1.0.2-scaffold.10

package/android/src/math/java/com/swmansion/enriched/markdown/spans/MathInlineSpan.kt

@@ -16,6 +16,7 @@ class MathInlineSpan(
   private val textColor: Int,
   private val paddingVertical: Float,
   private val fontWeight: String = "normal",
+  private val glyphOverflow: Float = 0f,
 ) : ReplacementSpan() {
   private var cachedBitmap: Bitmap? = null
   private var cachedWidth = 0
@@ -31,18 +32,24 @@ class MathInlineSpan(
       val displayList = RaTeXEngine.parseBlocking(latex, displayMode = false, color = textColor)
       val renderer = RaTeXRenderer(displayList, fontSize, ratexTypefaceLoader(fontWeight))
 
-      cachedWidth = renderer.widthPx.toInt().coerceAtLeast(1)
+      cachedWidth = ceil(renderer.widthPx).toInt().coerceAtLeast(1)
       mathAscent = renderer.heightPx
       mathDescent = renderer.depthPx
 
+      // RaTeX reports TeX metric boxes, which digit and capital outlines (and the
+      // fake-bold stroke) overshoot; the bitmap keeps glyphOverflow px of headroom
+      // on both sides so that ink is not cut off.
+      val overflowPx = glyphOverflow.toInt()
       val bitmap =
         Bitmap.createBitmap(
           cachedWidth,
-          ceil(renderer.totalHeightPx).toInt().coerceAtLeast(1),
+          ceil(renderer.totalHeightPx).toInt().coerceAtLeast(1) + overflowPx * 2,
           Bitmap.Config.ARGB_8888,
         )
 
-      renderer.draw(Canvas(bitmap))
+      val canvas = Canvas(bitmap)
+      canvas.translate(0f, overflowPx.toFloat())
+      renderer.draw(canvas)
       cachedBitmap = bitmap
     } catch (_: Exception) {
       renderFailed = true
@@ -66,9 +73,9 @@ class MathInlineSpan(
       // Must stay identical to MathInlinePlaceholderSpan.getSize: that span measures
       // this one off the main thread, and a box that disagrees by even a pixel either
       // clips the formula or eats the padding this field is here to add.
-      ascent = -ceil(mathAscent + paddingVertical).toInt()
+      ascent = -ceil(mathAscent + (paddingVertical + glyphOverflow)).toInt()
       top = ascent
-      descent = ceil(mathDescent + paddingVertical).toInt()
+      descent = ceil(mathDescent + (paddingVertical + glyphOverflow)).toInt()
       bottom = descent
     }
 
@@ -88,7 +95,7 @@ class MathInlineSpan(
   ) {
     prepareResources()
     cachedBitmap?.let {
-      val bitmapY = y - ceil(mathAscent)
+      val bitmapY = y - ceil(mathAscent) - glyphOverflow
       canvas.drawBitmap(it, x, bitmapY, paint)
     }
   }

package/android/src/math/java/com/swmansion/enriched/markdown/spans/MathMeasureHelper.kt

@@ -5,6 +5,7 @@ import android.util.Log
 import io.ratex.RaTeXEngine
 import io.ratex.RaTeXFontLoader
 import io.ratex.RaTeXRenderer
+import kotlin.math.ceil
 
 object MathMeasureHelper {
   @JvmStatic
@@ -37,7 +38,7 @@ object MathMeasureHelper {
       }
 
     return MathMetrics(
-      renderer.widthPx.toInt(),
+      ceil(renderer.widthPx).toInt().coerceAtLeast(1),
       renderer.heightPx,
       renderer.depthPx,
     )

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

@@ -42,6 +42,11 @@ class MathContainerView(
   var copyLabel: String = ""
   var copyAsMarkdownLabel: String = ""
   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()
@@ -53,7 +58,7 @@ class MathContainerView(
       else -> Gravity.CENTER_HORIZONTAL
     }
 
-  private val mathView = RaTeXCanvasView(context)
+  private val mathView = RaTeXCanvasView(context, mathStyle.glyphOverflow)
 
   init {
     setBackgroundColor(mathStyle.backgroundColor)
@@ -118,20 +123,27 @@ 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) {
-      item(ContextMenuPopup.Icon.COPY, copyLabel) {
+      blockCopyItems(menuOptions, copyLabel, copyAsMarkdownLabel, markdown = {
+        "$$\n$cachedLatex\n$$"
+      }, rawText = { cachedLatex }, copyRaw = {
         clipboard.setPrimaryClip(ClipData.newPlainText("Math", cachedLatex))
-      }
-      item(ContextMenuPopup.Icon.DOCUMENT, copyAsMarkdownLabel) {
+      }, copyMarkdown = {
         clipboard.setPrimaryClip(ClipData.newPlainText("Math", "$$\n$cachedLatex\n$$"))
-      }
+      })
     }
   }
 
+  // glyphOverflow px of headroom above and below the RaTeX box: digit and capital
+  // outlines (and the fake-bold stroke) overshoot it, and this view clips to its size.
   private class RaTeXCanvasView(
     context: Context,
+    private val glyphOverflow: Float,
   ) : View(context) {
     var renderer: RaTeXRenderer? = null
 
@@ -144,12 +156,16 @@ class MathContainerView(
           ?: return setMeasuredDimension(0, 0)
       setMeasuredDimension(
         ceil(currentRenderer.widthPx).toInt().coerceAtLeast(1),
-        ceil(currentRenderer.totalHeightPx).toInt().coerceAtLeast(1),
+        ceil(currentRenderer.totalHeightPx).toInt().coerceAtLeast(1) + (glyphOverflow * 2).toInt(),
       )
     }
 
     override fun onDraw(canvas: Canvas) {
-      renderer?.draw(canvas)
+      val currentRenderer = renderer ?: return
+      canvas.save()
+      canvas.translate(0f, glyphOverflow)
+      currentRenderer.draw(canvas)
+      canvas.restore()
     }
   }
 
@@ -166,7 +182,7 @@ class MathContainerView(
           mode = MathRenderMode.Display,
         )
       val metrics = MathMeasureHelper.measure(context, listOf(request)).first()
-      return ceil(metrics.ascent + metrics.descent).toInt() + (mathStyle.padding * 2)
+      return ceil(metrics.ascent + metrics.descent).toInt() + (mathStyle.padding * 2) + (mathStyle.glyphOverflow * 2)
     }
 
     private const val TAG = "MathContainerView"

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).
@@ -122,6 +175,112 @@ Only fires when `flavor="github"` — the copy button is part of the GitHub flav
 />
 ```
 
+### `onCopy`
+
+Takes over the **Copy** item of the text selection menu and of the table, math and code block menus. When set, native does **not** write the clipboard: it calls `onCopy` with the copied content and your handler writes whatever it wants — for example with [`expo-clipboard`](https://docs.expo.dev/versions/latest/sdk/clipboard/). Use it to post-process what users copy (strip formatting, drop link targets…) without a native change.
+
+| Type                          | Default Value | Platform |
+| ----------------------------- | ------------- | -------- |
+| `(event: CopyEvent) => void`  | -             | Both     |
+
+```ts
+interface CopyEvent {
+  /** Which menu the Copy item belongs to. */
+  source: 'selection' | 'math' | 'table' | 'code';
+  /** What `copy.format: 'markdown'` would write. */
+  markdown: string;
+  /** Rendered text of the selection, or the block's raw content. */
+  text: string;
+  /** The selection spans the whole component (`markdown` is the source). Always true for blocks. */
+  whole: boolean;
+}
+```
+
+| `source`    | `markdown`                                                                 | `text`                        |
+| ----------- | -------------------------------------------------------------------------- | ----------------------------- |
+| `selection` | Original source when `whole`, otherwise rebuilt from the rendered styles   | Selected text as rendered     |
+| `math`      | `$$…$$`                                                                     | LaTeX                         |
+| `table`     | The table as Markdown                                                      | Tab-separated cells           |
+| `code`      | Fenced code block                                                          | Raw code                      |
+
+- `onCopy` overrides `selectionMenuConfig.copy.format`; `copy.enabled: false` still hides the item, so no event fires.
+- **Copy as Markdown**, the code block header copy button and the VoiceOver copy action are unaffected. `onCopyPress` does not fire for an intercepted Copy.
+- With `flavor="github"` the text is split into segments around blocks, so a selection is `whole` only when the markdown renders as a single text segment.
+- A rebuilt `markdown` wraps each styled run separately (`**a *****b***** c**`) and does not escape literal `*` / `_`.
+- Copying with a hardware keyboard (Cmd+C / Ctrl+C) does not go through the menu and is not intercepted.
+- Ignored on macOS. On web the prop is not this API: it reaches the container `div` as the DOM `onCopy` clipboard event.
+
+**Example:**
+
+```tsx
+import * as Clipboard from 'expo-clipboard';
+
+<EnrichedMarkdownText
+  markdown={content}
+  onCopy={({ source, markdown }) => {
+    Clipboard.setStringAsync(source === 'selection' ? stripFormatting(markdown) : markdown);
+  }}
+/>
+```
+
+### `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;
+  /** `true` while a selection handle is dragged (iOS; always `false` on Android). */
+  adjusting: boolean;
+}
+```
+
+- 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.
+- On iOS the selection isn't reported while a handle is dragged: the event fires with `adjusting: true` (and the selection as it was) when the drag begins, and with `adjusting: false` and the new selection when the finger lifts. Hide your menu while `adjusting` is `true`. Android has no such flag (`adjusting` is always `false`) but reports every step of the drag, so debounce before showing the menu there too.
+- 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 || e.adjusting) 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.
@@ -142,6 +301,16 @@ You can also control this behavior explicitly without providing a handler:
 />
 ```
 
+### `linkLongPressSelects`
+
+Long-pressing a link selects its label and shows the selection edit menu (the same one a manual selection gets), instead of the system link preview (iOS only). Takes precedence over `enableLinkPreview` and `onLinkLongPress`.
+
+| Type      | Default Value | Platform |
+| --------- | ------------- | -------- |
+| `boolean` | `false`       | iOS      |
+
+Only the link label is selected, not the chip padding; the selection handles can be dragged to extend it. Long-pressing inline math always behaves this way, without the prop.
+
 ### `selectable`
 
 Whether text can be selected.
@@ -180,6 +349,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`
 
@@ -469,7 +640,7 @@ Controls built-in actions added to the native text selection menu. Custom app-pr
 | -------------------- | ---------------------------------------------- | -------- |
 | `SelectionMenuConfig` | `{}` (see shape below for per-field defaults) | iOS, Android, macOS |
 
-Each item takes an object: `{ enabled }` toggles visibility (the system `copy` item can't be hidden — only relabeled) and `label` overrides the English default. The labels apply to the main text selection menu as well as the table and math block copy menus.
+Each item takes an object: `{ enabled }` toggles visibility and `label` overrides the English default. Items and labels apply to the main text selection menu as well as the table, math and code block copy menus. `copy.enabled`, `copy.format` and `systemItems` are ignored on macOS.
 
 > **Deprecation:** the previous boolean shape (`copyAsMarkdown: false`) is still accepted at runtime for backward compatibility but logs a one-time warning. It will be removed in 0.8 — migrate to `{ enabled: false }`.
 
@@ -477,9 +648,13 @@ Each item takes an object: `{ enabled }` toggles visibility (the system `copy` i
 
 ```ts
 interface SelectionMenuConfig {
-  /** System "Copy" item — can't be hidden, only relabeled. @default { label: "Copy" } */
-  copy?: { label?: string };
-  /** "Copy as Markdown" action. @default { enabled: true, label: "Copy as Markdown" } */
+  /**
+   * "Copy" item. `format: 'markdown'` copies Markdown as plain text instead of
+   * rich text (text selections) or the raw content (blocks).
+   * @default { enabled: true, label: "Copy", format: "rich" }
+   */
+  copy?: { enabled?: boolean; label?: string; format?: 'rich' | 'markdown' };
+  /** "Copy as Markdown" action, in the text and block menus. @default { enabled: true, label: "Copy as Markdown" } */
   copyAsMarkdown?: { enabled?: boolean; label?: string };
   /** "Copy Image URL" action, shown when the selection contains images. */
   copyImageUrl?: {
@@ -489,6 +664,10 @@ interface SelectionMenuConfig {
     /** Forms for multiple images, chosen with Intl.PluralRules. @default { other: "Copy {count} Image URLs" } */
     pluralLabels?: SelectionMenuPluralLabels;
   };
+  /** `'none'` drops every system item (Select All, Look Up, Share, Translate…). @default 'default' */
+  systemItems?: 'default' | 'none';
+  /** Copy button in the code block header. @default { enabled: true } */
+  codeBlockCopyButton?: { enabled?: boolean };
 }
 
 interface SelectionMenuPluralLabels {

package/docs/COPY_OPTIONS.md

@@ -44,6 +44,46 @@ Use `selectionMenuConfig` to hide built-in selection menu actions while keeping
 />
 ```
 
+### Copy as Markdown only, no system items
+
+`copy` can also be hidden (`{ enabled: false }`) or switched to Markdown with
+`format: 'markdown'`, and `systemItems: 'none'` drops everything the OS adds
+(Select All, Look Up, Share, Translate, app text actions…):
+
+```tsx
+<EnrichedMarkdownText
+  markdown={content}
+  selectionMenuConfig={{
+    copy: { format: 'markdown' }, // inline math → $…$, plain text only
+    copyAsMarkdown: { enabled: false },
+    systemItems: 'none',
+    codeBlockCopyButton: { enabled: false },
+  }}
+/>
+```
+
+The same `copy` and `copyAsMarkdown` settings drive the long-press menus on
+table, math and code blocks: with `format: 'markdown'` their Copy item writes
+the block's Markdown (`$$…$$`, a fenced code block, a Markdown table). On code
+blocks, the header copy button and the VoiceOver copy action always copy the raw
+code and fire `onCopyPress`; `codeBlockCopyButton: { enabled: false }` hides the
+button, and `copy: { enabled: false }` also removes the VoiceOver action.
+`copy.enabled`, `copy.format` and `systemItems` are ignored on macOS.
+
+### Handling Copy in JS
+
+To decide in JS what lands on the clipboard, pass `onCopy`. The Copy item
+(text selection and block menus) then writes nothing itself and hands you the
+content — `markdown`, `text`, `source` and `whole` — to write with your
+clipboard library. See [`onCopy`](API_REFERENCE.md#oncopy).
+
+```tsx
+<EnrichedMarkdownText
+  markdown={content}
+  onCopy={({ markdown }) => Clipboard.setStringAsync(markdown)}
+/>
+```
+
 To turn the menu off entirely rather than item by item, use `contextMenuHidden`:
 
 ```tsx

package/docs/INPUT.md

@@ -283,11 +283,13 @@ Because nothing is written until you resolve, an async decision is safe: the sel
 | | Behavior |
 | --- | --- |
 | **iOS** | Context menu and hardware ⌘V. `markdown` is set when the copy source was an `EnrichedMarkdownTextInput`. |
-| **Android** | Context menu, hardware Ctrl+V and `KEYCODE_PASTE`. `markdown` is always `''`, and `resolvePaste` inserts `text` verbatim — so an intercepted copy-then-paste inside the app lands as plain text, even though the un-intercepted paste restores the formatting. |
+| **Android** | Context menu, hardware Ctrl+V, `KEYCODE_PASTE`, and a keyboard clipboard chip (Gboard, Samsung Keyboard) — see below. `markdown` is always `''`, and `resolvePaste` inserts `text` verbatim — so an intercepted copy-then-paste inside the app lands as plain text, even though the un-intercepted paste restores the formatting. |
 | **macOS** | `interceptPaste` is ignored, `onPaste` never fires, and pastes insert inline as usual. |
 
 Only clipboard content is intercepted. Drag-and-drop, autofill and IME content insertion bypass `onPaste` on both platforms and insert normally — on Android they are filtered out explicitly, so an autofill never arrives looking like a paste.
 
+On Android a keyboard clipboard chip does not paste through the menu: the keyboard types the text in through the input connection. The input reports it as a paste when the committed text is exactly the current clipboard text and is at least 16 characters long or spans more than one line. Shorter single-line chip pastes, entries from the keyboard's clipboard history other than the current clip, and text the keyboard changes on the way insert inline without `onPaste`.
+
 ## Style Detection
 
 All of the above styles can be detected with the use of [onChangeState](API_REFERENCE.md#onchangestate) callback payload.

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.

package/docs/WEB.md

@@ -37,6 +37,7 @@ The web implementation also exports `WebMarkdownTextProps` which extends `Enrich
 |---|---|
 | `flavor` | The web renderer always uses full GFM capabilities. On native, `flavor` controls whether a single `TextView` (CommonMark) or container-based renderer (GitHub) is used; the DOM has no such constraint. |
 | `enableLinkPreview` | iOS-only feature (native link preview on long press). |
+| `linkLongPressSelects` | iOS-only feature (selects a link on long press instead of the link preview). |
 | `allowFontScaling` / `maxFontSizeMultiplier` | React Native text scaling props. Browsers handle font scaling natively via OS accessibility settings. |
 | `streamingAnimation` | Native-only tail fade-in animation. Not yet implemented on web. |
 | `streamingConfig` | Native-only streaming table configuration. Not yet implemented on web. |