Fixes #209: Allow inserting emojis alongside text

.gitignore

@@ -22,3 +22,4 @@ yarn-error.log*
 
 # Misc
 .ghnpmpkgtoken
+package-lock.json

README.md

@@ -178,6 +178,7 @@ For more detailed examples see the demo folder.
 | *close | Function | The function passed to the component that mutates the above mentioned bool toggle for closing the chat |
 | messageList | [message] | An array of message objects to be rendered as a conversation. |
 | showEmoji | Boolean | A bool indicating whether or not to show the emoji button
+| sendEmojisDirectly | Boolean | A bool indicating whether or not to send emojis directly as a message as opposed to inserting them into the user input
 | showFile | Boolean | A bool indicating whether or not to show the file chooser button
 | showDeletion | Boolean | A bool indicating whether or not to show the edit button for a message
 | showConfirmationDeletion | Boolean | A bool indicating whether or not to show the confirmation text when we remove a message

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,24 @@ export default {
         this.focusUserInput()
       }
     })
+
+    document.addEventListener('selectionchange', () => {
+      var selection = document.getSelection()
+      if (
+        !selection ||
+        !selection.anchorNode ||
+        (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 +291,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 +306,29 @@ export default {
         })
       )
     },
+    _insertEmoji(emoji) {
+      var range = this.previousSelectionRange
+      if (!range) {
+        if (!this.$refs.userInput.firstChild) {
+          this.$refs.userInput.append(document.createTextNode(''))
+        }
+        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
     },