react-native-enriched-markdown 0.7.0 → 0.7.2

package/docs/STYLES.md

@@ -0,0 +1,519 @@
+# Style Properties Reference
+
+This document provides a comprehensive reference for all style properties available in `react-native-enriched-markdown`.
+
+## Platform Defaults
+
+The library provides sensible defaults optimized for each platform:
+
+| Property | iOS | Android |
+|----------|-----|---------|
+| System Font | SF Pro | Roboto |
+| Monospace Font | Menlo | monospace |
+| Line Height | Tighter (0.75x multiplier) | Standard |
+
+## Style Inheritance
+
+`react-native-enriched-markdown` uses a base block style architecture where all block elements (paragraphs, headings, lists, blockquotes, code blocks) share a common set of typography properties. This base block style includes:
+
+- `fontSize` - Font size in points
+- `fontFamily` - Font family name
+- `fontWeight` - Font weight
+- `color` - Text color
+- `marginTop` - Top margin
+- `marginBottom` - Bottom margin
+- `lineHeight` - Line height
+
+Each block type extends this base style with its own specific properties (e.g., `textAlign` for paragraphs and headings, `borderColor` for blockquotes, `bulletColor` for lists).
+
+### Inline Style Inheritance
+
+Inline styles (strong, emphasis, links, inline code, etc.) automatically inherit the base typography properties from their containing block. This means inline elements use the block's `fontSize`, `fontFamily`, `fontWeight`, and `color` as their foundation, then apply their own additional styling on top.
+
+**Example:**
+
+```
+Heading (h2: fontSize 24, color blue)
+└── Strong text inherits → fontSize 24, color blue + bold weight
+└── Link inherits → fontSize 24 + link color + underline
+
+List item (list: fontSize 16, color gray)
+└── Emphasis inherits → fontSize 16, color gray + italic style
+└── Inline code inherits → fontSize 16 + code background
+```
+
+This inheritance model ensures consistent typography throughout your Markdown content while allowing inline elements to add their own visual emphasis.
+
+### Custom Font Family for Inline Styles
+
+Strong, emphasis, and inline code support an optional `fontFamily` property that gives you full control over the font face used for that element.
+
+**Default behavior (no `fontFamily` set):**
+- **Strong** — adds the bold trait to the current block font
+- **Emphasis** — adds the italic trait to the current block font
+- **Inline code** — uses the platform's system monospace font (SF Mono on iOS, monospace on Android)
+
+**With `fontFamily` set:**
+
+By default, bold/italic traits are still applied on top of the custom font family. Use `fontWeight: 'normal'` or `fontStyle: 'normal'` to disable this and use the font face exactly as-is:
+
+```tsx
+markdownStyle={{
+  strong: {
+    // Bold trait is applied on top of Montserrat-Bold (default: fontWeight 'bold')
+    fontFamily: 'Montserrat-Bold',
+  },
+  strong: {
+    // Uses Montserrat-SemiBold as-is, no bold trait added
+    fontFamily: 'Montserrat-SemiBold',
+    fontWeight: 'normal',
+  },
+  em: {
+    // Italic trait is applied on top of Montserrat-Italic (default: fontStyle 'italic')
+    fontFamily: 'Montserrat-Italic',
+  },
+  em: {
+    // Uses Montserrat-Regular as-is, no italic trait added
+    fontFamily: 'Montserrat-Regular',
+    fontStyle: 'normal',
+  },
+  code: {
+    // Uses CutiveMono-Regular directly, no system monospace applied
+    fontFamily: 'CutiveMono-Regular',
+  },
+}}
+```
+
+## Customizing Styles
+
+The library provides sensible default styles for all Markdown elements out of the box. You can override any of these defaults using the `markdownStyle` prop — only specify the properties you want to change:
+
+```tsx
+<EnrichedMarkdownText
+  markdown={content}
+  markdownStyle={{
+    paragraph: {
+      fontSize: 16,
+      color: '#333',
+      lineHeight: 24,
+    },
+    h1: {
+      fontSize: 32,
+      fontWeight: 'bold',
+      color: '#000',
+      marginBottom: 16,
+      textAlign: 'center',
+    },
+    h2: {
+      fontSize: 24,
+      fontWeight: '600',
+      marginBottom: 12,
+      textAlign: 'left',
+    },
+    strong: {
+      fontFamily: 'Montserrat-Bold',
+      color: '#000',
+    },
+    em: {
+      fontFamily: 'Montserrat-Italic',
+      color: '#666',
+    },
+    strikethrough: {
+      color: '#999',
+    },
+    underline: {
+      color: '#333',
+    },
+    link: {
+      fontFamily: 'System-Bold',
+      color: '#007AFF',
+      underline: true,
+    },
+    code: {
+      fontFamily: 'CutiveMono-Regular',
+      fontSize: 16,
+      color: '#E91E63',
+      backgroundColor: '#F5F5F5',
+      borderColor: '#E0E0E0',
+    },
+    codeBlock: {
+      fontSize: 14,
+      fontFamily: 'monospace',
+      backgroundColor: '#1E1E1E',
+      color: '#D4D4D4',
+      padding: 16,
+      borderRadius: 8,
+      marginBottom: 16,
+    },
+    blockquote: {
+      borderColor: '#007AFF',
+      borderWidth: 3,
+      backgroundColor: '#F0F8FF',
+      marginBottom: 12,
+    },
+    list: {
+      fontSize: 16,
+      bulletColor: '#007AFF',
+      bulletSize: 6,
+      markerColor: '#007AFF',
+      gapWidth: 8,
+      marginLeft: 20,
+    },
+    image: {
+      borderRadius: 8,
+      marginBottom: 12,
+    },
+    inlineImage: {
+      size: 20,
+    },
+    taskList: {
+      checkedColor: '#2196F3',
+      borderColor: '#9E9E9E',
+      checkmarkColor: '#FFFFFF',
+      checkboxSize: 16,
+    },
+    math: {
+      fontSize: 20,
+      color: '#1F2937',
+      backgroundColor: '#F3F4F6',
+      padding: 12,
+      marginBottom: 16,
+      textAlign: 'center',
+    },
+    inlineMath: {
+      color: '#1F2937',
+    },
+    spoiler: {
+      color: '#6B7280',
+      particles: { density: 10, speed: 25 },
+      solid: { borderRadius: 6 },
+    },
+    superscript: {
+      fontScale: 0.75,
+      baselineOffsetScale: 0.35,
+    },
+    subscript: {
+      fontScale: 0.75,
+      baselineOffsetScale: 0.20,
+    },
+    highlight: {
+      backgroundColor: '#FEF08A',
+    },
+  }}
+/>
+```
+
+> [!NOTE]
+> **Performance:** Memoize the `markdownStyle` prop with `useMemo` to avoid unnecessary re-renders:
+> ```tsx
+> import type { MarkdownStyle } from 'react-native-enriched-markdown';
+>
+> const markdownStyle: MarkdownStyle = useMemo(() => ({
+>   paragraph: { fontSize: 16 },
+>   h1: { fontSize: 32 },
+> }), []);
+> ```
+
+## Dark Mode
+
+The library ships with light-mode color defaults. It does not include a `colorScheme` prop — just like React Native's `Text`, theming is left to the consumer.
+
+To support dark mode, create `MarkdownStyle` objects for each color scheme and switch between them using `useColorScheme()`. Your values always win over the defaults — you only need to specify the colors you want to change:
+
+```tsx
+import { useColorScheme } from 'react-native';
+import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
+import type { MarkdownStyle } from 'react-native-enriched-markdown';
+
+const lightMarkdownStyle: MarkdownStyle = {
+  blockquote: { backgroundColor: '#F9FAFB', borderColor: '#D1D5DB' },
+  code: { color: '#E01E5A', backgroundColor: '#FDF2F4' },
+  table: {
+    headerBackgroundColor: '#F3F4F6',
+    rowEvenBackgroundColor: '#FFFFFF',
+    rowOddBackgroundColor: '#F9FAFB',
+  },
+  // ... override any other colors for light mode
+};
+
+const darkMarkdownStyle: MarkdownStyle = {
+  paragraph: { color: '#E5E7EB' },
+  blockquote: { backgroundColor: '#1F2937', borderColor: '#4B5563' },
+  code: { color: '#F87171', backgroundColor: '#1F2937' },
+  table: {
+    headerBackgroundColor: '#1F2937',
+    rowEvenBackgroundColor: '#111827',
+    rowOddBackgroundColor: '#1A1A2E',
+    borderColor: '#374151',
+  },
+  // ... override any other colors for dark mode
+};
+
+function App() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <EnrichedMarkdownText
+      markdown={content}
+      markdownStyle={colorScheme === 'dark' ? darkMarkdownStyle : lightMarkdownStyle}
+    />
+  );
+}
+```
+
+> [!NOTE]
+> **Performance:** Define style objects outside the component (as shown above) or wrap them in `useMemo` so the same object reference is reused across renders.
+
+## Style Properties Reference
+
+### Block Styles (paragraph, h1-h6, blockquote, list, codeBlock)
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `fontSize` | `number` | Font size in points |
+| `fontFamily` | `string` | Font family name |
+| `fontWeight` | `string` | Font weight |
+| `color` | `string` | Text color |
+| `marginTop` | `number` | Top margin |
+| `marginBottom` | `number` | Bottom margin |
+| `lineHeight` | `number` | Line height |
+
+### Paragraph and Heading-specific (paragraph, h1-h6)
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `textAlign` | `'auto' \| 'left' \| 'right' \| 'center' \| 'justify'` | Text alignment (default: `'left'`) |
+
+### Blockquote-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `borderColor` | `string` | Left border color |
+| `borderWidth` | `number` | Left border width |
+| `gapWidth` | `number` | Gap between border and text |
+| `backgroundColor` | `string` | Background color |
+
+### List-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `bulletColor` | `string` | Bullet point color |
+| `bulletSize` | `number` | Bullet point size |
+| `markerMinWidth` | `number` | Minimum reserved marker column width (floors the natural width of every list type) |
+| `markerColor` | `string` | Number marker color |
+| `markerFontWeight` | `string` | Number marker font weight |
+| `gapWidth` | `number` | Gap between marker and text |
+| `marginLeft` | `number` | Left margin for nesting |
+
+### Code Block-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `backgroundColor` | `string` | Background color |
+| `borderColor` | `string` | Border color |
+| `borderRadius` | `number` | Corner radius |
+| `borderWidth` | `number` | Border width |
+| `padding` | `number` | Inner padding |
+
+### Inline Code-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `fontFamily` | `string` | Font family for inline code. Uses the exact font face as-is. When not set, uses the platform's system monospace font (SF Mono on iOS, monospace on Android) |
+| `fontSize` | `number` | Font size in points. Defaults to the parent block's font size (1em). Set to customize the monospaced font size independently |
+| `color` | `string` | Text color |
+| `backgroundColor` | `string` | Background color |
+| `borderColor` | `string` | Border color |
+
+### Link-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `fontFamily` | `string` | Font family for links. Overrides the parent block's font family when set |
+| `color` | `string` | Link text color |
+| `underline` | `boolean` | Show underline |
+
+### Strong-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `fontFamily` | `string` | Font family for bold text. When not set, adds the bold trait to the parent block's font |
+| `fontWeight` | `'bold' \| 'normal'` | Controls whether bold is applied on top of the custom `fontFamily`. Defaults to `'bold'`. Set to `'normal'` to use the font face as-is. Only relevant when `fontFamily` is set |
+| `color` | `string` | Bold text color |
+
+### Emphasis-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `fontFamily` | `string` | Font family for italic text. When not set, adds the italic trait to the parent block's font |
+| `fontStyle` | `'italic' \| 'normal'` | Controls whether italic is applied on top of the custom `fontFamily`. Defaults to `'italic'`. Set to `'normal'` to use the font face as-is. Only relevant when `fontFamily` is set |
+| `color` | `string` | Italic text color |
+
+### Strikethrough-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `color` | `string` | Strikethrough line color (iOS only) |
+
+### Underline-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `color` | `string` | Underline color (iOS only) |
+
+### Highlight-specific
+
+Styles for highlighted text (`==text==`). Requires `md4cFlags={{ highlight: true }}` to enable the parser. Font size, family, and weight inherit from the surrounding block; only `color` and `backgroundColor` are overridden.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `color` | `string` | Text color inside the highlight. Inherits the block color when omitted |
+| `backgroundColor` | `string` | Background color of the highlight span. Default: `#FEF08A` |
+
+```tsx
+<EnrichedMarkdownText
+  markdown="This is ==important== text with ==**bold**== inside."
+  md4cFlags={{ highlight: true }}
+  markdownStyle={{
+    highlight: {
+      backgroundColor: '#FEF08A',
+    },
+  }}
+/>
+```
+
+> [!NOTE]
+> When `highlight.color` is omitted, it inherits the surrounding block color. When set explicitly, it applies to the entire `==...==` span, including nested bold or italic text. Nested formatting (bold, italic, links) is preserved.
+
+### Image-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `height` | `number` | Image height |
+| `borderRadius` | `number` | Corner radius |
+| `marginTop` | `number` | Top margin |
+| `marginBottom` | `number` | Bottom margin |
+
+### Inline Image-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `size` | `number` | Image size (square) |
+
+### Thematic Break (Horizontal Rule)-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `color` | `string` | Line color |
+| `height` | `number` | Line thickness |
+| `marginTop` | `number` | Top margin |
+| `marginBottom` | `number` | Bottom margin |
+
+### Table-specific
+
+Table styles only apply when `flavor="github"` is set. Tables inherit the base block styles (`fontSize`, `fontFamily`, `fontWeight`, `color`, `marginTop`, `marginBottom`, `lineHeight`) and add the following:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `headerFontFamily` | `string` | Font family for header cells (falls back to `fontFamily` if not set) |
+| `headerBackgroundColor` | `string` | Background color for the header row |
+| `headerTextColor` | `string` | Text color for the header row |
+| `rowEvenBackgroundColor` | `string` | Background color for even data rows |
+| `rowOddBackgroundColor` | `string` | Background color for odd data rows |
+| `borderColor` | `string` | Color of the table grid lines |
+| `borderWidth` | `number` | Width of the table grid lines |
+| `borderRadius` | `number` | Corner radius of the table container |
+| `cellPaddingHorizontal` | `number` | Horizontal padding inside cells |
+| `cellPaddingVertical` | `number` | Vertical padding inside cells |
+
+### Task List-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `checkedColor` | `string` | Background color of checked checkbox |
+| `borderColor` | `string` | Border color of unchecked checkbox |
+| `checkmarkColor` | `string` | Color of the checkmark inside checked checkbox |
+| `checkboxSize` | `number` | Size of the checkbox (defaults to 90% of list font size) |
+| `checkboxBorderRadius` | `number` | Corner radius of the checkbox |
+| `checkedTextColor` | `string` | Text color for checked items |
+| `checkedStrikethrough` | `boolean` | Whether to apply strikethrough to checked items |
+
+### Math Block-specific
+
+Styles for block-level LaTeX math (`$$...$$`). Block math is rendered as a standalone display element and only applies when `flavor="github"` is set.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `fontSize` | `number` | Font size used when rendering the equation |
+| `color` | `string` | Equation text color |
+| `backgroundColor` | `string` | Background color of the math block container |
+| `padding` | `number` | Inner padding around the equation |
+| `marginTop` | `number` | Top margin |
+| `marginBottom` | `number` | Bottom margin |
+| `textAlign` | `'left' \| 'center' \| 'right'` | Horizontal alignment of the equation (default: `'center'`) |
+
+### Inline Math-specific
+
+Styles for inline LaTeX math (`$...$`). Inline math is rendered within the surrounding text flow.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `color` | `string` | Equation text color |
+
+### Spoiler-specific
+
+Styles for spoiler text (`||hidden text||`). Spoiler text is concealed behind an overlay (controlled by the `spoilerOverlay` prop) until the user taps to reveal it.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `color` | `string` | Color used by all presets for the spoiler overlay |
+| `particles.density` | `number` | Density of the particle field (higher = more particles). Default: `8` |
+| `particles.speed` | `number` | Speed of particle movement. Default: `20` |
+| `solid.borderRadius` | `number` | Corner radius of the solid spoiler overlay rectangles. Default: `4` |
+
+### Superscript-specific
+
+Styles for superscript text (`^text^`). Requires `md4cFlags={{ superscript: true }}` to enable the parser.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `fontScale` | `number` | Font size as a fraction of the surrounding text size. Default: `0.75` (iOS/macOS/web), `0.65` (Android) |
+| `baselineOffsetScale` | `number` | Vertical shift upward as a fraction of the surrounding text size. Default: `0.35` |
+
+```tsx
+<EnrichedMarkdownText
+  markdown="E = mc^2^"
+  md4cFlags={{ superscript: true }}
+  markdownStyle={{
+    superscript: {
+      fontScale: 0.75,
+      baselineOffsetScale: 0.35,
+    },
+  }}
+/>
+```
+
+### Subscript-specific
+
+Styles for subscript text (`~text~`). Requires `md4cFlags={{ subscript: true }}` to enable the parser. Note: enabling subscript changes the behaviour of single tildes — `~text~` becomes subscript instead of strikethrough.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `fontScale` | `number` | Font size as a fraction of the surrounding text size. Default: `0.75` (iOS/macOS/web), `0.65` (Android) |
+| `baselineOffsetScale` | `number` | Vertical shift downward as a fraction of the surrounding text size. Default: `0.20` |
+
+```tsx
+<EnrichedMarkdownText
+  markdown="H~2~O"
+  md4cFlags={{ subscript: true }}
+  markdownStyle={{
+    subscript: {
+      fontScale: 0.75,
+      baselineOffsetScale: 0.20,
+    },
+  }}
+/>
+```
+
+> [!NOTE]
+> Android uses a slightly smaller default `fontScale` (`0.65`) compared to iOS (`0.75`) because Roboto has a larger x-height than San Francisco, making identically-scaled text appear visually larger on Android.

