linkify messages without v-html

frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue

@@ -25,8 +25,6 @@
 <script>
 import { createContributionMessage } from '../../graphql/mutations.js'
 
-const STRIP_HTML_PATTERN = /(<([^>]+)>)/gi
-
 export default {
   name: 'ContributionMessagesFormular',
   props: {
@@ -49,7 +47,7 @@ export default {
           mutation: createContributionMessage,
           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

frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue

@@ -4,20 +4,30 @@
       <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 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>
-      <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
+const 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',
@@ -38,7 +48,17 @@ export default {
       return this.storeName === this.moderationName
     },
     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
     },
   },
 }

frontend/src/components/Contributions/ContributionForm.vue

@@ -88,7 +88,6 @@
   </div>
 </template>
 <script>
-const PATTERN_STRIP_HTML = /(<([^>]+)>)/gi
 const PATTERN_NON_DIGIT = /\D/g
 
 export default {
@@ -112,7 +111,6 @@ export default {
     submit() {
       this.form.amount = this.form.amount.replace(PATTERN_NON_DIGIT, '')
       // spreading is needed for testing
-      this.form.memo = this.memoStripHtml
       this.$emit(this.form.id ? 'update-contribution' : 'set-contribution', { ...this.form })
       this.reset()
     },
@@ -132,9 +130,6 @@ export default {
     },
   },
   computed: {
-    memoStripHtml() {
-      return this.form.memo.replace(PATTERN_STRIP_HTML, '')
-    },
     minimalDate() {
       // sets the date to the 1st of the previous month
       let date = new Date(this.maximalDate) // has to be a new object, because of 'setMonth' changes the objects date