react-native-enriched-markdown-scaffold 0.7.4-scaffold.9 → 1.0.2-scaffold.10

package/src/types/MarkdownStyleInternal.ts

@@ -6,6 +6,19 @@ export type BlockTextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify';
 // Mirrors the public fontStyle values; empty string means "inherit / no override".
 export type EmphasisFontStyle = 'normal' | 'italic' | 'oblique' | '';
 
+// empty string means "no table alignment set" (legacy start-aligned placement).
+export type TableAlign = 'left' | 'center' | 'right' | '';
+
+// empty string means "legacy sizing" (fill width, no resize-mode handling).
+// resolves to 'cover' when maxHeight/aspectRatio is present.
+export type ImageResizeMode =
+  | 'contain'
+  | 'cover'
+  | 'stretch'
+  | 'center'
+  | 'none'
+  | '';
+
 interface BaseBlockStyleInternal {
   fontSize: number;
   fontFamily: string;
@@ -29,6 +42,8 @@ interface BlockquoteStyleInternal extends BaseBlockStyleInternal {
   borderWidth: number;
   gapWidth: number;
   backgroundColor: string;
+  borderRadius: number;
+  padding: number;
 }
 
 interface ListStyleInternal extends BaseBlockStyleInternal {
@@ -39,6 +54,24 @@ interface ListStyleInternal extends BaseBlockStyleInternal {
   markerFontWeight: string;
   gapWidth: number;
   marginLeft: number;
+  itemSpacing: number;
+}
+
+export interface CodeBlockSyntaxColorsInternal {
+  keyword: string;
+  operatorColor: string;
+  punctuation: string;
+  string: string;
+  number: string;
+  constant: string;
+  comment: string;
+  function: string;
+  type: string;
+  variable: string;
+  property: string;
+  tag: string;
+  attribute: string;
+  embedded: string;
 }
 
 interface CodeBlockStyleInternal extends BaseBlockStyleInternal {
@@ -47,6 +80,7 @@ interface CodeBlockStyleInternal extends BaseBlockStyleInternal {
   borderRadius: number;
   borderWidth: number;
   padding: number;
+  syntaxColors: CodeBlockSyntaxColorsInternal;
 }
 
 interface LinkStyleInternal {
@@ -54,6 +88,11 @@ interface LinkStyleInternal {
   color: string;
   underline: boolean;
   backgroundColor: string;
+  borderRadius: number;
+  paddingHorizontal: number;
+  paddingVertical: number;
+  borderColor: string;
+  borderWidth: number;
 }
 
 export interface LinkVariantEntryInternal {
@@ -61,6 +100,11 @@ export interface LinkVariantEntryInternal {
   color: string;
   underline: boolean;
   backgroundColor: string;
+  borderRadius: number;
+  paddingHorizontal: number;
+  paddingVertical: number;
+  borderColor: string;
+  borderWidth: number;
 }
 
 interface StrongStyleInternal {
@@ -93,6 +137,9 @@ interface CodeStyleInternal {
 
 interface ImageStyleInternal {
   height: number;
+  maxHeight: number;
+  aspectRatio: number;
+  resizeMode: ImageResizeMode;
   borderRadius: number;
   marginTop: number;
   marginBottom: number;
@@ -120,6 +167,8 @@ interface TableStyleInternal extends BaseBlockStyleInternal {
   borderRadius: number;
   cellPaddingHorizontal: number;
   cellPaddingVertical: number;
+  horizontalOverflow: number;
+  align: TableAlign;
 }
 
 interface TaskListStyleInternal {
@@ -141,12 +190,14 @@ interface MathStyleInternal {
   marginBottom: number;
   textAlign: BlockTextAlign;
   fontWeight: string;
+  glyphOverflow: number;
 }
 
 interface InlineMathStyleInternal {
   color: string;
   paddingVertical: number;
   fontWeight: string;
+  glyphOverflow: number;
 }
 
 interface SpoilerParticlesStyleInternal {

package/src/types/MarkdownTextProps.ts

@@ -1,12 +1,62 @@
-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 {
   LinkPressEvent,
   LinkLongPressEvent,
   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.
@@ -56,22 +106,31 @@ export interface SelectionMenuPluralLabels {
  * Controls the built-in items added to the native text selection menu and
  * lets you localize their labels.
  *
- * Each item accepts an object: `{ enabled }` toggles visibility (the system
- * `copy` item can't be hidden — only relabeled) and `label` overrides the
- * English default. Wire `label` to your i18n library to match the rest of your
- * app's UI. Labels apply to the main text selection menu as well as the table
- * and math block copy menus.
+ * Each item accepts an object: `{ enabled }` toggles visibility and `label`
+ * overrides the English default. Wire `label` to your i18n library to match
+ * the rest of your app's UI. 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.
  *
  * @platform ios, android, macos
  */
 export interface SelectionMenuConfig {
   /**
-   * The system "Copy" item. It can't be hidden — only its label is configurable.
-   * @default { label: "Copy" }
+   * The "Copy" item.
+   * - `enabled`: `false` removes it from the text selection menu, the table /
+   *   math / code block menus and the code block VoiceOver copy action.
+   * - `format`: `'rich'` copies rich text (plain + HTML, plus RTF on iOS) from
+   *   text selections and the raw content from blocks; `'markdown'` copies
+   *   Markdown as plain text everywhere the item appears (inline math becomes
+   *   `$…$`, math blocks `$$…$$`, code blocks are fenced). The code block header
+   *   button and VoiceOver action always copy the raw code.
+   * @default { enabled: true, label: "Copy", format: "rich" }
    */
-  copy?: { label?: string };
+  copy?: { enabled?: boolean; label?: string; format?: 'rich' | 'markdown' };
   /**
-   * The built-in "Copy as Markdown" action for text selections.
+   * The built-in "Copy as Markdown" action, in the text selection menu and in
+   * the table / math / code block menus.
    * @default { enabled: true, label: "Copy as Markdown" }
    */
   copyAsMarkdown?: { enabled?: boolean; label?: string };
@@ -86,6 +145,23 @@ export interface SelectionMenuConfig {
     label?: string;
     pluralLabels?: SelectionMenuPluralLabels;
   };
+  /**
+   * Which system items the text selection menu keeps.
+   * - `'default'`: keep everything the OS adds (Select All, Look Up, Share,
+   *   Translate, app text actions…), with Copy replaced by the built-in one.
+   * - `'none'`: drop every system item; the menu only holds the built-in items
+   *   above and `contextMenuItems`.
+   * @default 'default'
+   * @platform ios, android
+   */
+  systemItems?: 'default' | 'none';
+  /**
+   * The copy button in the code block header. `false` hides the button; the
+   * header and language label stay.
+   * @default { enabled: true }
+   * @platform ios, android, macos
+   */
+  codeBlockCopyButton?: { enabled?: boolean };
 }
 
 export interface StreamingConfig {
@@ -98,9 +174,26 @@ export interface StreamingConfig {
    * @platform ios, android
    */
   tableMode?: 'hidden' | 'progressive';
+  /**
+   * Controls how a fenced code block whose closing fence has not arrived yet
+   * is handled during streaming.
+   * - `'hidden'`: hide the entire code block until its closing fence arrives.
+   * - `'progressive'` (default): show the code as it streams in with its header
+   *   visible but non-interactive (copying is disabled); syntax highlighting is
+   *   deferred until the closing fence arrives, so it appears once atomically.
+   * Only effective when `streamingAnimation` is `true`.
+   * @default 'progressive'
+   * @platform ios, android
+   */
+  codeBlockMode?: 'hidden' | 'progressive';
 }
 
 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
@@ -138,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.
    *
@@ -149,6 +257,61 @@ export interface EnrichedMarkdownTextProps extends Omit<ViewProps, 'style'> {
    * @platform ios, android, web
    */
   onTaskListItemPress?: (event: TaskListItemPressEvent) => void;
+  /**
+   * Controls whether tapping a task list checkbox toggles its checked state.
+   *
+   * When `true` (default), tapping the checkbox toggles it and fires
+   * `onTaskListItemPress`. When `false`, the checkbox renders its markdown
+   * state read-only: the tap is fully inert — no visual toggle and no
+   * `onTaskListItemPress` emission. Text selection and links in the same row
+   * are unaffected.
+   *
+   * @default true
+   * @platform ios, android, web
+   */
+  enableTaskListItemToggle?: boolean;
+  /**
+   * Callback fired when code is copied from a fenced code block, via the header
+   * copy button, the long-press context-menu "Copy" action, or the VoiceOver
+   * copy action. Receives the copied code and its language. Does not fire for
+   * "Copy as Markdown", nor for the context-menu "Copy" when
+   * `selectionMenuConfig.copy.format` is `'markdown'`.
+   *
+   * Only fires when `flavor="github"` (the copy button is part of the GitHub
+   * flavor's container-based code block renderer).
+   * @platform ios, android, macos
+   */
+  onCopyPress?: (event: CopyPressEvent) => void;
+  /**
+   * Takes over the "Copy" item of the text selection menu and of the table /
+   * math / code block menus. When set, native does **not** write the
+   * clipboard: it calls this with the copied content and the handler writes
+   * whatever it wants (e.g. with `expo-clipboard`). Overrides
+   * `selectionMenuConfig.copy.format`; `copy.enabled: false` still hides the
+   * item. "Copy as Markdown", the code block header button and the VoiceOver
+   * copy action are unaffected, and `onCopyPress` does not fire for an
+   * intercepted Copy.
+   * @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. On iOS, `adjusting`
+   * is `true` while a selection handle is dragged: hide the menu until it is
+   * `false` again. Android reports every step of the drag instead (with
+   * `adjusting: false`), so debounce before showing a menu there.
+   * @platform ios, android
+   */
+  onSelectionChange?: (event: SelectionChangeEvent) => void;
   /**
    * Controls whether the system link preview is shown on long press (iOS only).
    *
@@ -162,6 +325,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.
@@ -254,6 +427,38 @@ export interface EnrichedMarkdownTextProps extends Omit<ViewProps, 'style'> {
    * @platform ios, android
    */
   contextMenuItems?: ContextMenuItem[];
+  /**
+   * HTTP headers to attach to remote image requests, e.g. a `Referer`
+   * required by CDN hotlink protection or an `Authorization` token.
+   *
+   * Headers participate in image cache identity, so the same URL requested
+   * with different headers is fetched and cached separately.
+   *
+   * Not supported on web — browsers don't allow custom headers on `<img>`
+   * requests.
+   * @platform ios, android
+   */
+  imageRequestHeaders?: Record<string, string>;
+  /**
+   * Hides the text selection context menu. Text stays selectable (and stays
+   * reachable by TalkBack / VoiceOver) — only the menu is suppressed. Use
+   * `selectable={false}` instead if you want to disable selection itself.
+   *
+   * This hides the whole menu, including the custom items from
+   * `contextMenuItems` and the built-in items from `selectionMenuConfig`,
+   * since they all share one menu. It also covers the copy menus on table,
+   * math and code blocks.
+   *
+   * It does not suppress the system "Save to Camera Roll / Copy" sheet that
+   * UIKit shows when long-pressing an image.
+   *
+   * On Android no selection toolbar is created at all, so ROMs that draw
+   * their own (MIUI) stay hidden too. A selection made while this is on
+   * keeps no menu if it is turned off mid-selection; the next one gets it.
+   * @default false
+   * @platform ios, android, macos
+   */
+  contextMenuHidden?: boolean;
   /**
    * Controls the built-in items added to the native text selection menu and
    * lets you localize their labels. Custom app-provided actions are controlled

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.
    *
@@ -58,6 +100,25 @@ export interface EnrichedMarkdownTextProps extends Omit<
    * @platform ios, android, web
    */
   onTaskListItemPress?: (event: TaskListItemPressEvent) => void;
+  /**
+   * Controls whether tapping a task list checkbox toggles its checked state.
+   *
+   * When `true` (default), tapping the checkbox toggles it and fires
+   * `onTaskListItemPress`. When `false`, the checkbox renders its markdown
+   * state read-only: the tap is fully inert — no visual toggle and no
+   * `onTaskListItemPress` emission. Text selection and links in the same row
+   * are unaffected.
+   *
+   * On web the checkbox keeps its normal appearance and is marked
+   * `readOnly` / `aria-disabled` rather than `disabled`, so it stays visually
+   * consistent with iOS and Android. It is also made pointer-inert
+   * (`pointer-events: none`) so the browser cannot paint hover or active
+   * states on a checkbox that cannot be toggled.
+   *
+   * @default true
+   * @platform ios, android, web
+   */
+  enableTaskListItemToggle?: boolean;
   /**
    * Controls text selection.
    * - iOS: Controls text selection and link previews on long press.

package/src/types/events.ts

@@ -12,6 +12,80 @@ export interface TaskListItemPressEvent {
   text: string;
 }
 
+export interface CopyPressEvent {
+  code: string;
+  language: string;
+}
+
+/**
+ * Payload of `onCopy`: what the Copy item would have copied. With `onCopy`
+ * set, native writes nothing to the clipboard — the handler owns the write.
+ */
+export interface CopyEvent {
+  /** Which menu the Copy item belongs to. */
+  source: 'selection' | 'math' | 'table' | 'code';
+  /**
+   * Markdown of the copied content — what `copy.format: 'markdown'` writes.
+   * Text selections: the original source when `whole`, otherwise rebuilt from
+   * the rendered styles (falls back to `text`). Blocks: `$$…$$`, the table as
+   * Markdown, or the fenced code block.
+   */
+  markdown: string;
+  /** Rendered text of the selection, or the block's raw content. */
+  text: string;
+  /**
+   * `true` when the selection covers the whole component, so `markdown` is the
+   * original source. Always `true` for blocks.
+   */
+  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;
+  /**
+   * `true` while a selection handle is dragged (or the loupe is held), with the
+   * selection as it was when the drag began; `false` again, with the new
+   * selection, once the finger lifts. Hide your menu while it is `true`.
+   * Always `false` on Android, which reports the selection continuously
+   * during the drag.
+   */
+  adjusting: boolean;
+}
+
 /**
  * Native-level context menu item config sent to the native component.
  * Does not include the `onPress` callback — callbacks are managed on the JS side.
@@ -30,3 +104,19 @@ export interface OnContextMenuItemPressEvent {
   selectionStart: number;
   selectionEnd: number;
 }
+
+/**
+ * Event payload fired by the native component when the user pastes while
+ * `interceptPaste` is on. Native does not touch the buffer — it only reports
+ * what the clipboard held. The handler must call `resolvePaste` exactly once,
+ * or the paste is dropped.
+ */
+export interface OnPasteEvent {
+  /** Plain text from the clipboard, verbatim, before the text view sees it. */
+  text: string;
+  /**
+   * Markdown flavor, set only when the copy source was an input of this
+   * component. iOS-only; Android always reports `''`.
+   */
+  markdown: string;
+}

package/src/utils/textInputState.ts

@@ -0,0 +1,35 @@
+/**
+ * Bridges EnrichedMarkdownTextInput into React Native's TextInputState focus
+ * registry so it participates in RN's keyboard-dismiss behavior (issue #577).
+ *
+ * Registering a non-TextInput host component is safe: TextInputState's
+ * blurTextInput dispatches the built-in TextInput's "blur" command at the
+ * registered instance, and Fabric command dispatch is name-based — it works
+ * as long as the component ships a command with that name, which ours does.
+ *
+ * A deep import is required because the public TextInput.State API lacks the
+ * registerInput/focusInput/blurInput bookkeeping functions.
+ */
+import type { HostInstance } from 'react-native';
+
+interface TextInputStateModule {
+  registerInput(input: HostInstance): void;
+  unregisterInput(input: HostInstance): void;
+  focusInput(input: HostInstance | null): void;
+  blurInput(input: HostInstance | null): void;
+  blurTextInput(input: HostInstance | null): void;
+  currentlyFocusedInput(): HostInstance | null;
+}
+
+/**
+ * The internal module's export shape has changed across RN versions: newer
+ * versions use `export default` (surfacing as `.default` after Metro's CJS
+ * transform) while older ones assigned `module.exports` directly. A raw
+ * require bypasses Babel's import interop, so both shapes are handled here.
+ */
+const TextInputStateModuleImpl =
+  // eslint-disable-next-line @react-native/no-deep-imports
+  require('react-native/Libraries/Components/TextInput/TextInputState');
+
+export const TextInputState = (TextInputStateModuleImpl.default ??
+  TextInputStateModuleImpl) as TextInputStateModule;