I am developing an app for chat using laravel 5.6 and vue js. Though I am new at vue I have managed to get working using a package called
emoji-mart-vue
from npm.
Everything is working fine except the emojis which get rendered in teaxtarea are shown as black and white while I need to display them in the original way they are shown in the emoji picker.
Any help in this regards is highly appreciated.
What I have tried:
TextareaEmojiPicker.vue
<template>
<div class="textarea-emoji-picker">
<textarea
ref="textarea"
class="textarea"
:value="value"
@input="$emit('input', $event.target.value)"
></textarea>
<picker
v-show="showEmojiPicker"
title="Pick your emoji..."
emoji="point_up"
@select="addEmoji"
/>
<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>
</template>
<script>
import { Picker } from 'emoji-mart-vue';
export default {
components: { Picker },
name: "TextareaEmojiPicker",
props: {
value: {
type: String,
default: ''
}
},
data () {
return {
showEmojiPicker: false
}
},
methods: {
toggleEmojiPicker () {
this.showEmojiPicker = !this.showEmojiPicker
},
addEmoji (emoji) {
const textarea = this.$refs.textarea;
const cursorPosition = textarea.selectionEnd;
const start = this.value.substring(0, textarea.selectionStart);
const end = this.value.substring(textarea.selectionStart);
const text = start + emoji.native + end;
this.$emit('input', text);
textarea.focus();
this.$nextTick(() => {
textarea.selectionEnd = cursorPosition + emoji.native.length;
})
}
}
}
</script>
<style scoped>
* {
box-sizing: border-box;
}
.textarea-emoji-picker {
position: relative;
width: 400px;
margin: 0 auto;
}
.textarea {
width: 100%;
min-height: 300px;
outline: none;
box-shadow: none;
padding: 10px 28px 10px 10px;
font-size: 15px;
border: 1px solid #BABABA;
color: #333;
border-radius: 2px;
box-shadow: 0px 2px 4px 0 rgba(0,0,0,0.1) inset;
resize: vertical;
}
.emoji-mart {
position: absolute;
top: 33px;
right: 10px;
}
.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>
and
emoji-vue.vue imports
TextareaEmojiPicker.vue here:
<template>
<div class="emoji-page">
<textarea-emoji-picker v-model="text"/>
</div>
</template>
<script>
import TextareaEmojiPicker from './TextareaEmojiPicker'
export default {
name: "emoji-vue",
components: { TextareaEmojiPicker },
data () {
return {
text: ''
}
}
}
</script>
<style scoped>
.emoji-page {
padding-top: 50px;
}
</style>