Skip to content

Commit 89b053b

Browse files
antoine92190antoine92190
committed
(docs) add templates-text
1 parent 4a62ad4 commit 89b053b

File tree

1 file changed

+40
-24
lines changed

1 file changed

+40
-24
lines changed

‎README.md

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -223,25 +223,26 @@ fetchMessages({ room, options }) {
223223
| `room-actions`(8) | Array | - | `[]` |
224224
| `menu-actions`(9) | Array | - | `[]` |
225225
| `message-actions`(10) | Array | - | (10) |
226+
| `templates-text`(11) | Array | - | `null` |
226227
| `show-search` | Boolean | - | `true` |
227228
| `show-add-room` | Boolean | - | `true` |
228229
| `show-send-icon` | Boolean | - | `true` |
229230
| `show-files` | Boolean | - | `true` |
230231
| `show-audio` | Boolean | - | `true` |
231232
| `show-emojis` | Boolean | - | `true` |
232233
| `show-reaction-emojis` | Boolean | - | `true` |
233-
| `show-new-messages-divider`(11) | Boolean | - | `true` |
234-
| `show-footer`(12) | Boolean | - | `true` |
235-
| `text-messages`(13) | Object | - | `null` |
236-
| `text-formatting`(14) | Boolean | - | `true` |
237-
| `link-options`(15) | Object | - | `{ disabled: false, target: '_blank' }` |
238-
| `room-info-enabled` (16) | Boolean | - | `false` |
239-
| `textarea-action-enabled`(17) | Boolean | - | `false` |
240-
| `responsive-breakpoint`(18) | Number | - | `900` |
241-
| `single-room`(19) | Boolean | - | `false` |
242-
| `theme`(20) | Sring | - | `light` |
243-
| `accepted-files`(21) | String | - | `*` |
244-
| `styles`(22) | Object | - | (19) |
234+
| `show-new-messages-divider`(12) | Boolean | - | `true` |
235+
| `show-footer`(13) | Boolean | - | `true` |
236+
| `text-messages`(14) | Object | - | `null` |
237+
| `text-formatting`(15) | Boolean | - | `true` |
238+
| `link-options`(16) | Object | - | `{ disabled: false, target: '_blank' }` |
239+
| `room-info-enabled` (17) | Boolean | - | `false` |
240+
| `textarea-action-enabled`(18) | Boolean | - | `false` |
241+
| `responsive-breakpoint`(19) | Number | - | `900` |
242+
| `single-room`(20) | Boolean | - | `false` |
243+
| `theme`(21) | Sring | - | `light` |
244+
| `accepted-files`(22) | String | - | `*` |
245+
| `styles`(23) | Object | - | (23) |
245246

246247
**(1)** `current-user-id` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
247248

@@ -329,11 +330,26 @@ messageActions="[
329330
]"
330331
```
331332

332-
**(11)** `show-new-messages-divider` can be used to show/hide the blue line divider between seen and unseen messages.
333+
**(11)** `templates-text` can be used to add autocomplete template text when typing `/` in the room textarea. Ex:
333334

334-
**(12)** `show-footer` can be used to hide the room footer. For example to prevent users to send any message or media.
335+
```javascript
336+
templatesText="[
337+
{
338+
tag: 'help',
339+
text: 'This is the help'
340+
},
341+
{
342+
tag: 'action',
343+
text: 'This is the action'
344+
}
345+
]"
346+
```
347+
348+
**(12)** `show-new-messages-divider` can be used to show/hide the blue line divider between seen and unseen messages.
349+
350+
**(13)** `show-footer` can be used to hide the room footer. For example to prevent users to send any message or media.
335351

336-
**(13)** `text-messages` can be used to replace default i18n texts. Ex:
352+
**(14)** `text-messages` can be used to replace default i18n texts. Ex:
337353

338354
```javascript
339355
text-messages="{
@@ -351,7 +367,7 @@ text-messages="{
351367
}"
352368
```
353369

354-
**(14)** `text-formatting` can be used to add text formatting. Currently, bold, italic, strikethrough, underline, inline code and multiline code formatting are available and can be used in conjonction. You can disable text formatting by passing the prop as `:text-formatting="false"`.
370+
**(15)** `text-formatting` can be used to add text formatting. Currently, bold, italic, strikethrough, underline, inline code and multiline code formatting are available and can be used in conjonction. You can disable text formatting by passing the prop as `:text-formatting="false"`.
355371

356372
| Style | Syntax | Example | Output |
357373
| ----------------- | --------------- | -------------------------------------- | -------------------------------------- |
@@ -378,29 +394,29 @@ This is
378394
multiline code
379395
```
380396

381-
**(15)** `link-options` can be used to disable url links in messages, or change urls target. Ex:
397+
**(16)** `link-options` can be used to disable url links in messages, or change urls target. Ex:
382398

383399
```javascript
384400
:link-options="{ disabled: true, target: '_self' }"
385401
```
386402

387-
**(16)** `room-info-enabled` can be used to trigger an event after clicking the room header component.<br>
403+
**(17)** `room-info-enabled` can be used to trigger an event after clicking the room header component.<br>
388404
You can then use the [room-info](#events-api) event to call your own action after clicking the header.
389405

390-
**(17)** `textarea-action-enabled` can be used to add an extra icon on the right of the textarea<br>
406+
**(18)** `textarea-action-enabled` can be used to add an extra icon on the right of the textarea<br>
391407
You can then use the [textarea-action-handler](#events-api) event to call your own action after clicking the icon.
392408

393-
**(18)** `responsive-breakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
409+
**(19)** `responsive-breakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
394410

395-
**(19)** `single-room` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
411+
**(20)** `single-room` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
396412

397-
**(20)** `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
413+
**(21)** `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
398414

399-
**(21)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
415+
**(22)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
400416

401417
Example: set `"accepted-files="image/png, image/jpeg, application/pdf"` to allow `JPG` `PNG` and `PDF` files only
402418

403-
**(22)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)
419+
**(23)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)
404420

405421
```javascript
406422
styles="{

0 commit comments

Comments
 (0)