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

package/src/types/MarkdownTextProps.ts

@@ -5,6 +5,7 @@ import type {
   LinkPressEvent,
   LinkLongPressEvent,
   TaskListItemPressEvent,
+  CopyPressEvent,
 } from './events';
 
 /**
@@ -56,22 +57,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 +96,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,6 +125,18 @@ 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'> {
@@ -149,6 +188,31 @@ 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;
   /**
    * Controls whether the system link preview is shown on long press (iOS only).
    *
@@ -254,6 +318,34 @@ 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.
+   * @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

@@ -58,6 +58,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,11 @@ export interface TaskListItemPressEvent {
   text: string;
 }
 
+export interface CopyPressEvent {
+  code: string;
+  language: string;
+}
+
 /**
  * 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 +35,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;

package/src/web/EnrichedMarkdownText.tsx

@@ -21,6 +21,7 @@ export const EnrichedMarkdownText = ({
   onLinkPress,
   onLinkLongPress,
   onTaskListItemPress,
+  enableTaskListItemToggle = true,
   allowTrailingMargin = false,
   containerStyle,
   selectable = true,
@@ -43,6 +44,7 @@ export const EnrichedMarkdownText = ({
     superscript = false,
     subscript = false,
     highlight = false,
+    hardSoftBreaks = false,
   } = md4cFlags;
 
   useEffect(() => {
@@ -57,6 +59,7 @@ export const EnrichedMarkdownText = ({
         superscript,
         subscript,
         highlight,
+        hardSoftBreaks,
       }),
       katexPromise,
     ])
@@ -85,14 +88,25 @@ export const EnrichedMarkdownText = ({
     return () => {
       cancelled = true;
     };
-  }, [markdown, underline, latexMath, superscript, subscript, highlight]);
+  }, [
+    markdown,
+    underline,
+    latexMath,
+    superscript,
+    subscript,
+    highlight,
+    hardSoftBreaks,
+  ]);
 
   const callbacks = useMemo<RendererCallbacks>(
     () => ({ onLinkPress, onLinkLongPress, onTaskListItemPress }),
     [onLinkPress, onLinkLongPress, onTaskListItemPress]
   );
 
-  const capabilities = useMemo<RenderCapabilities>(() => ({ katex }), [katex]);
+  const capabilities = useMemo<RenderCapabilities>(
+    () => ({ katex, enableTaskListItemToggle }),
+    [katex, enableTaskListItemToggle]
+  );
 
   const lastChildStyle = useMemo(
     () =>

package/src/web/parseMarkdown.ts

@@ -7,7 +7,8 @@ type ParseFn = (
   latexMath: number,
   superscript: number,
   subscript: number,
-  highlight: number
+  highlight: number,
+  hardSoftBreaks: number
 ) => string;
 
 // Caching the Promise (not the resolved value) means concurrent callers share
@@ -28,6 +29,7 @@ function initializeParser(): Promise<ParseFn> {
           'number',
           'number',
           'number',
+          'number',
         ])
       )
       .catch((error) => {
@@ -55,6 +57,7 @@ export async function parseMarkdown(
     superscript = false,
     subscript = false,
     highlight = false,
+    hardSoftBreaks = false,
   }: Md4cFlags = {}
 ): Promise<ASTNode> {
   const parse = await initializeParser();
@@ -66,7 +69,8 @@ export async function parseMarkdown(
       latexMath ? 1 : 0,
       superscript ? 1 : 0,
       subscript ? 1 : 0,
-      highlight ? 1 : 0
+      highlight ? 1 : 0,
+      hardSoftBreaks ? 1 : 0
     )
   );
 

package/src/web/renderers/InlineRenderers.tsx

@@ -12,6 +12,10 @@ function LineBreakRenderer(_props: RendererProps) {
   return <br />;
 }
 
+function SoftBreakRenderer(_props: RendererProps) {
+  return <> </>;
+}
+
 function StrongRenderer({ node, styles, renderChildren }: RendererProps) {
   return <strong style={styles.strong}>{renderChildren(node)}</strong>;
 }
@@ -108,6 +112,7 @@ function LatexMathInlineRenderer({
 export const inlineRenderers: RendererMap = {
   Text: TextRenderer,
   LineBreak: LineBreakRenderer,
+  SoftBreak: SoftBreakRenderer,
   Strong: StrongRenderer,
   Emphasis: EmphasisRenderer,
   Strikethrough: StrikethroughRenderer,

package/src/web/renderers/ListRenderers.tsx

@@ -44,7 +44,9 @@ function ListItemRenderer({
   node,
   style,
   styles,
+  index,
   callbacks,
+  capabilities,
   renderChildren,
 }: RendererProps) {
   const isTask = node.attributes?.isTask === 'true';
@@ -57,6 +59,8 @@ function ListItemRenderer({
   }, [initialChecked]);
 
   const handleChange = () => {
+    if (!capabilities.enableTaskListItemToggle) return;
+
     const taskIndex = node.attributes?.taskIndex;
     if (taskIndex === undefined) return;
 
@@ -85,14 +89,22 @@ function ListItemRenderer({
     : null;
 
   return (
-    <li style={listItemStyle(isTask)}>
+    <li style={listItemStyle(style, isTask, (index ?? 0) === 0)}>
       <span style={checkedStyle}>
         {isTask && (
           <input
             type="checkbox"
             checked={isChecked}
             onChange={handleChange}
-            style={styles.taskCheckbox}
+            readOnly={!capabilities.enableTaskListItemToggle}
+            aria-disabled={
+              capabilities.enableTaskListItemToggle ? undefined : true
+            }
+            style={
+              capabilities.enableTaskListItemToggle
+                ? styles.taskCheckbox
+                : styles.taskCheckboxDisabled
+            }
             aria-label={`Task: ${taskText}`}
           />
         )}

package/src/web/renderers/index.tsx

@@ -35,6 +35,7 @@ export interface RenderNodeProps {
   callbacks: RendererCallbacks;
   capabilities: RenderCapabilities;
   parentType?: NodeType;
+  index?: number;
 }
 
 export function RenderNode({
@@ -44,20 +45,22 @@ export function RenderNode({
   callbacks,
   capabilities,
   parentType,
+  index,
 }: RenderNodeProps): ReactNode {
   const Renderer = RENDERERS[node.type];
   if (!Renderer) return null;
 
   const renderChildren = (childNode: ASTNode): ReactNode =>
-    childNode.children?.map((child, index) => (
+    childNode.children?.map((child, childIndex) => (
       <RenderNode
-        key={nodeKey(child, index)}
+        key={nodeKey(child, childIndex)}
         node={child}
         style={style}
         styles={styles}
         callbacks={callbacks}
         capabilities={capabilities}
         parentType={childNode.type}
+        index={childIndex}
       />
     )) ?? null;
 
@@ -67,6 +70,7 @@ export function RenderNode({
       style={style}
       styles={styles}
       parentType={parentType}
+      index={index}
       callbacks={callbacks}
       capabilities={capabilities}
       renderChildren={renderChildren}

package/src/web/styles.ts

@@ -126,7 +126,11 @@ function blockquoteStyle(style: MarkdownStyleInternal): CSSProperties {
     marginInlineStart: 0, // reset UA default (40px in LTR, auto in RTL)
     marginInlineEnd: 0,
     paddingInlineStart: blockquote.gapWidth,
+    paddingInlineEnd: blockquote.padding,
+    paddingTop: blockquote.padding,
+    paddingBottom: blockquote.padding,
     borderInlineStart: `${blockquote.borderWidth}px solid ${blockquote.borderColor}`,
+    borderRadius: blockquote.borderRadius,
     backgroundColor: blockquote.backgroundColor,
   };
 }
@@ -180,16 +184,55 @@ function thematicBreakStyle(style: MarkdownStyleInternal): CSSProperties {
   };
 }
 
+const RESIZE_MODE_TO_OBJECT_FIT: Record<
+  Exclude<MarkdownStyleInternal['image']['resizeMode'], ''>,
+  NonNullable<CSSProperties['objectFit']>
+> = {
+  contain: 'contain',
+  cover: 'cover',
+  stretch: 'fill',
+  center: 'scale-down',
+  none: 'none',
+};
+
 function imageStyle(style: MarkdownStyleInternal): CSSProperties {
   const image = style.image;
-  return {
-    height: image.height,
+  const base: CSSProperties = {
     borderRadius: image.borderRadius,
     marginTop: image.marginTop,
     marginBottom: image.marginBottom,
     maxWidth: '100%',
     display: 'block',
   };
+
+  // Sizing precedence: aspectRatio > maxHeight > height. resizeMode '' means
+  // legacy sizing — emit today's exact CSS for backward compatibility.
+  if (image.resizeMode === '') {
+    return { ...base, height: image.height };
+  }
+
+  const objectFit = RESIZE_MODE_TO_OBJECT_FIT[image.resizeMode] ?? 'cover';
+
+  if (image.aspectRatio > 0) {
+    return {
+      ...base,
+      width: '100%',
+      aspectRatio: image.aspectRatio,
+      objectFit,
+    };
+  }
+
+  if (image.maxHeight > 0) {
+    return {
+      ...base,
+      width: '100%',
+      height: 'auto',
+      maxHeight: image.maxHeight,
+      objectFit,
+    };
+  }
+
+  return { ...base, width: '100%', height: image.height, objectFit };
 }
 
 function inlineImageStyle(style: MarkdownStyleInternal): CSSProperties {
@@ -368,8 +411,17 @@ function tableStyle(style: MarkdownStyleInternal): CSSProperties {
   };
 }
 
-export function listItemStyle(isTask: boolean): CSSProperties | undefined {
-  return isTask ? { listStyle: 'none' } : undefined;
+export function listItemStyle(
+  style: MarkdownStyleInternal,
+  isTask: boolean,
+  isFirstChild: boolean
+): CSSProperties | undefined {
+  const { itemSpacing } = style.list;
+  const marginTop = !isFirstChild && itemSpacing > 0 ? itemSpacing : undefined;
+  if (isTask) {
+    return { listStyle: 'none', marginTop };
+  }
+  return marginTop !== undefined ? { marginTop } : undefined;
 }
 
 export function checkedTaskTextStyle(
@@ -384,6 +436,21 @@ export function checkedTaskTextStyle(
   };
 }
 
+/**
+ * Checkbox style used when `enableTaskListItemToggle` is `false`. Pointer-inert
+ * so the browser paints no hover/active state on a checkbox that cannot be
+ * toggled; appearance is otherwise identical to the enabled checkbox.
+ */
+function taskCheckboxDisabledStyle(
+  style: MarkdownStyleInternal
+): CSSProperties {
+  return {
+    ...taskCheckboxStyle(style),
+    pointerEvents: 'none',
+    cursor: 'default',
+  };
+}
+
 function taskCheckboxStyle(style: MarkdownStyleInternal): CSSProperties {
   const taskList = style.taskList;
   return {
@@ -411,11 +478,20 @@ export function tableBodyRowStyle(
 
 function tableWrapperStyle(style: MarkdownStyleInternal): CSSProperties {
   const table = style.table;
+  const alignment: CSSProperties = table.align
+    ? {
+        width: 'fit-content',
+        maxWidth: '100%',
+        marginLeft: table.align === 'left' ? 0 : 'auto',
+        marginRight: table.align === 'right' ? 0 : 'auto',
+      }
+    : {};
   return {
     overflowX: 'auto',
     overflowY: 'hidden',
     marginTop: table.marginTop,
     marginBottom: table.marginBottom,
+    ...alignment,
     // borderRadius must live on the wrapper, not the <table> — border-collapse:
     // collapse causes browsers to ignore border-radius on the table element itself.
     borderRadius: table.borderRadius,
@@ -491,6 +567,7 @@ export interface Styles {
   tableHeaderCell: Record<ColumnAlign, CSSProperties>;
   tableCell: Record<ColumnAlign, CSSProperties>;
   taskCheckbox: CSSProperties;
+  taskCheckboxDisabled: CSSProperties;
 }
 
 type ColumnAlign = 'left' | 'center' | 'right' | 'default';
@@ -513,7 +590,13 @@ export function buildStyles(style: MarkdownStyleInternal): Styles {
     h6: headingStyle(style, '6'),
     blockquote: blockquoteStyle(style),
     list: listStyle(style),
-    listNested: { ...listStyle(style), marginBottom: 0 },
+    listNested: {
+      ...listStyle(style),
+      // A nested list sits directly under its parent item's text; itemSpacing
+      // (not the list's outer margins) controls that gap, like on native.
+      marginTop: Math.max(0, style.list.itemSpacing),
+      marginBottom: 0,
+    },
     listTask: listStyle(style, true),
     codeBlock,
     codeBlockFont: { fontFamily: codeBlock.fontFamily },
@@ -546,6 +629,7 @@ export function buildStyles(style: MarkdownStyleInternal): Styles {
       default: tableCellStyle(style, 'default'),
     },
     taskCheckbox: taskCheckboxStyle(style),
+    taskCheckboxDisabled: taskCheckboxDisabledStyle(style),
   };
 
   stylesStore.set(style, result);

package/src/web/types.ts

@@ -15,6 +15,7 @@ export type NodeType =
   | 'Link'
   | 'Heading'
   | 'LineBreak'
+  | 'SoftBreak'
   | 'Strong'
   | 'Emphasis'
   | 'Strikethrough'
@@ -63,7 +64,7 @@ export interface ASTNode {
   content?: string;
   /** Present on nodes that carry structural metadata (Heading, Link, etc.). */
   attributes?: NodeAttributes;
-  /** Child nodes; absent on leaf nodes (Text, LineBreak, ThematicBreak). */
+  /** Child nodes; absent on leaf nodes (Text, LineBreak, SoftBreak, ThematicBreak). */
   children?: ASTNode[];
 }
 
@@ -75,6 +76,8 @@ export interface RendererCallbacks {
 
 export interface RenderCapabilities {
   katex: KaTeXInstance | null;
+  /** When false, task list checkboxes render read-only and ignore clicks. */
+  enableTaskListItemToggle: boolean;
 }
 
 export interface RendererProps {
@@ -82,6 +85,8 @@ export interface RendererProps {
   style: MarkdownStyleInternal;
   styles: Styles;
   parentType?: NodeType;
+  /** Position among the parent node's children. */
+  index?: number;
   callbacks: RendererCallbacks;
   capabilities: RenderCapabilities;
   renderChildren: (node: ASTNode) => ReactNode;

package/src/web/utils.ts

@@ -2,6 +2,7 @@ import type { ASTNode } from './types';
 
 /** Recursively collects plain text content from an AST node's subtree. */
 export function extractNodeText(node: ASTNode): string {
+  if (node.type === 'SoftBreak' || node.type === 'LineBreak') return ' ';
   if (node.content !== undefined) return node.content;
   return node.children?.map(extractNodeText).join('') ?? '';
 }