​
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:
FieldSetterDescription
protected trackCharactersetTrackingCharacter(trackCharacter: string)The character that triggers formatting. For hashtags, this would be #.
protected currentCaretPositionsetCaretPositionAndRange(currentCaretPosition, currentRange)Current caret position or type of text selection in the input field.
protected currentRangesetCaretPositionAndRange(currentCaretPosition, currentRange)Represents the text range selected by the user or the cursor’s position.
protected inputElementReferencesetInputElementReference(inputElementReference)Reference to the input field DOM element. Used to read textContent.
protected regexPatternssetRegexPatterns(regexPatterns)Regex patterns to identify specific text patterns in user input.
protected regexToReplaceFormattingsetRegexToReplaceFormatting(regexToReplaceFormatting)Regex patterns to replace formatted text with the original text.
protected keyUpCallBacksetKeyUpCallBack(keyUpCallBack)Callback function for ‘keyup’ events.
protected keyDownCallBacksetKeyDownCallBack(keyDownCallBack)Callback function for ‘keydown’ events.
protected reRendersetReRender(reRender)Function to trigger a re-render of the component, useful for updating UI content.
protected loggedInUsersetLoggedInUser(loggedInUser)The logged-in user object set by the composer and text bubbles.
protected idsetId(id)A unique identifier for the formatter instance.
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.
The getFormattedText function of all formatters is invoked upon calling reRender, maintaining the order in which they were received as props.

​
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: 
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...
}