CometChatTextFormatter - CometChat Docs

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.

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

​Introduction

​Prerequisites

​Text Formatter Fields

​Custom Formatter Implementation

​Example Implementation

Introduction

Prerequisites

Text Formatter Fields

Custom Formatter Implementation

Example Implementation