react-native-enriched-markdown-scaffold 0.6.0-scaffold.4

package/src/EnrichedMarkdownTextNativeComponent.ts

@@ -0,0 +1,428 @@
+import {
+  codegenNativeComponent,
+  type ViewProps,
+  type CodegenTypes,
+  type ColorValue,
+} from 'react-native';
+
+// All block styles extend this interface
+interface BaseBlockStyleInternal {
+  fontSize: CodegenTypes.Float;
+  fontFamily: string;
+  fontWeight: string;
+  color: ColorValue;
+  marginTop: CodegenTypes.Float;
+  marginBottom: CodegenTypes.Float;
+  lineHeight: CodegenTypes.Float;
+}
+
+interface ParagraphStyleInternal extends BaseBlockStyleInternal {
+  textAlign: string;
+}
+
+interface HeadingStyleInternal extends BaseBlockStyleInternal {
+  textAlign: string;
+}
+
+interface BlockquoteStyleInternal extends BaseBlockStyleInternal {
+  borderColor: ColorValue;
+  borderWidth: CodegenTypes.Float;
+  gapWidth: CodegenTypes.Float;
+  backgroundColor: ColorValue;
+}
+
+interface ListStyleInternal extends BaseBlockStyleInternal {
+  bulletColor: ColorValue;
+  bulletSize: CodegenTypes.Float;
+  markerMinWidth: CodegenTypes.Float;
+  markerColor: ColorValue;
+  markerFontWeight: string;
+  gapWidth: CodegenTypes.Float;
+  marginLeft: CodegenTypes.Float;
+}
+
+interface CodeBlockStyleInternal extends BaseBlockStyleInternal {
+  backgroundColor: ColorValue;
+  borderColor: ColorValue;
+  borderRadius: CodegenTypes.Float;
+  borderWidth: CodegenTypes.Float;
+  padding: CodegenTypes.Float;
+}
+
+interface LinkStyleInternal {
+  fontFamily: string;
+  color: ColorValue;
+  underline: boolean;
+  backgroundColor: ColorValue;
+}
+
+// Mirrors EnrichedMarkdownNativeComponent.ts — kept in sync manually (codegen spec files must be self-contained).
+interface LinkVariantEntryInternal {
+  pattern: string;
+  color: ColorValue;
+  underline: boolean;
+  backgroundColor: ColorValue;
+}
+
+interface StrongStyleInternal {
+  fontFamily: string;
+  fontWeight: string;
+  color?: ColorValue;
+}
+
+interface EmphasisStyleInternal {
+  fontFamily: string;
+  fontStyle: string;
+  color?: ColorValue;
+}
+
+interface StrikethroughStyleInternal {
+  color: ColorValue;
+}
+
+interface UnderlineStyleInternal {
+  color: ColorValue;
+}
+
+interface CodeStyleInternal {
+  fontFamily: string;
+  fontSize: CodegenTypes.Float;
+  color: ColorValue;
+  backgroundColor: ColorValue;
+  borderColor: ColorValue;
+}
+
+interface ImageStyleInternal {
+  height: CodegenTypes.Float;
+  borderRadius: CodegenTypes.Float;
+  marginTop: CodegenTypes.Float;
+  marginBottom: CodegenTypes.Float;
+}
+
+interface InlineImageStyleInternal {
+  size: CodegenTypes.Float;
+}
+
+interface ThematicBreakStyleInternal {
+  color: ColorValue;
+  height: CodegenTypes.Float;
+  marginTop: CodegenTypes.Float;
+  marginBottom: CodegenTypes.Float;
+}
+
+interface TableStyleInternal extends BaseBlockStyleInternal {
+  headerFontFamily: string;
+  headerBackgroundColor: ColorValue;
+  headerTextColor: ColorValue;
+  rowEvenBackgroundColor: ColorValue;
+  rowOddBackgroundColor: ColorValue;
+  borderColor: ColorValue;
+  borderWidth: CodegenTypes.Float;
+  borderRadius: CodegenTypes.Float;
+  cellPaddingHorizontal: CodegenTypes.Float;
+  cellPaddingVertical: CodegenTypes.Float;
+}
+
+interface TaskListStyleInternal {
+  checkedColor: ColorValue;
+  borderColor: ColorValue;
+  checkboxSize: CodegenTypes.Float;
+  checkboxBorderRadius: CodegenTypes.Float;
+  checkmarkColor: ColorValue;
+  checkedTextColor: ColorValue;
+  checkedStrikethrough: boolean;
+}
+
+interface MathStyleInternal {
+  fontSize: CodegenTypes.Float;
+  color: ColorValue;
+  backgroundColor: ColorValue;
+  padding: CodegenTypes.Float;
+  marginTop: CodegenTypes.Float;
+  marginBottom: CodegenTypes.Float;
+  textAlign: string;
+}
+
+interface InlineMathStyleInternal {
+  color: ColorValue;
+}
+
+interface SpoilerParticlesStyleInternal {
+  density: CodegenTypes.Float;
+  speed: CodegenTypes.Float;
+}
+
+interface SpoilerSolidStyleInternal {
+  borderRadius: CodegenTypes.Float;
+}
+
+interface SpoilerStyleInternal {
+  color: ColorValue;
+  particles: SpoilerParticlesStyleInternal;
+  solid: SpoilerSolidStyleInternal;
+}
+
+interface SuperscriptStyleInternal {
+  fontScale: CodegenTypes.Float;
+  baselineOffsetScale: CodegenTypes.Float;
+}
+
+interface SubscriptStyleInternal {
+  fontScale: CodegenTypes.Float;
+  baselineOffsetScale: CodegenTypes.Float;
+}
+
+interface HighlightStyleInternal {
+  color: ColorValue;
+  backgroundColor: ColorValue;
+}
+
+export interface MarkdownStyleInternal {
+  paragraph: ParagraphStyleInternal;
+  h1: HeadingStyleInternal;
+  h2: HeadingStyleInternal;
+  h3: HeadingStyleInternal;
+  h4: HeadingStyleInternal;
+  h5: HeadingStyleInternal;
+  h6: HeadingStyleInternal;
+  blockquote: BlockquoteStyleInternal;
+  list: ListStyleInternal;
+  codeBlock: CodeBlockStyleInternal;
+  link: LinkStyleInternal;
+  linkVariants: ReadonlyArray<Readonly<LinkVariantEntryInternal>>;
+  strong: StrongStyleInternal;
+  em: EmphasisStyleInternal;
+  strikethrough: StrikethroughStyleInternal;
+  underline: UnderlineStyleInternal;
+  code: CodeStyleInternal;
+  image: ImageStyleInternal;
+  inlineImage: InlineImageStyleInternal;
+  thematicBreak: ThematicBreakStyleInternal;
+  table: TableStyleInternal;
+  taskList: TaskListStyleInternal;
+  math: MathStyleInternal;
+  inlineMath: InlineMathStyleInternal;
+  spoiler: SpoilerStyleInternal;
+  superscript: SuperscriptStyleInternal;
+  subscript: SubscriptStyleInternal;
+  highlight: HighlightStyleInternal;
+}
+
+export interface LinkPressEvent {
+  url: string;
+}
+
+export interface LinkLongPressEvent {
+  url: string;
+}
+
+export interface TaskListItemPressEvent {
+  index: CodegenTypes.Int32;
+  checked: boolean;
+  text: string;
+}
+
+export interface ContextMenuItemConfig {
+  text: string;
+  icon?: string;
+}
+
+export interface SelectionMenuConfig {
+  copyAsMarkdown: boolean;
+  copyImageUrl: boolean;
+}
+
+export interface OnContextMenuItemPressEvent {
+  itemText: string;
+  selectedText: string;
+  selectionStart: CodegenTypes.Int32;
+  selectionEnd: CodegenTypes.Int32;
+}
+
+/**
+ * MD4C parser flags configuration.
+ * Controls how the markdown parser interprets certain syntax.
+ */
+export interface Md4cFlagsInternal {
+  /**
+   * Enable underline syntax support (__text__).
+   * When enabled, underscores are treated as underline markers.
+   * When disabled, underscores are treated as emphasis markers (same as asterisks).
+   * @default false
+   */
+  underline: boolean;
+  /**
+   * Enable superscript span parsing (^text^).
+   * @default false
+   */
+  superscript: boolean;
+  /**
+   * Enable subscript span parsing (~text~).
+   * @default false
+   */
+  subscript: boolean;
+  /**
+   * Enable LaTeX math span parsing ($..$ and $$..$$).
+   * When disabled, dollar signs are treated as plain text.
+   * @default true
+   */
+  latexMath: boolean;
+  /**
+   * Enable highlight span parsing (==text==).
+   * @default false
+   */
+  highlight: boolean;
+}
+
+interface StreamingConfigInternal {
+  tableMode: string;
+}
+
+export interface NativeProps extends ViewProps {
+  /**
+   * Markdown content to render.
+   */
+  markdown: string;
+  /**
+   * Internal style configuration for markdown elements.
+   * Always provided with complete defaults via normalizeMarkdownStyle.
+   * Block styles (paragraph, headings) contain fontSize, fontFamily, fontWeight, and color.
+   */
+  markdownStyle: MarkdownStyleInternal;
+  /**
+   * Callback fired when a link is pressed.
+   * Receives the URL that was tapped.
+   */
+  onLinkPress?: CodegenTypes.BubblingEventHandler<LinkPressEvent>;
+  /**
+   * Callback fired when a link is long pressed.
+   * Receives the URL that was long pressed.
+   * - iOS: When provided, overrides the system link preview behavior.
+   * - Android: Handles long press gestures on links.
+   */
+  onLinkLongPress?: CodegenTypes.BubblingEventHandler<LinkLongPressEvent>;
+  /**
+   * Callback fired when a task list checkbox is tapped.
+   * Receives the 0-based task index, current checked state, and the item's plain text.
+   */
+  onTaskListItemPress?: CodegenTypes.BubblingEventHandler<TaskListItemPressEvent>;
+  /**
+   * Controls whether the system link preview is shown on long press (iOS only).
+   *
+   * When `true` (default), long-pressing a link shows the native iOS link preview.
+   * When `false`, the system preview is suppressed.
+   *
+   * Automatically set to `false` when `onLinkLongPress` is provided (unless explicitly overridden).
+   *
+   * Android: No-op (Android doesn't have a system link preview).
+   *
+   * @default true
+   */
+  enableLinkPreview?: CodegenTypes.WithDefault<boolean, true>;
+  /**
+   * - iOS: Controls text selection and link previews on long press.
+   * - Android: Controls text selection.
+   * @default true
+   */
+  selectable?: boolean;
+  /**
+   * Color of the text selection highlight.
+   *
+   * On iOS, this also affects the caret and selection handle colors
+   * (they share a single tint). On macOS, only the selection background
+   * is affected.
+   *
+   * @platform ios, android, macos, web
+   */
+  selectionColor?: ColorValue;
+  /**
+   * Color of the selection handles (drag anchors).
+   * No-op on API levels below 29.
+   *
+   * @platform android
+   */
+  selectionHandleColor?: ColorValue;
+  /**
+   * MD4C parser flags configuration.
+   * Controls how the markdown parser interprets certain syntax.
+   */
+  md4cFlags: Md4cFlagsInternal;
+  /**
+   * Specifies whether fonts should scale to respect Text Size accessibility settings.
+   * When false, text will not scale with the user's accessibility settings.
+   * @default true
+   */
+  allowFontScaling?: CodegenTypes.WithDefault<boolean, true>;
+  /**
+   * Specifies the largest possible scale a font can reach when allowFontScaling is enabled.
+   * Possible values:
+   * - undefined/null (default): inherit from parent or global default (no limit)
+   * - 0: no limit, ignore parent/global default
+   * - >= 1: sets the maxFontSizeMultiplier of this node to this value
+   * @default undefined
+   */
+  maxFontSizeMultiplier?: CodegenTypes.Float;
+  /**
+   * When false (default), removes trailing margin from the last element to eliminate bottom spacing.
+   * When true, keeps the trailing margin from the last element's marginBottom style.
+   * @default false
+   */
+  allowTrailingMargin?: CodegenTypes.WithDefault<boolean, false>;
+  /**
+   * When true, newly appended content fades in during streaming updates.
+   * Only the tail (new characters beyond the previous content) is animated.
+   * @default false
+   */
+  streamingAnimation?: CodegenTypes.WithDefault<boolean, false>;
+  /**
+   * Fine-grained control over streaming behavior for block-level elements.
+   */
+  streamingConfig?: StreamingConfigInternal;
+  /**
+   * Controls how spoiler text is displayed before being revealed.
+   * - 'particles' (default): animated particle overlay.
+   * - 'solid': opaque rectangle covering the text.
+   * @default 'particles'
+   */
+  spoilerOverlay?: CodegenTypes.WithDefault<string, 'particles'>;
+  /**
+   * Custom items to show in the text selection context menu.
+   */
+  contextMenuItems?: ReadonlyArray<Readonly<ContextMenuItemConfig>>;
+  /**
+   * Built-in items to show in the text selection context menu.
+   */
+  selectionMenuConfig: Readonly<SelectionMenuConfig>;
+  /**
+   * Fired when a custom context menu item is pressed.
+   * Receives the item label, the currently selected text, and the selection range.
+   */
+  onContextMenuItemPress?: CodegenTypes.BubblingEventHandler<OnContextMenuItemPressEvent>;
+  /**
+   * Sets the text break strategy on Android (API 23+).
+   * @default 'highQuality'
+   * @platform android
+   */
+  textBreakStrategy?: CodegenTypes.WithDefault<string, 'highQuality'>;
+  /**
+   * Sets the line break strategy on iOS 14+.
+   * @default 'none'
+   * @platform ios
+   */
+  lineBreakStrategyIOS?: CodegenTypes.WithDefault<string, 'none'>;
+  /**
+   * Paragraph writing direction.
+   * - 'first-strong' (default): resolves each paragraph from its first strong directional character;
+   *   neutral-only paragraphs fall back to the view's resolved layout direction. Library extension —
+   *   matches Android's TEXT_DIRECTION_FIRST_STRONG.
+   * - 'auto': React Native parity; iOS TextKit follows the app's userInterfaceLayoutDirection.
+   * - 'ltr' / 'rtl': force base direction on every paragraph. Code blocks always stay LTR.
+   * @default 'first-strong'
+   * @platform ios
+   */
+  writingDirection?: CodegenTypes.WithDefault<string, 'first-strong'>;
+}
+
+export default codegenNativeComponent<NativeProps>('EnrichedMarkdownText', {
+  interfaceOnly: true,
+});

