find link and replace to <a> element

admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue

@@ -23,5 +23,25 @@ export default {
       },
     },
   },
+  data() {
+    return {
+      pattern:
+        // eslint-disable-next-line no-useless-escape
+        /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*))/gi,
+      messageObject: this.message,
+    }
+  },
+  methods: {
+    linkify(inputText) {
+      // console.log(inputText.match(this.pattern))
+      this.messageObject.message = inputText.replace(
+        this.pattern,
+        "<i><a href='$1' target='_blank'>$1</a></i>",
+      )
+    },
+  },
+  created() {
+    this.linkify(this.messageObject.message)
+  },
 }
 </script>

admin/src/components/ContributionMessages/slots/IsModerator.vue

@@ -5,7 +5,7 @@
       <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">{{ message.message }}</div>
+      <div class="mt-2" v-html="message.message"></div>
     </div>
   </div>
 </template>

admin/src/components/ContributionMessages/slots/IsNotModerator.vue

@@ -4,7 +4,7 @@
       <b-avatar :text="initialLetters" 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">{{ message.message }}</div>
+      <div class="mt-2" v-html="message.message"></div>
     </div>
   </div>
 </template>

frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="contribution-messages-list-item">
-    <is-not-moderator v-if="isNotModerator" :message="message"></is-not-moderator>
+    <is-not-moderator v-if="isNotModerator" :message="messageObject"></is-not-moderator>
     <is-moderator v-else :message="message"></is-moderator>
   </div>
 </template>
@@ -25,6 +25,9 @@ export default {
   },
   data() {
     return {
+      // eslint-disable-next-line no-useless-escape
+      pattern: /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*))/gi,
+      messageObject: this.message,
       storeName: `${this.$store.state.firstName} ${this.$store.state.lastName}`,
       moderationName: `${this.message.userFirstName} ${this.message.userLastName}`,
     }
@@ -34,5 +37,17 @@ export default {
       return this.storeName === this.moderationName
     },
   },
+  methods: {
+    linkify(inputText) {
+      // console.log(inputText.match(this.pattern))
+      this.messageObject.message = inputText.replace(
+        this.pattern,
+        "<i><a href='$1' target='_blank'>$1</a></i>",
+      )
+    },
+  },
+  created() {
+    this.linkify(this.messageObject.message)
+  },
 }
 </script>

frontend/src/components/ContributionMessages/slots/IsModerator.vue

@@ -4,7 +4,7 @@
     <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">{{ message.message }}</div>
+    <div class="mt-2" v-html="message.message"></div>
   </div>
 </template>
 <script>

frontend/src/components/ContributionMessages/slots/IsNotModerator.vue

@@ -4,7 +4,7 @@
       <b-avatar :text="initialLetters" 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">{{ message.message }}</div>
+      <div class="mt-2" v-html="message.message"></div>
     </div>
   </div>
 </template>