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	Token → HTML rendering, live highlighting in the rich-text composer, toolbar authoring via `toolbarTrailingView`
Related	ShortCut Formatter \| Mentions Formatter \| All Guides

Goal

By the end of this guide you will have a text color formatter, working end to end:

Composer: a toolbar button inserts a color token. The composer tints the token in that color as you type.
Send: the token is stored on the message as plain text, {color:#e5484d}text{/color}.
Display: the token renders as colored text in message bubbles, the thread header, pinned messages, and message information.

Each step below explains one part of the formatter with an excerpt. The complete code at the end is ready to drop into your app.

For the full CometChatTextFormatter API, see the Formatter API Reference at the end of this page. For the built-in formatters, see the Mentions, URL, and Hashtag guides.

Prerequisites

Completed the Integration Guide
A chat screen using cometchat-message-list and cometchat-message-composer
The rich-text composer enabled ([enableRichText]="true", [hideRichTextToolbar]="false") — the toolbar button lives in its toolbar

How It Works

Composer        {color:#e5484d}world{/color}        (token visible, tinted as you type)
   │  send: the token is sent as plain text
   ▼
Message text    {color:#e5484d}world{/color}
   │  display: format()
   ▼
Every surface   <span class="cc-color cc-color-e5484d">world</span>

A formatter has two jobs here, and ColorFormatter does both:

Job	Where it runs	Methods
Display: token → HTML	Every surface the formatter is registered on	`getRegex`, `format`
Live highlight: tint the token as you type	The rich-text composer	The composer runs `getRegex` and `format` on the editor text

The rich-text composer re-runs your formatters shortly after typing stops. It wraps each match in a span and copies the class from the span your format() returns, so the token is tinted in place. The token itself stays visible in the composer; it becomes plain colored text once it is sent and rendered.

Step 1: Token and Display

The token is plain text, so it survives storage and delivery unchanged. format() turns it into a span that carries the color as a CSS class. File: src/app/formatters/color-formatter.ts (excerpt)

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

/** Stored token: `{color:#e5484d}text{/color}` — a 6-digit hex color, then the wrapped text. */
const TOKEN_REGEX = /\{color:#([0-9a-fA-F]{6})\}([\s\S]*?)\{\/color\}/g;

export class ColorFormatter extends CometChatTextFormatter {
  readonly id = 'color';
  override priority = 60;

  getRegex(): RegExp {
    return TOKEN_REGEX;
  }

  /** Token → HTML. Used by every display surface and by the composer's live highlight. */
  format(text: string): string {
    this.originalText = text ?? '';
    this.formattedText = this.originalText.replace(
      new RegExp(TOKEN_REGEX.source, TOKEN_REGEX.flags),
      (_match, hex: string, inner: string) =>
        `<span class="cc-color cc-color-${hex.toLowerCase()}">${inner}</span>`,
    );
    return this.formattedText;
  }
}

format() must store originalText, set formattedText, and return the formatted string — the pipeline reads those fields. Keep it fast: it runs on every text message render.

Formatters run in priority order, lowest first. The built-in URL formatter runs at 10, mentions at 20, and markdown at 30. At 60, the color token is replaced after the built-in formatters have rendered inside it.

Step 2: Style the Colors

Each color is a CSS class, not an inline style. Angular sanitizes HTML bound through [innerHTML] and removes style attributes, so an inline color would never reach the message bubble. Classes survive, so define one per color your button offers. The spans are rendered inside the UI Kit’s components, so put the rules in your global stylesheet, not in a component’s encapsulated styles. File: src/styles.css

.cc-color-e5484d { color: #e5484d; } /* red */
.cc-color-30a46c { color: #30a46c; } /* green */
.cc-color-0090ff { color: #0090ff; } /* blue */

A token whose color has no matching class still renders, just in the default text color. The composer renders toolbarTrailingView at the end of the rich-text toolbar, after the built-in groups and an automatically inserted separator. Its template context carries the composer, so a button can write into the editor with insertTextIntoRichTextEditor(). File: src/app/chat/chat.component.html (excerpt)

<ng-template #colorButtons let-composer="composer">
  <span class="color-buttons">
    @for (color of colors; track color.hex) {
      <button
        type="button"
        class="color-buttons__swatch"
        [style.color]="color.hex"
        [attr.aria-label]="'Insert ' + color.name + ' text'"
        (mousedown)="$event.preventDefault()"
        (click)="composer.insertTextIntoRichTextEditor('{color:' + color.hex + '}text{/color}')">
        A
      </button>
    }
  </span>
</ng-template>

(mousedown)="$event.preventDefault()" keeps focus in the editor. Without it, clicking the button moves focus out of the editor before your handler runs.

Offer only the colors you defined classes for in Step 2.

Step 4: Wire It Into the Composer

Pass the button to toolbarTrailingView and the formatter to textFormatters. The toolbar — and therefore the trailing view — renders only while the rich-text editor and its toolbar are enabled. File: src/app/chat/chat.component.html

<cometchat-message-list [user]="user" [textFormatters]="formatters"></cometchat-message-list>
<cometchat-message-composer
  [user]="user"
  [enableRichText]="true"
  [hideRichTextToolbar]="false"
  [textFormatters]="formatters"
  [toolbarTrailingView]="colorButtons">
</cometchat-message-composer>

Passing textFormatters replaces the built-in formatters on that component — it does not add to them. Include the built-ins in the list, or markdown, links, and mentions stop rendering:

formatters = [
  new CometChatMentionsFormatter(),
  new CometChatMarkdownFormatter(),
  new CometChatUrlFormatter(),
  new ColorFormatter(),
];

Step 5: Register It on Every Surface

A formatter only applies where it is registered. If a surface doesn’t have it, readers see the raw {color:…} token there. These components color the token:

Component	What it colors
`cometchat-message-list`	Text bubbles
`cometchat-message-composer`	The token while you type
`cometchat-thread-header`	The parent message at the top of a thread
`cometchat-pinned-messages`	Pinned message rows
`cometchat-message-information`	The message preview
`cometchat-conversations`	The last-message preview in each row
`cometchat-saved-messages`	Saved message rows

To set one list app-wide instead of per component, use textFormatters in Global Configuration — every component falls back to it when its own input is unset: File: src/app/app.config.ts (excerpt)

{
  provide: COMETCHAT_GLOBAL_CONFIG,
  useValue: {
    textFormatters: [
      new CometChatMentionsFormatter(),
      new CometChatMarkdownFormatter(),
      new CometChatUrlFormatter(),
      new ColorFormatter(),
    ],
  },
}

A thread panel has its own message list and composer, so register the formatter there too — or rely on the global configuration.

Complete Code

src/app/formatters/color-formatter.ts

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

/** Stored token: `{color:#e5484d}text{/color}` — a 6-digit hex color, then the wrapped text. */
const TOKEN_REGEX = /\{color:#([0-9a-fA-F]{6})\}([\s\S]*?)\{\/color\}/g;

/** Colors the toolbar offers. Each needs a matching `.cc-color-<hex>` rule in styles.css. */
export const COLORS = [
  { name: 'red', hex: '#e5484d' },
  { name: 'green', hex: '#30a46c' },
  { name: 'blue', hex: '#0090ff' },
];

export class ColorFormatter extends CometChatTextFormatter {
  readonly id = 'color';
  override priority = 60;

  getRegex(): RegExp {
    return TOKEN_REGEX;
  }

  format(text: string): string {
    this.originalText = text ?? '';
    this.formattedText = this.originalText.replace(
      new RegExp(TOKEN_REGEX.source, TOKEN_REGEX.flags),
      (_match, hex: string, inner: string) =>
        `<span class="cc-color cc-color-${hex.toLowerCase()}">${inner}</span>`,
    );
    return this.formattedText;
  }
}

src/styles.css

.cc-color-e5484d { color: #e5484d; }
.cc-color-30a46c { color: #30a46c; }
.cc-color-0090ff { color: #0090ff; }

.color-buttons { display: inline-flex; gap: 4px; }
.color-buttons__swatch {
  border: none;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

src/app/chat/chat.component.ts

import { Component, OnInit } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatMessageListComponent,
  CometChatMessageComposerComponent,
  CometChatMentionsFormatter,
  CometChatMarkdownFormatter,
  CometChatUrlFormatter,
} from '@cometchat/chat-uikit-angular';
import { ColorFormatter, COLORS } from '../formatters/color-formatter';

@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [CometChatMessageListComponent, CometChatMessageComposerComponent],
  templateUrl: './chat.component.html',
})
export class ChatComponent implements OnInit {
  user?: CometChat.User;
  colors = COLORS;
  formatters = [
    new CometChatMentionsFormatter(),
    new CometChatMarkdownFormatter(),
    new CometChatUrlFormatter(),
    new ColorFormatter(),
  ];

  ngOnInit(): void {
    CometChat.getUser('uid').then(user => (this.user = user));
  }
}

src/app/chat/chat.component.html

@if (user) {
  <cometchat-message-list [user]="user" [textFormatters]="formatters"></cometchat-message-list>
  <cometchat-message-composer
    [user]="user"
    [enableRichText]="true"
    [hideRichTextToolbar]="false"
    [textFormatters]="formatters"
    [toolbarTrailingView]="colorButtons">
  </cometchat-message-composer>
}

<ng-template #colorButtons let-composer="composer">
  <span class="color-buttons">
    @for (color of colors; track color.hex) {
      <button
        type="button"
        class="color-buttons__swatch"
        [style.color]="color.hex"
        [attr.aria-label]="'Insert ' + color.name + ' text'"
        (mousedown)="$event.preventDefault()"
        (click)="composer.insertTextIntoRichTextEditor('{color:' + color.hex + '}text{/color}')">
        A
      </button>
    }
  </span>
</ng-template>

Formatter API 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)

Formatter output is always sanitized before it is rendered — there is no way to bypass sanitization. Make sure your HTML is sanitizer-compatible: use a <span> with CSS classes rather than inline styles.

shouldFormat
reset

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

Message Composer → Toolbar Trailing View: the toolbar slot in detail
Global Configuration: set textFormatters once for every component
Threaded Messages: building the thread panel
Mentions Formatter: add @mentions with styled tokens

​Goal

​Prerequisites

​How It Works

​Step 1: Token and Display

​Step 2: Style the Colors

​Step 3: The Toolbar Button

​Step 4: Wire It Into the Composer

​Step 5: Register It on Every Surface

​Complete Code

​Formatter API Reference

​Next Steps

Goal

Prerequisites

How It Works

Step 1: Token and Display

Step 2: Style the Colors

Step 3: The Toolbar Button

Step 4: Wire It Into the Composer

Step 5: Register It on Every Surface

Complete Code

Formatter API Reference

Next Steps