Hyperlinking support

Fixes #18

package.json

@@ -27,12 +27,14 @@
     "electron-store": "^6.0.1",
     "electron-updater": "^4.3.5",
     "feather-icons": "^4.28.0",
+    "jquery": "^3.5.1",
     "moment": "^2.29.1",
     "simplebar": "^5.3.0",
     "simplebar-vue": "^1.6.0",
     "twemoji": "^13.0.1",
     "vue": "^2.6.11",
     "vue-feather": "^1.1.1",
+    "vue-linkify": "^1.0.1",
     "vue-native-websocket": "^2.0.14",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

src/components/Message.vue

@@ -25,7 +25,7 @@
               <template v-for="(text, i) in msg.texts">
               
                 <div v-for="(attachment, index) in text.attachments" :key="`${i}-${index}`" class="attachment">
-                  <template v-if="attachment[0] != ''">
+                  <template v-if="attachment[0] != '' && !attachment[0].includes('.pluginPayloadAttachment')">
                     <expandable-image v-if="isImage(attachment[1])"  :loadedData="scrollToBottom" :path="attachment[0]" :type="attachment[1]" />
                     <video-player v-else-if="isVideo(attachment[1])" :loadedData="scrollToBottom" :path="attachment[0]" :type="attachment[1]" />
                     <download-attachment v-else :path="attachment[0]" :type="attachment[1]" />
@@ -37,7 +37,7 @@
                   :key="i"
                   :class="(msg.texts.length-1 == i ? 'last ' : '') + (isEmojis(text.text) ? 'jumbo' : '')"
                   v-if="$options.filters.twemoji(text.text) != ''">
-                  <span style="white-space: pre-wrap;" v-html="$options.filters.twemoji(text.text)"></span>
+                  <span style="white-space: pre-wrap;" v-html="$options.filters.twemoji(text.text)" v-linkified></span>
                 </div>
               </template>
             </div>
@@ -167,6 +167,7 @@ export default {
   },
   methods: {
     isImage(type) {
+      console.log(type)
       return type.includes('image/')
     },
     isVideo(type) {
@@ -261,10 +262,10 @@ export default {
     autoResize (value) {
       var el = document.getElementById('twemoji-textarea')
 
-      if (!this.canSend) {
-        el.innerHTML = this.messageText[this.$route.params.id]
-        return
-      }
+      // if (!this.canSend) {
+      //   el.innerHTML = this.messageText[this.$route.params.id]
+      //   return
+      // }
 
       this.messageText[this.$route.params.id] = value
 
@@ -289,20 +290,20 @@ export default {
         attachments: this.$refs.uploadButton.attachments,
         address: this.messages[0] ? this.messages[0].address : this.receiver
       }
+      
+      document.getElementById("twemoji-textarea").innerHTML = ""
+      this.messageText[this.$route.params.id] = ""
 
       axios.post(this.$store.getters.httpURI+'/sendText', textObj)
         .then(response => {
-          document.getElementById("twemoji-textarea").innerHTML = ""
-          this.messageText[this.$route.params.id] = ""
           if (this.$refs.uploadButton) {
             this.$refs.uploadButton.clear()
           }
-          this.canSend = true
 
+          this.canSend = true
           this.autoResize()
         })
         .catch(error => {
-          console.log(error)
           alert("There was an error while sending your text.\n" + error)
           this.canSend = true
         })
@@ -315,6 +316,12 @@ export default {
         container.scrollTop = scrollTo
 
         if (document.getElementById('twemoji-textarea') && !this.lastHeight) document.getElementById('twemoji-textarea').focus()
+
+        $(document).off('click', 'a[href^="http"]')
+        $(document).on('click', 'a[href^="http"]', function(event) {
+          event.preventDefault()
+          shell.openExternal(this.href)
+        })
       }
     },
     autoCompleteHooks () {
@@ -821,6 +828,10 @@ export default {
     position: relative;
     overflow-wrap: break-word;
 
+    a {
+      color: #2284FF;
+    }
+
     &.last {
       margin-bottom: 10px;
 
@@ -874,6 +885,10 @@ export default {
     max-width: 75%;
     overflow-wrap: break-word;
 
+    a {
+      color: white;
+    }
+
     &.last {
       margin-bottom: 10px;
 

src/main.js

@@ -8,6 +8,9 @@ import axios from 'axios'
 import VueNativeSock from 'vue-native-websocket'
 import VueFeather from 'vue-feather'
 import Twemoji from './plugins/Twemoji'
+import linkify from 'vue-linkify'
+import $ from 'jquery'
+window.$ = $
 
 const https = require('https')
 
@@ -32,6 +35,8 @@ Vue.prototype.$http = axios.create({
 
 Vue.mixin(mixins)
 
+Vue.directive('linkified', linkify)
+
 axios.defaults.headers.common['Authorization'] = store.state.password
 
 new Vue({

src/preload.js

@@ -1,4 +1,5 @@
-const { remote, ipcRenderer, Notification } = require('electron')
+const { remote, ipcRenderer, Notification, shell } = require('electron')
 window.ipcRenderer = ipcRenderer
 window.remote = remote
-window.__dirname = __dirname
+window.__dirname = __dirname
+window.shell = shell

yarn.lock

@@ -6181,6 +6181,11 @@ jpeg-js@0.4.2:
   resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.2.tgz#8b345b1ae4abde64c2da2fe67ea216a114ac279d"
   integrity sha512-+az2gi/hvex7eLTMTlbRLOhH6P6WFdk2ITI8HJsaH2VqYO0I594zXSYEP+tf4FW+8Cy68ScDXoAsQdyQanv3sw==
 
+jquery@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5"
+  integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==
+
 js-base64@^2.1.8:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
@@ -6436,6 +6441,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+linkifyjs@^2.1.3:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.9.tgz#af06e45a2866ff06c4766582590d098a4d584702"
+  integrity sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==
+
 load-bmfont@^1.3.1, load-bmfont@^1.4.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/load-bmfont/-/load-bmfont-1.4.1.tgz#c0f5f4711a1e2ccff725a7b6078087ccfcddd3e9"
@@ -10449,6 +10459,14 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-linkify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vue-linkify/-/vue-linkify-1.0.1.tgz#2c62181978ef1c65d874d9b156479531d6630cb3"
+  integrity sha1-LGIYGXjvHGXYdNmxVkeVMdZjDLM=
+  dependencies:
+    linkifyjs "^2.1.3"
+    vue "^2.1.6"
+
 "vue-loader-v16@npm:vue-loader@^16.0.0-beta.7":
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.0.0.tgz#7ec137c7f9029f2a5990f39dc5abbca06d60ba30"
@@ -10500,7 +10518,7 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.6.11:
+vue@^2.1.6, vue@^2.6.11:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
   integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==