## Usage
Here are the steps to create a `ShortCutFormatter` for CometChat using the CometChatTextFormatter:
1. Firstly, you need to import `CometChatTextFormatter` from the CometChat UI Kit angular library.
```javascript theme={null}
import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";
```
2. Now, extend the `CometChatTextFormatter` class to create your custom text formatter class. In this case, let's create a `HashTagTextFormatter`.
```java theme={null}
class ShortCutFormatter extends CometChatTextFormatter {
...
}
```
3. Set up the `trackCharacter` and define any necessary private fields.
```javascript theme={null}
this.setTrackingCharacter("!");
```
4. Implement the `onKeyDown` method to handle key events and trigger actions based on defined shortcuts.
```javascript theme={null}
onKeyDown(event: KeyboardEvent) {
// Your implementation
}
```
5. Implement any additional methods required for your custom formatter, such as opening and closing dialogs, handling button clicks, and formatting text.
```typescript theme={null}
openDialog(buttonText: string) {
// Your implementation
}
closeDialog() {
// Your implementation
}
handleButtonClick = () => {
// Your implementation
};
getFormattedText(text: string): string {
return text;
}
private getTextBeforeCaret(caretPosition: number): string {
// Your implementation
}
```
## Example
Below is an example demonstrating how to use a custom formatter class in components such as [CometChatConversations](/ui-kit/angular/conversations), [CometChatMessageList](/ui-kit/angular/message-list), [CometChatMessageComposer](/ui-kit/angular/message-composer).
