diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js index 99dba1cb..112fd148 100644 --- a/src/components/emoji-input/emoji-input.js +++ b/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(() => { diff --git a/src/components/emoji-selector/emoji-selector.vue b/src/components/emoji-selector/emoji-selector.vue index 98d2642e..0630772c 100644 --- a/src/components/emoji-selector/emoji-selector.vue +++ b/src/components/emoji-selector/emoji-selector.vue @@ -92,6 +92,10 @@ &-search { padding: 5px; + + input { + width: 100%; + } } &-groups { diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index c65c27e2..8b0031de 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/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 }, diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 1ce2b647..102cb484 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -20,25 +20,28 @@ v-model="newStatus.spoilerText" classname="form-control" /> - +