### Start the Example App Packager

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Start the Metro bundler for the example application. This is necessary to run the example app on a device or simulator.

```sh
yarn example start
```

--------------------------------

### Project Setup and Dependency Installation

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Run this script to install all necessary project dependencies.

```sh
yarn
```

--------------------------------

### Install Dependencies and Build Library

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Install project dependencies using Yarn and build the library. This is a prerequisite for running any of the example applications.

```sh
# Install dependencies
yarn

# Build the library (required before running any app)
yarn prepare
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Build and run the example application on an iOS simulator or device.

```sh
yarn example ios
```

--------------------------------

### Run Example App on Android

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Build and run the example application on an Android device or emulator.

```sh
yarn example android
```

--------------------------------

### Install KaTeX for Web

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/LATEX_MATH.md

Install the optional KaTeX peer dependency for web LaTeX rendering. It is loaded lazily.

```sh
npm install katex
# or
yarn add katex
```

--------------------------------

### Install KaTeX for Web LaTeX Support

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/README.md

For web support with LaTeX math rendering, install the optional KaTeX peer dependency.

```sh
npm install katex
```

--------------------------------

### Basic EnrichedMarkdownTextInput Usage

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/INPUT.md

This example demonstrates a basic setup for EnrichedMarkdownTextInput, including state management for bold styling and a button to toggle it. It utilizes a ref to imperatively call methods on the input component.

```tsx
import { useRef, useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import {
  EnrichedMarkdownTextInput,
  type EnrichedMarkdownTextInputInstance,
  type StyleState,
} from 'react-native-enriched-markdown';

export default function App() {
  const ref = useRef<EnrichedMarkdownTextInputInstance>(null);
  const [state, setState] = useState<StyleState | null>(null);

  return (
    <View style={styles.container}>
      <EnrichedMarkdownTextInput
        ref={ref}
        placeholder="Type here..."
        onChangeState={setState}
        style={styles.input}
      />
      <View style={styles.toolbar}>
        <Button
          title={state?.bold.isActive ? 'Unbold' : 'Bold'}
          color={state?.bold.isActive ? 'green' : 'gray'}
          onPress={() => ref.current?.toggleBold()}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  input: { width: '100%', fontSize: 20, padding: 10, maxHeight: 200, backgroundColor: 'lightgray' },
  toolbar: { flexDirection: 'row', gap: 8, marginTop: 8 },
});
```

--------------------------------

### Install iOS/macOS Native Dependencies

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/README.md

After installing the library, rebuild your native app. This involves navigating to the respective platform directory and running bundle install followed by pod install.

```sh
# iOS
cd ios && bundle install && bundle exec pod install

# macOS (react-native-macos)
cd macos && bundle install && bundle exec pod install
```

--------------------------------

### Install Nightly Build

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/README.md

To use the latest features before they are released, install the nightly build. Note that nightly versions may introduce breaking changes.

```sh
yarn add react-native-enriched-markdown@nightly
```

--------------------------------

### Start Metro Bundler

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/apps/example/README.md

Run this command from the root of your React Native project to start the Metro dev server.

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

--------------------------------

### Install CocoaPods Dependencies

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/apps/example/README.md

Before running the iOS app, install CocoaPods dependencies. Run 'bundle install' once to install the bundler, and 'bundle exec pod install' after updating native dependencies.

```sh
bundle install
```

```sh
bundle exec pod install
```

--------------------------------

### Install react-native-enriched-markdown

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/README.md

Use this command to add the library to your project. For Expo projects, `npx expo install` is recommended.

```sh
yarn add react-native-enriched-markdown
```

```sh
npx expo install react-native-enriched-markdown
```

--------------------------------

### Verify New Architecture

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Check the Metro logs for confirmation that the example app is running with the new architecture, indicated by 'fabric':true and 'concurrentRoot':true.

```sh
Running "EnrichedMarkdownExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
```

--------------------------------

### Run Expo Prebuild

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/README.md

For Expo applications, after installing the library, run `npx expo prebuild` to incorporate the native code changes. The library does not function within Expo Go.

```sh
npx expo prebuild
```

--------------------------------

### Build and Run iOS App

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/apps/example/README.md

After installing CocoaPods dependencies, use this command to build and run your iOS application with Metro running.

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

--------------------------------

### Nested Lists Example in Markdown

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/ELEMENTS_STRUCTURE.md

Demonstrates how to create nested unordered and ordered lists in Markdown. Supports unlimited depth for both list types.

```markdown
- First level
  - Second level
    - Third level
      - Fourth level (unlimited depth!)

1. First item
   1. Nested numbered
      1. Deep nested
   2. Another nested
2. Second item
```

--------------------------------

### Run Specific E2E Test Configurations

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Examples of running specific E2E test configurations, such as smoke tests on iOS or advanced tests on Android.

```sh
yarn test:e2e:smoke:ios          # smoke tests on iOS only
yarn test:e2e:smoke:mobile       # smoke tests on both platforms
yarn test:e2e:advanced:android   # advanced tests on Android only
```

--------------------------------

### EnrichedMarkdownTextInput Component Usage

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/MENTIONS.md

Example of how to integrate EnrichedMarkdownTextInput with mention capabilities, including necessary props and event handlers.

```APIDOC
## EnrichedMarkdownTextInput

### Description
A component that supports mention flows, allowing users to trigger inline entities like @user or #channel, rendered as styled links.

### Props
- **mentionIndicators** (string[]) - Optional - Default: `[]` - Trigger strings that start a mention flow.
- **markdownStyle** (object) - Optional - Styles for markdown elements, including `link` and `linkVariants` for specific URL patterns.
- **onStartMention** (function) - Callback fired when a mention flow starts. Payload: `{ indicator: string }`.
- **onChangeMention** (function) - Callback fired on each keystroke during a mention flow. Payload: `{ indicator: string, text: string }`.
- **onEndMention** (function) - Callback fired when a mention flow ends. Payload: `{ indicator: string }`.
- **onCaretRectChange** (function) - Callback fired when the caret's position changes. Payload: `{ x: number, y: number, width: number, height: number }` (relative to input).

### Example Usage
```tsx
<EnrichedMarkdownTextInput
  ref={ref}
  mentionIndicators={['@', '#']}
  markdownStyle={{
    link: { color: '#2563EB', underline: true },
    linkVariants: {
      '^user:': { color: '#1264A3', backgroundColor: '#E8F5FB', underline: false },
      '^channel:': { color: '#065F46', backgroundColor: '#D1FAE5', underline: false },
    },
  }}
  onStartMention={({ indicator }) => setShowSuggestions(true)}
  onChangeMention={({ indicator, text }) => setQuery(text)}
  onEndMention={() => setShowSuggestions(false)}
  onCaretRectChange={setCaretRect} // for positioning the popup
/>
```
```

--------------------------------

### Nested Blockquotes Example in Markdown

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/ELEMENTS_STRUCTURE.md

Illustrates the syntax for creating nested blockquotes in Markdown. Supports unlimited nesting depth.

```markdown
> Level 1 quote
> > Level 2 nested
> > > Level 3 nested (unlimited depth!)
```

--------------------------------

### Superscript Styling Example

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/STYLES.md

Apply custom styles to superscript text. Ensure `md4cFlags={{ superscript: true }}` is enabled to parse superscript syntax.

```tsx
<EnrichedMarkdownText
  markdown="E = mc^2^"
  md4cFlags={{ superscript: true }}
  markdownStyle={{
    superscript: {
      fontScale: 0.75,
      baselineOffsetScale: 0.35,
    },
  }}
/>
```

--------------------------------

### Superscript and Subscript Examples in Markdown

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/ELEMENTS_STRUCTURE.md

Shows Markdown syntax for superscript and subscript text, including mixed usage. Note that superscript and subscript cannot be nested within each other but can be nested within other inline elements.

```markdown
E = mc^2^

H~2~O   H~2~SO~4~

^14^C dating  (isotope notation)

H~3~O^+^  (mixed superscript and subscript)
```

--------------------------------

### setSelection(start: number, end: number)

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Sets the text selection range imperatively via its ref.

```APIDOC
## `setSelection(start: number, end: number)`

Sets the text selection range.

### Parameters
- **start** (number) - The starting character index of the selection.
- **end** (number) - The ending character index of the selection.

### Method
Imperative call on ref: `ref.current?.setSelection(start, end)`
```

--------------------------------

### Subscript Styling Example

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/STYLES.md

Apply custom styles to subscript text. Ensure `md4cFlags={{ subscript: true }}` is enabled to parse subscript syntax. Note that enabling subscript changes the behavior of single tildes from strikethrough to subscript.

```tsx
<EnrichedMarkdownText
  markdown="H~2~O"
  md4cFlags={{ subscript: true }}
  markdownStyle={{
    subscript: {
      fontScale: 0.75,
      baselineOffsetScale: 0.20,
    },
  }}
/>
```

--------------------------------

### Remove Native iOS LaTeX Math Dependency

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/LATEX_MATH.md

Exclude the `iosMath` library from the build by setting `ENRICHED_MARKDOWN_ENABLE_MATH` to '0' in your Podfile and running `pod install`.

```ruby
ENV['ENRICHED_MARKDOWN_ENABLE_MATH'] = '0'
```

--------------------------------

### Clone the Repository

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Clone the project repository and navigate into the project directory to begin development.

```sh
git clone https://github.com/software-mansion-labs/react-native-enriched-markdown.git
cd react-native-enriched-markdown
```

--------------------------------

### Build Library

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Build the library. This command is required before running any application or tests.

```sh
yarn prepare
```

--------------------------------

### Get Caret Rect Imperatively

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/INPUT.md

Use the imperative `getCaretRect()` method to get the current caret's pixel position. This method returns a Promise that resolves with the caret rect.

```typescript
const rect = await ref.current?.getCaretRect();
```

--------------------------------

### onStartMention Event

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Callback function that fires when a new mention flow is initiated.

```APIDOC
## `onStartMention`

Fires when a new mention flow starts. See [Mentions](MENTIONS.md#events).

| Type | Default Value | Platform |
| ---- | ------------- | -------- |
| `(event: { indicator: string }) => void` | - | Both |
```

--------------------------------

### Run Unit Tests

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Execute the project's unit tests to ensure code correctness.

```sh
yarn test
```

--------------------------------

### startMention(indicator: string)

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Programmatically triggers a mention flow by inserting the indicator character.

```APIDOC
## `startMention(indicator: string)`

Programmatically triggers a mention flow by inserting the indicator character at the current cursor position. The indicator must be listed in the `mentionIndicators` prop. Useful for toolbar buttons.

### Parameters
- **indicator** (string) - The mention indicator character (e.g., '@').

### Method
Imperative call on ref: `ref.current?.startMention(indicator)`
```

--------------------------------

### Enable GFM Tables and Styling

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/TEXT.md

Set `flavor="github"` to enable GitHub Flavored Markdown features like tables. Customize table styles using the `markdownStyle` prop, including borders, background colors, and fonts.

```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,
    },
  }}