package/src/index.tsx

@@ -0,0 +1,28 @@
+export { default as EnrichedMarkdownText } from './native/EnrichedMarkdownText';
+export type {
+  EnrichedMarkdownTextProps,
+  StreamingConfig,
+  MarkdownStyle,
+  Md4cFlags,
+  ContextMenuItem as TextContextMenuItem,
+  SelectionMenuConfig as TextSelectionMenuConfig,
+} from './native/EnrichedMarkdownText';
+export type {
+  LinkPressEvent,
+  LinkLongPressEvent,
+  TaskListItemPressEvent,
+} from './types/events';
+
+export { EnrichedMarkdownTextInput } from './EnrichedMarkdownTextInput';
+export type {
+  EnrichedMarkdownTextInputProps,
+  EnrichedMarkdownTextInputInstance,
+  MarkdownTextInputStyle,
+  StyleState,
+  ContextMenuItem,
+  OnLinkDetected,
+  OnStartMentionEvent,
+  OnChangeMentionEvent,
+  OnEndMentionEvent,
+  CaretRect,
+} from './EnrichedMarkdownTextInput';

package/src/index.web.tsx

@@ -0,0 +1,8 @@
+export { EnrichedMarkdownText, default } from './web/EnrichedMarkdownText';
+export type { EnrichedMarkdownTextProps } from './types/MarkdownTextProps.web';
+export type { MarkdownStyle, Md4cFlags } from './types/MarkdownStyle';
+export type {
+  LinkPressEvent,
+  LinkLongPressEvent,
+  TaskListItemPressEvent,
+} from './types/events';

