Custom Text Formatter - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-angular`
Key class	`CometChatTextFormatter` (abstract base class for custom formatters)
Required setup	`CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")`
Purpose	Extend to create custom inline text patterns with regex, styling, and callbacks
Features	Text formatting, customizable styles, dynamic text replacement, input field integration, key event callbacks
Related	ShortCut Formatter \| Mentions Formatter \| All Guides

CometChatTextFormatter is an abstract class for formatting text in the message composer and message bubbles. Extend it to build custom formatters — hashtags, keywords, or any regex-based pattern.

Capability	Description
Text formatting	Auto-format text based on regex patterns and styles
Custom styles	Set colors, fonts, and backgrounds for matched text
Dynamic replacement	Regex-based find-and-replace in user input
Input integration	Real-time monitoring of the composer input field
Key event callbacks	Hooks for `keyUp` and `keyDown` events

Always wrap formatted output in a <span> with a unique CSS class (e.g. "custom-hashtag"). This tells the UI Kit to render it as-is instead of sanitizing it.

Steps

1. Import the base class

import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";

2. Extend it

class HashTagTextFormatter extends CometChatTextFormatter {
  readonly id = "hashtag-formatter";
  override priority = 15;

  getRegex(): RegExp {
    return /\B#(\w+)\b/g;
  }

  format(text: string): string {
    // Apply formatting logic
    return text;
  }
}

3. Implement the regex pattern

Return the regex that matches your target pattern from getRegex():

getRegex(): RegExp {
  return /\B#(\w+)\b/g;
}

4. Implement the format method

The format() method receives the raw text and returns formatted HTML:

format(text: string): string {
  if (!text) {
    this.originalText = "";
    this.formattedText = "";
    return "";
  }

  this.originalText = text;
  this.formattedText = text.replace(
    this.getRegex(),
    '<span class="custom-hashtag" style="color: #30b3ff;">#$1</span>'
  );
  return this.formattedText;
}

5. Optionally implement shouldFormat

Control when the formatter is applied:

shouldFormat(text: string, message?: CometChat.BaseMessage): boolean {
  return this.getRegex().test(text);
}

Example

A hashtag formatter used with cometchat-message-list and cometchat-message-composer.

HashTagTextFormatter.ts
Component Usage

import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";

export class HashTagTextFormatter extends CometChatTextFormatter {
  readonly id = "hashtag-text-formatter";
  override priority = 15;

  private hashtags: string[] = [];

  getRegex(): RegExp {
    return /\B#(\w+)\b/g;
  }

  format(text: string): string {
    if (!text) {
      this.originalText = "";
      this.formattedText = "";
      this.hashtags = [];
      this.metadata = { hashtags: this.hashtags };
      return "";
    }

    this.originalText = text;
    this.hashtags = [];

    this.formattedText = text.replace(this.getRegex(), (match, tag) => {
      this.hashtags.push(`#${tag}`);
      return `<span class="custom-hashtag" style="color: #5dff05;">#${tag}</span>`;
    });

    this.metadata = { hashtags: this.hashtags };
    return this.formattedText;
  }

  getHashtags(): string[] {
    return [...this.hashtags];
  }

  override reset(): void {
    super.reset();
    this.hashtags = [];
  }
}

Pass the formatter via the textFormatters input on the message list and composer.

import { Component, OnInit } from "@angular/core";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageListComponent, CometChatMessageComposerComponent } from "@cometchat/chat-uikit-angular";
import { HashTagTextFormatter } from "./HashTagTextFormatter";

@Component({
  selector: "app-message-demo",
  standalone: true,
  imports: [CometChatMessageListComponent, CometChatMessageComposerComponent],
  template: `
    <cometchat-message-list
      [user]="chatUser"
      [textFormatters]="textFormatters">
    </cometchat-message-list>
    <cometchat-message-composer
      [user]="chatUser"
      [textFormatters]="textFormatters">
    </cometchat-message-composer>
  `,
})
export class MessageDemoComponent implements OnInit {
  chatUser: CometChat.User | undefined;
  textFormatters = [new HashTagTextFormatter()];

  ngOnInit() {
    CometChat.getUser("uid").then((user) => {
      this.chatUser = user;
    });
  }
}

Methods Reference

Field	Type	Description
`id`	`abstract readonly string`	Unique identifier for the formatter instance
`priority`	`number`	Execution order in the pipeline (lower = earlier, default 100)
`getRegex()`	`abstract method`	Returns the regex pattern for detecting formattable content
`format(text)`	`abstract method`	Applies formatting transformations and returns formatted text
`getFormattedText()`	`method`	Returns the stored formatted text after `format()` is called
`getOriginalText()`	`method`	Returns the original text before formatting
`getMetadata()`	`method`	Returns metadata extracted during formatting
`reset()`	`method`	Clears original text, formatted text, and metadata
`shouldFormat(text, message?)`	`method`	Returns whether this formatter should process the given text (default: true)

Formatters are applied in priority order (lower priority number = earlier in pipeline). The built-in URL formatter uses priority 10, mentions uses 20. Choose your custom formatter’s priority accordingly.

Override Methods

format
getRegex
shouldFormat
reset

The core method that applies formatting. Store original text, apply transformations, store metadata, and return the result.

format(text: string): string {
  if (!text) {
    this.originalText = "";
    this.formattedText = "";
    return "";
  }
  this.originalText = text;
  this.formattedText = this.customLogicToFormatText(text);
  return this.formattedText;
}

Returns the regex pattern used to detect formattable content.

getRegex(): RegExp {
  return /\B#(\w+)\b/g;
}

Optionally override to conditionally skip formatting.

shouldFormat(text: string, message?: CometChat.BaseMessage): boolean {
  // Only format text messages
  return message?.getType() === 'text';
}

Override to clear custom state alongside the base state.

override reset(): void {
  super.reset();
  // Clear any custom state
  this.customData = [];
}

Next Steps

Mentions Formatter

Add @mentions with styled tokens.

Message Composer

Customize the message input component.

All Guides

Browse all feature and formatter guides.

ShortCut Formatter

Implement text expansion shortcuts.

​Steps

​1. Import the base class

​2. Extend it

​3. Implement the regex pattern

​4. Implement the format method

​5. Optionally implement shouldFormat

​Example

​Methods Reference

​Override Methods

​Next Steps

Mentions Formatter

Message Composer

All Guides

ShortCut Formatter

Steps

1. Import the base class

2. Extend it

3. Implement the regex pattern

4. Implement the format method

5. Optionally implement shouldFormat

Example

Methods Reference

Override Methods

Next Steps