CometChatTextFormatter

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.

danger

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.

info

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