react-native-enriched-markdown-scaffold 1.0.2-scaffold.4 → 1.0.2-scaffold.6

package/src/EnrichedMarkdownNativeComponent.ts

@@ -1,9 +1,12 @@
 import {
   codegenNativeComponent,
+  codegenNativeCommands,
   type ViewProps,
   type CodegenTypes,
   type ColorValue,
+  type HostComponent,
 } from 'react-native';
+import type React from 'react';
 
 // All block styles extend this interface
 interface BaseBlockStyleInternal {
@@ -274,6 +277,39 @@ export interface LinkLayoutEvent {
   }[];
 }
 
+/**
+ * Current text selection, or a long-pressed table / math / code block while
+ * `contextMenuHidden` is on. `active: false` means the selection was cleared
+ * (every other field is then empty / zero). Rects are in dp / pt, relative to
+ * the native view's origin; rect objects are written inline because codegen
+ * only accepts inline object literals in event payloads.
+ */
+export interface SelectionChangeEvent {
+  active: boolean;
+  source: string;
+  text: string;
+  markdown: string;
+  whole: boolean;
+  rect: {
+    x: CodegenTypes.Double;
+    y: CodegenTypes.Double;
+    width: CodegenTypes.Double;
+    height: CodegenTypes.Double;
+  };
+  startRect: {
+    x: CodegenTypes.Double;
+    y: CodegenTypes.Double;
+    width: CodegenTypes.Double;
+    height: CodegenTypes.Double;
+  };
+  endRect: {
+    x: CodegenTypes.Double;
+    y: CodegenTypes.Double;
+    width: CodegenTypes.Double;
+    height: CodegenTypes.Double;
+  };
+}
+
 export interface TaskListItemPressEvent {
   index: CodegenTypes.Int32;
   checked: boolean;
@@ -441,6 +477,18 @@ export interface NativeProps extends ViewProps {
    * Deduplicated: not re-fired when the payload is unchanged.
    */
   onLinkLayout?: CodegenTypes.DirectEventHandler<LinkLayoutEvent>;
+  /**
+   * When true, the view reports selection changes (and, with
+   * `contextMenuHidden`, block long-presses) through `onSelectionChange`.
+   * Set by the JS wrapper only when `onSelectionChange` is provided.
+   * @default false
+   */
+  emitSelectionChange?: CodegenTypes.WithDefault<boolean, false>;
+  /**
+   * Fired while `emitSelectionChange` is on: coalesced to one event per frame,
+   * deduplicated, and `active: false` once the selection is gone.
+   */
+  onSelectionChange?: CodegenTypes.DirectEventHandler<SelectionChangeEvent>;
   /**
    * Callback fired when a task list checkbox is tapped.
    * Receives the 0-based task index, current checked state, and the item's plain text.
@@ -480,6 +528,16 @@ export interface NativeProps extends ViewProps {
    * @default true
    */
   enableLinkPreview?: CodegenTypes.WithDefault<boolean, true>;
+  /**
+   * When `true`, long-pressing a link selects its label and shows the
+   * selection edit menu instead of the system link preview (iOS only).
+   * Takes precedence over `enableLinkPreview` and `onLinkLongPress`.
+   *
+   * Android: No-op.
+   *
+   * @default false
+   */
+  linkLongPressSelects?: CodegenTypes.WithDefault<boolean, false>;
   /**
    * - iOS: Controls text selection and link previews on long press.
    * - Android: Controls text selection.
@@ -594,6 +652,17 @@ export interface NativeProps extends ViewProps {
   writingDirection?: CodegenTypes.WithDefault<string, 'first-strong'>;
 }
 
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  /** Clears the text selection (and any active block) and fires `onSelectionChange` with `active: false`. */
+  clearSelection: (viewRef: React.ElementRef<ComponentType>) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['clearSelection'],
+});
+
 export default codegenNativeComponent<NativeProps>('EnrichedMarkdown', {
   interfaceOnly: true,
-});
+}) as HostComponent<NativeProps>;

package/src/EnrichedMarkdownTextNativeComponent.ts

@@ -1,9 +1,12 @@
 import {
   codegenNativeComponent,
+  codegenNativeCommands,
   type ViewProps,
   type CodegenTypes,
   type ColorValue,
+  type HostComponent,
 } from 'react-native';
+import type React from 'react';
 
 // All block styles extend this interface
 interface BaseBlockStyleInternal {
@@ -275,6 +278,39 @@ export interface LinkLayoutEvent {
   }[];
 }
 
