react-native-enriched-html

Links can be handled in two ways:

1. Automatic detection: The component automatically detects URLs. You can customize this behavior using the linkRegex prop.
2. Manual application: Use the setLink method on the input ref. You can derive the start, end, and text arguments from the onChangeSelection event payload to apply a link to the user's current selection.

Passing a different text argument to setLink than what is currently selected will replace the selected text with the new text before applying the link.

Mentions allow users to type phrases like @someone or #channel.

• Configuration: Use the mentionIndicators prop to define trigger characters (default is [ @ ]).
• Starting a mention: Triggered by typing an indicator or calling the startMention ref method.
• Handling events:
  • onStartMention: Emitted when a mention starts or when the cursor returns to an unfinished mention.
  • onChangeMention: Emitted as the user types or removes characters after an indicator.
  • onEndMention: Emitted when the user finishes the mention (e.g., by typing a space or moving the cursor away).
• Completing a mention: Call the setMention ref method to finalize the mention (e.g., after a user selects an item from a custom UI list).

You can toggle various styles on the current text selection by calling the appropriate toggle function on the component ref. Styles are categorized into two types:

• Inline styles: Applied to the exact character range selected. If no selection exists, the style is applied to the next characters typed.
  • Supported: bold, italic, underline, strikethrough, inline code.
• Paragraph styles: Applied to the entire paragraph (text between newlines) containing the selection. If the selection spans multiple paragraphs, multiple paragraphs are affected. If no selection exists, the style is applied to the current paragraph.
  • Supported: H1 through H6 headings, codeblock, blockquote, ordered list, unordered list, checkbox list.

Google Test is managed via CMake's FetchContent. To change the version used by the project, modify the GIT_TAG in cpp/CMakeLists.txt.

After updating the tag, you must perform a clean rebuild by removing the existing build directory.

# In cpp/CMakeLists.txt
FetchContent_Declare(
    googletest
    GIT_REPOSITORY https://github.com/google/googletest.git
    GIT_TAG        v1.17.0   # ← change this to the desired version/tag
)

cd cpp
rm -rf build
cmake -B build -DCMAKE_BUILD_TYPE=Debug
cmake --build build

The normalizer uses an amalgamation file located at GumboParser/GumboParser.h. To upgrade to a newer version of the parser:

1. Clone the gumbo-parser repository.
2. Generate a new amalgamation from the cloned source files.
3. Replace the existing cpp/GumboParser/GumboParser.h with your newly generated file.

git clone https://codeberg.org/gumbo-parser/gumbo-parser.git

If you need to perform a full reload to reset the app state, use the following platform-specific methods:

• Android: Press the <kbd>R</kbd> key twice, or open the Dev Menu via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS) and select "Reload".
• iOS: Press <kbd>R</kbd> in the iOS Simulator.

To create an optimized production build of the web example, run the build command. The resulting files will be located in the dist/ directory.

yarn build:web

Follow these steps to install the library in a standard React Native project:

1. Install the package using yarn:

   yarn add react-native-enriched-html

   Tip: To use the latest features, you can install the nightly build with yarn add react-native-enriched-html@nightly.

2. Install iOS dependencies: Since the library contains native code, you must re-build the native app. Run the following in your project root:

   cd ios && bundler install && bundler exec pod install

Follow these steps for Expo projects:

1. Install the package:

   npx expo install react-native-enriched-html

2. Run prebuild: Because the library includes native code, you must run prebuild to generate the necessary native files:

   npx expo prebuild

Important: This library will not work in Expo Go because it requires custom native changes.

After starting the Metro server with yarn start, run the following command to build and launch the application on an Android emulator or connected device:

yarn android

Both EnrichedText and EnrichedTextInput are client-only components. They rely on browser-specific APIs such as DOMParser, DOMPurify, and TipTap.

If you are using a framework with Server-Side Rendering (SSR) like Next.js, Remix, or Gatsby, you must ensure these components are only rendered on the client side to avoid errors.