Skip to content

Commit 54a19bf

Browse files
antoine92190antoine92190
committed
(prop) add link-options
1 parent 4359764 commit 54a19bf

File tree

11 files changed

+76
-40
lines changed

11 files changed

+76
-40
lines changed

‎README.md

Lines changed: 43 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -177,36 +177,37 @@ fetchMessages({ room, options }) {
177177

178178
## Props API
179179

180-
| <div style="width:230px">Prop</div> | Type | Required | Default |
181-
| ----------------------------------- | ---------------- | -------- | ------- |
182-
| `height` | String | - | `600px` |
183-
| `current-user-id`(1) | [String, Number] | `true` | - |
184-
| `rooms` | Array | - | `[]` |
185-
| `loading-rooms`(2) | Boolean | - | `false` |
186-
| `rooms-loaded`(3) | Boolean | - | `false` |
187-
| `room-id`(4) | [String, Number] | - | `null` |
188-
| `load-first-room`(5) | Boolean | - | `true` |
189-
| `messages` | Array | - | `[]` |
190-
| `room-message`(6) | String | - | `null` |
191-
| `messages-loaded`(7) | Boolean | - | `false` |
192-
| `room-actions`(8) | Array | - | `[]` |
193-
| `menu-actions`(9) | Array | - | `[]` |
194-
| `message-actions`(10) | Array | - | (10) |
195-
| `show-add-room` | Boolean | - | `true` |
196-
| `show-send-icon` | Boolean | - | `true` |
197-
| `show-files` | Boolean | - | `true` |
198-
| `show-audio` | Boolean | - | `true` |
199-
| `show-emojis` | Boolean | - | `true` |
200-
| `show-reaction-emojis` | Boolean | - | `true` |
201-
| `show-new-messages-divider`(11) | Boolean | - | `true` |
202-
| `show-footer`(12) | Boolean | - | `true` |
203-
| `text-messages`(13) | Object | - | `null` |
204-
| `text-formatting`(14) | Boolean | - | `true` |
205-
| `responsive-breakpoint`(15) | Number | - | `900` |
206-
| `single-room`(16) | Boolean | - | `false` |
207-
| `theme`(17) | Sring | - | `light` |
208-
| `accepted-files`(18) | String | - | `*` |
209-
| `styles`(19) | Object | - | (19) |
180+
| <div style="width:230px">Prop</div> | Type | Required | Default |
181+
| ----------------------------------- | ---------------- | -------- | --------------------------------------- |
182+
| `height` | String | - | `600px` |
183+
| `current-user-id`(1) | [String, Number] | `true` | - |
184+
| `rooms` | Array | - | `[]` |
185+
| `loading-rooms`(2) | Boolean | - | `false` |
186+
| `rooms-loaded`(3) | Boolean | - | `false` |
187+
| `room-id`(4) | [String, Number] | - | `null` |
188+
| `load-first-room`(5) | Boolean | - | `true` |
189+
| `messages` | Array | - | `[]` |
190+
| `room-message`(6) | String | - | `null` |
191+
| `messages-loaded`(7) | Boolean | - | `false` |
192+
| `room-actions`(8) | Array | - | `[]` |
193+
| `menu-actions`(9) | Array | - | `[]` |
194+
| `message-actions`(10) | Array | - | (10) |
195+
| `show-add-room` | Boolean | - | `true` |
196+
| `show-send-icon` | Boolean | - | `true` |
197+
| `show-files` | Boolean | - | `true` |
198+
| `show-audio` | Boolean | - | `true` |
199+
| `show-emojis` | Boolean | - | `true` |
200+
| `show-reaction-emojis` | Boolean | - | `true` |
201+
| `show-new-messages-divider`(11) | Boolean | - | `true` |
202+
| `show-footer`(12) | Boolean | - | `true` |
203+
| `text-messages`(13) | Object | - | `null` |
204+
| `text-formatting`(14) | Boolean | - | `true` |
205+
| `link-options`(15) | Object | - | `{ disabled: false, target: '_blank' }` |
206+
| `responsive-breakpoint`(16) | Number | - | `900` |
207+
| `single-room`(17) | Boolean | - | `false` |
208+
| `theme`(18) | Sring | - | `light` |
209+
| `accepted-files`(19) | String | - | `*` |
210+
| `styles`(20) | Object | - | (19) |
210211

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

@@ -316,7 +317,7 @@ text-messages="{
316317
}"
317318
```
318319

319-
**(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 `:textFormatting="false"`.
320+
**(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"`.
320321