+/**
+ * Current text selection, or a long-pressed table / math / code block while
+ * `contextMenuHidden` is on. `active: false` means the selection was cleared
+ * (every other field is then empty / zero). Rects are in dp / pt, relative to
+ * the native view's origin; rect objects are written inline because codegen
+ * only accepts inline object literals in event payloads.
+ */
+export interface SelectionChangeEvent {
+  active: boolean;
+  source: string;
+  text: string;
+  markdown: string;
+  whole: boolean;
+  rect: {
+    x: CodegenTypes.Double;
+    y: CodegenTypes.Double;
+    width: CodegenTypes.Double;
+    height: CodegenTypes.Double;
+  };
+  startRect: {
+    x: CodegenTypes.Double;
+    y: CodegenTypes.Double;
+    width: CodegenTypes.Double;
+    height: CodegenTypes.Double;
+  };
+  endRect: {
+    x: CodegenTypes.Double;
+    y: CodegenTypes.Double;
+    width: CodegenTypes.Double;
+    height: CodegenTypes.Double;
+  };
+}
+
 export interface TaskListItemPressEvent {
   index: CodegenTypes.Int32;
   checked: boolean;
@@ -442,6 +478,18 @@ export interface NativeProps extends ViewProps {
    * Deduplicated: not re-fired when the payload is unchanged.
    */
   onLinkLayout?: CodegenTypes.DirectEventHandler<LinkLayoutEvent>;
+  /**
+   * When true, the view reports selection changes (and, with
+   * `contextMenuHidden`, block long-presses) through `onSelectionChange`.
+   * Set by the JS wrapper only when `onSelectionChange` is provided.
+   * @default false
+   */
+  emitSelectionChange?: CodegenTypes.WithDefault<boolean, false>;
+  /**
+   * Fired while `emitSelectionChange` is on: coalesced to one event per frame,
+   * deduplicated, and `active: false` once the selection is gone.
+   */
+  onSelectionChange?: CodegenTypes.DirectEventHandler<SelectionChangeEvent>;
   /**
    * Callback fired when a task list checkbox is tapped.
    * Receives the 0-based task index, current checked state, and the item's plain text.
@@ -481,6 +529,16 @@ export interface NativeProps extends ViewProps {
    * @default true
    */
   enableLinkPreview?: CodegenTypes.WithDefault<boolean, true>;
+  /**
+   * When `true`, long-pressing a link selects its label and shows the
+   * selection edit menu instead of the system link preview (iOS only).
+   * Takes precedence over `enableLinkPreview` and `onLinkLongPress`.
+   *
+   * Android: No-op.
+   *
+   * @default false
+   */
+  linkLongPressSelects?: CodegenTypes.WithDefault<boolean, false>;
   /**
    * - iOS: Controls text selection and link previews on long press.
    * - Android: Controls text selection.
@@ -594,6 +652,17 @@ export interface NativeProps extends ViewProps {
   writingDirection?: CodegenTypes.WithDefault<string, 'first-strong'>;
 }
 
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  /** Clears the text selection (and any active block) and fires `onSelectionChange` with `active: false`. */
+  clearSelection: (viewRef: React.ElementRef<ComponentType>) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['clearSelection'],
+});
+
 export default codegenNativeComponent<NativeProps>('EnrichedMarkdownText', {
   interfaceOnly: true,
-});
+}) as HostComponent<NativeProps>;

package/src/index.tsx

