From 24b1584ff841fec131b02017f6c24fd6daa7be80 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 24 Oct 2022 05:55:28 +0200
Subject: [PATCH] linkify messages without v-html

---
 .../ContributionMessagesFormular.vue          |  7 +----
 .../slots/ContributionMessagesListItem.vue    | 28 ++++++++++++++++---
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
index c01ce8cb5..c9c285eef 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
@@ -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
diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index db832693f..014fa7393 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -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
     },
   },
 }