/>
```

--------------------------------

### Handle Caret Rect Change Event

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Example of how to use the onCaretRectChange prop to log the caret's position. This event fires when the caret's pixel position changes.

```tsx
<EnrichedMarkdownTextInput
  scrollEnabled={false}
  onCaretRectChange={(rect) => {
    console.log('Caret at:', rect.x, rect.y);
  }}
/>
```

--------------------------------

### style Configuration

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Apply general styling to the input view, accepting standard ViewStyle and TextStyle properties.

```APIDOC
## `style`

Style for the input view. Accepts `ViewStyle` and `TextStyle` properties (e.g., `fontSize`, `color`, `padding`).

| Type                    | Default Value | Platform |
| ----------------------- | ------------- | -------- |
| `ViewStyle | TextStyle` | -             | Both     |
```

--------------------------------

### Publish New Versions

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Use this script to publish new versions of the library to npm. It automates version bumping, tagging, and release creation.

```sh
yarn release
```

--------------------------------

### autoFocus

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Whether the input should be focused on mount.

```APIDOC
## `autoFocus`

### Description
Whether the input should be focused on mount.

### Type
`boolean`

### Default Value
`false`

### Platform
Both
```

--------------------------------

### Run E2E Tests with Maestro

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Execute end-to-end tests using Maestro. Specify platform and configuration as needed.

```sh
yarn test:e2e:ios
yarn test:e2e:android
yarn test:e2e:mobile   # both platforms sequentially
```

--------------------------------

### focus()

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Focuses the input component imperatively via its ref.

```APIDOC
## `focus()`

