### Start Metro Server for Example App

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

Starts the Metro bundler, which is required to run the example application. This command is used to serve the JavaScript bundle for the React Native app.

```shell
yarn example start
```

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

### Start Metro Bundler (npm/Yarn)

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

Starts the Metro JavaScript bundler, which is essential for developing React Native applications. This command can be executed using either npm or Yarn.

```sh
npm start
```

```sh
yarn start
```

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

### Run Example App on iOS

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

Builds and runs the example application on a connected iOS device or simulator. This allows testing changes against a native iOS environment.

```shell
yarn example ios
```

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

### Install CocoaPods Dependencies (Ruby)

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

Installs the necessary dependencies for the iOS platform using CocoaPods. This is crucial after cloning the project or updating native dependencies.

```ruby
bundle install
```

```ruby
bundle exec pod install
```

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

### Run Example App on Android

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

Builds and runs the example application on an connected Android device or emulator. This allows testing changes against a native Android environment.

```shell
yarn example android
```

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

### Install Project Dependencies with Yarn

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

Installs all necessary dependencies for the monorepo using Yarn workspaces. This is a prerequisite for any development work.

```shell
yarn
```

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

### Install react-native-enriched (Bare React Native)

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

Installs the react-native-enriched library using Yarn for bare React Native projects.

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

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

### Install iOS Dependencies (Bare React Native)

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

Installs native iOS dependencies for react-native-enriched using Bundler and Pod install. Requires rebuilding the native app.

```sh
cd ios && bundler install && bundler exec pod install
```

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

### Build and Run iOS App (npm/Yarn)

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

Builds and runs the React Native application on an iOS simulator or device. This command can be executed using either npm or Yarn.

```sh
npm run ios
```

```sh
yarn ios
```

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

### Build and Run Android App (npm/Yarn)

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

Builds and runs the React Native application on an Android device or emulator. This command utilizes either npm or Yarn for execution.

```sh
npm run android
```

```sh
yarn android
```

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

### Install react-native-enriched (Expo)

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

Installs the react-native-enriched library using npx for Expo projects.

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

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

### Start Mention

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

Initiates a mention at the current cursor or selection position using a provided indicator.

```APIDOC
## startMention()

### Description
Starts a mention with the given indicator. It gets put at the cursor/selection.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **indicator** (string) - The indicator that starts the new mention.

### Request Example
```json
{
  "indicator": "#"
}
```

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Starting a Mention

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

Mentions can be initiated by typing specific indicator characters or by programmatically calling the startMention method on the input's ref. This functionality is key for user tagging or referencing entities within the text.

```javascript
inputRef.current.startMention();
```

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

### Start Mention in react-native-enriched

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

Initiates a mention at the current cursor or selection position using a provided indicator.

```typescript
startMention: (indicator: string) => void;
```

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

### Fix Formatting Errors with ESLint

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

Automatically fixes code formatting issues detected by ESLint. This command should be run to ensure code adheres to the project's style guide.

```shell
yarn lint --fix
```

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

### Mention Management

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

APIs for starting, editing, and completing mentions within the enriched text input.

```APIDOC
## Mention Management

This section details the methods and events related to handling mentions in the `react-native-enriched` component.

### Starting a Mention
Mentions can be initiated by typing specific `mentionIndicators` or by programmatically calling the `startMention` method.

### Mention Events
- **onStartMention**: Emitted when a mention is started or when the cursor returns to an unfinished mention. Useful for opening mention selection UIs.
- **onChangeMention**: Emitted when characters are added or removed within an active mention. Useful for filtering suggestions based on typed text.
- **onEndMention**: Emitted when the user finishes editing a mention (e.g., by typing a space or moving the cursor). Useful for hiding mention editing UIs.

### Completing a Mention
- **setMention**: Completes the currently edited mention, typically after a user selects an option from a mention editor. This method is called on the input ref.
```

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

### Set Link

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

Sets a link within the text at specified start and end indices with custom display text and URL. It can also replace existing text in that range.

```APIDOC
## setLink()

