Skip to content

Commit

Permalink
(docs) add templates-text
Browse files Browse the repository at this point in the history
  • Loading branch information
@antoine92190
antoine92190 committed Sep 11, 2021
1 parent 4a62ad4 commit 89b053b
Showing 1 changed file with 40 additions and 24 deletions.
64 changes: 40 additions & 24 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,25 +223,26 @@ fetchMessages({ room, options }) {
| `room-actions`(8) | Array | - | `[]` |
| `menu-actions`(9) | Array | - | `[]` |
| `message-actions`(10) | Array | - | (10) |
| `templates-text`(11) | Array | - | `null` |
| `show-search` | Boolean | - | `true` |
| `show-add-room` | Boolean | - | `true` |
| `show-send-icon` | Boolean | - | `true` |
| `show-files` | Boolean | - | `true` |
| `show-audio` | Boolean | - | `true` |
| `show-emojis` | Boolean | - | `true` |
| `show-reaction-emojis` | Boolean | - | `true` |
| `show-new-messages-divider`(11) | Boolean | - | `true` |
| `show-footer`(12) | Boolean | - | `true` |
| `text-messages`(13) | Object | - | `null` |
| `text-formatting`(14) | Boolean | - | `true` |
| `link-options`(15) | Object | - | `{ disabled: false, target: '_blank' }` |
| `room-info-enabled` (16) | Boolean | - | `false` |
| `textarea-action-enabled`(17) | Boolean | - | `false` |
| `responsive-breakpoint`(18) | Number | - | `900` |
| `single-room`(19) | Boolean | - | `false` |
| `theme`(20) | Sring | - | `light` |
| `accepted-files`(21) | String | - | `*` |
| `styles`(22) | Object | - | (19) |
| `show-new-messages-divider`(12) | Boolean | - | `true` |
| `show-footer`(13) | Boolean | - | `true` |
| `text-messages`(14) | Object | - | `null` |
| `text-formatting`(15) | Boolean | - | `true` |
| `link-options`(16) | Object | - | `{ disabled: false, target: '_blank' }` |
| `room-info-enabled` (17) | Boolean | - | `false` |
| `textarea-action-enabled`(18) | Boolean | - | `false` |
| `responsive-breakpoint`(19) | Number | - | `900` |
| `single-room`(20) | Boolean | - | `false` |
| `theme`(21) | Sring | - | `light` |
| `accepted-files`(22) | String | - | `*` |
| `styles`(23) | Object | - | (23) |

**(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.)

Expand Down Expand Up @@ -329,11 +330,26 @@ messageActions="[
]"
```

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

**(12)** `show-footer` can be used to hide the room footer. For example to prevent users to send any message or media.
```javascript
templatesText="[
{
tag: 'help',
text: 'This is the help'
},
{
tag: 'action',
text: 'This is the action'
}
]"
```

**(12)** `show-new-messages-divider` can be used to show/hide the blue line divider between seen and unseen messages.

**(13)** `show-footer` can be used to hide the room footer. For example to prevent users to send any message or media.

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

```javascript
text-messages="{
Expand All @@ -351,7 +367,7 @@ text-messages="{
}"
```

**(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"`.
**(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"`.

| Style | Syntax | Example | Output |
| ----------------- | --------------- | -------------------------------------- | -------------------------------------- |
Expand All @@ -378,29 +394,29 @@ This is
multiline code
```

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

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

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

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

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

**(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.
**(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.

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

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

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

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

```javascript
styles="{
Expand Down

0 comments on commit 89b053b

Please sign in to comment.