react-native-enriched-markdown 0.1.0 → 0.2.0

package/src/EnrichedMarkdownText.tsx

@@ -0,0 +1,280 @@
+import { useMemo, useCallback } from 'react';
+import EnrichedMarkdownTextNativeComponent, {
+  type NativeProps,
+  type LinkPressEvent,
+  type LinkLongPressEvent,
+} from './EnrichedMarkdownTextNativeComponent';
+import { normalizeMarkdownStyle } from './normalizeMarkdownStyle';
+import type { ViewStyle, TextStyle, NativeSyntheticEvent } from 'react-native';
+
+type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify';
+
+interface BaseBlockStyle {
+  fontSize?: number;
+  fontFamily?: string;
+  fontWeight?: string;
+  color?: string;
+  marginTop?: number;
+  marginBottom?: number;
+  lineHeight?: number;
+}
+
+interface ParagraphStyle extends BaseBlockStyle {
+  textAlign?: TextAlign;
+}
+
+interface HeadingStyle extends BaseBlockStyle {
+  textAlign?: TextAlign;
+}
+
+interface BlockquoteStyle extends BaseBlockStyle {
+  borderColor?: string;
+  borderWidth?: number;
+  gapWidth?: number;
+  backgroundColor?: string;
+}
+
+interface ListStyle extends BaseBlockStyle {
+  bulletColor?: string;
+  bulletSize?: number;
+  markerColor?: string;
+  markerFontWeight?: string;
+  gapWidth?: number;
+  marginLeft?: number;
+}
+
+interface CodeBlockStyle extends BaseBlockStyle {
+  backgroundColor?: string;
+  borderColor?: string;
+  borderRadius?: number;
+  borderWidth?: number;
+  padding?: number;
+}
+
+interface LinkStyle {
+  color?: string;
+  underline?: boolean;
+}
+
+interface StrongStyle {
+  color?: string;
+}
+
+interface EmphasisStyle {
+  color?: string;
+}
+
+interface StrikethroughStyle {
+  /**
+   * Color of the strikethrough line.
+   * @platform iOS
+   */
+  color?: string;
+}
+
+interface UnderlineStyle {
+  /**
+   * Color of the underline.
+   * @platform iOS
+   */
+  color?: string;
+}
+
+interface CodeStyle {
+  color?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+}
+
+interface ImageStyle {
+  height?: number;
+  borderRadius?: number;
+  marginTop?: number;
+  marginBottom?: number;
+}
+
+interface InlineImageStyle {
+  size?: number;
+}
+
+interface ThematicBreakStyle {
+  color?: string;
+  height?: number;
+  marginTop?: number;
+  marginBottom?: number;
+}
+
+export interface MarkdownStyle {
+  paragraph?: ParagraphStyle;
+  h1?: HeadingStyle;
+  h2?: HeadingStyle;
+  h3?: HeadingStyle;
+  h4?: HeadingStyle;
+  h5?: HeadingStyle;
+  h6?: HeadingStyle;
+  blockquote?: BlockquoteStyle;
+  list?: ListStyle;
+  codeBlock?: CodeBlockStyle;
+  link?: LinkStyle;
+  strong?: StrongStyle;
+  em?: EmphasisStyle;
+  strikethrough?: StrikethroughStyle;
+  underline?: UnderlineStyle;
+  code?: CodeStyle;
+  image?: ImageStyle;
+  inlineImage?: InlineImageStyle;
+  thematicBreak?: ThematicBreakStyle;
+}
+
+/**
+ * MD4C parser flags configuration.
+ * Controls how the markdown parser interprets certain syntax.
+ */
+export interface Md4cFlags {
+  /**
+   * 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;
+}
+
+export interface EnrichedMarkdownTextProps
+  extends Omit<
+    NativeProps,
+    | 'markdownStyle'
+    | 'style'
+    | 'onLinkPress'
+    | 'onLinkLongPress'
+    | 'md4cFlags'
+    | 'enableLinkPreview'
+  > {
+  /**
+   * Style configuration for markdown elements
+   */
+  markdownStyle?: MarkdownStyle;
+  /**
+   * Style for the container view.
+   */
+  containerStyle?: ViewStyle | TextStyle;
+  /**
+   * Callback fired when a link is pressed.
+   * Receives the link URL directly.
+   */
+  onLinkPress?: (event: LinkPressEvent) => void;
+  /**
+   * Callback fired when a link is long pressed.
+   * Receives the link URL directly.
+   * - iOS: When provided, automatically disables the system link preview (unless `enableLinkPreview` is explicitly set to `true`).
+   * - Android: Handles long press gestures on links.
+   */
+  onLinkLongPress?: (event: LinkLongPressEvent) => void;
+  /**
+   * Controls whether the system link preview is shown on long press (iOS only).
+   *
+   * When `true`, long-pressing a link shows the native iOS link preview.
+   * When `false`, the system preview is suppressed.
+   *
+   * Defaults to `true`, but automatically becomes `false` when `onLinkLongPress` is provided.
+   * Set explicitly to override the automatic behavior.
+   *
+   * Android: No-op.
+   *
+   * @default true
+   * @platform ios
+   */
+  enableLinkPreview?: boolean;
+  /**
+   * MD4C parser flags configuration.
+   * Controls how the markdown parser interprets certain syntax.
+   */
+  md4cFlags?: Md4cFlags;
+  /**
+   * 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?: boolean;
+  /**
+   * Specifies the largest possible scale a font can reach when allowFontScaling is enabled.
+   * Possible values:
+   * - undefined/null (default): no limit
+   * - 0: no limit
+   * - >= 1: sets the maxFontSizeMultiplier of this node to this value
+   * @default undefined
+   */
+  maxFontSizeMultiplier?: number;
+  /**
+   * 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?: boolean;
+}
+
+const defaultMd4cFlags: Md4cFlags = {
+  underline: false,
+};
+
+export const EnrichedMarkdownText = ({
+  markdown,
+  markdownStyle = {},
+  containerStyle,
+  onLinkPress,
+  onLinkLongPress,
+  enableLinkPreview,
+  selectable = true,
+  md4cFlags = defaultMd4cFlags,
+  allowFontScaling = true,
+  maxFontSizeMultiplier,
+  allowTrailingMargin = false,
+  ...rest
+}: EnrichedMarkdownTextProps) => {
+  const normalizedStyle = useMemo(
+    () => normalizeMarkdownStyle(markdownStyle),
+    [markdownStyle]
+  );
+
+  const normalizedMd4cFlags = useMemo(
+    () => ({
+      underline: md4cFlags.underline ?? false,
+    }),
+    [md4cFlags]
+  );
+
+  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]
+  );
+
+  return (
+    <EnrichedMarkdownTextNativeComponent
+      markdown={markdown}
+      markdownStyle={normalizedStyle}
+      onLinkPress={handleLinkPress}
+      onLinkLongPress={handleLinkLongPress}
+      enableLinkPreview={onLinkLongPress == null && (enableLinkPreview ?? true)}
+      selectable={selectable}
+      md4cFlags={normalizedMd4cFlags}
+      allowFontScaling={allowFontScaling}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+      allowTrailingMargin={allowTrailingMargin}
+      style={containerStyle}
+      {...rest}
+    />
+  );
+};
+
+export default EnrichedMarkdownText;

package/src/EnrichedMarkdownTextNativeComponent.ts

@@ -0,0 +1,210 @@
+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;
+  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 {
+  color: ColorValue;
+  underline: boolean;
+}
+
+interface StrongStyleInternal {
+  color?: ColorValue;
+}
+
+interface EmphasisStyleInternal {
+  color?: ColorValue;
+}
+
+interface StrikethroughStyleInternal {
+  color: ColorValue;
+}
+
+interface UnderlineStyleInternal {
+  color: ColorValue;
+}
+
+interface CodeStyleInternal {
+  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;
+}
+
+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;
+  strong: StrongStyleInternal;
+  em: EmphasisStyleInternal;
+  strikethrough: StrikethroughStyleInternal;
+  underline: UnderlineStyleInternal;
+  code: CodeStyleInternal;
+  image: ImageStyleInternal;
+  inlineImage: InlineImageStyleInternal;
+  thematicBreak: ThematicBreakStyleInternal;
+}
+
+export interface LinkPressEvent {
+  url: string;
+}
+
+export interface LinkLongPressEvent {
+  url: string;
+}
+
+/**
+ * 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;
+}
+
+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>;
+  /**
+   * 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;
+  /**
+   * 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>;
+}
+
+export default codegenNativeComponent<NativeProps>('EnrichedMarkdownText');

package/src/index.tsx

@@ -0,0 +1,10 @@
+export { default as EnrichedMarkdownText } from './EnrichedMarkdownText';
+export type {
+  EnrichedMarkdownTextProps,
+  MarkdownStyle,
+  Md4cFlags,
+} from './EnrichedMarkdownText';
+export type {
+  LinkPressEvent,
+  LinkLongPressEvent,
+} from './EnrichedMarkdownTextNativeComponent';