### Description
Sets the link at the given place with a given displayed text and URL. Link will replace any text if there was some between `start` and `end` indexes. Setting a link with `start` equal to `end` will just insert it in place.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **start** (number) - The starting index where the link should be.
- **end** (number) - First index behind the new link's ending index.
- **text** (string) - Displayed text of the link.
- **url** (string) - URL of the link.

### Request Example
```json
{
  "start": 0,
  "end": 5,
  "text": "example.com",
  "url": "https://example.com"
}
```

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Set Link in react-native-enriched

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

Sets a hyperlink within the text content. It takes start and end indices, the display text, and the URL. Links can replace existing text or be inserted at a specific point.

```typescript
setLink: (
  start: number,
  end: number,
  text: string,
  url: string
) => void;
```

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

### onChangeSelection Callback - React Native

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

Fired when the user changes the text selection or moves the cursor. It returns the start and end indices of the selection, along with the selected text. This is crucial for implementing selection-based features.

```TypeScript
interface OnChangeSelectionEvent {
  start: Int32;
  end: Int32;
  text: string;
}

// Usage example:
(event: NativeSyntheticEvent<OnChangeSelectionEvent>) => void
```

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

### Toggle Bold Style in Enriched Text Input

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

This example shows how to use the EnrichedTextInput component to toggle bold styling on text. It utilizes a ref to imperatively call the toggleBold method and displays the active bold state via button color.

```tsx
import { EnrichedTextInput } from 'react-native-enriched';
import type {
  EnrichedTextInputInstance,
  OnChangeStateEvent,
} from 'react-native-enriched';
import { useState, useRef } from 'react';
import { View, Button, StyleSheet } from 'react-native';

export default function App() {
  const ref = useRef<EnrichedTextInputInstance>(null);

  const [stylesState, setStylesState] = useState<OnChangeStateEvent | null>();

  return (
    <View style={styles.container}>
      <EnrichedTextInput
        ref={ref}
        onChangeState={(e) => setStylesState(e.nativeEvent)}
        style={styles.input}
      />
      <Button
        title="Toggle bold"
        color={stylesState?.isBold ? 'green' : 'gray'}
        onPress={() => ref.current?.toggleBold()}
      />
    </View>
  );
}

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

```

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

### Publish New Versions with release-it

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

Automates the process of publishing new versions of the package to npm. This includes version bumping, tag creation, and release drafting.

```shell
yarn release
```

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

### Run Unit Tests with Jest

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

Executes all unit tests defined in the project using the Jest testing framework. This verifies the correctness of individual code components.

```shell
yarn test
```

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

### Callback: onStartMention

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

Callback triggered when the editing of a mention begins after placing the indicator. It provides the mention indicator.

```APIDOC
## Callback: onStartMention

### Description
Callback that gets called whenever a mention editing starts (after placing the indicator).

### Parameters
- `indicator` (string) - The indicator of the mention that begins editing.

### Callback Signature
`(indicator: string) => void`
```

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

### Lint Project Files with ESLint

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

Runs ESLint to check for code style and potential errors according to the project's linting rules. This helps maintain code consistency and quality.

```shell
yarn lint
```

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

### onStartMention Callback Signature (TypeScript)

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

Represents the callback function signature for `onStartMention`, which is triggered when a mention editing process begins. It receives the mention indicator as an argument.

```typescript
(indicator: string) => void
```

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

### Run Prebuild (Expo)

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

Executes the prebuild command for Expo projects to incorporate native code changes required by react-native-enriched. This is necessary because the library won't function in Expo Go.

```sh
npx expo prebuild
```

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

### Props Reference

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

Detailed reference for the props available on the EnrichedTextInput component.

