Skip to content

Commit e1acf79

Browse files
antoine92190antoine92190
committed
(prop) rework text-formatting
1 parent 9c72f2b commit e1acf79

File tree

13 files changed

+146
-109
lines changed

13 files changed

+146
-109
lines changed

‎README.md

Lines changed: 45 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -208,46 +208,46 @@ fetchMessages({ room, options }) {
208208

209209
## Props API
210210

211-
| <div style="width:230px">Prop</div> | Type | Required | Default |
212-
| ----------------------------------- | ---------------- | -------- | -------------------------------------------------- |
213-
| `height` | String | - | `600px` |
214-
| `current-user-id`(1) | [String, Number] | `true` | - |
215-
| `rooms` | Array | - | `[]` |
216-
| `rooms-order` | String | - | `desc` |
217-
| `loading-rooms`(2) | Boolean | - | `false` |
218-
| `rooms-loaded`(3) | Boolean | - | `false` |
219-
| `room-id`(4) | [String, Number] | - | `null` |
220-
| `load-first-room`(5) | Boolean | - | `true` |
221-
| `rooms-list-opened` | Boolean | - | `true` |
222-
| `messages` | Array | - | `[]` |
223-
| `room-message`(6) | String | - | `null` |
224-
| `messages-loaded`(7) | Boolean | - | `false` |
225-
| `room-actions`(8) | Array | - | `[]` |
226-
| `menu-actions`(9) | Array | - | `[]` |
227-
| `message-actions`(10) | Array | - | (10) |
228-
| `templates-text`(11) | Array | - | `null` |
229-
| `show-search` | Boolean | - | `true` |
230-
| `show-add-room` | Boolean | - | `true` |
231-
| `show-send-icon` | Boolean | - | `true` |
232-
| `show-files` | Boolean | - | `true` |
233-
| `show-audio` | Boolean | - | `true` |
234-
| `audio-bit-rate` | Number | - | `128` |
235-
| `audio-sample-rate` | Number | - | `44100` |
236-
| `show-emojis` | Boolean | - | `true` |
237-
| `show-reaction-emojis` | Boolean | - | `true` |
238-
| `show-new-messages-divider`(12) | Boolean | - | `true` |
239-
| `show-footer`(13) | Boolean | - | `true` |
240-
| `text-messages`(14) | Object | - | `null` |
241-
| `text-formatting`(15) | Boolean | - | `true` |
242-
| `link-options`(16) | Object | - | `{ disabled: false, target: '_blank', rel: null }` |
243-
| `room-info-enabled` (17) | Boolean | - | `false` |
244-
| `textarea-action-enabled`(18) | Boolean | - | `false` |
245-
| `responsive-breakpoint`(19) | Number | - | `900` |
246-
| `single-room`(20) | Boolean | - | `false` |
247-
| `scroll-distance`(21) | Number | - | `60` |
248-
| `theme`(22) | Sring | - | `light` |
249-
| `accepted-files`(23) | String | - | `*` |
250-
| `styles`(24) | Object | - | (23) |
211+
| <div style="width:230px">Prop</div> | Type | Required | Default |
212+
| ----------------------------------- | ---------------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
213+
| `height` | String | - | `600px` |
214+
| `current-user-id`(1) | [String, Number] | `true` | - |
215+
| `rooms` | Array | - | `[]` |
216+
| `rooms-order` | String | - | `desc` |
217+
| `loading-rooms`(2) | Boolean | - | `false` |
218+
| `rooms-loaded`(3) | Boolean | - | `false` |
219+
| `room-id`(4) | [String, Number] | - | `null` |
220+
| `load-first-room`(5) | Boolean | - | `true` |
221+
| `rooms-list-opened` | Boolean | - | `true` |
222+
| `messages` | Array | - | `[]` |
223+
| `room-message`(6) | String | - | `null` |
224+
| `messages-loaded`(7) | Boolean | - | `false` |
225+
| `room-actions`(8) | Array | - | `[]` |
226+
| `menu-actions`(9) | Array | - | `[]` |
227+
| `message-actions`(10) | Array | - | (10) |
228+
| `templates-text`(11) | Array | - | `null` |
229+
| `show-search` | Boolean | - | `true` |
230+
| `show-add-room` | Boolean | - | `true` |
231+
| `show-send-icon` | Boolean | - | `true` |
232+
| `show-files` | Boolean | - | `true` |
233+
| `show-audio` | Boolean | - | `true` |
234+
| `audio-bit-rate` | Number | - | `128` |
235+
| `audio-sample-rate` | Number | - | `44100` |
236+
| `show-emojis` | Boolean | - | `true` |
237+
| `show-reaction-emojis` | Boolean | - | `true` |
238+
| `show-new-messages-divider`(12) | Boolean | - | `true` |
239+
| `show-footer`(13) | Boolean | - | `true` |
240+
| `text-messages`(14) | Object | - | `null` |
241+
| `text-formatting`(15) | Object | - | ` {disabled: false, italic: '_', bold: '*', strike: '~', underline: '°', multilineCode: '```', inlineCode: ' `'}` |
242+
| `link-options`(16) | Object | - | `{ disabled: false, target: '_blank', rel: null }` |
243+
| `room-info-enabled` (17) | Boolean | - | `false` |
244+
| `textarea-action-enabled`(18) | Boolean | - | `false` |
245+
| `responsive-breakpoint`(19) | Number | - | `900` |
246+
| `single-room`(20) | Boolean | - | `false` |
247+
| `scroll-distance`(21) | Number | - | `60` |
248+
| `theme`(22) | Sring | - | `light` |
249+
| `accepted-files`(23) | String | - | `*` |
250+
| `styles`(24) | Object | - | (23) |
251251

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

@@ -372,7 +372,11 @@ text-messages="{
372372
}"
373373
```
374374

375-
**(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"`.
375+
**(15)** `text-formatting` can be used to add text formatting. Bold, italic, strikethrough, underline, inline code and multiline code formatting are currently available and can be used in conjonction.
376+
377+
- You can disable text formatting by passing the prop `:text-formatting="{disabled: true}"`.
378+
- You can change markdown characters, for example: `:text-formatting="{italic: '^'}"`
379+
- You can disable a specific markdown character, for example: `:text-formatting="{bold: null}"`
376380

