From 036882d27c22d768782c208a12625116ddc6ae7e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Aug 2019 13:18:37 +0300
Subject: rename for consistency

---
 src/components/emoji-input/emoji-input.js          | 280 ---------------------
 src/components/emoji-input/emoji-input.vue         | 167 ------------
 src/components/emoji-input/suggestor.js            |  94 -------
 src/components/emoji-picker/emoji-picker.js        |  53 ----
 src/components/emoji-picker/emoji-picker.vue       | 161 ------------
 src/components/emoji_input/emoji_input.js          | 280 +++++++++++++++++++++
 src/components/emoji_input/emoji_input.vue         | 167 ++++++++++++
 src/components/emoji_input/suggestor.js            |  94 +++++++
 src/components/emoji_picker/emoji_picker.js        |  53 ++++
 src/components/emoji_picker/emoji_picker.vue       | 161 ++++++++++++
 .../post_status_form/post_status_form.js           |   4 +-
 src/components/user_settings/user_settings.js      |   4 +-
 12 files changed, 759 insertions(+), 759 deletions(-)
 delete mode 100644 src/components/emoji-input/emoji-input.js
 delete mode 100644 src/components/emoji-input/emoji-input.vue
 delete mode 100644 src/components/emoji-input/suggestor.js
 delete mode 100644 src/components/emoji-picker/emoji-picker.js
 delete mode 100644 src/components/emoji-picker/emoji-picker.vue
 create mode 100644 src/components/emoji_input/emoji_input.js
 create mode 100644 src/components/emoji_input/emoji_input.vue
 create mode 100644 src/components/emoji_input/suggestor.js
 create mode 100644 src/components/emoji_picker/emoji_picker.js
 create mode 100644 src/components/emoji_picker/emoji_picker.vue

(limited to 'src')

diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js
deleted file mode 100644
index f751f6a0..00000000
--- a/src/components/emoji-input/emoji-input.js
+++ /dev/null
@@ -1,280 +0,0 @@
-import Completion from '../../services/completion/completion.js'
-import EmojiPicker from '../emoji-picker/emoji-picker.vue'
-import { take } from 'lodash'
-
-/**
- * EmojiInput - augmented inputs for emoji and autocomplete support in inputs
- * without having to give up the comfort of <input/> and <textarea/> elements
- *
- * Intended usage is:
- * <EmojiInput v-model="something">
- *   <input v-model="something"/>
- * </EmojiInput>
- *
- * Works only with <input> and <textarea>. Intended to use with only one nested
- * input. It will find first input or textarea and work with that, multiple
- * nested children not tested. You HAVE TO duplicate v-model for both
- * <emoji-input> and <input>/<textarea> otherwise it will not work.
- *
- * Be prepared for CSS troubles though because it still wraps component in a div
- * while TRYING to make it look like nothing happened, but it could break stuff.
- */
-
-const EmojiInput = {
-  props: {
-    suggest: {
-      /**
-       * suggest: function (input: String) => Suggestion[]
-       *
-       * Function that takes input string which takes string (textAtCaret)
-       * and returns an array of Suggestions
-       *
-       * Suggestion is an object containing following properties:
-       * displayText: string. Main display text, what actual suggestion
-       *    represents (user's screen name/emoji shortcode)
-       * replacement: string. Text that should replace the textAtCaret
-       * detailText: string, optional. Subtitle text, providing additional info
-       *    if present (user's nickname)
-       * imageUrl: string, optional. Image to display alongside with suggestion,
-       *    currently if no image is provided, replacement will be used (for
-       *    unicode emojis)
-       *
-       * TODO: make it asynchronous when adding proper server-provided user
-       * suggestions
-       *
-       * For commonly used suggestors (emoji, users, both) use suggestor.js
-       */
-      required: true,
-      type: Function
-    },
-    value: {
-      /**
-       * Used for v-model
-       */
-      required: true,
-      type: String
-    },
-    emojiPicker: {
-      required: false,
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      input: undefined,
-      highlighted: 0,
-      caret: 0,
-      focused: false,
-      blurTimeout: null,
-      showPicker: false
-    }
-  },
-  components: {
-    EmojiPicker
-  },
-  computed: {
-    suggestions () {
-      const firstchar = this.textAtCaret.charAt(0)
-      if (this.textAtCaret === firstchar) { return [] }
-      const matchedSuggestions = this.suggest(this.textAtCaret)
-      if (matchedSuggestions.length <= 0) {
-        return []
-      }
-      return take(matchedSuggestions, 5)
-        .map(({ imageUrl, ...rest }, index) => ({
-          ...rest,
-          // eslint-disable-next-line camelcase
-          img: imageUrl || '',
-          highlighted: index === this.highlighted
-        }))
-    },
-    showSuggestions () {
-      return this.focused && this.suggestions && this.suggestions.length > 0
-    },
-    textAtCaret () {
-      return (this.wordAtCaret || {}).word || ''
-    },
-    pickerIconBottom () {
-      return this.input && this.input.tag === 'textarea'
-    },
-    wordAtCaret () {
-      if (this.value && this.caret) {
-        const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
-        return word
-      }
-    }
-  },
-  mounted () {
-    const slots = this.$slots.default
-    if (!slots || slots.length === 0) return
-    const input = slots.find(slot => ['input', 'textarea'].includes(slot.tag))
-    if (!input) return
-    this.input = input
-    this.resize()
-    input.elm.addEventListener('blur', this.onBlur)
-    input.elm.addEventListener('focus', this.onFocus)
-    input.elm.addEventListener('paste', this.onPaste)
-    input.elm.addEventListener('keyup', this.onKeyUp)
-    input.elm.addEventListener('keydown', this.onKeyDown)
-    input.elm.addEventListener('transitionend', this.onTransition)
-    input.elm.addEventListener('compositionupdate', this.onCompositionUpdate)
-  },
-  unmounted () {
-    const { input } = this
-    if (input) {
-      input.elm.removeEventListener('blur', this.onBlur)
-      input.elm.removeEventListener('focus', this.onFocus)
-      input.elm.removeEventListener('paste', this.onPaste)
-      input.elm.removeEventListener('keyup', this.onKeyUp)
-      input.elm.removeEventListener('keydown', this.onKeyDown)
-      input.elm.removeEventListener('transitionend', this.onTransition)
-      input.elm.removeEventListener('compositionupdate', this.onCompositionUpdate)
-    }
-  },
-  methods: {
-    togglePicker () {
-      this.showPicker = !this.showPicker
-    },
-    replace (replacement) {
-      const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
-      this.$emit('input', newValue)
-      this.caret = 0
-    },
-    insert (insertion) {
-      const newValue = [
-        this.value.substring(0, this.caret),
-        insertion,
-        this.value.substring(this.caret)
-      ].join('')
-      this.$emit('input', newValue)
-    },
-    replaceText (e, suggestion) {
-      const len = this.suggestions.length || 0
-      if (this.textAtCaret.length === 1) { return }
-      if (len > 0 || suggestion) {
-        const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
-        const replacement = chosenSuggestion.replacement
-        const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
-        this.$emit('input', newValue)
-        this.highlighted = 0
-        const position = this.wordAtCaret.start + replacement.length
-
-        this.$nextTick(function () {
-          // Re-focus inputbox after clicking suggestion
-          this.input.elm.focus()
-          // Set selection right after the replacement instead of the very end
-          this.input.elm.setSelectionRange(position, position)
-          this.caret = position
-        })
-        e.preventDefault()
-      }
-    },
-    cycleBackward (e) {
-      const len = this.suggestions.length || 0
-      if (len > 0) {
-        this.highlighted -= 1
-        if (this.highlighted < 0) {
-          this.highlighted = this.suggestions.length - 1
-        }
-        e.preventDefault()
-      } else {
-        this.highlighted = 0
-      }
-    },
-    cycleForward (e) {
-      const len = this.suggestions.length || 0
-      if (len > 0) {
-        this.highlighted += 1
-        if (this.highlighted >= len) {
-          this.highlighted = 0
-        }
-        e.preventDefault()
-      } else {
-        this.highlighted = 0
-      }
-    },
-    onTransition (e) {
-      this.resize()
-    },
-    onBlur (e) {
-      // Clicking on any suggestion removes focus from autocomplete,
-      // preventing click handler ever executing.
-      this.blurTimeout = setTimeout(() => {
-        this.focused = false
-        this.setCaret(e)
-        this.resize()
-      }, 200)
-    },
-    onClick (e, suggestion) {
-      this.replaceText(e, suggestion)
-    },
-    onFocus (e) {
-      if (this.blurTimeout) {
-        clearTimeout(this.blurTimeout)
-        this.blurTimeout = null
-      }
-
-      this.showPicker = false
-      this.focused = true
-      this.setCaret(e)
-      this.resize()
-    },
-    onKeyUp (e) {
-      this.setCaret(e)
-      this.resize()
-    },
-    onPaste (e) {
-      this.setCaret(e)
-      this.resize()
-    },
-    onKeyDown (e) {
-      this.setCaret(e)
-      this.resize()
-
-      const { ctrlKey, shiftKey, key } = e
-      if (key === 'Tab') {
-        if (shiftKey) {
-          this.cycleBackward(e)
-        } else {
-          this.cycleForward(e)
-        }
-      }
-      if (key === 'ArrowUp') {
-        this.cycleBackward(e)
-      } else if (key === 'ArrowDown') {
-        this.cycleForward(e)
-      }
-      if (key === 'Enter') {
-        if (!ctrlKey) {
-          this.replaceText(e)
-        }
-      }
-    },
-    onInput (e) {
-      this.showPicker = false
-      this.setCaret(e)
-      this.$emit('input', e.target.value)
-    },
-    onCompositionUpdate (e) {
-      this.setCaret(e)
-      this.resize()
-      this.$emit('input', e.target.value)
-    },
-    onClickOutside () {
-      this.showPicker = false
-    },
-    setCaret ({ target: { selectionStart } }) {
-      this.caret = selectionStart
-    },
-    resize () {
-      const { panel } = this.$refs
-      if (!panel) return
-      const { offsetHeight, offsetTop } = this.input.elm
-      this.$refs.panel.style.top = (offsetTop + offsetHeight) + 'px'
-      this.$refs.picker.$el.style.top = (offsetTop + offsetHeight) + 'px'
-    }
-  }
-}
-
-export default EmojiInput
diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue
deleted file mode 100644
index 05418657..00000000
--- a/src/components/emoji-input/emoji-input.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-  <div
-    v-click-outside="onClickOutside"
-    class="emoji-input"
-  >
-    <slot />
-    <template v-if="emojiPicker">
-      <div
-        class="emoji-picker-icon"
-        :class="pickerIconBottom ? 'picker-icon-bottom': 'picker-icon-right'"
-        @click.prevent="togglePicker"
-      >
-        <i class="icon-smile" />
-      </div>
-      <EmojiPicker
-        v-if="emojiPicker"
-        ref="picker"
-        :class="{ hide: !showPicker }"
-        class="emoji-picker-panel"
-        @emoji="insert"
-      />
-    </template>
-    <div
-      ref="panel"
-      class="autocomplete-panel"
-      :class="{ hide: !showSuggestions }"
-    >
-      <div class="autocomplete-panel-body">
-        <div
-          v-for="(suggestion, index) in suggestions"
-          :key="index"
-          class="autocomplete-item"
-          :class="{ highlighted: suggestion.highlighted }"
-          @click.stop.prevent="onClick($event, suggestion)"
-        >
-          <span class="image">
-            <img
-              v-if="suggestion.img"
-              :src="suggestion.img"
-            >
-            <span v-else>{{ suggestion.replacement }}</span>
-          </span>
-          <div class="label">
-            <span class="displayText">{{ suggestion.displayText }}</span>
-            <span class="detailText">{{ suggestion.detailText }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script src="./emoji-input.js"></script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-
-.emoji-input {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  .emoji-picker-icon {
-    position: absolute;
-    margin: 0 .25em;
-    font-size: 16px;
-    cursor: pointer;
-
-    &:hover i {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
-    &.picker-icon-bottom {
-      bottom: 0;
-      left: 0;
-    }
-    &.picker-icon-right {
-      top: 0;
-      right: 0;
-    }
-  }
-  .emoji-picker-panel {
-    position: absolute;
-    z-index: 9;
-    margin-top: 2px;
-
-    &.hide {
-      display: none
-    }
-  }
-
-  .autocomplete {
-    &-panel {
-      position: absolute;
-      z-index: 9;
-      margin-top: 2px;
-
-      &.hide {
-        display: none
-      }
-
-      &-body {
-        margin: 0 0.5em 0 0.5em;
-        border-radius: $fallback--tooltipRadius;
-        border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-        box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
-        box-shadow: var(--popupShadow);
-        min-width: 75%;
-        background: $fallback--bg;
-        background: var(--bg, $fallback--bg);
-        color: $fallback--lightText;
-        color: var(--lightText, $fallback--lightText);
-      }
-    }
-
-    &-item {
-      display: flex;
-      cursor: pointer;
-      padding: 0.2em 0.4em;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-      height: 32px;
-
-      .image {
-        width: 32px;
-        height: 32px;
-        line-height: 32px;
-        text-align: center;
-        font-size: 32px;
-
-        margin-right: 4px;
-
-        img {
-          width: 32px;
-          height: 32px;
-          object-fit: contain;
-        }
-      }
-
-      .label {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin: 0 0.1em 0 0.2em;
-
-        .displayText {
-          line-height: 1.5;
-        }
-
-        .detailText {
-          font-size: 9px;
-          line-height: 9px;
-        }
-      }
-
-      &.highlighted {
-        background-color: $fallback--fg;
-        background-color: var(--lightBg, $fallback--fg);
-      }
-    }
-  }
-
-  input, textarea {
-    flex: 1 0 auto;
-  }
-}
-</style>
diff --git a/src/components/emoji-input/suggestor.js b/src/components/emoji-input/suggestor.js
deleted file mode 100644
index aec5c39d..00000000
--- a/src/components/emoji-input/suggestor.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import { debounce } from 'lodash'
-/**
- * suggest - generates a suggestor function to be used by emoji-input
- * data: object providing source information for specific types of suggestions:
- * data.emoji - optional, an array of all emoji available i.e.
- *   (state.instance.emoji + state.instance.customEmoji)
- * data.users - optional, an array of all known users
- * updateUsersList - optional, a function to search and append to users
- *
- * Depending on data present one or both (or none) can be present, so if field
- * doesn't support user linking you can just provide only emoji.
- */
-
-const debounceUserSearch = debounce((data, input) => {
-  data.updateUsersList(input)
-}, 500, { leading: true, trailing: false })
-
-export default data => input => {
-  const firstChar = input[0]
-  if (firstChar === ':' && data.emoji) {
-    return suggestEmoji(data.emoji)(input)
-  }
-  if (firstChar === '@' && data.users) {
-    return suggestUsers(data)(input)
-  }
-  return []
-}
-
-export const suggestEmoji = emojis => input => {
-  const noPrefix = input.toLowerCase().substr(1)
-  return emojis
-    .filter(({ displayText }) => displayText.toLowerCase().startsWith(noPrefix))
-    .sort((a, b) => {
-      let aScore = 0
-      let bScore = 0
-
-      // Make custom emojis a priority
-      aScore += a.imageUrl ? 10 : 0
-      bScore += b.imageUrl ? 10 : 0
-
-      // Sort alphabetically
-      const alphabetically = a.displayText > b.displayText ? 1 : -1
-
-      return bScore - aScore + alphabetically
-    })
-}
-
-export const suggestUsers = data => input => {
-  const noPrefix = input.toLowerCase().substr(1)
-  const users = data.users
-
-  const newUsers = users.filter(
-    user =>
-      user.screen_name.toLowerCase().startsWith(noPrefix) ||
-      user.name.toLowerCase().startsWith(noPrefix)
-
-    /* taking only 20 results so that sorting is a bit cheaper, we display
-     * only 5 anyway. could be inaccurate, but we ideally we should query
-     * backend anyway
-     */
-  ).slice(0, 20).sort((a, b) => {
-    let aScore = 0
-    let bScore = 0
-
-    // Matches on screen name (i.e. user@instance) makes a priority
-    aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
-    bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
-
-    // Matches on name takes second priority
-    aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
-    bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
-
-    const diff = (bScore - aScore) * 10
-
-    // Then sort alphabetically
-    const nameAlphabetically = a.name > b.name ? 1 : -1
-    const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
-
-    return diff + nameAlphabetically + screenNameAlphabetically
-    /* eslint-disable camelcase */
-  }).map(({ screen_name, name, profile_image_url_original }) => ({
-    displayText: screen_name,
-    detailText: name,
-    imageUrl: profile_image_url_original,
-    replacement: '@' + screen_name + ' '
-  }))
-
-  // BE search users if there are no matches
-  if (newUsers.length === 0 && data.updateUsersList) {
-    debounceUserSearch(data, noPrefix)
-  }
-  return newUsers
-  /* eslint-enable camelcase */
-}
diff --git a/src/components/emoji-picker/emoji-picker.js b/src/components/emoji-picker/emoji-picker.js
deleted file mode 100644
index 92d517b7..00000000
--- a/src/components/emoji-picker/emoji-picker.js
+++ /dev/null
@@ -1,53 +0,0 @@
-const filterByKeyword = (list, keyword = '') => {
-  return list.filter(x => x.displayText.includes(keyword))
-}
-
-const EmojiPicker = {
-  data () {
-    return {
-      keyword: '',
-      activeGroup: 'standard'
-    }
-  },
-  methods: {
-    onEmoji (emoji) {
-      const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
-      this.$emit('emoji', ` ${value} `)
-      this.open = false
-    },
-    highlight (key) {
-      const ref = this.$refs['group-' + key]
-      const top = ref[0].offsetTop
-      this.$refs['emoji-groups'].scrollTop = top + 1
-      this.activeGroup = key
-    },
-    scrolledGroup (e) {
-      const top = e.target.scrollTop
-      Object.keys(this.emojis).forEach(key => {
-        if (this.$refs['group-' + key][0].offsetTop < top) {
-          this.activeGroup = key
-        }
-      })
-    }
-  },
-  computed: {
-    emojis () {
-      const standardEmojis = this.$store.state.instance.emoji || []
-      const customEmojis = this.$store.state.instance.customEmoji || []
-      return {
-        custom: {
-          text: 'Custom',
-          icon: 'icon-picture',
-          emojis: filterByKeyword(customEmojis, this.keyword)
-        },
-        standard: {
-          text: 'Standard',
-          icon: 'icon-star',
-          emojis: filterByKeyword(standardEmojis, this.keyword)
-        }
-      }
-    }
-  }
-}
-
-export default EmojiPicker
diff --git a/src/components/emoji-picker/emoji-picker.vue b/src/components/emoji-picker/emoji-picker.vue
deleted file mode 100644
index ec48fc45..00000000
--- a/src/components/emoji-picker/emoji-picker.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-  <div class="emoji-dropdown-menu panel panel-default">
-    <div class="panel-heading emoji-tabs">
-      <span
-        v-for="(value, key) in emojis"
-        :key="key"
-        class="emoji-tabs-item"
-        :class="{'active': activeGroup === key}"
-        :title="value.text"
-        @click.prevent="highlight(key)"
-      >
-        <i :class="value.icon" />
-      </span>
-    </div>
-    <div class="panel-body emoji-dropdown-menu-content">
-      <div class="emoji-search">
-        <input
-          v-model="keyword"
-          type="text"
-          class="form-control"
-        >
-      </div>
-      <div
-        ref="emoji-groups"
-        class="emoji-groups"
-        @scroll="scrolledGroup"
-      >
-        <div
-          v-for="(value, key) in emojis"
-          :key="key"
-          class="emoji-group"
-        >
-          <h6
-            :ref="'group-' + key"
-            class="emoji-group-title"
-          >
-            {{ value.text }}
-          </h6>
-          <span
-            v-for="emoji in value.emojis"
-            :key="key + emoji.displayText"
-            :title="emoji.displayText"
-            class="emoji-item"
-            @click="onEmoji(emoji)"
-          >
-            <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
-            <img
-              v-else
-              :src="emoji.imageUrl"
-            >
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script src="./emoji-picker.js"></script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-
-.emoji {
-  &-dropdown {
-    position: absolute;
-    right: 0;
-    top: 28px;
-    z-index: 1;
-
-    &-toggle {
-      cursor: pointer;
-      position: absolute;
-      top: -23px;
-      right: 2px;
-      line-height: 1;
-
-      i {
-        font-size: 18px;
-      }
-    }
-
-    &-menu {
-      position: absolute;
-      z-index: 1;
-      right: 0;
-      width: 300px;
-      height: 300px;
-      display: flex;
-      flex-direction: column;
-      margin: 0 !important;
-
-      &-content {
-        flex: 1 1 1px;
-        display: flex;
-        flex-direction: column;
-      }
-    }
-  }
-
-  &-tabs {
-    &-item {
-      padding: 0 5px;
-
-      &.active {
-        border-bottom: 4px solid;
-
-        i {
-          color: $fallback--lightText;
-          color: var(--lightText, $fallback--lightText);
-        }
-      }
-    }
-  }
-
-  &-search {
-    padding: 5px;
-
-    input {
-      width: 100%;
-    }
-  }
-
-  &-groups {
-    flex: 1 1 1px;
-    overflow: auto;
-    position: relative;
-  }
-
-  &-group {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    width: 100%;
-
-    &-title {
-      font-size: 12px;
-      width: 100%;
-      margin: 0;
-      padding: 5px;
-    }
-  }
-
-  &-item {
-    width: 32px;
-    height: 32px;
-    box-sizing: border-box;
-    display: flex;
-    font-size: 32px;
-    align-items: center;
-    justify-content: center;
-    margin: 2px;
-    cursor: pointer;
-
-    img {
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-
-}
-</style>
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
new file mode 100644
index 00000000..5a9d1406
--- /dev/null
+++ b/src/components/emoji_input/emoji_input.js
@@ -0,0 +1,280 @@
+import Completion from '../../services/completion/completion.js'
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
+import { take } from 'lodash'
+
+/**
+ * EmojiInput - augmented inputs for emoji and autocomplete support in inputs
+ * without having to give up the comfort of <input/> and <textarea/> elements
+ *
+ * Intended usage is:
+ * <EmojiInput v-model="something">
+ *   <input v-model="something"/>
+ * </EmojiInput>
+ *
+ * Works only with <input> and <textarea>. Intended to use with only one nested
+ * input. It will find first input or textarea and work with that, multiple
+ * nested children not tested. You HAVE TO duplicate v-model for both
+ * <emoji-input> and <input>/<textarea> otherwise it will not work.
+ *
+ * Be prepared for CSS troubles though because it still wraps component in a div
+ * while TRYING to make it look like nothing happened, but it could break stuff.
+ */
+
+const EmojiInput = {
+  props: {
+    suggest: {
+      /**
+       * suggest: function (input: String) => Suggestion[]
+       *
+       * Function that takes input string which takes string (textAtCaret)
+       * and returns an array of Suggestions
+       *
+       * Suggestion is an object containing following properties:
+       * displayText: string. Main display text, what actual suggestion
+       *    represents (user's screen name/emoji shortcode)
+       * replacement: string. Text that should replace the textAtCaret
+       * detailText: string, optional. Subtitle text, providing additional info
+       *    if present (user's nickname)
+       * imageUrl: string, optional. Image to display alongside with suggestion,
+       *    currently if no image is provided, replacement will be used (for
+       *    unicode emojis)
+       *
+       * TODO: make it asynchronous when adding proper server-provided user
+       * suggestions
+       *
+       * For commonly used suggestors (emoji, users, both) use suggestor.js
+       */
+      required: true,
+      type: Function
+    },
+    value: {
+      /**
+       * Used for v-model
+       */
+      required: true,
+      type: String
+    },
+    emojiPicker: {
+      required: false,
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      input: undefined,
+      highlighted: 0,
+      caret: 0,
+      focused: false,
+      blurTimeout: null,
+      showPicker: false
+    }
+  },
+  components: {
+    EmojiPicker
+  },
+  computed: {
+    suggestions () {
+      const firstchar = this.textAtCaret.charAt(0)
+      if (this.textAtCaret === firstchar) { return [] }
+      const matchedSuggestions = this.suggest(this.textAtCaret)
+      if (matchedSuggestions.length <= 0) {
+        return []
+      }
+      return take(matchedSuggestions, 5)
+        .map(({ imageUrl, ...rest }, index) => ({
+          ...rest,
+          // eslint-disable-next-line camelcase
+          img: imageUrl || '',
+          highlighted: index === this.highlighted
+        }))
+    },
+    showSuggestions () {
+      return this.focused && this.suggestions && this.suggestions.length > 0
+    },
+    textAtCaret () {
+      return (this.wordAtCaret || {}).word || ''
+    },
+    pickerIconBottom () {
+      return this.input && this.input.tag === 'textarea'
+    },
+    wordAtCaret () {
+      if (this.value && this.caret) {
+        const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
+        return word
+      }
+    }
+  },
+  mounted () {
+    const slots = this.$slots.default
+    if (!slots || slots.length === 0) return
+    const input = slots.find(slot => ['input', 'textarea'].includes(slot.tag))
+    if (!input) return
+    this.input = input
+    this.resize()
+    input.elm.addEventListener('blur', this.onBlur)
+    input.elm.addEventListener('focus', this.onFocus)
+    input.elm.addEventListener('paste', this.onPaste)
+    input.elm.addEventListener('keyup', this.onKeyUp)
+    input.elm.addEventListener('keydown', this.onKeyDown)
+    input.elm.addEventListener('transitionend', this.onTransition)
+    input.elm.addEventListener('compositionupdate', this.onCompositionUpdate)
+  },
+  unmounted () {
+    const { input } = this
+    if (input) {
+      input.elm.removeEventListener('blur', this.onBlur)
+      input.elm.removeEventListener('focus', this.onFocus)
+      input.elm.removeEventListener('paste', this.onPaste)
+      input.elm.removeEventListener('keyup', this.onKeyUp)
+      input.elm.removeEventListener('keydown', this.onKeyDown)
+      input.elm.removeEventListener('transitionend', this.onTransition)
+      input.elm.removeEventListener('compositionupdate', this.onCompositionUpdate)
+    }
+  },
+  methods: {
+    togglePicker () {
+      this.showPicker = !this.showPicker
+    },
+    replace (replacement) {
+      const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
+      this.$emit('input', newValue)
+      this.caret = 0
+    },
+    insert (insertion) {
+      const newValue = [
+        this.value.substring(0, this.caret),
+        insertion,
+        this.value.substring(this.caret)
+      ].join('')
+      this.$emit('input', newValue)
+    },
+    replaceText (e, suggestion) {
+      const len = this.suggestions.length || 0
+      if (this.textAtCaret.length === 1) { return }
+      if (len > 0 || suggestion) {
+        const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
+        const replacement = chosenSuggestion.replacement
+        const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
+        this.$emit('input', newValue)
+        this.highlighted = 0
+        const position = this.wordAtCaret.start + replacement.length
+
+        this.$nextTick(function () {
+          // Re-focus inputbox after clicking suggestion
+          this.input.elm.focus()
+          // Set selection right after the replacement instead of the very end
+          this.input.elm.setSelectionRange(position, position)
+          this.caret = position
+        })
+        e.preventDefault()
+      }
+    },
+    cycleBackward (e) {
+      const len = this.suggestions.length || 0
+      if (len > 0) {
+        this.highlighted -= 1
+        if (this.highlighted < 0) {
+          this.highlighted = this.suggestions.length - 1
+        }
+        e.preventDefault()
+      } else {
+        this.highlighted = 0
+      }
+    },
+    cycleForward (e) {
+      const len = this.suggestions.length || 0
+      if (len > 0) {
+        this.highlighted += 1
+        if (this.highlighted >= len) {
+          this.highlighted = 0
+        }
+        e.preventDefault()
+      } else {
+        this.highlighted = 0
+      }
+    },
+    onTransition (e) {
+      this.resize()
+    },
+    onBlur (e) {
+      // Clicking on any suggestion removes focus from autocomplete,
+      // preventing click handler ever executing.
+      this.blurTimeout = setTimeout(() => {
+        this.focused = false
+        this.setCaret(e)
+        this.resize()
+      }, 200)
+    },
+    onClick (e, suggestion) {
+      this.replaceText(e, suggestion)
+    },
+    onFocus (e) {
+      if (this.blurTimeout) {
+        clearTimeout(this.blurTimeout)
+        this.blurTimeout = null
+      }
+
+      this.showPicker = false
+      this.focused = true
+      this.setCaret(e)
+      this.resize()
+    },
+    onKeyUp (e) {
+      this.setCaret(e)
+      this.resize()
+    },
+    onPaste (e) {
+      this.setCaret(e)
+      this.resize()
+    },
+    onKeyDown (e) {
+      this.setCaret(e)
+      this.resize()
+
+      const { ctrlKey, shiftKey, key } = e
+      if (key === 'Tab') {
+        if (shiftKey) {
+          this.cycleBackward(e)
+        } else {
+          this.cycleForward(e)
+        }
+      }
+      if (key === 'ArrowUp') {
+        this.cycleBackward(e)
+      } else if (key === 'ArrowDown') {
+        this.cycleForward(e)
+      }
+      if (key === 'Enter') {
+        if (!ctrlKey) {
+          this.replaceText(e)
+        }
+      }
+    },
+    onInput (e) {
+      this.showPicker = false
+      this.setCaret(e)
+      this.$emit('input', e.target.value)
+    },
+    onCompositionUpdate (e) {
+      this.setCaret(e)
+      this.resize()
+      this.$emit('input', e.target.value)
+    },
+    onClickOutside () {
+      this.showPicker = false
+    },
+    setCaret ({ target: { selectionStart } }) {
+      this.caret = selectionStart
+    },
+    resize () {
+      const { panel } = this.$refs
+      if (!panel) return
+      const { offsetHeight, offsetTop } = this.input.elm
+      this.$refs.panel.style.top = (offsetTop + offsetHeight) + 'px'
+      this.$refs.picker.$el.style.top = (offsetTop + offsetHeight) + 'px'
+    }
+  }
+}
+
+export default EmojiInput
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
new file mode 100644
index 00000000..3ca12af1
--- /dev/null
+++ b/src/components/emoji_input/emoji_input.vue
@@ -0,0 +1,167 @@
+<template>
+  <div
+    v-click-outside="onClickOutside"
+    class="emoji-input"
+  >
+    <slot />
+    <template v-if="emojiPicker">
+      <div
+        class="emoji-picker-icon"
+        :class="pickerIconBottom ? 'picker-icon-bottom': 'picker-icon-right'"
+        @click.prevent="togglePicker"
+      >
+        <i class="icon-smile" />
+      </div>
+      <EmojiPicker
+        v-if="emojiPicker"
+        ref="picker"
+        :class="{ hide: !showPicker }"
+        class="emoji-picker-panel"
+        @emoji="insert"
+      />
+    </template>
+    <div
+      ref="panel"
+      class="autocomplete-panel"
+      :class="{ hide: !showSuggestions }"
+    >
+      <div class="autocomplete-panel-body">
+        <div
+          v-for="(suggestion, index) in suggestions"
+          :key="index"
+          class="autocomplete-item"
+          :class="{ highlighted: suggestion.highlighted }"
+          @click.stop.prevent="onClick($event, suggestion)"
+        >
+          <span class="image">
+            <img
+              v-if="suggestion.img"
+              :src="suggestion.img"
+            >
+            <span v-else>{{ suggestion.replacement }}</span>
+          </span>
+          <div class="label">
+            <span class="displayText">{{ suggestion.displayText }}</span>
+            <span class="detailText">{{ suggestion.detailText }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./emoji_input.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.emoji-input {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .emoji-picker-icon {
+    position: absolute;
+    margin: 0 .25em;
+    font-size: 16px;
+    cursor: pointer;
+
+    &:hover i {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+
+    &.picker-icon-bottom {
+      bottom: 0;
+      left: 0;
+    }
+    &.picker-icon-right {
+      top: 0;
+      right: 0;
+    }
+  }
+  .emoji-picker-panel {
+    position: absolute;
+    z-index: 9;
+    margin-top: 2px;
+
+    &.hide {
+      display: none
+    }
+  }
+
+  .autocomplete {
+    &-panel {
+      position: absolute;
+      z-index: 9;
+      margin-top: 2px;
+
+      &.hide {
+        display: none
+      }
+
+      &-body {
+        margin: 0 0.5em 0 0.5em;
+        border-radius: $fallback--tooltipRadius;
+        border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+        box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+        box-shadow: var(--popupShadow);
+        min-width: 75%;
+        background: $fallback--bg;
+        background: var(--bg, $fallback--bg);
+        color: $fallback--lightText;
+        color: var(--lightText, $fallback--lightText);
+      }
+    }
+
+    &-item {
+      display: flex;
+      cursor: pointer;
+      padding: 0.2em 0.4em;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+      height: 32px;
+
+      .image {
+        width: 32px;
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        font-size: 32px;
+
+        margin-right: 4px;
+
+        img {
+          width: 32px;
+          height: 32px;
+          object-fit: contain;
+        }
+      }
+
+      .label {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin: 0 0.1em 0 0.2em;
+
+        .displayText {
+          line-height: 1.5;
+        }
+
+        .detailText {
+          font-size: 9px;
+          line-height: 9px;
+        }
+      }
+
+      &.highlighted {
+        background-color: $fallback--fg;
+        background-color: var(--lightBg, $fallback--fg);
+      }
+    }
+  }
+
+  input, textarea {
+    flex: 1 0 auto;
+  }
+}
+</style>
diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
new file mode 100644
index 00000000..aec5c39d
--- /dev/null
+++ b/src/components/emoji_input/suggestor.js
@@ -0,0 +1,94 @@
+import { debounce } from 'lodash'
+/**
+ * suggest - generates a suggestor function to be used by emoji-input
+ * data: object providing source information for specific types of suggestions:
+ * data.emoji - optional, an array of all emoji available i.e.
+ *   (state.instance.emoji + state.instance.customEmoji)
+ * data.users - optional, an array of all known users
+ * updateUsersList - optional, a function to search and append to users
+ *
+ * Depending on data present one or both (or none) can be present, so if field
+ * doesn't support user linking you can just provide only emoji.
+ */
+
+const debounceUserSearch = debounce((data, input) => {
+  data.updateUsersList(input)
+}, 500, { leading: true, trailing: false })
+
+export default data => input => {
+  const firstChar = input[0]
+  if (firstChar === ':' && data.emoji) {
+    return suggestEmoji(data.emoji)(input)
+  }
+  if (firstChar === '@' && data.users) {
+    return suggestUsers(data)(input)
+  }
+  return []
+}
+
+export const suggestEmoji = emojis => input => {
+  const noPrefix = input.toLowerCase().substr(1)
+  return emojis
+    .filter(({ displayText }) => displayText.toLowerCase().startsWith(noPrefix))
+    .sort((a, b) => {
+      let aScore = 0
+      let bScore = 0
+
+      // Make custom emojis a priority
+      aScore += a.imageUrl ? 10 : 0
+      bScore += b.imageUrl ? 10 : 0
+
+      // Sort alphabetically
+      const alphabetically = a.displayText > b.displayText ? 1 : -1
+
+      return bScore - aScore + alphabetically
+    })
+}
+
+export const suggestUsers = data => input => {
+  const noPrefix = input.toLowerCase().substr(1)
+  const users = data.users
+
+  const newUsers = users.filter(
+    user =>
+      user.screen_name.toLowerCase().startsWith(noPrefix) ||
+      user.name.toLowerCase().startsWith(noPrefix)
+
+    /* taking only 20 results so that sorting is a bit cheaper, we display
+     * only 5 anyway. could be inaccurate, but we ideally we should query
+     * backend anyway
+     */
+  ).slice(0, 20).sort((a, b) => {
+    let aScore = 0
+    let bScore = 0
+
+    // Matches on screen name (i.e. user@instance) makes a priority
+    aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
+    bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
+
+    // Matches on name takes second priority
+    aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
+    bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
+
+    const diff = (bScore - aScore) * 10
+
+    // Then sort alphabetically
+    const nameAlphabetically = a.name > b.name ? 1 : -1
+    const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
+
+    return diff + nameAlphabetically + screenNameAlphabetically
+    /* eslint-disable camelcase */
+  }).map(({ screen_name, name, profile_image_url_original }) => ({
+    displayText: screen_name,
+    detailText: name,
+    imageUrl: profile_image_url_original,
+    replacement: '@' + screen_name + ' '
+  }))
+
+  // BE search users if there are no matches
+  if (newUsers.length === 0 && data.updateUsersList) {
+    debounceUserSearch(data, noPrefix)
+  }
+  return newUsers
+  /* eslint-enable camelcase */
+}
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
new file mode 100644
index 00000000..92d517b7
--- /dev/null
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -0,0 +1,53 @@
+const filterByKeyword = (list, keyword = '') => {
+  return list.filter(x => x.displayText.includes(keyword))
+}
+
+const EmojiPicker = {
+  data () {
+    return {
+      keyword: '',
+      activeGroup: 'standard'
+    }
+  },
+  methods: {
+    onEmoji (emoji) {
+      const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
+      this.$emit('emoji', ` ${value} `)
+      this.open = false
+    },
+    highlight (key) {
+      const ref = this.$refs['group-' + key]
+      const top = ref[0].offsetTop
+      this.$refs['emoji-groups'].scrollTop = top + 1
+      this.activeGroup = key
+    },
+    scrolledGroup (e) {
+      const top = e.target.scrollTop
+      Object.keys(this.emojis).forEach(key => {
+        if (this.$refs['group-' + key][0].offsetTop < top) {
+          this.activeGroup = key
+        }
+      })
+    }
+  },
+  computed: {
+    emojis () {
+      const standardEmojis = this.$store.state.instance.emoji || []
+      const customEmojis = this.$store.state.instance.customEmoji || []
+      return {
+        custom: {
+          text: 'Custom',
+          icon: 'icon-picture',
+          emojis: filterByKeyword(customEmojis, this.keyword)
+        },
+        standard: {
+          text: 'Standard',
+          icon: 'icon-star',
+          emojis: filterByKeyword(standardEmojis, this.keyword)
+        }
+      }
+    }
+  }
+}
+
+export default EmojiPicker
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
new file mode 100644
index 00000000..70d08700
--- /dev/null
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="emoji-dropdown-menu panel panel-default">
+    <div class="panel-heading emoji-tabs">
+      <span
+        v-for="(value, key) in emojis"
+        :key="key"
+        class="emoji-tabs-item"
+        :class="{'active': activeGroup === key}"
+        :title="value.text"
+        @click.prevent="highlight(key)"
+      >
+        <i :class="value.icon" />
+      </span>
+    </div>
+    <div class="panel-body emoji-dropdown-menu-content">
+      <div class="emoji-search">
+        <input
+          v-model="keyword"
+          type="text"
+          class="form-control"
+        >
+      </div>
+      <div
+        ref="emoji-groups"
+        class="emoji-groups"
+        @scroll="scrolledGroup"
+      >
+        <div
+          v-for="(value, key) in emojis"
+          :key="key"
+          class="emoji-group"
+        >
+          <h6
+            :ref="'group-' + key"
+            class="emoji-group-title"
+          >
+            {{ value.text }}
+          </h6>
+          <span
+            v-for="emoji in value.emojis"
+            :key="key + emoji.displayText"
+            :title="emoji.displayText"
+            class="emoji-item"
+            @click="onEmoji(emoji)"
+          >
+            <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
+            <img
+              v-else
+              :src="emoji.imageUrl"
+            >
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./emoji_picker.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.emoji {
+  &-dropdown {
+    position: absolute;
+    right: 0;
+    top: 28px;
+    z-index: 1;
+
+    &-toggle {
+      cursor: pointer;
+      position: absolute;
+      top: -23px;
+      right: 2px;
+      line-height: 1;
+
+      i {
+        font-size: 18px;
+      }
+    }
+
+    &-menu {
+      position: absolute;
+      z-index: 1;
+      right: 0;
+      width: 300px;
+      height: 300px;
+      display: flex;
+      flex-direction: column;
+      margin: 0 !important;
+
+      &-content {
+        flex: 1 1 1px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+
+  &-tabs {
+    &-item {
+      padding: 0 5px;
+
+      &.active {
+        border-bottom: 4px solid;
+
+        i {
+          color: $fallback--lightText;
+          color: var(--lightText, $fallback--lightText);
+        }
+      }
+    }
+  }
+
+  &-search {
+    padding: 5px;
+
+    input {
+      width: 100%;
+    }
+  }
+
+  &-groups {
+    flex: 1 1 1px;
+    overflow: auto;
+    position: relative;
+  }
+
+  &-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+
+    &-title {
+      font-size: 12px;
+      width: 100%;
+      margin: 0;
+      padding: 5px;
+    }
+  }
+
+  &-item {
+    width: 32px;
+    height: 32px;
+    box-sizing: border-box;
+    display: flex;
+    font-size: 32px;
+    align-items: center;
+    justify-content: center;
+    margin: 2px;
+    cursor: pointer;
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+
+}
+</style>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 40bbf6d4..f646aeb5 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -1,12 +1,12 @@
 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 EmojiInput from '../emoji_input/emoji_input.vue'
 import PollForm from '../poll/poll_form.vue'
 import StickerPicker from '../sticker_picker/sticker_picker.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { reject, map, uniqBy } from 'lodash'
-import suggestor from '../emoji-input/suggestor.js'
+import suggestor from '../emoji_input/suggestor.js'
 
 const buildMentionsString = ({ user, attentions }, currentUser) => {
   let allAttentions = [...attentions]
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index b5a7f0df..ae04ce73 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -11,8 +11,8 @@ import BlockCard from '../block_card/block_card.vue'
 import MuteCard from '../mute_card/mute_card.vue'
 import SelectableList from '../selectable_list/selectable_list.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
-import EmojiInput from '../emoji-input/emoji-input.vue'
-import suggestor from '../emoji-input/suggestor.js'
+import EmojiInput from '../emoji_input/emoji_input.vue'
+import suggestor from '../emoji_input/suggestor.js'
 import Autosuggest from '../autosuggest/autosuggest.vue'
 import Importer from '../importer/importer.vue'
 import Exporter from '../exporter/exporter.vue'
-- 
cgit v1.2.3-70-g09d2