Focuses the input.

### Method
Imperative call on ref: `ref.current?.focus()`
```

--------------------------------

### Build and Run Android App

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/apps/example/README.md

Execute this command in a new terminal to build and run your Android application with Metro running.

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

--------------------------------

### Configure md4c Flags for Underline and Italic Text

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Demonstrates how to enable underline formatting for `_text_` while preserving italic for `*text*` using `md4cFlags`.

```tsx
 <EnrichedMarkdownText
  markdown="This is _italic_ text"
/>

// With underline enabled: _text_ is underlined, *text* is italic
<EnrichedMarkdownText
  markdown="This is _underlined_ and *italic* text"
  md4cFlags={{ underline: true }}
/>
```

--------------------------------

### Implement Interactive Task Lists

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/TEXT.md

Use `flavor="github"` to render task lists with interactive checkboxes. Handle checkbox taps using the `onTaskListItemPress` callback, which provides the task's index, checked state, and text.

```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
  }}
/>
```

--------------------------------

### Run TypeScript and ESLint Checks

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Verify that your code adheres to TypeScript type checking and ESLint linting rules.

```sh
yarn typecheck
yarn lint
```

--------------------------------

### Lint Code

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Run ESLint to check code style and potential issues.

```sh
yarn lint
```

--------------------------------

### Run All E2E Tests on iOS

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Execute all end-to-end tests on an iOS simulator.

```sh
yarn test:e2e:ios
```

--------------------------------

### Run All E2E Tests on Mobile

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Execute all end-to-end tests sequentially on both iOS and Android platforms.

```sh
yarn test:e2e:mobile
```

--------------------------------

### Run All E2E Tests on Android

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Execute all end-to-end tests on an Android emulator.

```sh
yarn test:e2e:android
```

--------------------------------

### streamingConfig

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Configuration for streaming behavior, currently controlling how incomplete tables are handled with `flavor="github"`.

```APIDOC
## streamingConfig

