> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# CometChatTextFormatter

> CometChatTextFormatter — CometChat documentation.

## Introduction

`CometChatTextFormatter` is an abstract utility class that provides the foundation for enabling rich text formatting in message composers and message bubbles. It can be extended to create custom formatter classes, allowing for specific text formatting such as mentions, hashtags, markdown, or any other custom styles within chat interfaces.

### Prerequisites

Before implementing custom text formatters, ensure you have the following:

* An active CometChat account and application.
* Basic understanding of JavaScript and web development.
* Knowledge of regular expressions and their implementation in JavaScript.

### Text Formatter Fields

Text formatters have several fields to manage the formatting state and behavior:

| Field                                | Setter                                                         | Description                                                                       |
| ------------------------------------ | -------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| `protected trackCharacter`           | `setTrackingCharacter(trackCharacter: string)`                 | The character that triggers formatting. For hashtags, this would be `#`.          |
| `protected currentCaretPosition`     | `setCaretPositionAndRange(currentCaretPosition, currentRange)` | Current caret position or type of text selection in the input field.              |
| `protected currentRange`             | `setCaretPositionAndRange(currentCaretPosition, currentRange)` | Represents the text range selected by the user or the cursor's position.          |
| `protected inputElementReference`    | `setInputElementReference(inputElementReference)`              | Reference to the input field DOM element. Used to read `textContent`.             |
| `protected regexPatterns`            | `setRegexPatterns(regexPatterns)`                              | Regex patterns to identify specific text patterns in user input.                  |
| `protected regexToReplaceFormatting` | `setRegexToReplaceFormatting(regexToReplaceFormatting)`        | Regex patterns to replace formatted text with the original text.                  |
| `protected keyUpCallBack`            | `setKeyUpCallBack(keyUpCallBack)`                              | Callback function for 'keyup' events.                                             |
| `protected keyDownCallBack`          | `setKeyDownCallBack(keyDownCallBack)`                          | Callback function for 'keydown' events.                                           |
| `protected reRender`                 | `setReRender(reRender)`                                        | Function to trigger a re-render of the component, useful for updating UI content. |
| `protected loggedInUser`             | `setLoggedInUser(loggedInUser)`                                | The logged-in user object set by the composer and text bubbles.                   |
| `protected id`                       | `setId(id)`                                                    | A unique identifier for the formatter instance.                                   |

<Warning>
  Directly modifying the `textContent` or `innerHtml` of the input element in formatters is not recommended. Use the `reRender` method to update text content in the UI.
</Warning>

<Note>
  The `getFormattedText` function of all formatters is invoked upon calling `reRender`, maintaining the order in which they were received as props.
</Note>

### Custom Formatter Implementation

To create a custom formatter, extend the `CometChatTextFormatter` class and override the necessary methods. Ensure to handle text matching, formatting, and event listening as per your requirements.

#### Example Implementation

Here's an example of how to implement a hashtag text formatter:

```javascript theme={null}
class HashtagFormatter extends CometChatTextFormatter {
  constructor() {
    super();
    this.setTrackingCharacter("#");
    // Define hashtag regex pattern
    this.setRegexPatterns([/#(\w+)/g]);
  }

  getFormattedText(inputText) {
    // If no input text, return undefined to indicate no change
    if (!inputText) return;

    // Replace hashtags with formatted span elements
    return inputText.replace(
      this.regexPatterns[0],
      `<span class="hashtag">$&</span>`
    );
  }

  // Additional methods and logic...
}
```