Skip to main content

Documentation Index

Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

FieldValue
Package@cometchat/chat-uikit-angular
Key classShortcutFormatter (extends CometChatTextFormatter)
Required setupCometChatUIKit.init(uiKitSettings) then CometChatUIKit.login("UID")
Track character! — triggers shortcut expansion in the message composer
RelatedCustom Text Formatter | All Guides
ShortCutFormatter extends CometChatTextFormatter to expand shortcodes (like !hb) into full text via the Message Shortcuts extension. When a user types a shortcut, a dialog appears with the expansion — clicking it inserts the text.

​
Steps

​
1. Import the base class

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

​
2. Extend it

class ShortCutFormatter extends CometChatTextFormatter {
  readonly id = "shortcut-formatter";
  override priority = 50;

  getRegex(): RegExp {
    return /!([a-zA-Z]+)/g;
  }

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

​
3. Fetch shortcuts from the extension

constructor() {
  CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
    .then((data: any) => {
      if (data?.shortcuts) {
        this.shortcuts = data.shortcuts;
      }
    });
}

​
4. Handle dialog and formatting methods

openDialog(buttonText: string, shortcut: string) { /* ... */ }
closeDialog() { /* ... */ }
handleButtonClick(buttonText: string) { /* ... */ }

​
Example

Fetches shortcuts from the Message Shortcuts extension on init. On keyUp, checks if the text before the caret matches a shortcut and opens a dialog with the expansion.
import { CometChatTextFormatter, CometChatUIEvents, PanelAlignment } from "@cometchat/chat-uikit-angular";
import { CometChat } from "@cometchat/chat-sdk-javascript";

export class ShortcutFormatter extends CometChatTextFormatter {
  readonly id = "shortcut-formatter";
  override priority = 50;

  private shortcuts: { [key: string]: string } = {};
  private dialogIsOpen = false;
  private currentShortcut: string | null = null;

  constructor() {
    super();
    CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
      .then((data: any) => {
        if (data?.shortcuts) {
          this.shortcuts = data.shortcuts;
        }
      })
      .catch((error) => console.error("Error fetching shortcuts", error));
  }

  getRegex(): RegExp {
    return /!([a-zA-Z]+)/g;
  }

  format(text: string): string {
    // Shortcut formatter doesn't transform display text — it only triggers
    // expansion dialogs in the composer. Pass text through unchanged.
    this.originalText = text;
    this.formattedText = text;
    return text;
  }

  openDialog(buttonText: string, shortcut: string) {
    // Note: In a real implementation, you would use a TemplateRef via a component.
    // The CometChatUIEvents.ccShowPanel expects a TemplateRef, not an HTMLElement.
    // Use a component with ViewChild to create the panel template.
    CometChatUIEvents.ccShowPanel.next({
      position: PanelAlignment.messageListFooter,
    });
    this.dialogIsOpen = true;
    this.currentShortcut = shortcut;
  }

  closeDialog() {
    CometChatUIEvents.ccHidePanel.next(PanelAlignment.messageListFooter);
    this.dialogIsOpen = false;
    this.currentShortcut = null;
  }

  handleButtonClick(buttonText: string) {
    // The expansion text is available via the shortcuts map
    const shortcut = Object.keys(this.shortcuts).find(
      (key) => this.shortcuts[key] === buttonText
    );
    if (shortcut) {
      // Emit the expansion text for the composer to insert
      this.metadata = { expansion: this.shortcuts[shortcut] };
    }
    if (this.dialogIsOpen) {
      this.closeDialog();
    }
  }
}
The Message Shortcuts extension must be enabled in your CometChat Dashboard for this formatter to work. Configure your shortcuts in the Dashboard under Extensions → Message Shortcuts.

​
Next Steps

Custom Text Formatter

Build custom inline text patterns.

Message Composer

Customize the message input component.

All Guides

Browse all feature and formatter guides.

Mentions Formatter

Add @mentions with styled tokens.