### Description
Configuration for streaming behavior. Currently controls how incomplete tables are handled during streaming with `flavor="github"`.

### Type
`{ tableMode: string }`

### Default Value
`{ tableMode: 'progressive' }`

### tableMode Options
- **`'progressive'`** (default): The table is rendered row-by-row as content arrives. Requires at least a header row and separator line before anything is shown. Incomplete trailing rows (missing closing `|` or fewer columns than the header) are trimmed. New rows fade in with animation when `streamingAnimation` is also enabled.
- **`'hidden'`**: The entire table is hidden until it is complete (followed by a blank line). This prevents visual jank from partially formed tables.

### Example
```tsx
<EnrichedMarkdownText
  markdown={streamingMarkdown}
  flavor="github"
  streamingAnimation
  streamingConfig={{ tableMode: 'hidden' }}
/>
```
```

--------------------------------

### Render Block and Inline LaTeX Math

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/LATEX_MATH.md

Use EnrichedMarkdownText with flavor="github" to render block ($$...$$) and inline ($...$) LaTeX math. Styles can be applied to math elements.

```tsx
import { EnrichedMarkdownText } from "@software-mansion/react-native-enriched-markdown";

<EnrichedMarkdownText
  flavor="github"
  markdown={`
The quadratic formula:

$$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$

Einstein's mass-energy equivalence $E = mc^2$ is one of the most famous equations.
  `}
  markdownStyle={{
    math: {
      fontSize: 20,
      color: '#1F2937',
      backgroundColor: '#F3F4F6',
      padding: 12,
      textAlign: 'center',
    },
    inlineMath: {
      color: '#1F2937',
    },
  }}