321322
| Style | Syntax | Example | Output |
322323
| ----------------- | --------------- | -------------------------------------- | -------------------------------------- |
@@ -343,17 +344,23 @@ This is
343344
multiline code
344345
```
345346

346-
**(15)** `responsive-breakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
347+
**(15)** `link-options` can be used to disable url links in messages, or change urls target. Ex:
347348

348-
**(16)** `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.
349+
```javascript
350+
:link-options="{ disabled: true, target: '_self' }"
351+
```
352+
353+
**(16)** `responsive-breakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
354+
355+
**(17)** `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.
349356

350-
**(17)** `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
357+
**(18)** `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
351358

352-
**(18)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
359+
**(19)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
353360

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

356-
**(19)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)
363+
**(20)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)
357364

358365
```javascript
359366
styles="{

‎src/ChatWindow/ChatWindow.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
:show-add-room="showAddRoom"
1414
:show-rooms-list="showRoomsList"
1515
:text-formatting="textFormatting"
16+
:link-options="linkOptions"
1617
:is-mobile="isMobile"
1718
@fetch-room="fetchRoom"
1819
@fetch-more-rooms="fetchMoreRooms"
@@ -46,6 +47,7 @@
4647
:single-room="singleRoom"
4748
:show-rooms-list="showRoomsList"
4849
:text-formatting="textFormatting"
50+
:link-options="linkOptions"
4951
:is-mobile="isMobile"
5052
:loading-rooms="loadingRooms"
5153
:room-info="$listeners.roomInfo"
@@ -125,6 +127,10 @@ export default {
125127
showNewMessagesDivider: { type: Boolean, default: true },
126128
showFooter: { type: Boolean, default: true },
127129
textFormatting: { type: Boolean, default: true },
130+
linkOptions: {
131+
type: Object,
132+
default: () => ({ disabled: false, target: '_blank' })
133+
},
128134
newMessage: { type: Object, default: null },
129135
roomMessage: { type: String, default: '' },
130136
acceptedFiles: { type: String, default: '*' }

‎src/ChatWindow/Message/Message.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
:message="message"
5151
:room-users="roomUsers"
5252
:text-formatting="textFormatting"
53+
:link-options="linkOptions"
5354
>
5455
<template v-for="(i, name) in $scopedSlots" #[name]="data">
5556
<slot :name="name" v-bind="data" />
@@ -68,6 +69,7 @@
6869
:content="message.content"
6970
:users="roomUsers"
7071
:text-formatting="textFormatting"
72+
:link-options="linkOptions"
7173
@open-user-tag="openUserTag"
7274
>
7375
<template v-for="(i, name) in $scopedSlots" #[name]="data">
@@ -81,6 +83,7 @@
8183
:message="message"
8284
:room-users="roomUsers"
8385
:text-formatting="textFormatting"
86+
:link-options="linkOptions"
8487
:image-hover="imageHover"
8588
@open-file="openFile"
8689
>
@@ -223,6 +226,7 @@ export default {
223226
showReactionEmojis: { type: Boolean, required: true },
224227
showNewMessagesDivider: { type: Boolean, required: true },
225228
textFormatting: { type: Boolean, required: true },
229+
linkOptions: { type: Object, required: true },
226230
emojisList: { type: Object, required: true },
227231
hideOptions: { type: Boolean, required: true }
228232
},

‎src/ChatWindow/Message/MessageImage.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
:content="message.content"
4141
:users="roomUsers"
4242
:text-formatting="textFormatting"
43+
:link-options="linkOptions"
4344
@open-user-tag="$emit('open-user-tag')"
4445
>
4546
<template v-for="(i, name) in $scopedSlots" #[name]="data">
@@ -65,6 +66,7 @@ export default {
6566
message: { type: Object, required: true },
6667
roomUsers: { type: Array, required: true },
6768
textFormatting: { type: Boolean, required: true },
69+
linkOptions: { type: Object, required: true },
6870
imageHover: { type: Boolean, required: true }
6971
},
7072

‎src/ChatWindow/Message/MessageReply.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
:content="message.replyMessage.content"
1919
:users="roomUsers"
2020
:text-formatting="textFormatting"
21+
:link-options="linkOptions"
2122
:reply="true"
2223
>
2324
<template v-for="(i, name) in $scopedSlots" #[name]="data">
@@ -40,6 +41,7 @@ export default {
4041
props: {
4142
message: { type: Object, required: true },
4243
textFormatting: { type: Boolean, required: true },
44+
linkOptions: { type: Object, required: true },
4345
roomUsers: { type: Array, required: true }
4446
},
4547

‎src/ChatWindow/Room/Room.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
:show-reaction-emojis="showReactionEmojis"
8383
:show-new-messages-divider="showNewMessagesDivider"
8484
:text-formatting="textFormatting"
85+
:link-options="linkOptions"
8586
:emojis-list="emojisList"
8687
:hide-options="hideOptions"
8788
@message-added="onMessageAdded"
@@ -126,6 +127,7 @@
126127
:room="room"
127128
:message-reply="messageReply"
128129
:text-formatting="textFormatting"
130+
:link-options="linkOptions"
129131
@reset-message="resetMessage"
130132
>
131133
<template v-for="(i, name) in $scopedSlots" #[name]="data">
@@ -382,6 +384,7 @@ export default {
382384
showFooter: { type: Boolean, required: true },
383385
acceptedFiles: { type: String, required: true },
384386
textFormatting: { type: Boolean, required: true },
387+
linkOptions: { type: Object, required: true },
385388
loadingRooms: { type: Boolean, required: true },
386389
roomInfo: { type: Function, default: null },
387390
textareaAction: { type: Function, default: null }

‎src/ChatWindow/Room/RoomMessageReply.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
:content="messageReply.content"
2121
:users="room.users"
2222
:text-formatting="textFormatting"
23+
:link-options="linkOptions"
2324
:reply="true"
2425
>
2526
<template v-for="(i, name) in $scopedSlots" #[name]="data">
@@ -57,7 +58,8 @@ export default {
5758
props: {
5859
room: { type: Object, required: true },
5960
messageReply: { type: Object, default: null },
60-
textFormatting: { type: Boolean, required: true }
61+
textFormatting: { type: Boolean, required: true },
62+
linkOptions: { type: Object, required: true }
6163
},
6264
6365
computed: {

‎src/ChatWindow/RoomsList/RoomContent.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
:users="room.users"
5757
:linkify="false"
5858
:text-formatting="textFormatting"
59+
:link-options="linkOptions"
5960
:single-line="true"
6061
>
6162
<template #deleted-icon="data">
@@ -135,6 +136,7 @@ export default {
135136
currentUserId: { type: [String, Number], required: true },
136137
room: { type: Object, required: true },
137138
textFormatting: { type: Boolean, required: true },
139+
linkOptions: { type: Object, required: true },
138140
textMessages: { type: Object, required: true },
139141
roomActions: { type: Array, required: true }
140142
},

‎src/ChatWindow/RoomsList/RoomsList.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
:current-user-id="currentUserId"
4141
:room="fRoom"
4242
:text-formatting="textFormatting"
43+
:link-options="linkOptions"
4344
:text-messages="textMessages"
4445
:room-actions="roomActions"
4546
@room-action-handler="$emit('room-action-handler', $event)"
@@ -91,6 +92,7 @@ export default {
9192
showRoomsList: { type: Boolean, required: true },
9293
showAddRoom: { type: Boolean, required: true },
9394
textFormatting: { type: Boolean, required: true },
95+
linkOptions: { type: Object, required: true },
9496
isMobile: { type: Boolean, required: true },
9597
rooms: { type: Array, required: true },
9698
loadingRooms: { type: Boolean, required: true },

‎src/components/FormatMessage.vue

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
'vac-text-tag': !singleLine && !reply && message.tag
1717
}"
1818
:href="message.href"
19-
:target="message.href ? '_blank' : null"
19+
:target="message.href ? linkOptions.target : null"
2020
@click="openTag(message)"
2121
>
2222
<slot name="deleted-icon" v-bind="{ deleted }">
@@ -65,12 +65,17 @@ export default {
6565
linkify: { type: Boolean, default: true },
6666
singleLine: { type: Boolean, default: false },
6767
reply: { type: Boolean, default: false },
68-
textFormatting: { type: Boolean, required: true }
68+
textFormatting: { type: Boolean, required: true },
69+
linkOptions: { type: Object, required: true }
6970
},
7071
7172
computed: {
7273
linkifiedMessage() {
73-
const message = formatString(this.formatTags(this.content), this.linkify)
74+
const message = formatString(
75+
this.formatTags(this.content),
76+
this.linkify && !this.linkOptions.disabled,
77+
this.linkOptions
78+
)
7479
7580
message.forEach(m => {
7681
m.url = this.checkType(m, 'url')

0 commit comments

Comments
 (0)