package/src/linkVariantUtils.ts

@@ -0,0 +1,42 @@
+import type { LinkVariantStyle } from './types/MarkdownStyle';
+
+type LinkVariantEntry = [pattern: string, style: LinkVariantStyle];
+
+// Lookbehind assertions (?<=...) and (?<!...) are not supported by
+// NSRegularExpression on iOS. Warn early so the issue surfaces in JS tests
+// before it silently misfires on device.
+const UNSAFE_LOOKBEHIND_RE = /\(\?<[=!]/;
+
+function warnAboutUnsafePattern(pattern: string): void {
+  if (UNSAFE_LOOKBEHIND_RE.test(pattern)) {
+    console.warn(
+      `[MarkdownStyle] linkVariants pattern "${pattern}" contains a lookbehind assertion (?<= or ?<!). ` +
+        'Lookbehinds are not supported by NSRegularExpression on iOS and will never match. ' +
+        'Use a lookahead or restructure the pattern to avoid them.'
+    );
+  }
+}
+
+export function normalizeLinkVariantEntries(
+  linkVariants?: Record<string, LinkVariantStyle>
+): LinkVariantEntry[] {
+  return Object.entries(linkVariants ?? {})
+    .sort(([a], [b]) => b.length - a.length)
+    .filter(([pattern]) => {
+      try {
+        RegExp(pattern);
+      } catch {
+        if (__DEV__) {
+          console.warn(
+            `[MarkdownStyle] linkVariants pattern "${pattern}" is not a valid regex and will be ignored.`
+          );
+        }
+        return false;
+      }
+
+      if (__DEV__) {
+        warnAboutUnsafePattern(pattern);
+      }
+      return true;
+    });
+}

package/src/native/EnrichedMarkdownText.tsx

@@ -0,0 +1,187 @@
+import { useMemo, useCallback, useRef, useEffect } from 'react';
+import EnrichedMarkdownTextNativeComponent from '../EnrichedMarkdownTextNativeComponent';
+import type { MarkdownStyleInternal } from '../EnrichedMarkdownTextNativeComponent';
+import EnrichedMarkdownNativeComponent from '../EnrichedMarkdownNativeComponent';
+import { normalizeMarkdownStyle } from '../normalizeMarkdownStyle';
+import type { NativeSyntheticEvent } from 'react-native';
+import type { MarkdownStyle, Md4cFlags } from '../types/MarkdownStyle';
+import type {
+  EnrichedMarkdownTextProps,
+  StreamingConfig,
+  ContextMenuItem,
+  SelectionMenuConfig,
+} from '../types/MarkdownTextProps';
+import type {
+  LinkPressEvent,
+  LinkLongPressEvent,
+  TaskListItemPressEvent,
+  OnContextMenuItemPressEvent,
+} from '../types/events';
+
+export type { MarkdownStyle, Md4cFlags };
+export type {
+  EnrichedMarkdownTextProps,
+  StreamingConfig,
+  ContextMenuItem,
+  SelectionMenuConfig,
+};
+export type { LinkPressEvent, LinkLongPressEvent, TaskListItemPressEvent };
+
+const defaultMd4cFlags: Md4cFlags = {
+  underline: false,
+  superscript: false,
+  subscript: false,
+  latexMath: true,
+  highlight: false,
+};
+
+export const EnrichedMarkdownText = ({
+  markdown,
+  markdownStyle = {},
+  containerStyle,
+  onLinkPress,
+  onLinkLongPress,
+  onTaskListItemPress,
+  enableLinkPreview,
+  selectable = true,
+  md4cFlags = defaultMd4cFlags,
+  allowFontScaling = true,
+  maxFontSizeMultiplier,
+  allowTrailingMargin = false,
+  flavor = 'commonmark',
+  streamingAnimation = false,
+  streamingConfig,
+  spoilerOverlay = 'particles',
+  contextMenuItems,
+  selectionMenuConfig,
+  selectionColor,
+  selectionHandleColor,
+  textBreakStrategy,
+  lineBreakStrategyIOS,
+  writingDirection = 'first-strong',
+  ...rest
+}: EnrichedMarkdownTextProps) => {
+  const normalizedStyleRef = useRef<MarkdownStyleInternal | null>(null);
+  const normalized = normalizeMarkdownStyle(markdownStyle);
+  // normalizeMarkdownStyle returns cached objects for structurally equal inputs,
+  // so this referential check is sufficient to preserve a stable prop reference.
+  if (normalizedStyleRef.current !== normalized) {
+    normalizedStyleRef.current = normalized;
+  }
+  const normalizedStyle = normalizedStyleRef.current!;
+
+  const normalizedMd4cFlags = useMemo(
+    () => ({
+      underline: md4cFlags.underline ?? false,
+      superscript: md4cFlags.superscript ?? false,
+      subscript: md4cFlags.subscript ?? false,
+      latexMath: md4cFlags.latexMath ?? true,
+      highlight: md4cFlags.highlight ?? false,
+    }),
+    [md4cFlags]
+  );
+
+  const contextMenuCallbacksRef = useRef<
+    Map<string, ContextMenuItem['onPress']>
+  >(new Map());
+
+  useEffect(() => {
+    const callbacksMap = new Map<string, ContextMenuItem['onPress']>();
+    if (contextMenuItems) {
+      for (const item of contextMenuItems) {
+        callbacksMap.set(item.text, item.onPress);
+      }
+    }
+    contextMenuCallbacksRef.current = callbacksMap;
+  }, [contextMenuItems]);
+
+  const nativeContextMenuItems = useMemo(
+    () =>
+      contextMenuItems
+        ?.filter((item) => item.visible !== false)
+        .map((item) => ({ text: item.text, icon: item.icon })),
+    [contextMenuItems]
+  );
+
+  const handleContextMenuItemPress = useCallback(
+    (e: NativeSyntheticEvent<OnContextMenuItemPressEvent>) => {
+      const { itemText, selectedText, selectionStart, selectionEnd } =
+        e.nativeEvent;
+      const callback = contextMenuCallbacksRef.current.get(itemText);
+      callback?.({
+        text: selectedText,
+        selection: { start: selectionStart, end: selectionEnd },
+      });
+    },
+    []
+  );
+
+  const handleLinkPress = useCallback(
+    (e: NativeSyntheticEvent<LinkPressEvent>) => {
+      const { url } = e.nativeEvent;
+      onLinkPress?.({ url });
+    },
+    [onLinkPress]
+  );
+
+  const handleLinkLongPress = useCallback(
+    (e: NativeSyntheticEvent<LinkLongPressEvent>) => {
+      const { url } = e.nativeEvent;
+      onLinkLongPress?.({ url });
+    },
+    [onLinkLongPress]
+  );
+
+  const handleTaskListItemPress = useCallback(
+    (e: NativeSyntheticEvent<TaskListItemPressEvent>) => {
+      const { index, checked, text } = e.nativeEvent;
+      onTaskListItemPress?.({ index, checked, text });
+    },
+    [onTaskListItemPress]
+  );
+
+  const tableMode = streamingConfig?.tableMode ?? 'progressive';
+  const normalizedStreamingConfig = useMemo(() => ({ tableMode }), [tableMode]);
+  const normalizedSelectionMenuConfig = useMemo(
+    () => ({
+      copyAsMarkdown: selectionMenuConfig?.copyAsMarkdown ?? true,
+      copyImageUrl: selectionMenuConfig?.copyImageUrl ?? true,
+    }),
+    [selectionMenuConfig]
+  );
+
+  const sharedProps = {
+    markdown,
+    markdownStyle: normalizedStyle,
+    onLinkPress: handleLinkPress,
+    onLinkLongPress: handleLinkLongPress,
+    onTaskListItemPress: handleTaskListItemPress,
+    enableLinkPreview: onLinkLongPress == null && (enableLinkPreview ?? true),
+    selectable,
+    md4cFlags: normalizedMd4cFlags,
+    allowFontScaling,
+    maxFontSizeMultiplier,
+    allowTrailingMargin,
+    streamingAnimation,
+    streamingConfig: normalizedStreamingConfig,
+    spoilerOverlay,
+    style: containerStyle,
+    contextMenuItems: nativeContextMenuItems,
+    selectionMenuConfig: normalizedSelectionMenuConfig,
+    onContextMenuItemPress: handleContextMenuItemPress,
+    selectionColor,
+    selectionHandleColor,
+    textBreakStrategy,
+    lineBreakStrategyIOS,
+    writingDirection,
+    ...rest,
+  };
+
+  if (flavor === 'github') {
+    return <EnrichedMarkdownNativeComponent {...sharedProps} />;
+  }
+
+  return <EnrichedMarkdownTextNativeComponent {...sharedProps} />;
+};
+
+export default EnrichedMarkdownText;