package/docs/TEXT.md

@@ -0,0 +1,110 @@
+# EnrichedMarkdownText
+
+`EnrichedMarkdownText` renders Markdown content as fully native text — no WebView required.
+
+## Usage
+
+### CommonMark (default)
+
+```tsx
+import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
+import { Linking } from 'react-native';
+
+const markdown = `
+# Welcome to Markdown!
+
+This is a paragraph with **bold**, *italic*, and [links](https://reactnative.dev).
+
+- List item one
+- List item two
+  - Nested item
+`;
+
+export default function App() {
+  return (
+    <EnrichedMarkdownText
+      markdown={markdown}
+      onLinkPress={({ url }) => Linking.openURL(url)}
+    />
+  );
+}
+```
+
+### GFM (tables)
+
+Set `flavor="github"` to enable GitHub Flavored Markdown features like tables and task lists:
+
+```tsx
+<EnrichedMarkdownText
+  flavor="github"
+  markdown={markdown}
+  onLinkPress={({ url }) => Linking.openURL(url)}
+  markdownStyle={{
+    table: {
+      fontSize: 14,
+      borderColor: '#E5E7EB',
+      borderRadius: 8,
+      headerBackgroundColor: '#F3F4F6',
+      headerFontFamily: 'System-Bold',
+      cellPaddingHorizontal: 12,
+      cellPaddingVertical: 8,
+    },
+  }}
+/>
+```
+
+Tables support column alignment, rich text in cells (bold, italic, code, links), horizontal scrolling, header styling, alternating row colors, and a long-press context menu with "Copy" and "Copy as Markdown".
+
+### Task Lists
+
+Task lists with interactive checkboxes are available when `flavor="github"` is set. Handle checkbox taps with `onTaskListItemPress`:
+
+```tsx
+<EnrichedMarkdownText
+  flavor="github"
+  markdown={`
+- [x] Completed task
+- [ ] Incomplete task
+- [x] Another completed task
+  `}
+  onTaskListItemPress={({ index, checked, text }) => {
+    console.log(
+      `Task ${index}: ${checked ? 'checked' : 'unchecked'} - ${text}`
+    );
+    // Update your state or data model here
+  }}
+/>
+```
+
+### Link Handling
+
+Links in Markdown are interactive and can be handled with the `onLinkPress` and `onLinkLongPress` callbacks:
+
+- **`onLinkPress`**: Fired when a link is tapped. Use this to open URLs or handle link navigation.
+- **`onLinkLongPress`**: Fired when a link is long-pressed. On iOS, providing this callback automatically disables the system link preview so your handler can fire instead.
+
+See the [API Reference](API_REFERENCE.md#onlinkpress) for detailed examples and usage.
+
+## Supported Markdown Elements
+
+`react-native-enriched-markdown` supports a comprehensive set of Markdown elements. See [Element Structure](ELEMENTS_STRUCTURE.md) for a detailed overview of all supported elements, their syntax, block vs inline categorization, nesting behavior, and how elements inherit typography from their parent blocks.
+
+## Copy Options
+
+When text is selected, `react-native-enriched-markdown` provides enhanced copy functionality through the context menu. See [Copy Options](COPY_OPTIONS.md) for details on smart copy, copy as Markdown, and copy image URL features.
+
+## Accessibility
+
+`react-native-enriched-markdown` provides comprehensive accessibility support for screen readers on both platforms. See [Accessibility](ACCESSIBILITY.md) for detailed information about VoiceOver and TalkBack support, custom rotors, semantic traits, and best practices.
+
+## RTL Support
+
+`react-native-enriched-markdown` fully supports right-to-left (RTL) languages such as Arabic, Hebrew, and Persian. See [RTL Support](RTL.md) for platform-specific setup instructions and how each element behaves in RTL contexts.
+
+## Customizing Styles
+
+`react-native-enriched-markdown` allows customizing styles of all Markdown elements using the `markdownStyle` prop. See the [Style Properties Reference](STYLES.md) for a detailed overview of all available style properties.
+
+### Dark Mode
+
+The library uses light-mode defaults. To support dark mode, pass a dark `markdownStyle` object — your values always take priority over the defaults. See the [Dark Mode](STYLES.md#dark-mode) section in the Style Properties Reference for a ready-to-use example with `useColorScheme()`.

package/docs/WEB.md

@@ -0,0 +1,49 @@
+# Web Support
+
+`EnrichedMarkdownText` runs on web using [`react-native-web`](https://necolas.github.io/react-native-web/) for the React Native primitives and [md4c](https://github.com/mity/md4c) compiled to WebAssembly for parsing. The WASM binary is bundled in the npm package — no build step is required by consumers.
+
+The web renderer uses semantic HTML elements (`<p>`, `<h1>`–`<h6>`, `<blockquote>`, `<ul>`, `<ol>`, `<table>`, etc.) for improved accessibility.
+
+## Supported features
+
+All core `EnrichedMarkdownText` features are supported on web, including:
+
+- Full GFM: tables (with horizontal scroll), task lists (with checkbox interaction), strikethrough, links, images (block and inline), code blocks, LaTeX math (block and inline)
+- All `markdownStyle` customisation options
+- `onLinkPress`, `onLinkLongPress` (mapped to `contextmenu` event), `onTaskListItemPress` callbacks
+- `allowTrailingMargin`, `containerStyle`, `selectable`, `selectionColor`, `md4cFlags` (`underline`, `superscript`, `subscript`, `latexMath`)
+- RTL support via the `dir` prop (CSS logical properties automatically flip blockquote borders, list indentation, etc.)
+
+### Accessibility
+
+- Semantic HTML elements for all markdown structures
+- Images: `alt` text falls back to `title`, then URL filename, then `"Image"`
+- Code blocks: `aria-label` with language when available (e.g. `"Code block: python"`)
+- Math (KaTeX fallback): `role="math"` and `aria-label` with the expression content
+- Task list checkboxes: `aria-label` with the task text (e.g. `"Task: Buy groceries"`)
+
+### Web-only props
+
+| Prop | Description |
+|---|---|
+| `dir` | Sets the text direction on the root container (`'ltr'`, `'rtl'`, or `'auto'`). CSS logical properties in the renderers automatically flip layout for RTL. |
+
+The web implementation also exports `WebMarkdownTextProps` which extends `EnrichedMarkdownTextProps` with the web-only props above.
+
+## Ignored props (native-only)
+
+| Prop | Reason |
+|---|---|
+| `flavor` | The web renderer always uses full GFM capabilities. On native, `flavor` controls whether a single `TextView` (CommonMark) or container-based renderer (GitHub) is used; the DOM has no such constraint. |
+| `enableLinkPreview` | iOS-only feature (native link preview on long press). |
+| `allowFontScaling` / `maxFontSizeMultiplier` | React Native text scaling props. Browsers handle font scaling natively via OS accessibility settings. |
+| `streamingAnimation` | Native-only tail fade-in animation. Not yet implemented on web. |
+| `streamingConfig` | Native-only streaming table configuration. Not yet implemented on web. |
+| `contextMenuItems` | Not supported — browsers don't allow extending the native context menu. |
+| `selectionMenuConfig` | Not supported — native-only built-in selection menu actions. |
+| `selectionHandleColor` | Android-only — desktop browsers don't render selection handles. |
+
+## Not supported on web
+
+- `EnrichedMarkdownTextInput` — native-only
+- Configurable link `target` — all links open in a new tab (`target="_blank"`). Use `onLinkPress` for custom navigation.