/>
```

--------------------------------

### Type Checking

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Execute TypeScript for static type checking across the project files.

```sh
yarn typecheck
```

--------------------------------

### Configure Built-in Selection Menu Actions

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Control the visibility of built-in actions like 'Copy as Markdown' and 'Copy Image URL' using `selectionMenuConfig`.

```typescript
interface SelectionMenuConfig {
  /** Shows the built-in "Copy as Markdown" action for text selections. */
  copyAsMarkdown?: boolean;
  /** Shows the built-in "Copy Image URL" action when selected content contains images. */
  copyImageUrl?: boolean;
}
```

--------------------------------

### defaultValue

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Initial Markdown content for the input. The Markdown is parsed and formatting is applied on mount.

```APIDOC
## `defaultValue`

### Description
Initial Markdown content for the input. The Markdown is parsed and formatting is applied on mount.

### Type
`string`

### Default Value
-

### Platform
Both
```

--------------------------------

### multiline

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Whether the input supports multiple lines.

```APIDOC
## `multiline`

### Description
Whether the input supports multiple lines.

### Type
`boolean`

### Default Value
`true`

### Platform
Both
```

--------------------------------

### Run Smoke E2E Tests on iOS

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Execute smoke end-to-end tests on an iOS simulator.

```sh
yarn test:e2e:smoke:ios
```

--------------------------------

### onChangeMention Event

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Callback function that fires on each keystroke while a mention flow is active.

```APIDOC
## `onChangeMention`

Fires on every keystroke while a mention flow is active.

| Type | Default Value | Platform |
| ---- | ------------- | -------- |
| `(event: { indicator: string; text: string }) => void` | - | Both |
```

--------------------------------

### Run Advanced E2E Tests on Mobile

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Execute advanced end-to-end tests sequentially on both iOS and Android platforms.

```sh
yarn test:e2e:advanced:mobile
```

--------------------------------

### insertMention(displayText: string, url: string)

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Replaces the active mention token with a formatted link.

```APIDOC
## `insertMention(displayText: string, url: string)`

Replaces the active mention token with a formatted link. Only works when a mention flow is active. The mention is serialized as `[displayText](url)` in Markdown output.

### Parameters
- **displayText** (string) - The text to display for the mention.
- **url** (string) - The URL associated with the mention.

### Method
Imperative call on ref: `ref.current?.insertMention(displayText, url)`
```

--------------------------------

### Run Advanced E2E Tests on iOS

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Execute advanced end-to-end tests on an iOS simulator.

```sh
yarn test:e2e:advanced:ios
```

--------------------------------

### Memoize Markdown Styles with useMemo

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/STYLES.md

To prevent unnecessary re-renders, memoize the `markdownStyle` prop using `useMemo`. This ensures that the style object reference remains stable across renders if its content hasn't changed.

```tsx
import type { MarkdownStyle } from 'react-native-enriched-markdown';
import { useMemo } from 'react';

const markdownStyle: MarkdownStyle = useMemo(() => ({
  paragraph: { fontSize: 16 },
  h1: { fontSize: 32 },
}), []);

```

--------------------------------

### iOS Info.plist Configuration for Image Saving

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/README.md

To enable users to save images from Markdown content to their photo library on iOS, add the `NSPhotoLibraryAddUsageDescription` key to your `Info.plist` file.

```xml
<key>NSPhotoLibraryAddUsageDescription</key>
<string>This app needs access to your photo library to save images.</string>
```

--------------------------------

### blur()

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Blurs the input component imperatively via its ref.

```APIDOC
## `blur()`

Blurs the input.

### Method
Imperative call on ref: `ref.current?.blur()`
```

--------------------------------

### Run Smoke E2E Tests on Mobile

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Execute smoke end-to-end tests sequentially on both iOS and Android platforms.

```sh
yarn test:e2e:smoke:mobile
```

--------------------------------

### setValue(markdown: string)

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Sets the input content from a Markdown string, parsing and applying formatting.

```APIDOC
## `setValue(markdown: string)`

Sets the input content from a Markdown string. Parses the Markdown and applies formatting.

### Parameters
- **markdown** (string) - The Markdown string to set as the input content.

