#101 - bind outside click, add emoji to post status form

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

@@ -108,7 +108,6 @@ const EmojiInput = {
     },
     onEmoji (emoji) {
       const newValue = this.value.substr(0, this.caret) + emoji + this.value.substr(this.caret)
-      this.$refs.input.focus()
       this.$emit('input', newValue)
       this.caret += emoji.length
       setTimeout(() => {

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

@@ -92,6 +92,10 @@
 
   &-search {
     padding: 5px;
+
+    input {
+      width: 100%;
+    }
   }
 
   &-groups {

src/components/post_status_form/post_status_form.js

@@ -2,6 +2,7 @@ import statusPoster from '../../services/status_poster/status_poster.service.js'
 import MediaUpload from '../media_upload/media_upload.vue'
 import ScopeSelector from '../scope_selector/scope_selector.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
+import EmojiSelector from '../emoji-selector/emoji-selector.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import Completion from '../../services/completion/completion.js'
 import { take, filter, reject, map, uniqBy } from 'lodash'
@@ -32,7 +33,8 @@ const PostStatusForm = {
   components: {
     MediaUpload,
     ScopeSelector,
-    EmojiInput
+    EmojiInput,
+    EmojiSelector
   },
   mounted () {
     this.resize(this.$refs.textarea)
@@ -233,6 +235,29 @@ const PostStatusForm = {
     onKeydown (e) {
       e.stopPropagation()
     },
+    onEmoji (emoji) {
+      const newValue = this.newStatus.status.substr(0, this.caret) + emoji + this.newStatus.status.substr(this.caret)
+      this.newStatus.status = newValue
+      this.caret += emoji.length
+      setTimeout(() => {
+        this.updateCaretPos()
+      })
+    },
+    updateCaretPos () {
+      const elem = this.$refs.textarea
+      if (elem.createTextRange) {
+        const range = elem.createTextRange()
+        range.move('character', this.caret)
+        range.select()
+      } else {
+        if (elem.selectionStart) {
+          elem.focus()
+          elem.setSelectionRange(this.caret, this.caret)
+        } else {
+          elem.focus()
+        }
+      }
+    },
     setCaret ({target: {selectionStart}}) {
       this.caret = selectionStart
     },

src/components/post_status_form/post_status_form.vue

@@ -20,25 +20,28 @@
         v-model="newStatus.spoilerText"
         classname="form-control"
       />
-      <textarea
-        ref="textarea"
-        @click="setCaret"
-        @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control"
-        @keydown="onKeydown"
-        @keydown.down="cycleForward"
-        @keydown.up="cycleBackward"
-        @keydown.shift.tab="cycleBackward"
-        @keydown.tab="cycleForward"
-        @keydown.enter="replaceCandidate"
-        @keydown.meta.enter="postStatus(newStatus)"
-        @keyup.ctrl.enter="postStatus(newStatus)"
-        @drop="fileDrop"
-        @dragover.prevent="fileDrag"
-        @input="resize"
-        @paste="paste"
-        :disabled="posting"
-      >
-      </textarea>
+      <div class="status-input-wrapper">
+        <textarea
+          ref="textarea"
+          @click="setCaret"
+          @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control"
+          @keydown="onKeydown"
+          @keydown.down="cycleForward"
+          @keydown.up="cycleBackward"
+          @keydown.shift.tab="cycleBackward"
+          @keydown.tab="cycleForward"
+          @keydown.enter="replaceCandidate"
+          @keydown.meta.enter="postStatus(newStatus)"
+          @keyup.ctrl.enter="postStatus(newStatus)"
+          @drop="fileDrop"
+          @dragover.prevent="fileDrag"
+          @input="resize"
+          @paste="paste"
+          :disabled="posting"
+        >
+        </textarea>
+        <EmojiSelector @emoji="onEmoji" />
+      </div>
       <div class="visibility-tray">
         <span class="text-format" v-if="formattingOptionsEnabled">
           <label for="post-content-type" class="select">
@@ -179,6 +182,13 @@
     }
   }
 
+  .status-input-wrapper {
+    display: flex;
+    position: relative;
+    width: 100%;
+    flex-direction: column;
+  }
+
   .attachments {
     padding: 0 0.5em;