```APIDOC
## Props Reference

### `autoFocus`
- **Description**: Automatically focuses the input component when set to `true`.
- **Type**: `boolean`
- **Default Value**: `false`

### `autoCapitalize`
- **Description**: Controls automatic capitalization behavior.
  - `none`: No auto-capitalization.
  - `sentences`: Capitalizes the first letter of each sentence.
  - `words`: Capitalizes the first letter of each word.
  - `characters`: Capitalizes all characters.
- **Type**: `'none' | 'sentences' | 'words' | 'characters'`
- **Default Value**: `'sentences'`

### `cursorColor`
- **Description**: Sets the color of the input cursor (caret).
- **Type**: [`color`](https://reactnative.dev/docs/colors)
- **Default Value**: System default
- **Platform**: Android

### `defaultValue`
- **Description**: Provides an initial value for the input. If the provided string is valid HTML generated by `EnrichedTextInput` or parsable HTML, the styles will be applied accordingly.
- **Type**: `string`
- **Default Value**: -

### `editable`
- **Description**: Determines if the input text is editable. If `false`, the text cannot be modified.
- **Type**: `boolean`
- **Default Value**: `true`
```

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

### Ref Method: focus()

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

Sets focus to the input component.

```APIDOC
## Ref Method: focus()

### Description
Focuses the input.

### Signature
```ts
focus: () => void;
```
```

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

### CMake Build Configuration for RNEnrichedTextInputViewSpec

Source: https://github.com/software-mansion-labs/react-native-enriched/blob/main/android/src/main/new_arch/CMakeLists.txt

Configures the CMake build system for the RNEnrichedTextInputViewSpec library. It sets up library targets, finds necessary packages (fbjni, ReactAndroid), and links them. Includes common C++ compilation flags.

```cmake
cmake_minimum_required(VERSION 3.13)
set(CMAKE_VERBOSE_MAKEFILE on)

set(LIB_LITERAL RNEnrichedTextInputViewSpec)
set(LIB_TARGET_NAME react_codegen_${LIB_LITERAL})

set(LIB_ANDROID_DIR ${CMAKE_CURRENT_SOURCE_DIR}/../../..)
set(LIB_ANDROID_GENERATED_JNI_DIR ${LIB_ANDROID_DIR}/generated/jni)
set(LIB_ANDROID_GENERATED_COMPONENTS_DIR ${LIB_ANDROID_GENERATED_JNI_DIR}/react/renderer/components/${LIB_LITERAL})

file(GLOB LIB_MODULE_SRCS CONFIGURE_DEPENDS *.cpp react/renderer/components/${LIB_LITERAL}/*.cpp)
file(GLOB LIB_CODEGEN_SRCS CONFIGURE_DEPENDS ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}/*.cpp)

add_library(
        ${LIB_TARGET_NAME}
        SHARED
        ${LIB_MODULE_SRCS}
        ${LIB_CUSTOM_SRCS}
        ${LIB_CODEGEN_SRCS}
)

target_include_directories(
        ${LIB_TARGET_NAME}
        PUBLIC
        .
        ./react/renderer/components/${LIB_LITERAL}
        ${LIB_ANDROID_GENERATED_JNI_DIR}
        ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}
        ${LIB_CPP_DIR}
)

find_package(fbjni REQUIRED CONFIG)
find_package(ReactAndroid REQUIRED CONFIG)

target_link_libraries(
        ${LIB_TARGET_NAME}
        fbjni::fbjni
        ReactAndroid::jsi
        ReactAndroid::reactnative
)

target_compile_options(
        ${LIB_TARGET_NAME}
        PRIVATE
        -DLOG_TAG="ReactNative"
        -fexceptions
        -frtti
        -Wall
        -std=c++20
)

target_include_directories(
        ${CMAKE_PROJECT_NAME}
        PUBLIC
        ${CMAKE_CURRENT_SOURCE_DIR}
)
```

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

### Prop: style

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

Applies styling to the input, supporting ViewStyle and TextSyle props.

