IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

computed for linkified message object in linkify message component

Browse Source
This commit is contained in:
Moriz Wahl 2022-10-25 02:58:09 +02:00
parent da7ac58a22
commit 5b9cfe5f28
2 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
View File

@ -4,14 +4,14 @@
<b-avatar variant="info"></b-avatar>
<span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
<span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
<linkify-message :linkifiedMessage="linkifiedMessage"></linkify-message>
<linkify-message :message="message.message"></linkify-message>
</div>
<div v-else class="is-moderator text-left">
<b-avatar square variant="warning"></b-avatar>
<span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
<span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
<small class="ml-4 text-success">{{ $t('community.moderator') }}</small>
<linkify-message :linkifiedMessage="linkifiedMessage"></linkify-message>
<linkify-message :message="message.message"></linkify-message>
</div>
</div>
</template>
@ -19,8 +19,6 @@
<script>
import LinkifyMessage from '@/components/ContributionMessages/LinkifyMessage.vue'
const LINK_PATTERN = /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/i
export default {
name: 'ContributionMessagesListItem',
components: {
@ -42,19 +40,6 @@ export default {
isNotModerator() {
return this.storeName === this.moderationName
},
linkifiedMessage() {
const linkified = []
let string = this.message.message
let match
while ((match = string.match(LINK_PATTERN))) {
if (match.index > 0)
linkified.push({ type: 'text', text: string.substring(0, match.index) })
linkified.push({ type: 'link', text: match[0] })
string = string.substring(match.index + match[0].length)
}
if (string.length > 0) linkified.push({ type: 'text', text: string })
return linkified
},
},
}
</script>

21
frontend/src/components/ContributionMessages/LinkifyMessage.vue
View File

@ -8,13 +8,30 @@
</template>
<script>
const LINK_REGEX_PATTERN = /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/i
export default {
name: 'LinkifyMessage',
props: {
linkifiedMessage: {
type: Array,
message: {
type: String,
required: true,
},
},
computed: {
linkifiedMessage() {
const linkified = []
let string = this.message
let match
while ((match = string.match(LINK_REGEX_PATTERN))) {
if (match.index > 0)
linkified.push({ type: 'text', text: string.substring(0, match.index) })
linkified.push({ type: 'link', text: match[0] })
string = string.substring(match.index + match[0].length)
}
if (string.length > 0) linkified.push({ type: 'text', text: string })
return linkified
},
},
}
</script>