### Method
Imperative call on ref: `ref.current?.setValue(markdownString)`
```

--------------------------------

### Run Smoke E2E Tests on Android

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Execute smoke end-to-end tests on an Android emulator.

```sh
yarn test:e2e:smoke:android
```

--------------------------------

### markdownStyle Configuration

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Configure the visual appearance of different text styles within the markdown input, such as bold, italic, links, and spoilers.

```APIDOC
## `markdownStyle`

Style configuration for formatted text in the input.

| Type                 | Default Value | Platform |
| -------------------- | ------------- | -------- |
| `MarkdownTextInputStyle` | `{}`          | Both     |

**Properties:**

- `strong.color` — text color for bold text (defaults to the input's text color).
- `em.color` — text color for italic text (defaults to the input's text color).
- `link.color` — text color for links (defaults to `#2563EB`).
- `link.underline` — whether links are underlined (defaults to `true`).
- `link.backgroundColor` — background color for links (defaults to `transparent`).
- `linkVariants` — per-URL-pattern style overrides. Each key is a regex tested against the link URL. See [Mentions — Link Variants](MENTIONS.md#link-variants-mention-styling).
- `spoiler.color` — text color for spoiler text.
- `spoiler.backgroundColor` — background color for spoiler text.
```

--------------------------------

### Run Advanced E2E Tests on Android

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Execute advanced end-to-end tests on an Android emulator.

```sh
yarn test:e2e:advanced:android
```

--------------------------------

### toggleUnderline()

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Toggles underline formatting on the current selection or queued for next input.

```APIDOC
## `toggleUnderline()`

Toggles underline on the current selection or cursor. When no text is selected, the style is queued and applied to the next characters typed.

### Method
Imperative call on ref: `ref.current?.toggleUnderline()`
```

--------------------------------

### toggleBold()

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Toggles bold formatting on the current selection or queued for next input.

```APIDOC
## `toggleBold()`

Toggles bold on the current selection. When no text is selected, the style is queued and applied to the next characters typed.

### Method
Imperative call on ref: `ref.current?.toggleBold()`
```

--------------------------------

### placeholder

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Placeholder text displayed when the input is empty.

```APIDOC
## `placeholder`

### Description
Placeholder text displayed when the input is empty.

### Type
`string`

### Default Value
-

### Platform
Both
```

--------------------------------

### Styling Mentions with Link Variants

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/MENTIONS.md

Defines how to apply custom styles to mention links based on URL patterns using the `linkVariants` prop.

```APIDOC
## Link Variants (Styling)

### Description
Mentions are rendered as links. You can apply specific styles to these links based on their URL patterns using the `linkVariants` object within the `markdownStyle` prop. Each key in `linkVariants` is a regular expression tested against the link's URL. The first matching pattern determines the style. Unspecified style properties will inherit from the base `link` style.

### `markdownStyle.linkVariants`

- **Type**: `Record<string, MarkdownStyle>`
- **Description**: An object where keys are regex strings and values are style objects.

### Example
```tsx
markdownStyle: {
  link: { color: '#2563EB', underline: true }, // Base link style
  linkVariants: {
    '^user:':    { color: '#1264A3', backgroundColor: '#E8F5FB', underline: false }, // Style for 'user://...' links
    '^channel:': { color: '#065F46', backgroundColor: '#D1FAE5', underline: false }, // Style for 'channel://...' links
  }
}
```

**Note**: Patterns are automatically sorted longest-first to ensure the most specific regex wins.
```

--------------------------------

### Inserting Mentions via Ref Methods

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/MENTIONS.md

How to programmatically insert mentions into the EnrichedMarkdownTextInput using its ref methods.

```APIDOC
## Ref Methods

### `startMention(indicator: string)`

#### Description
Inserts the specified indicator character at the current cursor position and initiates the mention flow. The indicator must be one of the `mentionIndicators` provided to the component.

### `insertMention(displayText: string, url: string)`

#### Description
Replaces the currently active mention token (during an active mention flow) with a styled link. The `displayText` is what the user sees, and the `url` is used for styling and identification (e.g., `user://123`).

#### Example
```tsx
// Assuming 'item' is a selected suggestion with 'name' and 'url' properties
ref.current?.insertMention(`@${item.name}`, item.url);
// Markdown output example: [@Alice](user://u_1)
```
```

--------------------------------

### toggleStrikethrough()

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Toggles strikethrough formatting on the current selection or queued for next input.

```APIDOC
## `toggleStrikethrough()`

Toggles strikethrough on the current selection or cursor. When no text is selected, the style is queued and applied to the next characters typed.

### Method
Imperative call on ref: `ref.current?.toggleStrikethrough()`
```

--------------------------------

### Table Streaming Configuration

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/MARKDOWN_STREAMING.md

Configure table streaming behavior for GFM markdown when content arrives token-by-token. The streamingConfig prop controls how tables are displayed.

```tsx
<EnrichedMarkdownText
  markdown={streamingMarkdown}
  flavor="github"
  streamingAnimation
  streamingConfig={{ tableMode: 'hidden' }}
/>
```

--------------------------------

### Handle Link Press in EnrichedMarkdownText

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Use the `onLinkPress` prop to define a callback function that executes when a link within the markdown is pressed. The URL of the pressed link is available in the event object.

```tsx
<EnrichedMarkdownText
  markdown="Check out [React Native](https://reactnative.dev)!"
  onLinkPress={({ url }) => {
    Alert.alert('Link pressed', url);
    Linking.openURL(url);
  }}
/>
```

--------------------------------

### getMarkdown(): Promise<string>

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Returns a Promise that resolves with the current Markdown content of the input.

```APIDOC
## `getMarkdown(): Promise<string>`

Returns a Promise that resolves with the current Markdown content.

### Description
The async nature is due to the native bridge — the request is sent to the native side and the result is returned via an event.

### Method
Imperative call on ref: `ref.current?.getMarkdown()`
```

--------------------------------

### Update Android Screenshot Baselines

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Refresh the baseline screenshots for Android end-to-end tests.

```sh
yarn test:e2e:android:update-screenshots
```

--------------------------------

### selectionMenuConfig

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Controls built-in actions added to the native text selection menu. Custom app-provided actions are controlled separately with `contextMenuItems`.

```APIDOC
## `selectionMenuConfig`

### Description
Controls built-in actions added to the native text selection menu. Custom app-provided actions are controlled separately with `contextMenuItems`.

### Type
`SelectionMenuConfig`

### Default Value
`{ copyAsMarkdown: true, copyImageUrl: true }`

### Platform
iOS, Android, macOS

**`SelectionMenuConfig` shape:**

```ts
interface SelectionMenuConfig {
  /** Shows the built-in "Copy as Markdown" action for text selections. */
  copyAsMarkdown?: boolean;
  /** Shows the built-in "Copy Image URL" action when selected content contains images. */
  copyImageUrl?: boolean;
}
```

### Example

```tsx
<EnrichedMarkdownText
  markdown={content}
  selectionMenuConfig={{
    copyAsMarkdown: false,
    copyImageUrl: false,
  }}
/>
```
```

--------------------------------

### Fix Formatting Errors with ESLint

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Automatically fix code formatting issues detected by ESLint.

```sh
yarn lint --fix
```

--------------------------------

### autoCapitalize

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Auto-capitalization behavior.

```APIDOC
## `autoCapitalize`

### Description
Auto-capitalization behavior.

### Type
`string`

### Default Value
`'sentences'`

### Platform
Both
```

--------------------------------

### Listen for Link Detections

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/INPUT.md

Use the `onLinkDetected` callback to receive notifications when a new link is identified. This callback fires only for newly detected links.

```tsx
<EnrichedMarkdownTextInput
  onLinkDetected={({ text, url, start, end }) => {
    console.log(`Detected link: ${text} -> ${url} at [${start}, ${end}]`);
  }}
/>
```

--------------------------------

### Customize Text Styles

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/INPUT.md

The `markdownStyle` prop allows customization of how different text formats appear. You can adjust colors and underlines for elements like bold text, italics, and links.

```tsx
<EnrichedMarkdownTextInput
  markdownStyle={{
    strong: { color: '#1D4ED8' },
    em: { color: '#7C3AED' },
    link: { color: '#2563EB', underline: true },
  }}
/>
```

--------------------------------

### insertLink(text: string, url: string)

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Inserts a link with the given text and URL at the current cursor position.

```APIDOC
## `insertLink(text: string, url: string)`

Inserts a link with the given text and URL at the current cursor position. Useful when there is no text selection.

### Parameters
- **text** (string) - The display text for the link.
- **url** (string) - The URL for the link.

### Method
Imperative call on ref: `ref.current?.insertLink(text, url)`
```

--------------------------------

### Update E2E Screenshot Baselines

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/CONTRIBUTING.md

Refresh the stored screenshot baselines for E2E tests if visual output has changed.

```sh
yarn test:e2e:ios:update-screenshots
yarn test:e2e:android:update-screenshots
```

--------------------------------

### Control Built-in Menu Items with selectionMenuConfig

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/COPY_OPTIONS.md

Use `selectionMenuConfig` to disable specific built-in copy actions like 'Copy as Markdown' and 'Copy Image URL' while retaining the native context menu and any custom items.

```tsx
<EnrichedMarkdownText
  markdown={content}
  selectionMenuConfig={{
    copyAsMarkdown: false,
    copyImageUrl: false,
  }}
/>
```

--------------------------------

### onFocus Event

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Callback function that fires when the input component gains focus.

```APIDOC
## `onFocus`

Fires when the input gains focus.

| Type           | Default Value | Platform |
| -------------- | ------------- | -------- |
| `() => void`   | -             | Both     |
```

--------------------------------

### placeholderTextColor

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Color of the placeholder text.

```APIDOC
## `placeholderTextColor`

### Description
Color of the placeholder text.

### Type
`ColorValue`

### Default Value
-

### Platform
Both
```

--------------------------------

### Define Custom Context Menu Items

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Add custom items to the text selection context menu. Items appear before system actions. Ensure iOS 16+ for functionality.

```typescript
interface ContextMenuItem {
  /** Label shown in the context menu. */
  text: string;
  /**
   * SF Symbol name for the icon shown next to the item label.
   * Supported on iOS and macOS. Ignored on Android.
   * Example: 'sparkles', 'translate', 'doc.text'
   */
  icon?: string;
  /** Called when the item is tapped. */
  onPress: (event: {
    /** The selected text at the time of the press. */
    text: string;
    /** Absolute character range of the selection within the full content. */
    selection: { start: number; end: number };
  }) => void;
  /** When false, the item is not shown in the menu. Defaults to true. */
  visible?: boolean;
}
```

--------------------------------

### Define Custom Context Menu Items

Source: https://github.com/software-mansion-labs/react-native-enriched-markdown/blob/main/docs/API_REFERENCE.md

Add custom items to the text selection context menu. Items appear before system actions. Ensure iOS 16+ for functionality.

```typescript
interface ContextMenuItem {
  /** Label shown in the context menu. */
  text: string;
  /**
   * SF Symbol name for the icon shown next to the item label.
   * Supported on iOS and macOS. Ignored on Android.
   * Example: 'sparkles', 'translate', 'doc.text'
   */
  icon?: string;
  /** Called when the item is tapped. */
  onPress: (event: {
    /** The selected text at the time of the press. */
    text: string;
    /** Absolute character range of the selection within the full content. */
    selection: { start: number; end: number };
    /** Active formatting styles at the time of the press. */
    styleState: {
      bold: { isActive: boolean };
      italic: { isActive: boolean };
      underline: { isActive: boolean };
      strikethrough: { isActive: boolean };
      spoiler: { isActive: boolean };
      link: { isActive: boolean };
    };
  }) => void;
  /** When false, the item is not shown in the menu. Defaults to true. */
  visible?: boolean;
}
```

```tsx
<EnrichedMarkdownTextInput
  contextMenuItems={[
    {
      text: 'Summarize with AI',
      onPress: ({ text, styleState }) => {
        console.log('Selected:', text, 'Bold:', styleState.bold.isActive);
      },
    },
  ]} 
/>
```