```APIDOC
## Prop: style

### Description
Accepts most [ViewStyle](https://reactnative.dev/docs/view#style) props, but keep in mind that some of them might not be supported.
Additionally following [TextStyle](https://reactnative.dev/docs/text#style) props are supported

- color
- fontFamily
- fontSize
- fontWeight
- fontStyle only on Android

### Type
[`View Style`](https://reactnative.dev/docs/view#style) | [`Text Style`](https://reactnative.dev/docs/text#style)

### Default Value
`-`
```

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

### Customizing Styles

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

Documentation on how to customize the styles of the EnrichedTextInput component.

```APIDOC
## Customizing <EnrichedTextInput /> Styles

Customization of the `<EnrichedTextInput />` component's styles is supported via the `htmlStyle` prop.
```

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

### Prop: ref

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

A React ref allowing access to methods of the EnrichedTextInput instance.

```APIDOC
## Prop: ref

### Description
A React ref that lets you call any ref methods on the input.

### Type
`RefObject<EnrichedTextInputInstance | null>`
```

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

### Prop: placeholder

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

Sets the placeholder text displayed in the input when it is empty. The placeholder disappears once text is entered.

```APIDOC
## Prop: placeholder

### Description
The placeholder text that is displayed in the input if nothing has been typed yet. Disappears when something is typed.

### Type
`string`

### Default Value
`''`
```

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

### Setting a Mention

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

Completes the currently edited mention, typically after a user selects an option from an associated editor. This method finalizes the mention within the input field.

```javascript
inputRef.current.setMention(mentionData);
```

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

### Toggle Underline

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

Applies underline formatting to the currently selected text.

```APIDOC
## toggleUnderline()

### Description
Applies underline formatting to the current selection.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Prop: androidExperimentalSynchronousEvents

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

EXPERIMENTAL: Enables experimental synchronous events on Android to prevent input flickering. Use with caution.

```APIDOC
## Prop: androidExperimentalSynchronousEvents (EXPERIMENTAL)

### Description
If true, Android will use experimental synchronous events. This will prevent from input flickering when updating component size. However, this is an experimental feature, which has not been thoroughly tested. We may decide to enable it by default in a future release.

### Type
`bool`

### Default Value
`false`

### Platform
`Android`
```

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

### Style Detection

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

API for detecting text styles within the input.

```APIDOC
## Style Detection

Detects various text styles applied within the input component.

