> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-platform-docs-release.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Text Plugin

> Renders text messages with mentions, URLs, and markdown formatting.

<Accordion title="AI Integration Quick Reference">
  | Field                | Value                                                                                           |
  | -------------------- | ----------------------------------------------------------------------------------------------- |
  | Plugin ID            | `text`                                                                                          |
  | Package              | `@cometchat/chat-uikit-react`                                                                   |
  | Message Types        | `text`                                                                                          |
  | Message Categories   | `message`                                                                                       |
  | Included by Default  | Yes                                                                                             |
  | Bubble Component     | `CometChatTextBubble`                                                                           |
  | Conversation Preview | Message text (markdown stripped, mentions resolved)                                             |
  | Context Menu         | React, Reply, Reply in Thread, Copy, Edit, Info, Delete, Report, Mark Unread, Message Privately |
</Accordion>

## Overview

The Text plugin handles messages of type `text` in category `message`. It renders formatted text with support for @mentions, clickable URLs, and markdown syntax (bold, italic, strikethrough, code, blockquotes, lists).

<Info>
  **Live Preview** — interact with the text message bubble.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-text--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble-text--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "300px", border: "1px solid #e0e0e0"}} title="Text Message Bubble — Default" allow="clipboard-write" />

***

## Bubble Rendering

The text bubble displays the message text after running it through the formatter pipeline:

1. **Markdown** — `**bold**`, `_italic_`, `~~strike~~`, `` `code` ``, `> blockquote`, lists
2. **Mentions** — `<@uid:xxx>` tokens → styled `@DisplayName` chips
3. **URLs** — bare URLs → clickable links with `target="_blank"`

Long messages are truncated with a "Read more" toggle (configurable via `disableTruncation` in the plugin context).

***

## Context Menu Options

| Option            | Condition            | Action                                                                |
| ----------------- | -------------------- | --------------------------------------------------------------------- |
| React             | Always               | Opens emoji picker                                                    |
| Reply             | Always               | Sets reply-to in composer                                             |
| Reply in Thread   | Not in thread        | Opens thread view                                                     |
| Copy              | Always               | Copies plain text (markdown stripped, mentions resolved) to clipboard |
| Edit              | Sender only          | Enters edit mode in composer                                          |
| Info              | Sender only          | Opens message info panel                                              |
| Delete            | Sender only          | Shows delete confirmation                                             |
| Report            | Receiver only        | Opens flag/report dialog                                              |
| Mark Unread       | Receiver only        | Marks message as unread                                               |
| Message Privately | Receiver, group only | Opens 1:1 chat with sender                                            |

***

## Conversation Preview

Returns the message text with markdown stripped and mentions resolved to display names. Example: `@John: Check the **docs**` → `@John: Check the docs`

***

## Text Formatters

The text plugin provides three built-in formatters via `getTextFormatters()`:

| Formatter                    | Priority | What it does                                         |
| ---------------------------- | -------- | ---------------------------------------------------- |
| `CometChatMarkdownFormatter` | 10       | Converts markdown syntax to HTML                     |
| `CometChatMentionsFormatter` | 50       | Resolves `<@uid:xxx>` tokens to styled mention chips |
| `CometChatUrlFormatter`      | 100      | Converts bare URLs to clickable `<a>` tags           |

Formatters run in priority order (lower = first). Each receives the output of the previous formatter.

For custom formatters, see [Text Formatters](/ui-kit/react/v7/plugins/text-formatters).

***

## CSS Selectors

| Target           | Selector                            |
| ---------------- | ----------------------------------- |
| Bubble root      | `.cometchat-text-bubble`            |
| Text content     | `.cometchat-text-bubble__text`      |
| Mention chip     | `.cometchat-text-bubble__mention`   |
| Link             | `.cometchat-link`                   |
| Read more toggle | `.cometchat-text-bubble__read-more` |