From ae9aa08c877b61958005ab3f5ea5804f5b88cf4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 16 Nov 2018 12:23:07 +0100
Subject: [PATCH] Add twemoji parsing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 package.json                |  1 +
 src/components/Composer.vue | 21 ++++++++++++++-------
 src/main.js                 |  8 ++++++++
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 78b983e0..7ca4f847 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
 		"vue-infinite-loading": "^2.4.1",
 		"vue-router": "^3.0.1",
 		"vue-tribute": "^1.0.1",
+		"vue-twemoji": "^1.0.1",
 		"vuex": "^3.0.1",
 		"vuex-router-sync": "^5.0.0"
 	},
diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 596ad71c..c0bb1b5b 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -58,7 +58,7 @@
 							<div v-for="(emojiGroup, category) in emojis" :key="category">
 								<h5>{{ category }}</h5>
 								<div>
-							<span class="emoji" v-for="(emoji, emojiName) in emojiGroup" :key="emojiName" @click="insert(emoji)" :title="emojiName">{{ emoji }}</span>
+							<span class="emoji" v-for="(emoji, emojiName) in emojiGroup" :key="emojiName" @click="insert(emoji)" :title="emojiName" v-html="$twemoji.parse(emoji)"></span>
 								</div>
 							</div>
 						</div>
@@ -102,6 +102,7 @@
 		display: block; /* For Firefox */
 		opacity: .5;
 	}
+
 	input[type=submit] {
 		width: 44px;
 		height: 44px;
@@ -147,8 +148,9 @@
 	.emoji-picker input {
 		width: 100%;
 	}
-	.emoji-picker .emoji {
-		padding: 3px;
+	.emoji-picker .emoji img {
+		margin: 3px;
+		width: 16px;
 	}
 </style>
 <style>
@@ -211,9 +213,14 @@
 	.message .mention {
 		color: var(--color-primary-element);
 		background-color: var(--color-background-dark);
-		padding: 3px;
+		padding: 1px;
 		border-radius: 3px;
 	}
+	img.emoji {
+		margin: 3px;
+		width: 16px;
+		vertical-align: text-bottom;
+	}
 </style>
 <script>
 
@@ -287,11 +294,11 @@ export default {
 	},
 	methods: {
 		insert(emoji) {
-			this.post += emoji;
-			this.$refs.composerInput.innerText = this.post;
+			this.post += this.$twemoji.parse(emoji);
+			this.$refs.composerInput.innerHTML = this.post;
 		},
 		updateInput(event) {
-			this.post = this.$refs.composerInput.innerText;
+			this.post = this.$refs.composerInput.innerHTML;
 		},
 		togglePopoverMenu() {
 			this.menuOpened = !this.menuOpened
diff --git a/src/main.js b/src/main.js
index 1186c72a..ab525375 100644
--- a/src/main.js
+++ b/src/main.js
@@ -27,6 +27,7 @@ import { sync } from 'vuex-router-sync'
 import App from './App'
 import store from './store'
 import router from './router'
+import vuetwemoji from 'vue-twemoji'
 
 sync(store, router)
 
@@ -44,6 +45,13 @@ Vue.prototype.n = n
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
+Vue.use(vuetwemoji, {
+	baseUrl: OC.linkTo('social', 'img/'), //can set to local folder of emojis. default: https://twemoji.maxcdn.com/
+	extension: '.svg', //.svg, .png
+	className: 'emoji', //custom className for image output
+	size: 'svg' //image size
+})
+
 /* eslint-disable-next-line no-new */
 new Vue({
 	router: router,