### onStateChange
- **Description**: The `onChangeState` event payload can be used to detect all applied styles within the input. Refer to the [usage section](#usage) or the example app for implementation details.
```

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

### Set Value

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

Sets the input's value to either a react-native-enriched supported HTML string or raw text.

```APIDOC
## setValue()

### Description
Sets the input's value.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **value** (string) - Value to set, it can either be `react-native-enriched` supported HTML string or raw text.

### Request Example
```json
{
  "value": "This is **bold** text."
}
```

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Callback: onLinkDetected

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

Callback that is invoked when a new link is added or the cursor/selection moves to a link. It provides information about the detected link.

```APIDOC
## Callback: onLinkDetected

### Description
Callback that gets called when either a new link has been added or the user has moved the cursor/selection to some link.

### Payload Interface
```ts
interface OnLinkDetected {
  text: string;
  url: string;
  start: Int32;
  end: Int32;
}
```

### Parameters
- `text` (string) - The link's displayed text.
- `url` (string) - The underlying link's URL.
- `start` (Int32) - The starting index of the link.
- `end` (Int32) - The first index after the ending index of the link.

### Callback Signature
`(event: OnLinkDetected) => void`
```

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

### Toggle Strike Through

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

Applies strikethrough formatting to the currently selected text.

```APIDOC
## toggleStrikeThrough()

### Description
Applies strikethrough formatting to the current selection.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Toggle H1

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

Toggles heading 1 (h1) style for the current selection.

```APIDOC
## toggleH1()

### Description
Toggles heading 1 (h1) style at the current selection.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Callback: onMentionDetected

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

Callback invoked when a mention is detected, either newly added or when the cursor/selection is moved to an existing mention. It includes mention details.

```APIDOC
## Callback: onMentionDetected

### Description
Callback called when mention has been detected - either a new mention has been added or the user has moved the cursor/selection to some mention.

### Payload Interface
```ts
interface OnMentionDetected {
  text: string;
  indicator: string;
  attributes: Record<string, string>;
}
```

### Parameters
- `text` (string) - The mention's displayed text.
- `indicator` (string) - The indicator of the mention.
- `attributes` (Record<string, string>) - Additional user-defined attributes stored with the mention.

### Callback Signature
`(event: OnMentionDetected) => void`
```

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

### Toggle H2

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

Toggles heading 2 (h2) style for the current selection.

```APIDOC
## toggleH2()

### Description
Toggles heading 2 (h2) style at the current selection.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Toggle H3

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

Toggles heading 3 (h3) style for the current selection.

```APIDOC
## toggleH3()

### Description
Toggles heading 3 (h3) style at the current selection.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Focus Input Ref Method (TypeScript)

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

The signature for the `focus` method accessible via the input's ref. This method sets focus to the input field.

```typescript
focus: () => void;
```

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

### Inline Images

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

API for inserting inline images into the enriched text input.

```APIDOC
## Inline Images

Allows insertion of images directly into the text input.

### setImage
- **Description**: Inserts an image into the input. The image replaces selected text or is inserted at the cursor position.
- **Platform Note**: Inline images are not supported on iOS at the moment, but support is planned.
- **Usage**: Call `setImage(imageUrl)` on the input ref.
```

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

### Toggle Blockquote

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

Toggles the blockquote style for the currently selected text.

```APIDOC
## toggleBlockQuote()

### Description
Toggles blockquote style at the current selection.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Toggle Inline Code

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

Applies inline code formatting to the currently selected text.

```APIDOC
## toggleInlineCode()

### Description
Applies inline code formatting to the current selection.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Prop: placeholderTextColor

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

Defines the color of the placeholder text in the input.

```APIDOC
## Prop: placeholderTextColor

### Description
Input placeholder's text color.

### Type
[`color`](https://reactnative.dev/docs/colors)

### Default Value
Input's [color](#style)
```

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

### Toggle Bold

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

Toggles bold formatting on the currently selected text.

```APIDOC
## toggleBold()

### Description
Toggles bold formatting at the current selection.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Ref Method: setImage()

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

Inserts an inline image at the current selection. This method is Android-only.

```APIDOC
## Ref Method: setImage()

### Description
> [!NOTE]
> This function is Android only as iOS doesn't support inline images just yet.

Sets the [inline image](#inline-images) at the current selection.

### Signature
```ts
setImage: (src: string) => void;
```

### Parameters
- `src` (string) - The absolute path to the image.
```

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

### Set Mention

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

Sets the currently edited mention with a specified indicator, display text, and optional custom attributes.

```APIDOC
## setMention()

### Description
Sets the currently edited mention with a given indicator, displayed text and custom attributes. Anything the user typed gets replaced by that text. The mention indicator isn't added to that text.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **indicator** (string) - The indicator of the set mention.
- **text** (string) - The text that should be displayed for the mention.
- **attributes** (Record<string, string>, optional) - Additional, custom attributes for the mention that can be passed as a typescript record. They are properly preserved through parsing from and to the HTML format.

### Request Example
```json
{
  "indicator": "@",
  "text": "John Doe",
  "attributes": {
    "user-id": "123"
  }
}
```

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Verify TypeScript Type Checking

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

Executes the TypeScript compiler to check for type errors in the project's codebase. This ensures type safety and helps catch potential bugs early.

```shell
yarn typecheck
```

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

### Toggle Ordered List Formatting

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

Converts the current text selection into an ordered list.

```typescript
toggleOrderedList: () => void;
```

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

### Toggle Heading 1 Formatting

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

Toggles the Heading 1 (h1) style for the current text selection.

```typescript
toggleH1: () => void;
```

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

### OnLinkDetected Callback Interface (TypeScript)

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

Defines the structure of the payload received by the `onLinkDetected` callback. This interface includes the text, URL, and start/end indices of a detected link.

```typescript
interface OnLinkDetected {
  text: string;
  url: string;
  start: Int32;
  end: Int32;
}
```

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

### Toggle Ordered List

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

Converts the currently selected text into an ordered list.

```APIDOC
## toggleOrderedList()

### Description
Converts current selection into an ordered list.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Set Image Ref Method (TypeScript)

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

The signature for the `setImage` method, which is specific to Android. It allows setting an inline image at the current cursor selection.

```typescript
setImage: (src: string) => void;
```

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

### HtmlStyle Type for Customization

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

Defines an interface for customizing the HTML styles of various elements like headings, blockquotes, code blocks, links, mentions, and lists. Allows setting properties like font size, color, borders, and more.

```typescript
interface HtmlStyle {
  h1?: {
    fontSize?: number;
    bold?: boolean;
  };
  h2?: {
    fontSize?: number;
    bold?: boolean;
  };
  h3?: {
    fontSize?: number;
    bold?: boolean;
  };
  blockquote?: {
    borderColor?: ColorValue;
    borderWidth?: number;
    gapWidth?: number;
    color?: ColorValue;
  };
  codeblock?: {
    color?: ColorValue;
    borderRadius?: number;
    backgroundColor?: ColorValue;
  };
  code?: {
    color?: ColorValue;
    backgroundColor?: ColorValue;
  };
  a?: {
    color?: ColorValue;
    textDecorationLine?: 'underline' | 'none';
  };
  mention?: Record<string, MentionStyleProperties> | MentionStyleProperties;
  img?: {
    width?: number;
    height?: number;
  };
  ol?: {
    gapWidth?: number;
    marginLeft?: number;
    markerFontWeight?: TextStyle['fontWeight'];
    markerColor?: ColorValue;
  };
  ul?: {
    bulletColor?: ColorValue;
    bulletSize?: number;
    marginLeft?: number;
    gapWidth?: number;
  };
}

interface MentionStyleProperties {
  color?: ColorValue;
  backgroundColor?: ColorValue;
  textDecorationLine?: 'underline' | 'none';
}
```

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

### HtmlStyle Type

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

Defines the structure for customizing HTML styles within the react-native-enriched component. This includes styles for headings, blockquotes, code, links, mentions, images, ordered lists, and unordered lists.

```APIDOC
### HtmlStyle Type

Allows customizing HTML styles.

```typescript
interface HtmlStyle {
  h1?: {
    fontSize?: number;
    bold?: boolean;
  };
  h2?: {
    fontSize?: number;
    bold?: boolean;
  };
  h3?: {
    fontSize?: number;
    bold?: boolean;
  };
  blockquote?: {
    borderColor?: ColorValue;
    borderWidth?: number;
    gapWidth?: number;
    color?: ColorValue;
  };
  codeblock?: {
    color?: ColorValue;
    borderRadius?: number;
    backgroundColor?: ColorValue;
  };
  code?: {
    color?: ColorValue;
    backgroundColor?: ColorValue;
  };
  a?: {
    color?: ColorValue;
    textDecorationLine?: 'underline' | 'none';
  };
  mention?: Record<string, MentionStyleProperties> | MentionStyleProperties;
  img?: {
    width?: number;
    height?: number;
  };
  ol?: {
    gapWidth?: number;
    marginLeft?: number;
    markerFontWeight?: TextStyle['fontWeight'];
    markerColor?: ColorValue;
  };
  ul?: {
    bulletColor?: ColorValue;
    bulletSize?: number;
    marginLeft?: number;
    gapWidth?: number;
  };
}

interface MentionStyleProperties {
  color?: ColorValue;
  backgroundColor?: ColorValue;
  textDecorationLine?: 'underline' | 'none';
}
```

#### h1/h2/h3 (headings)

- `fontSize` is the size of the heading's font, defaults to `32`/`24`/`20` for h1/h2/h3.
- `bold` defines whether the heading should be bolded, defaults to `false`.

> [!NOTE]
> On iOS, the headings cannot have same `fontSize` as the component's `fontSize`. Doing so results in unexpected behavior.
```

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

### Set Mention in react-native-enriched

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

Sets a mention with a specified indicator, display text, and optional custom attributes. Custom attributes are preserved through HTML parsing.

```typescript
setMention: (
  indicator: string,
  text: string,
  attributes?: Record<string, string>
) => void;
```

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

### Toggle Blockquote Formatting

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

Toggles the blockquote style for the currently selected text.

```typescript
toggleBlockQuote: () => void;
```

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

### Toggle Heading 2 Formatting

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

Toggles the Heading 2 (h2) style for the current text selection.

```typescript
toggleH2: () => void;
```

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

### Toggle Heading 3 Formatting

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

Toggles the Heading 3 (h3) style for the current text selection.

```typescript
toggleH3: () => void;
```

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

### onChangeMention Callback - React Native

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

Triggered when a user modifies a mention being edited. It provides the mention indicator and the text typed after it. This callback is essential for real-time mention updates.

```TypeScript
interface OnChangeMentionEvent {
  indicator: string;
  text: string;
}

// Usage example:
(event: OnChangeMentionEvent) => void
```

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

### Toggle Inline Code Formatting

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

Applies inline code formatting to the currently selected text.

```typescript
toggleInlineCode: () => void;
```

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

### OnMentionDetected Callback Interface (TypeScript)

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

Defines the structure of the payload for the `onMentionDetected` callback. It captures the mention's text, indicator, and any associated attributes.

```typescript
interface OnMentionDetected {
  text: string;
  indicator: string;
  attributes: Record<string, string>;
}
```

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

### Prop: ViewProps

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

Inherits props from the React Native View component, with potential limitations on supported props.

```APIDOC
## Prop: ViewProps

### Description
The input inherits [ViewProps](https://reactnative.dev/docs/view#props), but keep in mind that some of the props may not be supported.
```

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

### Toggle Unordered List

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

Converts the currently selected text into an unordered list.

```APIDOC
## toggleUnorderedList()

### Description
Converts current selection into an unordered list.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Other Events

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

Additional events emitted by the enriched text input for various state changes.

```APIDOC
## Other Events

Provides information about various input interactions and state changes.

- **onFocus**: Triggered when the input component receives focus.
- **onBlur**: Triggered when the input component loses focus.
- **onChangeText**: Returns the current text value of the input whenever it changes.
- **onChangeHtml**: Returns an HTML string representation of the input's content and styles. Note that parsing HTML on every change can be performance-intensive; omitting this callback may improve performance on iOS. Future API improvements are being considered.
- **onChangeSelection**: Returns information necessary for managing text selections, primarily useful for link handling.
- **onLinkDetected**: Returns detailed information about a detected link when the user's selection is near one.
- **onMentionDetected**: Returns detailed information about a detected mention when the user's selection is near one.
```

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

### onChangeText Callback - React Native

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

This callback is invoked whenever any text input occurs. It provides the latest text value of the input, allowing for immediate text processing or display.

```TypeScript
interface OnChangeTextEvent {
  value: string;
}

// Usage example:
(event: NativeSyntheticEvent<OnChangeTextEvent>) => void
```

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

### Ref Method: blur()

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

Removes focus from the input component.

```APIDOC
## Ref Method: blur()

### Description
Blurs the input.

### Signature
```ts
blur: () => void;
```
```

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

### Toggle Italic

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

Toggles italic formatting for the currently selected text.

```APIDOC
## toggleItalic()

### Description
Toggles italic formatting at the current selection.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A
```

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

### Set Value in react-native-enriched

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

Sets the input's value, accepting either a react-native-enriched supported HTML string or raw text.

```typescript
setValue: (value: string) => void;
```

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

### Toggle Bold Formatting

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

Applies or removes bold formatting from the selected text.

```typescript
toggleBold: () => void;
```

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

### Blur Input Ref Method (TypeScript)

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

The signature for the `blur` method available through the input's ref. This method removes focus from the input field.

```typescript
blur: () => void;
```

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

### Toggle Code Block

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

Toggles code block formatting for the current selection. Note: This feature is Android-only.

```APIDOC
## toggleCodeBlock()

### Description
Toggles codeblock formatting at the current selection.

### Method
APIDOC

### Endpoint
APIDOC

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A (This is a method call, not an API endpoint)

#### Response Example
N/A

### Notes
This function is Android only as iOS doesn't support codeblocks just yet.
```

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

### Toggle Unordered List Formatting

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

Converts the current text selection into an unordered list.

```typescript
toggleUnorderedList: () => void;
```

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

### Toggle Underline Formatting

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

Applies or removes underline formatting from the selected text.

```typescript
toggleUnderline: () => void;
```

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

### onEndMention Callback - React Native

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

Fired when a user stops actively editing a mention (e.g., by moving the cursor or adding a space). It returns the indicator of the mention that was being edited, useful for finalizing mention data.

```TypeScript
// Usage example:
(indicator: string) => void
```

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

### Toggle Italic Formatting

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

Applies or removes italic formatting from the selected text.

```typescript
toggleItalic: () => void;
```

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

### onChangeState Callback - React Native

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

Called when any style within the current selection is modified. It returns a boolean flag for each supported style (bold, italic, etc.). This enables dynamic updating of text formatting.

```TypeScript
interface OnChangeStateEvent {
  isBold: boolean;
  isItalic: boolean;
  isUnderline: boolean;
  isStrikeThrough: boolean;
  isInlineCode: boolean;
  isH1: boolean;
  isH2: boolean;
  isH3: boolean;
  isCodeBlock: boolean;
  isBlockQuote: boolean;
  isOrderedList: boolean;
  isUnorderedList: boolean;
  isLink: boolean;
  isImage: boolean;
  isMention: boolean;
}

// Usage example:
(event: NativeSyntheticEvent<OnChangeStateEvent>) => void
```

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

### onChangeHtml Callback - React Native

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

Handles changes to the HTML content of the input. It receives an event object containing the new HTML value. This is useful for capturing and processing rich text input.

```TypeScript
interface OnChangeHtmlEvent {
  value: string;
}

// Usage example:
(event: NativeSyntheticEvent<OnChangeHtmlEvent>) => void
```

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

### Toggle Strikethrough Formatting

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

Applies or removes strikethrough formatting from the selected text.

```typescript
toggleStrikeThrough: () => void;
```

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

### Prop: selectionColor

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

Sets the color of the text selection highlight. On iOS, this color also applies to the cursor.

```APIDOC
## Prop: selectionColor

### Description
Color of the selection rectangle that gets drawn over the selected text. On iOS, the cursor (caret) also gets set to this color.

### Type
[`color`](https://reactnative.dev/docs/colors)

### Default Value
`system default`
```

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

### Toggle Code Block Formatting (Android Only)

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

Toggles code block formatting for the current selection. This feature is currently only supported on Android.

```typescript
toggleCodeBlock: () => void;
```

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

### Inserting an Inline Image

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

Allows inserting an image directly into the input field. The image replaces any selected text or is inserted at the cursor's position. Note that inline image support is not yet available on iOS.

```javascript
inputRef.current.setImage('imageUrl');
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.