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

linkify messages without v-html

Browse Source
This commit is contained in:
Moriz Wahl 2022-10-24 05:55:28 +02:00
parent d6cc240b7d
commit 24b1584ff8
2 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
View File

@ -25,8 +25,6 @@
<script>
import { adminCreateContributionMessage } from '@/graphql/adminCreateContributionMessage'
const STRIP_HTML_PATTERN = /(<([^>]+)>)/gi
export default {
name: 'ContributionMessagesFormular',
props: {
@ -49,7 +47,7 @@ export default {
mutation: adminCreateContributionMessage,
variables: {
contributionId: this.contributionId,
message: this.clearTextFromHtml,
message: this.form.text,
},
})
.then((result) => {
@ -67,9 +65,6 @@ export default {
},
},
computed: {
clearTextFromHtml() {
return this.form.text.replace(STRIP_HTML_PATTERN, '')
},
disabled() {
if (this.form.text !== '') {
return false

28
admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
View File

@ -5,19 +5,29 @@
<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('moderator') }}</small>
<div class="mt-2" v-html="linkifiedMessage"></div>
<div class="mt-2">
<span v-for="({ type, text }, index) in linkifiedMessage" :key="index">
<b-link v-if="type === 'link'" :to="text">{{ text }}</b-link>
<span v-else>{{ text }}</span>
</span>
</div>
</div>
<div v-else class="text-left is-not-moderator">
<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>
<div class="mt-2" v-html="linkifiedMessage"></div>
<div class="mt-2">
<span v-for="({ type, text }, index) in linkifiedMessage" :key="index">
<b-link v-if="type === 'link'" :to="text">{{ text }}</b-link>
<span v-else>{{ text }}</span>
</span>
</div>
</div>
</div>
</template>
<script>
const PATTERN =
/(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/gi
/(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/i
export default {
name: 'ContributionMessagesListItem',
@ -29,7 +39,17 @@ export default {
},
computed: {
linkifiedMessage() {
return this.message.message.replace(PATTERN, "<i><a href='$1' target='_blank'>$1</a></i>")
const linkified = []
let string = this.message.message
let match
while ((match = string.match(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
},
},
}