Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -3575,13 +3575,6 @@
"sdk/react-native/rate-limits",
"sdk/react-native/connection-status",
"sdk/react-native/managing-web-sockets-connections-manually",
{
"group": "Push Notifications",
"pages": [
"notifications/react-native-push-notifications-android",
"notifications/react-native-push-notifications-ios"
]
},
"sdk/react-native/push-notification-html-stripping"
]
},
Expand Down
9 changes: 7 additions & 2 deletions ui-kit/react-native/compact-message-composer.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"component": "CometChatCompactMessageComposer",
"package": "@cometchat/chat-uikit-react-native",
"import": "import { CometChatCompactMessageComposer } from \"@cometchat/chat-uikit-react-native\";",
"description": "Compact message input with optional rich text formatting (bold, italic, underline, strikethrough, code), auto-expanding input, attachments, mentions, voice recording, and message editing support.",
"description": "Compact message input with optional rich text formatting (bold, italic, underline, strikethrough, links, lists, blockquotes, inline code, code blocks), auto-expanding input, attachments, mentions, voice recording, and message editing support.",
"primaryOutput": {
"prop": "onSendButtonPress",
"type": "(message: CometChat.BaseMessage) => void"
Expand All @@ -26,7 +26,7 @@
"callbacks": {
"onSendButtonPress": "(message: CometChat.BaseMessage) => void",
"onChangeText": "(text: string) => void",
"onError": "(error: CometChat.CometChatException) => void",

Check warning on line 29 in ui-kit/react-native/compact-message-composer.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/compact-message-composer.mdx#L29

Did you really mean 'onError'?
"onVoiceRecordingStart": "() => void",
"onVoiceRecordingEnd": "(recordedFile: string) => void",
"onAttachmentClick": "() => void",
Expand Down Expand Up @@ -122,7 +122,7 @@

## Where It Fits

`CometChatCompactMessageComposer` is a [Component](/ui-kit/react-native/components-overview#components) that provides a compact, streamlined message input with optional rich text formatting capabilities. It supports bold, italic, underline, strikethrough, and code formatting, along with auto-expanding input, attachments, mentions, voice recording, and message editing.
`CometChatCompactMessageComposer` is a [Component](/ui-kit/react-native/components-overview#components) that provides a compact, streamlined message input with optional rich text formatting capabilities. Its formatting toolbar supports bold, italic, underline, strikethrough, links, lists, blockquotes, inline code, and code blocks, along with auto-expanding input, attachments, mentions, voice recording, and message editing.

This is a compact variant of [CometChatMessageComposer](/ui-kit/react-native/message-composer). It shares the same props API but adds rich text formatting controls, auto-expanding input configuration, and additional callbacks.

Expand Down Expand Up @@ -252,7 +252,7 @@

### Global UI Events

`CometChatUIEventHandler` emits events subscribable from anywhere in the application. Add listeners and remove them on cleanup.

Check warning on line 255 in ui-kit/react-native/compact-message-composer.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/compact-message-composer.mdx#L255

Did you really mean 'subscribable'?

| Event | Fires when | Payload |
| --- | --- | --- |
Expand Down Expand Up @@ -305,7 +305,12 @@
| Italic | Italic text |
| Underline | Underline text |
| Strikethrough | Strikethrough text |
| Link | Wrap the selected text in a link — opens a prompt for the URL |
| Numbered List | Convert the current line/block to an ordered list |
| Bulleted List | Convert the current line/block to an unordered list |
| Blockquote | Convert the current line/block to a blockquote |
| Code | Inline code |
| Code Block | Multi-line fenced code block |

### Toolbar Visibility Modes

Expand Down Expand Up @@ -379,7 +384,7 @@
|------|------|---------|-------------|
| `maxLines` | `number` | `5` | Maximum lines before scrolling is enabled |
| `minInputHeight` | `number` | `40` | Minimum height for the input in pixels |
| `maxInputHeight` | `number` | `144` (calculated from maxLines) | Maximum height for the input. Overrides `maxLines` if both provided |

Check warning on line 387 in ui-kit/react-native/compact-message-composer.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/compact-message-composer.mdx#L387

Did you really mean 'maxLines'?

```tsx lines
<CometChatCompactMessageComposer
Expand All @@ -405,11 +410,11 @@
| `SendButtonView` | `({ user, group, composerId }) => JSX.Element` | Send button |
| `attachmentOptions` | `CometChatMessageComposerAction[]` | Default attachment options list |
| `addAttachmentOptions` | `CometChatMessageComposerAction[]` | Additional attachment options appended to defaults |
| `textFormatters` | `CometChatTextFormatter[]` | Text formatting in composer |

Check warning on line 413 in ui-kit/react-native/compact-message-composer.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/compact-message-composer.mdx#L413

Did you really mean 'textFormatters'?

### textFormatters

Custom text formatters for the composer input. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react-native/mentions-formatter-guide).

Check warning on line 417 in ui-kit/react-native/compact-message-composer.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/compact-message-composer.mdx#L417

Did you really mean 'formatters'?

```tsx lines
import {
Expand Down Expand Up @@ -437,7 +442,7 @@
);
```

### attachmentOptions

Check warning on line 445 in ui-kit/react-native/compact-message-composer.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/compact-message-composer.mdx#L445

Did you really mean 'attachmentOptions'?

Override the default attachment options with custom actions.

Expand Down
6 changes: 3 additions & 3 deletions ui-kit/react-native/core-features.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -135,16 +135,16 @@ Mentions is a feature that enhances the interactivity and clarity of group or 1-

## Rich Text Formatting

Rich Text Formatting allows users to style their messages with bold, italic, underline, strikethrough, and inline code formatting. This brings richer expression to conversations and helps users emphasize key points, making communication clearer and more engaging.
Rich Text Formatting allows users to style their messages with bold, italic, underline, strikethrough, code, links, lists, blockquotes, and code blocks. This brings richer expression to conversations and helps users emphasize key points.

<Frame>
<img src="/images/rich-text-composer-only.png" />
</Frame>

| Components | Functionality |
| --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [CompactMessageComposer](/ui-kit/react-native/compact-message-composer) | [CompactMessageComposer](/ui-kit/react-native/compact-message-composer) provides a built-in rich text editor with formatting toolbar and native text selection menu items for bold, italic, underline, strikethrough, and code formatting. |
| [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) renders formatted messages with the appropriate styling applied, displaying bold, italic, underline, strikethrough, and code formatting as intended by the sender. |
| [CompactMessageComposer](/ui-kit/react-native/compact-message-composer#rich-text-formatting) | [CompactMessageComposer](/ui-kit/react-native/compact-message-composer#rich-text-formatting) provides a built-in rich text editor. Its formatting toolbar covers bold, italic, underline, strikethrough, links, lists, blockquotes, inline code, and code blocks; the native text selection menu offers bold, italic, underline, and strikethrough. |
| [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) renders formatted messages with the appropriate styling automatically applied, ensuring that rich text formatting is displayed exactly as intended by the sender. |

## Quoted Reply

Expand Down