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> <script>
import { adminCreateContributionMessage } from '@/graphql/adminCreateContributionMessage' import { adminCreateContributionMessage } from '@/graphql/adminCreateContributionMessage'
const STRIP_HTML_PATTERN = /(<([^>]+)>)/gi
export default { export default {
name: 'ContributionMessagesFormular', name: 'ContributionMessagesFormular',
props: { props: {
@ -49,7 +47,7 @@ export default {
mutation: adminCreateContributionMessage, mutation: adminCreateContributionMessage,
variables: { variables: {
contributionId: this.contributionId, contributionId: this.contributionId,
message: this.clearTextFromHtml, message: this.form.text,
}, },
}) })
.then((result) => { .then((result) => {
@ -67,9 +65,6 @@ export default {
}, },
}, },
computed: { computed: {
clearTextFromHtml() {
return this.form.text.replace(STRIP_HTML_PATTERN, '')
},
disabled() { disabled() {
if (this.form.text !== '') { if (this.form.text !== '') {
return false 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 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
<span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span> <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
<small class="ml-4 text-success">{{ $t('moderator') }}</small> <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>
<div v-else class="text-left is-not-moderator"> <div v-else class="text-left is-not-moderator">
<b-avatar variant="info"></b-avatar> <b-avatar variant="info"></b-avatar>
<span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span> <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
<span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</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>
</div> </div>
</template> </template>
<script> <script>
const PATTERN = 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 { export default {
name: 'ContributionMessagesListItem', name: 'ContributionMessagesListItem',
@ -29,7 +39,17 @@ export default {
}, },
computed: { computed: {
linkifiedMessage() { 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
}, },
}, },
} }