@@ -1,6 +1,7 @@
 export { default as EnrichedMarkdownText } from './native/EnrichedMarkdownText';
 export type {
   EnrichedMarkdownTextProps,
+  EnrichedMarkdownTextInstance,
   StreamingConfig,
   MarkdownStyle,
   Md4cFlags,
@@ -17,6 +18,8 @@ export type {
   CopyPressEvent,
   CopyEvent,
   OnPasteEvent,
+  SelectionChangeEvent,
+  SelectionRect,
 } from './types/events';
 export type {
   AccessibilityLabels,

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,7 +182,9 @@ export const EnrichedMarkdownText = ({
   onLinkPress: _onLinkPress,
   onLinkLongPress: _onLinkLongPress,
   onTaskListItemPress: _onTaskListItemPress,
+  onSelectionChange: _onSelectionChange,
   enableLinkPreview: _enableLinkPreview,
+  linkLongPressSelects: _linkLongPressSelects,
   selectable: _selectable,
   md4cFlags: _md4cFlags,
   allowFontScaling: _allowFontScaling,
@@ -198,6 +204,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,10 +1,22 @@
-import { useMemo, useCallback, useRef, useEffect, useState } from 'react';
-import EnrichedMarkdownTextNativeComponent from '../EnrichedMarkdownTextNativeComponent';
+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 from '../EnrichedMarkdownNativeComponent';
+import EnrichedMarkdownNativeComponent, {
+  Commands as MarkdownCommands,
+} from '../EnrichedMarkdownNativeComponent';
 import { normalizeMarkdownStyle } from '../normalizeMarkdownStyle';
 import { resolveAccessibilityLabels } from '../accessibilityLabelDefaults';
 import {
@@ -12,10 +24,15 @@ import {
   normalizeLegacyBooleanMenuItem,
 } from '../normalizeMenuItem';
 import { StyleSheet, View } from 'react-native';
-import type { LayoutChangeEvent, NativeSyntheticEvent } 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,
@@ -30,11 +47,14 @@ import type {
   CopyPressEvent,
   CopyEvent,
   OnContextMenuItemPressEvent,
+  SelectionChangeEvent,
+  SelectionRect,
 } from '../types/events';
 
 export type { MarkdownStyle, Md4cFlags };
 export type {
   EnrichedMarkdownTextProps,
+  EnrichedMarkdownTextInstance,
   StreamingConfig,
   ContextMenuItem,
   SelectionMenuConfig,
@@ -48,6 +68,8 @@ export type {
   TaskListItemPressEvent,
   CopyPressEvent,
   CopyEvent,
+  SelectionChangeEvent,
+  SelectionRect,
 };
 
 // Default English labels for the built-in selection menu actions. Defaults are
@@ -149,6 +171,7 @@ const defaultMd4cFlags: Md4cFlags = {
 };
 
 export const EnrichedMarkdownText = ({
+  ref,
   markdown,
   markdownStyle = {},
   containerStyle,
@@ -158,7 +181,9 @@ export const EnrichedMarkdownText = ({
   enableTaskListItemToggle = true,
   onCopyPress,
   onCopy,
+  onSelectionChange,
   enableLinkPreview,
+  linkLongPressSelects = false,
   selectable = true,
   md4cFlags = defaultMd4cFlags,
   allowFontScaling = true,
@@ -315,6 +340,54 @@ export const EnrichedMarkdownText = ({
     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(
@@ -396,7 +469,10 @@ export const EnrichedMarkdownText = ({
     enableTaskListItemToggle,
     onCopyPress: handleCopyPress,
     onCopyRequest: handleCopyRequest,
+    emitSelectionChange: onSelectionChange != null,
+    onSelectionChange: handleSelectionChange,
     enableLinkPreview: onLinkLongPress == null && (enableLinkPreview ?? true),
+    linkLongPressSelects,
     selectable,
     md4cFlags: normalizedMd4cFlags,
     allowFontScaling,
@@ -420,21 +496,23 @@ export const EnrichedMarkdownText = ({
     ...rest,
   };
 
-  const NativeComponent =
-    flavor === 'github'
-      ? EnrichedMarkdownNativeComponent
-      : EnrichedMarkdownTextNativeComponent;
+  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} onLayout={onLayout} />;
+    return (
+      <NativeComponent {...sharedProps} ref={nativeRef} onLayout={onLayout} />
+    );
   }
 
   return (
     <View style={containerStyle} onLayout={onLayout}>
       <NativeComponent
         {...sharedProps}
+        ref={nativeRef}
         style={undefined}
         emitLinkLayout
         onLinkLayout={handleLinkLayout}

package/src/types/MarkdownTextProps.ts

@@ -1,5 +1,11 @@
-import type { ReactNode } from 'react';
-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 {
@@ -8,8 +14,22 @@ 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).
@@ -169,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
@@ -269,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).
    *
@@ -282,6 +323,16 @@ export interface EnrichedMarkdownTextProps extends Omit<ViewProps, 'style'> {
    * @platform ios
    */
   enableLinkPreview?: boolean;
+  /**
+   * When `true`, long-pressing a link selects its label and shows the
+   * selection edit menu, like a manual text selection, instead of the system
+   * link preview. Takes precedence over `enableLinkPreview` and
+   * `onLinkLongPress`.
+   *
+   * @default false
+   * @platform ios
+   */
+  linkLongPressSelects?: boolean;
   /**
    * Controls text selection.
    * - iOS: Controls text selection and link previews on long press.

package/src/types/events.ts

@@ -40,6 +40,44 @@ export interface CopyEvent {
   whole: boolean;
 }
 
+/**
+ * A rect in dp, relative to the component's native view: add the origin from
+ * the component ref's `measureInWindow` to get window coordinates.
+ */
+export interface SelectionRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * Payload of `onSelectionChange`: the current text selection, or a table /
+ * math / code block long-pressed while `contextMenuHidden` is on. Content
+ * fields carry what `onCopy` would receive for the same selection.
+ */
+export interface SelectionChangeEvent {
+  /** `false` once the selection is gone; every other field is then empty / zero. */
+  active: boolean;
+  /** `'selection'` for text; the block kind for a long-pressed block. */
+  source: CopyEvent['source'];
+  /** Rendered text of the selection, or the block's raw content. */
+  text: string;
+  /** Same as `CopyEvent.markdown` for this selection. */
+  markdown: string;
+  /** Same as `CopyEvent.whole`. Always `true` for blocks. */
+  whole: boolean;
+  /**
+   * Bounding box of the selection (full content width when it spans several
+   * lines); the block's frame for blocks.
+   */
+  rect: SelectionRect;
+  /** Selected part of the first line (block: same as `rect`). */
+  startRect: SelectionRect;
+  /** Selected part of the last line (block: same as `rect`). */
+  endRect: SelectionRect;
+}
+
 /**
  * Native-level context menu item config sent to the native component.
  * Does not include the `onPress` callback — callbacks are managed on the JS side.