Skip to content

Commit f970222

Browse files
antoine92190antoine92190
committed
(fix) remove v-html to avoid unexpected formatting
1 parent 4a0bd84 commit f970222

File tree

3 files changed

+49
-63
lines changed

3 files changed

+49
-63
lines changed

‎src/ChatWindow/Message.vue

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<template>
22
<div>
3-
<div class="card-date" v-if="showDate" v-html="message.date"></div>
4-
<div
5-
class="line-new"
6-
v-if="newMessage._id === message._id"
7-
v-html="textMessages.NEW_MESSAGES"
8-
></div>
3+
<div v-if="showDate" class="card-date">
4+
{{ message.date }}
5+
</div>
6+
7+
<div v-if="newMessage._id === message._id" class="line-new">
8+
{{ textMessages.NEW_MESSAGES }}
9+
</div>
910

1011
<div
1112
class="message-box"
@@ -35,14 +36,14 @@
3536
'username-reply': !message.deleted && message.replyMessage
3637
}"
3738
>
38-
<span v-html="message.username"></span>
39+
<span>{{ message.username }}</span>
3940
</div>
4041

4142
<div
4243
v-if="!message.deleted && message.replyMessage"
4344
class="reply-message"
4445
>
45-
<div class="reply-username" v-html="replyUsername"></div>
46+
<div class="reply-username">{{ replyUsername }}</div>
4647

4748
<div class="image-reply-container" v-if="isImageReply">
4849
<div
@@ -53,18 +54,15 @@
5354
></div>
5455
</div>
5556

56-
<div
57-
class="reply-content"
58-
v-html="message.replyMessage.content"
59-
></div>
57+
<div class="reply-content">{{ message.replyMessage.content }}</div>
6058
</div>
6159

6260
<div v-if="message.deleted">
63-
<span v-html="textMessages.MESSAGE_DELETED"></span>
61+
<span>{{ textMessages.MESSAGE_DELETED }}</span>
6462
</div>
6563

6664
<div v-else-if="!message.file">
67-
<span v-html="linkifiedMessage"></span>
65+
<span>{{ linkifiedMessage }}</span>
6866
</div>
6967

7068
<div class="image-container" v-else-if="isImage">
@@ -100,7 +98,7 @@
10098
</div>
10199
</transition>
102100
</div>
103-
<span v-html="linkifiedMessage"></span>
101+
<span>{{ linkifiedMessage }}</span>
104102
</div>
105103

106104
<div v-else class="file-message">
@@ -110,14 +108,14 @@
110108
>
111109
<svg-icon name="document" />
112110
</div>
113-
<span v-html="linkifiedMessage"></span>
111+
<span>{{ linkifiedMessage }}</span>
114112
</div>
115113

116114
<div class="text-timestamp">
117115
<div class="icon-edited" v-if="message.edited && !message.deleted">
118116
<svg-icon name="pencil" />
119117
</div>
120-
<span v-html="message.timestamp"></span>
118+
<span>{{ message.timestamp }}</span>
121119
<span v-if="isMessageSeen">
122120
<svg-icon name="checkmark" class="icon-check" />
123121
</span>
@@ -188,11 +186,9 @@
188186
v-for="action in filteredMessageActions"
189187
:key="action.name"
190188
>
191-
<div
192-
class="menu-item"
193-
v-html="action.title"
194-
@click="messageActionHandler(action)"
195-
></div>
189+
<div class="menu-item" @click="messageActionHandler(action)">
190+
{{ action.title }}
191+
</div>
196192
</div>
197193
</div>
198194
</div>
@@ -224,7 +220,7 @@
224220
<script>
225221
import SvgIcon from './SvgIcon'
226222
import vClickOutside from 'v-click-outside'
227-
import linkifyHtml from 'linkifyjs/html';
223+
import linkifyHtml from 'linkifyjs/html'
228224
import Loader from './Loader'
229225
import EmojiPicker from './EmojiPicker'
230226

