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

package/src/index.web.tsx

@@ -1,5 +1,9 @@
 export { EnrichedMarkdownText, default } from './web/EnrichedMarkdownText';
-export type { EnrichedMarkdownTextProps } from './types/MarkdownTextProps.web';
+export type {
+  EnrichedMarkdownTextProps,
+  LinkDecorationInfo,
+  LinkRect,
+} from './types/MarkdownTextProps.web';
 export type { MarkdownStyle, Md4cFlags } from './types/MarkdownStyle';
 export type {
   LinkPressEvent,

package/src/jest/index.tsx

@@ -26,7 +26,10 @@ import type {
   EnrichedMarkdownTextInputProps,
   InsertMathOptions,
 } from '../EnrichedMarkdownTextInput';
-import type { EnrichedMarkdownTextProps } from '../native/EnrichedMarkdownText';
+import type {
+  EnrichedMarkdownTextInstance,
+  EnrichedMarkdownTextProps,
+} from '../native/EnrichedMarkdownText';
 
 export {
   DEFAULT_ACCESSIBILITY_LABELS,
@@ -165,6 +168,7 @@ export const EnrichedMarkdownTextInput = ({
 };
 
 export const EnrichedMarkdownText = ({
+  ref,
   markdown,
   containerStyle,
   testID,
@@ -178,6 +182,7 @@ export const EnrichedMarkdownText = ({
   onLinkPress: _onLinkPress,
   onLinkLongPress: _onLinkLongPress,
   onTaskListItemPress: _onTaskListItemPress,
+  onSelectionChange: _onSelectionChange,
   enableLinkPreview: _enableLinkPreview,
   selectable: _selectable,
   md4cFlags: _md4cFlags,
@@ -198,6 +203,21 @@ export const EnrichedMarkdownText = ({
   lineBreakStrategyIOS: _lineBreakStrategyIOS,
   writingDirection: _writingDirection,
 }: EnrichedMarkdownTextProps) => {
+  const instanceRef = useRef<EnrichedMarkdownTextInstance | null>(null);
+  if (instanceRef.current === null) {
+    instanceRef.current = {
+      // No native selection under Jest; the mock records the call.
+      clearSelection: spy(() => {}),
+      measure: spy((callback) => callback(0, 0, 0, 0, 0, 0)),
+      measureInWindow: spy((callback) => callback(0, 0, 0, 0)),
+      measureLayout: spy((_relativeToNativeNode, onSuccess) =>
+        onSuccess(0, 0, 0, 0)
+      ),
+    };
+  }
+
+  useImperativeHandle(ref, () => instanceRef.current!);
+
   return (
     <Text
       style={containerStyle}

package/src/native/EnrichedMarkdownText.tsx

@@ -1,21 +1,44 @@
-import { useMemo, useCallback, useRef, useEffect } from 'react';
-import EnrichedMarkdownTextNativeComponent from '../EnrichedMarkdownTextNativeComponent';
-import type { MarkdownStyleInternal } from '../EnrichedMarkdownTextNativeComponent';
-import EnrichedMarkdownNativeComponent from '../EnrichedMarkdownNativeComponent';
+import {
+  useMemo,
+  useCallback,
+  useRef,
+  useEffect,
+  useState,
+  useImperativeHandle,
+} from 'react';
+import EnrichedMarkdownTextNativeComponent, {
+  Commands as TextCommands,
+} from '../EnrichedMarkdownTextNativeComponent';
+import type {
+  LinkLayoutEvent,
+  MarkdownStyleInternal,
+  SelectionChangeEvent as NativeSelectionChangeEvent,
+} from '../EnrichedMarkdownTextNativeComponent';
+import EnrichedMarkdownNativeComponent, {
+  Commands as MarkdownCommands,
+} from '../EnrichedMarkdownNativeComponent';
 import { normalizeMarkdownStyle } from '../normalizeMarkdownStyle';
 import { resolveAccessibilityLabels } from '../accessibilityLabelDefaults';
 import {
   normalizeMenuItem,
   normalizeLegacyBooleanMenuItem,
 } from '../normalizeMenuItem';
-import type { NativeSyntheticEvent } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import type {
+  HostInstance,
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+} from 'react-native';
 import type { MarkdownStyle, Md4cFlags } from '../types/MarkdownStyle';
 import type {
   EnrichedMarkdownTextProps,
+  EnrichedMarkdownTextInstance,
   StreamingConfig,
   ContextMenuItem,
   SelectionMenuConfig,
   SelectionMenuPluralLabels,
+  LinkDecorationInfo,
+  LinkRect,
 } from '../types/MarkdownTextProps';
 import type {
   LinkPressEvent,
@@ -24,15 +47,20 @@ import type {
   CopyPressEvent,
   CopyEvent,
   OnContextMenuItemPressEvent,
+  SelectionChangeEvent,
+  SelectionRect,
 } from '../types/events';
 
 export type { MarkdownStyle, Md4cFlags };
 export type {
   EnrichedMarkdownTextProps,
+  EnrichedMarkdownTextInstance,
   StreamingConfig,
   ContextMenuItem,
   SelectionMenuConfig,
   SelectionMenuPluralLabels,
+  LinkDecorationInfo,
+  LinkRect,
 };
 export type {
   LinkPressEvent,
@@ -40,6 +68,8 @@ export type {
   TaskListItemPressEvent,
   CopyPressEvent,
   CopyEvent,
+  SelectionChangeEvent,
+  SelectionRect,
 };
 
 // Default English labels for the built-in selection menu actions. Defaults are
@@ -103,6 +133,34 @@ const buildPluralTemplates = (
   return templates;
 };
 
+type LinkLayoutFragment = LinkLayoutEvent['fragments'][number];
+
+/** Groups the flat per-line fragments native reports into one entry per link. */
+const groupLinkFragments = (
+  fragments: ReadonlyArray<LinkLayoutFragment>
+): LinkDecorationInfo[] => {
+  const byIndex = new Map<number, LinkDecorationInfo>();
+  for (const { linkIndex, url, text, x, y, width, height } of fragments) {
+    const rect: LinkRect = { x, y, width, height };
+    const info = byIndex.get(linkIndex);
+    if (info) {
+      info.rects.push(rect);
+      info.rect = rect;
+    } else {
+      byIndex.set(linkIndex, {
+        index: linkIndex,
+        url,
+        text,
+        rect,
+        rects: [rect],
+      });
+    }
+  }
+  return [...byIndex.values()];
+};
+
+const ZERO_OFFSET = { x: 0, y: 0 };
+
 const defaultMd4cFlags: Md4cFlags = {
   underline: false,
   superscript: false,
@@ -113,6 +171,7 @@ const defaultMd4cFlags: Md4cFlags = {
 };
 
 export const EnrichedMarkdownText = ({
+  ref,
   markdown,
   markdownStyle = {},
   containerStyle,
@@ -122,6 +181,7 @@ export const EnrichedMarkdownText = ({
   enableTaskListItemToggle = true,
   onCopyPress,
   onCopy,
+  onSelectionChange,
   enableLinkPreview,
   selectable = true,
   md4cFlags = defaultMd4cFlags,
@@ -142,6 +202,8 @@ export const EnrichedMarkdownText = ({
   textBreakStrategy,
   lineBreakStrategyIOS,
   writingDirection = 'first-strong',
+  renderLinkDecoration,
+  onLayout,
   ...rest
 }: EnrichedMarkdownTextProps) => {
   const normalizedStyleRef = useRef<MarkdownStyleInternal | null>(null);
@@ -260,6 +322,71 @@ export const EnrichedMarkdownText = ({
   );
   const interceptCopy = onCopy != null;
 
+  const decorated = renderLinkDecoration != null;
+  const [linkLayout, setLinkLayout] = useState<LinkDecorationInfo[]>([]);
+  // Where the native view sits inside the wrapper (the wrapper's padding).
+  const [nativeOffset, setNativeOffset] = useState(ZERO_OFFSET);
+
+  const handleLinkLayout = useCallback(
+    (e: NativeSyntheticEvent<LinkLayoutEvent>) => {
+      setLinkLayout(groupLinkFragments(e.nativeEvent.fragments));
+    },
+    []
+  );
+
+  const handleNativeLayout = useCallback((e: LayoutChangeEvent) => {
+    const { x, y } = e.nativeEvent.layout;
+    setNativeOffset((prev) => (prev.x === x && prev.y === y ? prev : { x, y }));
+  }, []);
+
+  // Rects stay relative to the native view — the view the ref's
+  // `measureInWindow` measures — even when decorations wrap it.
+  const handleSelectionChange = useCallback(
+    // Codegen types `source` as a plain string; native only sends the four
+    // values of SelectionChangeEvent['source'].
+    (e: NativeSyntheticEvent<NativeSelectionChangeEvent>) => {
+      const { source, ...payload } = e.nativeEvent;
+      onSelectionChange?.({
+        ...payload,
+        source: source as SelectionChangeEvent['source'],
+      });
+    },
+    [onSelectionChange]
+  );
+
+  const nativeRef = useRef<HostInstance | null>(null);
+  const isGithubFlavor = flavor === 'github';
+  useImperativeHandle(
+    ref,
+    () => ({
+      clearSelection: () => {
+        const node = nativeRef.current;
+        if (node == null) return;
+        // Codegen's ViewRef resolves to `never` with RN 0.84's function-based
+        // HostComponent type — the cast is safe at runtime.
+        if (isGithubFlavor) {
+          MarkdownCommands.clearSelection(
+            node as Parameters<(typeof MarkdownCommands)['clearSelection']>[0]
+          );
+        } else {
+          TextCommands.clearSelection(
+            node as Parameters<(typeof TextCommands)['clearSelection']>[0]
+          );
+        }
+      },
+      measure: (callback) => nativeRef.current?.measure(callback),
+      measureInWindow: (callback) =>
+        nativeRef.current?.measureInWindow(callback),
+      measureLayout: (relativeToNativeNode, onSuccess, onFail) =>
+        nativeRef.current?.measureLayout(
+          relativeToNativeNode,
+          onSuccess,
+          onFail
+        ),
+    }),
+    [isGithubFlavor]
+  );
+
   const tableMode = streamingConfig?.tableMode ?? 'progressive';
   const codeBlockMode = streamingConfig?.codeBlockMode ?? 'progressive';
   const normalizedStreamingConfig = useMemo(
@@ -341,6 +468,8 @@ export const EnrichedMarkdownText = ({
     enableTaskListItemToggle,
     onCopyPress: handleCopyPress,
     onCopyRequest: handleCopyRequest,
+    emitSelectionChange: onSelectionChange != null,
+    onSelectionChange: handleSelectionChange,
     enableLinkPreview: onLinkLongPress == null && (enableLinkPreview ?? true),
     selectable,
     md4cFlags: normalizedMd4cFlags,
@@ -365,11 +494,55 @@ export const EnrichedMarkdownText = ({
     ...rest,
   };
 
-  if (flavor === 'github') {
-    return <EnrichedMarkdownNativeComponent {...sharedProps} />;
+  const NativeComponent = isGithubFlavor
+    ? EnrichedMarkdownNativeComponent
+    : EnrichedMarkdownTextNativeComponent;
+
+  // Without decorations the native view is returned as-is (no wrapper, no
+  // layout events) so existing layouts are untouched.
+  if (!decorated) {
+    return (
+      <NativeComponent {...sharedProps} ref={nativeRef} onLayout={onLayout} />
+    );
   }
 
-  return <EnrichedMarkdownTextNativeComponent {...sharedProps} />;
+  return (
+    <View style={containerStyle} onLayout={onLayout}>
+      <NativeComponent
+        {...sharedProps}
+        ref={nativeRef}
+        style={undefined}
+        emitLinkLayout
+        onLinkLayout={handleLinkLayout}
+        onLayout={handleNativeLayout}
+      />
+      {linkLayout.map((info) => {
+        const decoration = renderLinkDecoration(info);
+        if (decoration == null) return null;
+        return (
+          <View
+            key={info.index}
+            pointerEvents="box-none"
+            style={[
+              styles.decoration,
+              {
+                left: nativeOffset.x + info.rect.x,
+                top: nativeOffset.y + info.rect.y,
+                width: info.rect.width,
+                height: info.rect.height,
+              },
+            ]}
+          >
+            {decoration}
+          </View>
+        );
+      })}
+    </View>
+  );
 };
 
+const styles = StyleSheet.create({
+  decoration: { position: 'absolute' },
+});
+
 export default EnrichedMarkdownText;

package/src/normalizeMarkdownStyle.ts

@@ -183,6 +183,11 @@ const DEFAULT_NORMALIZED_STYLE = Object.freeze({
     color: normalizeColor('#2563EB')!,
     underline: true,
     backgroundColor: normalizeColor('transparent')!,
+    borderRadius: 0,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    borderColor: normalizeColor('transparent')!,
+    borderWidth: 0,
   },
   linkVariants: [],
   strong: { fontFamily: '', fontWeight: 'bold', color: undefined },
@@ -338,9 +343,17 @@ export const normalizeMarkdownStyle = (
         color: ((override.color ? normalizeColor(override.color) : null) ??
           linkBase.color) as string,
         underline: override.underline ?? linkBase.underline,
+        // Chip ("box") properties never inherit from the base link style.
         backgroundColor: (override.backgroundColor
           ? (normalizeColor(override.backgroundColor) ?? transparent)
           : transparent) as string,
+        borderRadius: override.borderRadius ?? 0,
+        paddingHorizontal: override.paddingHorizontal ?? 0,
+        paddingVertical: override.paddingVertical ?? 0,
+        borderColor: (override.borderColor
+          ? (normalizeColor(override.borderColor) ?? transparent)
+          : transparent) as string,
+        borderWidth: override.borderWidth ?? 0,
       };
     }
   );

package/src/normalizeMarkdownStyle.web.ts

@@ -147,6 +147,11 @@ const DEFAULT_NORMALIZED_STYLE: MarkdownStyleInternal = Object.freeze({
     color: '#2563EB',
     underline: true,
     backgroundColor: 'transparent',
+    borderRadius: 0,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    borderColor: 'transparent',
+    borderWidth: 0,
   },
   linkVariants: [],
   strong: { fontFamily: '', fontWeight: 'bold', color: undefined },
@@ -289,7 +294,13 @@ export const normalizeMarkdownStyle = (
         pattern,
         color: override.color ?? linkBase.color,
         underline: override.underline ?? linkBase.underline,
+        // Chip ("box") properties never inherit from the base link style.
         backgroundColor: override.backgroundColor ?? 'transparent',
+        borderRadius: override.borderRadius ?? 0,
+        paddingHorizontal: override.paddingHorizontal ?? 0,
+        paddingVertical: override.paddingVertical ?? 0,
+        borderColor: override.borderColor ?? 'transparent',
+        borderWidth: override.borderWidth ?? 0,
       };
     }
   );

package/src/types/MarkdownStyle.ts

@@ -84,17 +84,39 @@ interface CodeBlockStyle extends BaseBlockStyle {
   syntaxColors?: CodeBlockSyntaxColors;
 }
 
-export interface LinkStyle {
+/**
+ * Chip ("box") properties shared by `link` and `linkVariants`. Unlike `color`
+ * and `underline`, these never inherit from the base `link` style: a variant
+ * that omits them renders without a chip (`0` / `transparent`).
+ */
+interface LinkChipStyle {
+  backgroundColor?: string;
+  /** Corner radius of the chip, in dp. */
+  borderRadius?: number;
+  /**
+   * Horizontal padding, in dp. Reserves real space in the line on both outer
+   * edges of the link (affects measurement and wrapping).
+   */
+  paddingHorizontal?: number;
+  /**
+   * Vertical padding, in dp. Only affects the drawn chip (it bleeds into the
+   * surrounding line spacing); the line box is unchanged.
+   */
+  paddingVertical?: number;
+  borderColor?: string;
+  /** Border width, in dp. Drawn inset, within the chip bounds. */
+  borderWidth?: number;
+}
+
+export interface LinkStyle extends LinkChipStyle {
   fontFamily?: string;
   color?: string;
   underline?: boolean;
-  backgroundColor?: string;
 }
 
-export interface LinkVariantStyle {
+export interface LinkVariantStyle extends LinkChipStyle {
   color?: string;
   underline?: boolean;
-  backgroundColor?: string;
 }
 
 interface StrongStyle {
@@ -350,7 +372,9 @@ export interface MarkdownStyle {
    * specific patterns take precedence.
    *
    * `color` and `underline` inherit from the base `link` style when omitted.
-   * `backgroundColor` defaults to `transparent`.
+   * Chip properties (`backgroundColor`, `borderRadius`, `paddingHorizontal`,
+   * `paddingVertical`, `borderColor`, `borderWidth`) do not inherit: when
+   * omitted they default to `0` / `transparent`.
    * `fontFamily` always follows the base `link` style and cannot be overridden per-variant.
    *
    * @example

package/src/types/MarkdownStyleInternal.ts

@@ -88,6 +88,11 @@ interface LinkStyleInternal {
   color: string;
   underline: boolean;
   backgroundColor: string;
+  borderRadius: number;
+  paddingHorizontal: number;
+  paddingVertical: number;
+  borderColor: string;
+  borderWidth: number;
 }
 
 export interface LinkVariantEntryInternal {
@@ -95,6 +100,11 @@ export interface LinkVariantEntryInternal {
   color: string;
   underline: boolean;
   backgroundColor: string;
+  borderRadius: number;
+  paddingHorizontal: number;
+  paddingVertical: number;
+  borderColor: string;
+  borderWidth: number;
 }
 
 interface StrongStyleInternal {

package/src/types/MarkdownTextProps.ts

@@ -1,4 +1,11 @@
-import type { ColorValue, ViewProps, ViewStyle, TextStyle } from 'react-native';
+import type { ReactNode, RefObject } from 'react';
+import type {
+  ColorValue,
+  HostInstance,
+  ViewProps,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
 import type { MarkdownStyle, Md4cFlags } from './MarkdownStyle';
 import type { AccessibilityLabels } from './AccessibilityLabels';
 import type {
@@ -7,8 +14,49 @@ import type {
   TaskListItemPressEvent,
   CopyPressEvent,
   CopyEvent,
+  SelectionChangeEvent,
 } from './events';
 
+/** Imperative handle of `EnrichedMarkdownText`, reached through its `ref`. */
+export interface EnrichedMarkdownTextInstance {
+  /**
+   * Clears the text selection (and any long-pressed block) and fires
+   * `onSelectionChange` with `active: false`.
+   * @platform ios, android
+   */
+  clearSelection: () => void;
+  measure: HostInstance['measure'];
+  measureInWindow: HostInstance['measureInWindow'];
+  measureLayout: HostInstance['measureLayout'];
+}
+
+/**
+ * A rect in dp, relative to the component's content box (inside any
+ * `containerStyle` padding).
+ */
+export interface LinkRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** Layout of one rendered link, passed to `renderLinkDecoration`. */
+export interface LinkDecorationInfo {
+  /** Position of the link in the document (0-based) — stable key for a link. */
+  index: number;
+  url: string;
+  /** The link's visible text. */
+  text: string;
+  /**
+   * Anchor rect. Native: the drawn chip (glyphs + padding) of the link's last
+   * line fragment. Web: the link's inline box.
+   */
+  rect: LinkRect;
+  /** Every line fragment of the link (several when it wraps). Web: `[rect]`. */
+  rects: LinkRect[];
+}
+
 /**
  * Public context menu item. Each item includes a JS-side `onPress` callback
  * that is called when the user taps the item in the selection context menu.
@@ -141,6 +189,11 @@ export interface StreamingConfig {
 }
 
 export interface EnrichedMarkdownTextProps extends Omit<ViewProps, 'style'> {
+  /**
+   * Imperative handle: `clearSelection()` plus the host `measure*` methods.
+   * @platform ios, android
+   */
+  ref?: RefObject<EnrichedMarkdownTextInstance | null>;
   /**
    * Markdown content to render.
    * @platform ios, android, web
@@ -178,6 +231,21 @@ export interface EnrichedMarkdownTextProps extends Omit<ViewProps, 'style'> {
    * @platform ios, android, web
    */
   onLinkLongPress?: (event: LinkLongPressEvent) => void;
+  /**
+   * Renders a decoration (e.g. a badge or icon) over each link. The returned
+   * node is placed in an absolutely positioned box matching `info.rect` (the
+   * link's last line fragment, including chip padding) with
+   * `pointerEvents="box-none"`; position content relative to it (negative
+   * offsets overflow the box). Return `null` to leave a link undecorated.
+   *
+   * Native caveats: rects arrive from native after layout, so decorations
+   * appear one frame after the text; links inside tables (`flavor="github"`)
+   * are not reported; content overflowing the component bounds does not
+   * receive touches on Android. Toggling this prop between set and unset
+   * remounts the native view.
+   * @platform ios, android, web
+   */
+  renderLinkDecoration?: (info: LinkDecorationInfo) => ReactNode | null;
   /**
    * Callback fired when a task list checkbox is tapped.
    *
@@ -226,6 +294,22 @@ export interface EnrichedMarkdownTextProps extends Omit<ViewProps, 'style'> {
    * @platform ios, android
    */
   onCopy?: (event: CopyEvent) => void;
+  /**
+   * Reports the text selection so the app can draw its own menu (pair it with
+   * `contextMenuHidden`). Fires at most once per frame while the selection
+   * changes, and with `active: false` once it is gone. With
+   * `contextMenuHidden`, a long press on a table / math / code block fires it
+   * too (`source` is the block kind, `whole: true`), since those blocks have no
+   * text selection of their own. Only one part of a component holds a
+   * selection at a time; clearing the selection of *other* components is up to
+   * the app (`ref.current.clearSelection()`).
+   *
+   * Rects are relative to the view that `ref.current.measureInWindow`
+   * measures — add that origin to position UI on screen. There is no
+   * "dragging" flag: debounce before showing a menu.
+   * @platform ios, android
+   */
+  onSelectionChange?: (event: SelectionChangeEvent) => void;
   /**
    * Controls whether the system link preview is shown on long press (iOS only).
    *

package/src/types/MarkdownTextProps.web.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, HTMLAttributes } from 'react';
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 import type { MarkdownStyle, Md4cFlags } from './MarkdownStyle';
 import type {
   LinkPressEvent,
@@ -6,6 +6,33 @@ import type {
   TaskListItemPressEvent,
 } from './events';
 
+/**
+ * A rect in dp, relative to the component's content box (inside any
+ * `containerStyle` padding).
+ */
+export interface LinkRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** Layout of one rendered link, passed to `renderLinkDecoration`. */
+export interface LinkDecorationInfo {
+  /** Position of the link in the document (0-based) — stable key for a link. */
+  index: number;
+  url: string;
+  /** The link's visible text. */
+  text: string;
+  /**
+   * Anchor rect. Native: the drawn chip (glyphs + padding) of the link's last
+   * line fragment. Web: the link's inline box.
+   */
+  rect: LinkRect;
+  /** Every line fragment of the link (several when it wraps). Web: `[rect]`. */
+  rects: LinkRect[];
+}
+
 export interface EnrichedMarkdownTextProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
   'style' | 'dir'
@@ -47,6 +74,21 @@ export interface EnrichedMarkdownTextProps extends Omit<
    * @platform ios, android, web
    */
   onLinkLongPress?: (event: LinkLongPressEvent) => void;
+  /**
+   * Renders a decoration (e.g. a badge or icon) over each link. The returned
+   * node is placed in an absolutely positioned box matching `info.rect` (the
+   * link's last line fragment, including chip padding) with
+   * `pointerEvents="box-none"`; position content relative to it (negative
+   * offsets overflow the box). Return `null` to leave a link undecorated.
+   *
+   * Native caveats: rects arrive from native after layout, so decorations
+   * appear one frame after the text; links inside tables (`flavor="github"`)
+   * are not reported; content overflowing the component bounds does not
+   * receive touches on Android. Toggling this prop between set and unset
+   * remounts the native view.
+   * @platform ios, android, web
+   */
+  renderLinkDecoration?: (info: LinkDecorationInfo) => ReactNode | null;
   /**
    * Callback fired when a task list checkbox is tapped.
    *