From 0a4505ed3ac8c05f0e6834980ce13dd1818f2cae Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Sat, 22 Jan 2022 19:05:53 -0700
Subject: [PATCH] Update PostComponent, add custom emoji support

---
 resources/assets/js/components/PostComponent.vue       | 10 ++++++++--
 resources/assets/js/components/partials/StatusCard.vue |  9 ++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/resources/assets/js/components/PostComponent.vue b/resources/assets/js/components/PostComponent.vue
index 03790913e..9499cd8df 100644
--- a/resources/assets/js/components/PostComponent.vue
+++ b/resources/assets/js/components/PostComponent.vue
@@ -125,7 +125,7 @@
 										<div v-else>
 											<p :class="[status.content.length > 620 ? 'mb-1 read-more' : 'mb-1']" style="overflow: hidden;">
 												<a class="font-weight-bold pr-1 text-dark text-decoration-none" :href="statusProfileUrl">{{statusUsername}}</a>
-												<span class="comment-text" :id="status.id + '-status-readmore'" v-html="status.content"></span>
+												<span class="comment-text" :id="status.id + '-status-readmore'" v-html="content"></span>
 											</p>
 										</div>
 										<hr>
@@ -953,7 +953,8 @@ export default {
 									})
 								}
 							]
-						}
+						},
+						content: undefined
 					}
 		},
 		watch: {
@@ -1027,6 +1028,11 @@ export default {
 								}
 								self.status = response.data.status;
 								self.media = self.status.media_attachments;
+								self.content = response.data.status.content;
+								self.status.emojis.forEach(function(emoji) {
+									let img = `<img draggable="false" class="emojione custom-emoji" alt="${emoji.shortcode}" title="${emoji.shortcode}" src="${emoji.url}" data-original="${emoji.url}" data-static="${emoji.static_url}" width="18" height="18" />`;
+									self.content = self.content.replace(`:${emoji.shortcode}:`, img);
+								});
 								self.likesPage = 2;
 								self.sharesPage = 2;
 								self.showCaption = !response.data.status.sensitive;
diff --git a/resources/assets/js/components/partials/StatusCard.vue b/resources/assets/js/components/partials/StatusCard.vue
index 4d2422e4d..0b60723b2 100644
--- a/resources/assets/js/components/partials/StatusCard.vue
+++ b/resources/assets/js/components/partials/StatusCard.vue
@@ -160,7 +160,7 @@
 						<span class="username font-weight-bold">
 							<bdi><a class="text-dark" :href="profileUrl(status)">{{status.account.username}}</a></bdi>
 						</span>
-						<span class="status-content" v-html="status.content"></span>
+						<span class="status-content" v-html="content"></span>
 					</p>
 				</div>
 				<div class="timestamp mt-2">
@@ -241,11 +241,18 @@
 				replyText: '',
 				replyNsfw: false,
 				emoji: window.App.util.emoji,
+				content: undefined
 			}
 		},
 
 		mounted() {
+			let self = this;
 			this.profile = window._sharedData.curUser;
+			this.content = this.status.content;
+			this.status.emojis.forEach(function(emoji) {
+				let img = `<img draggable="false" class="emojione custom-emoji" alt="${emoji.shortcode}" title="${emoji.shortcode}" src="${emoji.url}" data-original="${emoji.url}" data-static="${emoji.static_url}" width="18" height="18" />`;
+				self.content = self.content.replace(`:${emoji.shortcode}:`, img);
+			});
 		},
 
 		methods: {