allow emojis to by inserted into the userinput field

Author: bLind17

src/ChatWindow.vue

@@ -49,6 +49,7 @@
     <UserInput
       v-if="!showUserList"
       :show-emoji="showEmoji"
+      :send-emojis-directly="sendEmojisDirectly"
       :on-submit="onUserInputSubmit"
       :suggestions="getSuggestions()"
       :show-file="showFile"
@@ -78,6 +79,10 @@ export default {
       type: Boolean,
       default: false
     },
+    sendEmojisDirectly: {
+      type: Boolean,
+      default: true
+    },
     showFile: {
       type: Boolean,
       default: false

src/Launcher.vue

@@ -20,6 +20,7 @@
       :title="chatWindowTitle"
       :is-open="isOpen"
       :show-emoji="showEmoji"
+      :send-emojis-directly="sendEmojisDirectly"
       :show-file="showFile"
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
@@ -91,7 +92,11 @@ export default {
     },
     showEmoji: {
       type: Boolean,
-      default: false
+      default: () => false
+    },
+    sendEmojisDirectly: {
+      type: Boolean,
+      default: () => true
     },
     showEdition: {
       type: Boolean,

src/UserInput.vue

@@ -121,6 +121,10 @@ export default {
       type: Boolean,
       default: () => false
     },
+    sendEmojisDirectly: {
+      type: Boolean,
+      default: () => true
+    },
     suggestions: {
       type: Array,
       default: () => []
@@ -145,7 +149,8 @@ export default {
   data() {
     return {
       file: null,
-      inputActive: false
+      inputActive: false,
+      previousSelectionRange: null
     }
   },
   computed: {
@@ -172,6 +177,22 @@ export default {
         this.focusUserInput()
       }
     })
+
+    document.addEventListener('selectionchange', () => {
+      var selection = document.getSelection()
+      if (
+        selection.anchorNode != this.$refs.userInput &&
+        selection.anchorNode.parentNode != this.$refs.userInput
+      ) {
+        return
+      }
+
+      if (selection.rangeCount) {
+        this.previousSelectionRange = selection.getRangeAt(0).cloneRange()
+      } else {
+        this.previousSelectionRange = null
+      }
+    })
   },
   methods: {
     cancelFile() {
@@ -268,6 +289,13 @@ export default {
       }
     },
     _handleEmojiPicked(emoji) {
+      if (this.sendEmojisDirectly) {
+        this._submitEmoji(emoji)
+      } else {
+        this._insertEmoji(emoji)
+      }
+    },
+    _submitEmoji(emoji) {
       this._checkSubmitSuccess(
         this.onSubmit({
           author: 'me',
@@ -276,6 +304,27 @@ export default {
         })
       )
     },
+    _insertEmoji(emoji) {
+      var range = this.previousSelectionRange
+      if (!range) {
+        console.log('First child: ' + this.$refs.userInput.firstChild)
+        range = document.createRange()
+        range.setStart(this.$refs.userInput.firstChild, this.$refs.userInput.textContent.length)
+        range.collapse(true)
+      }
+
+      var selection = window.getSelection()
+      selection.removeAllRanges()
+      selection.addRange(range)
+
+      var textNode = document.createTextNode(emoji)
+
+      range.deleteContents()
+      range.insertNode(textNode)
+      range.collapse(false)
+
+      this.$refs.userInput.focus()
+    },
     _handleFileSubmit(file) {
       this.file = file
     },