‎src/ChatWindow/Room.vue

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@
2121
:style="{ 'background-image': `url('${room.avatar}')` }"
2222
></div>
2323
<div>
24-
<div class="room-name" v-html="room.roomName"></div>
25-
<div
26-
v-if="typingUsers"
27-
class="room-info"
28-
v-html="typingUsers + ' ' + textMessages.IS_TYPING"
29-
></div>
30-
<div v-else class="room-info" v-html="userStatus"></div>
24+
<div class="room-name">{{ room.roomName }}</div>
25+
<div v-if="typingUsers" class="room-info">
26+
{{ typingUsers }} {{ textMessages.IS_TYPING }}
27+
</div>
28+
<div v-else class="room-info">
29+
{{ userStatus }}
30+
</div>
3131
</div>
3232
</div>
3333
<div
@@ -45,11 +45,9 @@
4545
>
4646
<div class="menu-list">
4747
<div v-for="action in menuActions" :key="action.name">
48-
<div
49-
class="menu-item"
50-
v-html="action.title"
51-
@click="menuActionHandler(action)"
52-
></div>
48+
<div class="menu-item" @click="menuActionHandler(action)">
49+
{{ action.title }}
50+
</div>
5351
</div>
5452
</div>
5553
</div>
@@ -61,18 +59,12 @@
6159
<div class="messages-container">
6260
<div :class="{ 'messages-hidden': loadingMessages }">
6361
<transition name="fade-message">
64-
<div
65-
class="text-started"
66-
v-if="showNoMessages"
67-
v-html="textMessages.MESSAGES_EMPTY"
68-
></div>
69-
<div
70-
class="text-started"
71-
v-if="showMessagesStarted"
72-
v-html="
73-
textMessages.CONVERSATION_STARTED + ' ' + messages[0].date
74-
"
75-
></div>
62+
<div class="text-started" v-if="showNoMessages">
63+
{{ textMessages.MESSAGES_EMPTY }}
64+
</div>
65+
<div class="text-started" v-if="showMessagesStarted">
66+
{{ textMessages.CONVERSATION_STARTED }} {{ messages[0].date }}
67+
</div>
7668
</transition>
7769
<transition name="fade-message">
7870
<infinite-loading
@@ -132,8 +124,8 @@
132124
class="image-reply"
133125
/>
134126
<div class="reply-info">
135-
<div class="reply-username" v-html="messageReply.username"></div>
136-
<div class="reply-content" v-html="messageReply.content"></div>
127+
<div class="reply-username">{{ messageReply.username }}</div>
128+
<div class="reply-content">{{ messageReply.content }}</div>
137129
</div>
138130
</div>
139131

@@ -163,7 +155,7 @@
163155
<div class="icon-file">
164156
<svg-icon name="file" />
165157
</div>
166-
<div class="file-message" v-html="message"></div>
158+
<div class="file-message">{{ message }}</div>
167159
<div class="svg-button icon-remove" @click="resetMessage(null, true)">
168160
<svg-icon name="close" />
169161
</div>

‎src/ChatWindow/RoomsList.vue

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,9 @@
2424

2525
<loader :show="loadingRooms"></loader>
2626

27-
<div
28-
class="rooms-empty"
29-
v-if="!loadingRooms && !rooms.length"
30-
v-html="textMessages.ROOMS_EMPTY"
31-
></div>
27+
<div v-if="!loadingRooms && !rooms.length" class="rooms-empty">
28+
{{ textMessages.ROOMS_EMPTY }}
29+
</div>
3230

3331
<div v-if="!loadingRooms" class="room-list">
3432
<div
@@ -50,12 +48,12 @@
5048
class="state-circle"
5149
:class="{ 'state-online': userStatus(room) === 'online' }"
5250
></div>
53-
<div class="room-name text-ellipsis" v-html="room.roomName"></div>
54-
<div
55-
v-if="room.lastMessage"
56-
class="text-date"
57-
v-html="room.lastMessage.timestamp"
58-
></div>
51+
<div class="room-name text-ellipsis">
52+
{{ room.roomName }}
53+
</div>
54+
<div v-if="room.lastMessage" class="text-date">
55+
{{ room.lastMessage.timestamp }}
56+
</div>
5957
</div>
6058
<div
6159
class="text-last text-ellipsis"
@@ -65,8 +63,8 @@
6563
<span v-if="room.lastMessage.seen">
6664
<svg-icon name="checkmark" class="icon-check" />
6765
</span>
68-
<span v-html="getLastUsername(room)"></span>
69-
<span v-html="room.lastMessage.content"></span>
66+
<span>{{ getLastUsername(room) }}</span>
67+
<span>{{ room.lastMessage.content }}</span>
7068
</div>
7169
</div>
7270
</div>

0 commit comments

Comments
 (0)