Custom Text Formatter

Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks in Angular.

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

Formatter output is always sanitized (via DOMPurify in the text bubble) before it is rendered — there is no way to bypass sanitization. Make sure your custom HTML is sanitizer-compatible (DOMPurify-safe). Wrapping formatted output in a <span> with a CSS class (e.g. "custom-hashtag") is only a styling and identification hook; it does NOT render the output as-is or bypass sanitization.

---

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

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 = [];
  }
}

Component Usage

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

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

getRegex

Returns the regex pattern used to detect formattable content.

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

shouldFormat

Optionally override to conditionally skip formatting.

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

reset

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.