Make links clickable

Issue #60.

src/assets/css/chat.scss

@@ -237,6 +237,9 @@ $admin-fg: white;
         color: rgba(#000000, 0.6);
         display: inline-block;
     }
+    .link {
+        color: inherit;
+    }
 }
 
 .messageOut {
@@ -287,6 +290,9 @@ $admin-fg: white;
         color: rgba(#000000, 0.6);
         display: inline-block;
     }
+    .link {
+        color: inherit;
+    }
 }
 
 .sender, .status {
@@ -339,7 +345,8 @@ $admin-fg: white;
         font-size: 11 * $chat-text-size;
         color: #000000;
         overflow-wrap: break-word;
-        white-space: pre;
+        word-wrap: break-word;
+        white-space: pre-wrap;
     }
 }
 

src/components/messages/MessageIncomingText.vue

@@ -13,10 +13,10 @@
         <div class="original-message-sender">
           {{ inReplyToSender || "Someone" }} said:
         </div>
-        <div class="original-message-text">{{ inReplyToText }}</div>
+        <div class="original-message-text" v-html="linkify($sanitize(inReplyToText))" />
       </div>
       <div class="message">
-        {{ messageText }}
+        <span v-html="linkify($sanitize(messageText))" />
         <span class="edit-marker" v-if="event.replacingEventId()"
           >(edited)</span
         >

src/components/messages/MessageOutgoingText.vue

@@ -11,11 +11,11 @@
         <div class="original-message-sender">
           {{ inReplyToSender || "Someone" }} said:
         </div>
-        <div class="original-message-text">{{ inReplyToText }}</div>
+        <div class="original-message-text" v-html="linkify($sanitize(inReplyToText))" />
       </div>
 
       <div class="message">
-        {{ messageText }}
+        <span v-html="linkify($sanitize(messageText))" />
         <span class="edit-marker" v-if="event.replacingEventId()"
           >(edited)</span
         >

src/components/messages/messageMixin.js

@@ -1,4 +1,7 @@
 import QuickReactions from './QuickReactions.vue';
+var linkify = require('linkifyjs');
+var linkifyHtml = require('linkifyjs/html');
+linkify.options.defaults.className = "link";
 
 export default {
   components: {
@@ -192,5 +195,9 @@ export default {
       }
       return date.toLocaleString();
     },
+
+    linkify(text) {
+      return linkifyHtml(text);
+    }
   },
 }

src/main.js

@@ -11,7 +11,13 @@ import VEmojiPicker from 'v-emoji-picker';
 import VueResize from 'vue-resize';
 import 'vue-resize/dist/vue-resize.css';
 import VueClipboard from 'vue-clipboard2'
- 
+import VueSanitize from "vue-sanitize";
+
+var defaultOptions = VueSanitize.defaults;
+defaultOptions.disallowedTagsMode = "recursiveEscape";
+defaultOptions.allowedTags = [];
+Vue.use(VueSanitize, defaultOptions);
+
 Vue.config.productionTip = false
 
 Vue.use(VueResize);