#101 - insert emoji from emoji selector

src/components/emoji-input/emoji-input.js

@@ -105,6 +105,11 @@ const EmojiInput = {
     },
     setCaret ({target: {selectionStart}}) {
       this.caret = selectionStart
+    },
+    onEmoji (emoji) {
+      const newValue = this.value.substr(0, this.caret) + emoji + this.value.substr(this.caret)
+      this.$refs.input.focus()
+      this.$emit('input', newValue)
     }
   }
 }

src/components/emoji-input/emoji-input.vue

 <template>
   <div class="emoji-input">
-    <EmojiSelector />
     <input
       v-if="type !== 'textarea'"
       :class="classname"
@@ -16,6 +15,7 @@
       @keydown.shift.tab="cycleBackward"
       @keydown.tab="cycleForward"
       @keydown.enter="replaceEmoji"
+      ref="input"
     />
     <textarea
       v-else
@@ -31,7 +31,9 @@
       @keydown.shift.tab="cycleBackward"
       @keydown.tab="cycleForward"
       @keydown.enter="replaceEmoji"
+      ref="input"
     ></textarea>
+    <EmojiSelector @emoji="onEmoji" />
     <div class="autocomplete-panel" v-if="suggestions">
       <div class="autocomplete-panel-body">
         <div
@@ -58,6 +60,8 @@
 @import '../../_variables.scss';
 
 .emoji-input {
+  position: relative;
+
   .form-control {
     width: 100%;
   }

src/components/emoji-selector/emoji-selector.js

@@ -12,6 +12,11 @@ const EmojiSelector = {
   methods: {
     togglePanel () {
       this.open = !this.open
+    },
+    onEmoji (emoji) {
+      const value = emoji.image_url ? `:${emoji.shortcode}:` : emoji.utf
+      this.$emit('emoji', ` ${value} `)
+      this.open = false
     }
   },
   computed: {

src/components/emoji-selector/emoji-selector.vue

@@ -14,7 +14,13 @@
         <div class="emoji-groups">
           <div v-for="(value, key) in emojis" :key="key" class="emoji-group">
             <h6 class="emoji-group-title">{{value.text}}</h6>
-            <span v-for="emoji in value.emojis" :key="key + emoji.shortcode" :title="emoji.shortcode" class="emoji-item">
+            <span
+              v-for="emoji in value.emojis"
+              :key="key + emoji.shortcode"
+              :title="emoji.shortcode"
+              class="emoji-item"
+              @click="onEmoji(emoji)"
+            >
               <span v-if="!emoji.image_url">{{emoji.utf}}</span>
               <img :src="'https://bikeshed.party' + emoji.image_url" v-else>
             </span>
@@ -32,20 +38,27 @@
 
 .emoji {
   &-dropdown {
-    position: relative;
+    position: absolute;
+    right: 10px;
+    top: 2px;
+    z-index: 1;
 
     &-toggle {
       cursor: pointer;
+      position: absolute;
+      right: 0;
     }
 
     &-menu {
       position: absolute;
       z-index: 1;
       right: 0;
+      top: 25px;
       width: 300px;
       height: 300px;
       display: flex;
       flex-direction: column;
+      margin: 0 !important;
 
       &-content {
         flex: 1 1 1px;