377381
| Style | Syntax | Example | Output |
378382
| ----------------- | --------------- | -------------------------------------- | -------------------------------------- |
@@ -845,7 +849,6 @@ yarn add --save vue
845849
[messagesLoaded]="messagesLoaded"
846850
[showFiles]="true"
847851
[showEmojis]="true"
848-
[textFormatting]="true"
849852
[showReactionEmojis]="true"
850853
[showFooter]="true"
851854
(fetch-messages)="fetchMessages($event.detail[0])"

‎src/components/FormatMessage/FormatMessage.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@
33
class="vac-format-message-wrapper"
44
:class="{ 'vac-text-ellipsis': singleLine }"
55
>
6-
<div v-if="textFormatting" :class="{ 'vac-text-ellipsis': singleLine }">
6+
<div
7+
v-if="!textFormatting.disabled"
8+
:class="{ 'vac-text-ellipsis': singleLine }"
9+
>
710
<div
811
v-for="(message, i) in linkifiedMessage"
912
:key="i"
@@ -72,7 +75,7 @@ export default {
7275
linkify: { type: Boolean, default: true },
7376
singleLine: { type: Boolean, default: false },
7477
reply: { type: Boolean, default: false },
75-
textFormatting: { type: Boolean, required: true },
78+
textFormatting: { type: Object, required: true },
7679
linkOptions: { type: Object, required: true }
7780
},
7881
@@ -83,7 +86,7 @@ export default {
8386
const message = formatString(
8487
this.formatTags(this.content),
8588
this.linkify && !this.linkOptions.disabled,
86-
this.linkOptions
89+
this.textFormatting
8790
)
8891
8992
message.forEach(m => {

‎src/lib/ChatWindow.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,18 @@ export default {
137137
showReactionEmojis: { type: Boolean, default: true },
138138
showNewMessagesDivider: { type: Boolean, default: true },
139139
showFooter: { type: Boolean, default: true },
140-
textFormatting: { type: Boolean, default: true },
140+
textFormatting: {
141+
type: Object,
142+
default: () => ({
143+
disabled: false,
144+
italic: '_',
145+
bold: '*',
146+
strike: '~',
147+
underline: '°',
148+
multilineCode: '```',
149+
inlineCode: '`'
150+
})
151+
},
141152
linkOptions: {
142153
type: Object,
143154
default: () => ({ disabled: false, target: '_blank', rel: null })

‎src/lib/Message/Message.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export default {
222222
newMessages: { type: Array, default: () => [] },
223223
showReactionEmojis: { type: Boolean, required: true },
224224
showNewMessagesDivider: { type: Boolean, required: true },
225-
textFormatting: { type: Boolean, required: true },
225+
textFormatting: { type: Object, required: true },
226226
linkOptions: { type: Object, required: true },
227227
hideOptions: { type: Boolean, required: true }
228228
},

‎src/lib/Message/MessageFiles/MessageFiles.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default {
6060
currentUserId: { type: [String, Number], required: true },
6161
message: { type: Object, required: true },
6262
roomUsers: { type: Array, required: true },
63-
textFormatting: { type: Boolean, required: true },
63+
textFormatting: { type: Object, required: true },
6464
linkOptions: { type: Object, required: true }
6565
},
6666

‎src/lib/Message/MessageReply/MessageReply.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default {
8181
8282
props: {
8383
message: { type: Object, required: true },
84-
textFormatting: { type: Boolean, required: true },
84+
textFormatting: { type: Object, required: true },
8585
linkOptions: { type: Object, required: true },
8686
roomUsers: { type: Array, required: true }
8787
},

‎src/lib/Room/Room.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -374,7 +374,7 @@ export default {
374374
showNewMessagesDivider: { type: Boolean, required: true },
375375
showFooter: { type: Boolean, required: true },
376376
acceptedFiles: { type: String, required: true },
377-
textFormatting: { type: Boolean, required: true },
377+
textFormatting: { type: Object, required: true },
378378
linkOptions: { type: Object, required: true },
379379
loadingRooms: { type: Boolean, required: true },
380380
roomInfoEnabled: { type: Boolean, required: true },

‎src/lib/Room/RoomMessageReply/RoomMessageReply.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export default {
9393
props: {
9494
room: { type: Object, required: true },
9595
messageReply: { type: Object, default: null },
96-
textFormatting: { type: Boolean, required: true },
96+
textFormatting: { type: Object, required: true },
9797
linkOptions: { type: Object, required: true }
9898
},
9999

‎src/lib/RoomsList/RoomContent/RoomContent.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export default {
137137
props: {
138138
currentUserId: { type: [String, Number], required: true },
139139
room: { type: Object, required: true },
140-
textFormatting: { type: Boolean, required: true },
140+
textFormatting: { type: Object, required: true },
141141
linkOptions: { type: Object, required: true },
142142
textMessages: { type: Object, required: true },
143143
roomActions: { type: Array, required: true }

‎src/lib/RoomsList/RoomsList.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export default {
9292
showRoomsList: { type: Boolean, required: true },
9393
showSearch: { type: Boolean, required: true },
9494
showAddRoom: { type: Boolean, required: true },
95-
textFormatting: { type: Boolean, required: true },
95+
textFormatting: { type: Object, required: true },
9696
linkOptions: { type: Object, required: true },
9797
isMobile: { type: Boolean, required: true },
9898
rooms: { type: Array, required: true },

0 commit comments

Comments
 (0)