From 89b053ba25817b43dfeedb9fa889bdcd19f3072e Mon Sep 17 00:00:00 2001 From: antoine92190 Date: Sat, 11 Sep 2021 09:44:21 +0200 Subject: [PATCH] (docs) add templates-text --- README.md | 64 ++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 40 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index ef7a19b4..c9942585 100644 --- a/README.md +++ b/README.md @@ -223,6 +223,7 @@ 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` | @@ -230,18 +231,18 @@ fetchMessages({ room, options }) { | `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.) @@ -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="{ @@ -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 | | ----------------- | --------------- | -------------------------------------- | -------------------------------------- | @@ -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.
+**(17)** `room-info-enabled` can be used to trigger an event after clicking the room header component.
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
+**(18)** `textarea-action-enabled` can be used to add an extra icon on the right of the textarea
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="{