tahash/textarea-emoji-picker

Source code for "How to Add Emoji Picker in Text Fields" tutorial.

textarea-emoji-picker's Issues

Hey brother => how do i prevent native emojis

<template>
  <div class="flex-wrap">

    <input ref="textarea" :native="false" placeholder="Message #general" type="text" @keydown.enter="storeThread" v-model="body" class="focus:outline-none relative items-center rounded px-8 py-2 border border-_c1_l w-full"/>
    <div>
      <picker @select="addEmoji"     :emojiSize="40" :showPreview="false" :infiniteScroll="false" :perLine="5" set="apple" :style="{ position: 'absolute', bottom: '20px', right: '20px' }" />
      <span
        class="emoji-trigger"
        :class="{ 'triggered': showEmojiPicker }"
        @mousedown.prevent="toggleEmojiPicker"
      >
      <svg
        style="width:20px;height:20px"
        viewBox="0 0 24 24"
      >
        <path fill="#888888" d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z" />
      </svg>
    </span>
    </div>
  </div>
</template>
<script>
  import { Picker } from 'emoji-mart-vue'
export default {
    components:{Picker},
  name: 'TrInput',
  data:()=>({
  	body:'',
    showEmojiPicker: false
  }),
  methods:{
    toggleEmojiPicker () {
      this.showEmojiPicker = !this.showEmojiPicker
    },
    addEmoji (emoji) {
      console.log(emoji)
      const textarea = this.$refs.textarea
      const cursorPosition = textarea.selectionEnd
      const start = this.body.substring(0, textarea.selectionStart)
      const end = this.body.substring(textarea.selectionStart)
      const text = start + emoji.native + end
      this.body = text
      this.$nextTick(() => {
        textarea.selectionEnd = cursorPosition + emoji.native.length
      })
    },
  	storeThread(){
  		this.$store.dispatch('channel/newThread',{body:this.body, channel_id: this.$route.params.channel_id})
  	},


  }
}

</script>
<style scoped>
  .emoji-trigger {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    height: 20px;
  }
  .emoji-trigger path {
    transition: 0.1s all;
  }
  .emoji-trigger:hover path {
    fill: #000000;
  }
  .emoji-trigger.triggered path {
    fill: darken(#FEC84A, 15%);
  }
</style>