markdown + reactons + emoji picker (needs bug fixes everywhere)

2023-01-18 00:37:47 -06:00
parent 1cba5ea335
commit 3cdf7758eb
13 changed files with 460 additions and 177 deletions
--- a/assets/json/emoji.json
+++ b/assets/json/emoji.json
--- a/components/EmojiPicker.vue
+++ b/components/EmojiPicker.vue
@@ -0,0 +1,203 @@
+<script lang="ts">
+import emojiJson from '~/assets/json/emoji.json'
+
+export default {
+	props: ['opened'],
+	data() {
+		return {
+			emojis: emojiJson.filter((e) => e.has_img_twitter),
+			categories: [
+				{ name: "people", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('smileys')).concat(emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('people'))) },
+				{ name: "nature", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('nature')) },
+				{ name: "food", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('food')) },
+				{ name: "activities", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('activities')) },
+				{ name: "travel", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('travel')) },
+				{ name: "objects", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('objects')) },
+				{ name: "symbols", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('symbols')) },
+				{ name: "flags", emojis: emojiJson.filter((e) => e.has_img_twitter).filter((e) => e.category.toLowerCase().includes('flags')) }
+			],
+		}
+	},
+	methods: {
+		emojiStyles(emojiShortName: string, width: number) {
+			const emojis = emojiJson.filter((e) => e.has_img_twitter)
+			const emoji = emojis.find((e) => e.short_name === emojiShortName)
+			const sheet_x = (emoji.sheet_y * (width + 2));
+			const sheet_y = (emoji.sheet_x * (width + 2));
+			return {
+				background: 'url(/32.png)',
+				width: `${width}px`,
+				height: `${width}px`,
+				display: 'inline-block',
+				'background-position': `-${sheet_y + 1}px -${sheet_x + 1}px`,
+				'background-size': '6480% 6480%'
+			}
+		},
+		scrollTo(categoryName: string) {
+			document.getElementById('emoji-pane').scrollTop = document.getElementById(categoryName).offsetTop - 92;
+		}
+	}
+}
+</script>
+
+<template>
+	<div v-if="opened"
+		class="rounded-lg shadow-md p-3 z-10 bg-[hsl(223,6.8%,19.8%)]">
+		<div class="py-1.5 flex flex-col">
+			<div class="flex-row gap-x-2 overflow-x-scroll">
+				<button @click="scrollTo('people')"
+					class="p-1.5 hover:bg-[hsl(223,6.8%,25.3%)] rounded-md transition-colors">
+					<svg xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24">
+						<g fill="none"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2">
+							<path d="M12 21a9 9 0 1 1 0-18a9 9 0 0 1 0 18z" />
+							<path d="M10 10c-.5-1-2.5-1-3 0m10 0c-.5-1-2.5-1-3 0m.5 5a3.5 3.5 0 0 1-5 0" />
+						</g>
+					</svg>
+				</button>
+				<button @click="scrollTo('nature')"
+					class="p-1.5 hover:bg-[hsl(223,6.8%,25.3%)] rounded-md transition-colors">
+					<svg xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24">
+						<path fill="none"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="m16 5l3 3l-2 1l4 4l-3 1l4 4h-9m2 3v-3m-7-5l-2-2m2 1l2-2M8 21V8m-2.176 7.995a3 3 0 0 1-2.743-3.69a2.998 2.998 0 0 1 .304-4.833A3 3 0 0 1 8 3.765a3 3 0 0 1 4.614 3.707a2.997 2.997 0 0 1 .305 4.833A3 3 0 0 1 10 16H6z" />
+					</svg>
+				</button>
+				<button @click="scrollTo('food')"
+					class="p-1.5 hover:bg-[hsl(223,6.8%,25.3%)] rounded-md transition-colors">
+					<svg xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24">
+						<path fill="none"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 21.5V17m-4 0h8V7a4 4 0 1 0-8 0v10zm0-6.5L16 7m-8 7.5l8-3.5" />
+					</svg>
+				</button>
+				<button @click="scrollTo('activities')"
+					class="p-1.5 hover:bg-[hsl(223,6.8%,25.3%)] rounded-md transition-colors">
+					<svg xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24">
+						<g fill="none"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2">
+							<path
+								d="M12 5h3.5a5 5 0 0 1 0 10H10l-4.015 4.227a2.3 2.3 0 0 1-3.923-2.035l1.634-8.173A5 5 0 0 1 8.6 5H12z" />
+							<path d="m14 15l4.07 4.284a2.3 2.3 0 0 0 3.925-2.023l-1.6-8.232M8 9v2m-1-1h2m5 0h2" />
+						</g>
+					</svg>
+				</button>
+				<button @click="scrollTo('travel')"
+					class="p-1.5 hover:bg-[hsl(223,6.8%,25.3%)] rounded-md transition-colors">
+					<svg xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24">
+						<path fill="none"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="m14.5 6.5l3-2.9a2.05 2.05 0 0 1 2.9 2.9l-2.9 3L20 17l-2.5 2.55L14 13l-3 3v3l-2 2l-1.5-4.5L3 15l2-2h3l3-3l-6.5-3.5L7 4l7.5 2.5z" />
+					</svg>
+				</button>
+				<button @click="scrollTo('objects')"
+					class="p-1.5 hover:bg-[hsl(223,6.8%,25.3%)] rounded-md transition-colors">
+					<svg xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24">
+						<g fill="none"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2">
+							<path
+								d="M3 14c.83.642 2.077 1.017 3.5 1c1.423.017 2.67-.358 3.5-1c.83-.642 2.077-1.017 3.5-1c1.423-.017 2.67.358 3.5 1M8 3a2.4 2.4 0 0 0-1 2a2.4 2.4 0 0 0 1 2m4-4a2.4 2.4 0 0 0-1 2a2.4 2.4 0 0 0 1 2" />
+							<path d="M3 10h14v5a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6v-5z" />
+							<path d="M16.746 16.726a3 3 0 1 0 .252-5.555" />
+						</g>
+					</svg>
+				</button>
+				<button @click="scrollTo('symbols')"
+					class="p-1.5 hover:bg-[hsl(223,6.8%,25.3%)] rounded-md transition-colors">
+					<svg xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24">
+						<g fill="none"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2">
+							<circle cx="12"
+								cy="12"
+								r="9" />
+							<path d="M12 7v5l3 3" />
+						</g>
+					</svg>
+				</button>
+				<button @click="scrollTo('flags')"
+					class="p-1.5 hover:bg-[hsl(223,6.8%,25.3%)] rounded-md transition-colors">
+					<svg xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24">
+						<path fill="none"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M5 5v16M19 5v9M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0M5 14a5 5 0 0 1 7 0a5 5 0 0 0 7 0" />
+					</svg>
+				</button>
+			</div>
+		</div>
+
+		<div class="max-w-[375px] max-h-[450px] overflow-hidden overflow-y-scroll scroll-smooth EmojiPicker"
+			id="emoji-pane">
+			<div class="text-black flex flex-col category"
+				v-for="category in categories">
+				<h6 class="uppercase text-[hsl(216,3.7%,73.5%)] sticky top-0 bg-[hsl(223,6.8%,19.8%)] py-1">{{
+					category.name
+				}}</h6>
+				<div class="flex flex-wrap"
+					:id="category.name">
+					<button v-for="emoji in category.emojis"
+						class="p-2 rounded hover:bg-[hsl(223,6.8%,28.4%)] h-12 transition-colors emoji"
+						@click="$emit('pickedEmoji', emoji.short_name)"
+						:aria-label='emoji.name.toLowerCase()'>
+						<span :style="emojiStyles(emoji.short_name, 32)"
+							draggable="false"
+							class="w-4" />
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style>
+.emoji-image {
+	border: none;
+}
+</style>
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,9 +1,12 @@
 <template>
-	<div class="message-content">
-		<div
-			class="absolute right-0 mr-10 -top-[15px] h-fit opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
+	<div class="absolute right-0 mr-10 -top-[20px] h-fit opacity-0 pointer-events-none action-buttons z-10"
+		:class="(emojiPickerOpen) ? 'opacity-100 pointer-events-auto' : ''">
+		<div class="absolute right-[38px] top-0 w-[375px]">
+			<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
+				:opened="emojiPickerOpen" />
+		</div>
 		<div class="relative">
-				<div
+			<div @click="emojiPickerOpen = !emojiPickerOpen"
 				class="bg-[hsl(220,calc(1*7.7%),22.9%)] hover:bg-[hsl(220,calc(1*7.7%),28.6%)] transition-colors border border-[rgb(32,34,37)] rounded-md flex text-[hsl(216,3.7%,73.5%)] w-fit h-fit">
 				<button class="p-1">
 					<svg xmlns="http://www.w3.org/2000/svg"
@@ -21,41 +24,44 @@
 			</div>
 		</div>
 	</div>
+	<div class="transition-[backdrop-filter] hover:backdrop-brightness-90 ease-[cubic-bezier(.37,.64,.59,.33)] duration-150 my-4 px-7 py-2 message-wrapper items-center"
+		:class="classes">
+		<div class="message-content">
 			<div class="message-sender-text">
 				<p class="mb-1 font-semibold w-fit"
 					v-if="showUsername">
 					{{ message.creator.username }}
 				</p>
-			<p class="break-words max-w-full">{{ message.body }}</p>
+				<p class="break-words max-w-full" v-html="message.body"></p>
 			</div>
 			<div v-for="invite in message.invites">
 				<InviteCard :invite="invite" />
 			</div>
-		<div class="flex gap-2">
-			<button @click="toggleReaction(message.id, reaction.emoji.name)"
+			<div class="flex gap-2 flex-wrap">
+				<button @click="toggleReaction(reaction.emoji.name)"
 					v-for="reaction in message.reactions"
 					class="py-0.5 px-1.5 bg-[hsl(223,6.9%,19.8%)] border items-center flex rounded-lg border-[hsl(223,6.9%,19.8%)] hover:border-[hsl(223,6.9%,33.3%)] hover:bg-[hsl(223,6.9%,21.3%)] transition-colors shadow-sm max-h-[30px]"
 					:class="(reaction.users.find((e) => e.id === user.id)) ? 'border-[rgb(88,101,242)] hover:border-[rgb(88,101,242)]' : ''">
-				<div class="flex items-center mr-0.5 w-4 drop-shadow"
-					v-html="twemoji(reaction.emoji.name)">
-
+					<div class="flex items-center mr-0.5 w-6 drop-shadow">
+						<span :style="emojiStyles(reaction.emoji.name, 16)"></span>
 					</div>
 					<div class="relative overflow-hidden ml-1.5">
 						<div class="min-w-[9px]  h-6"
 							:key="reaction.count">
-						<span>{{ reaction.count }}</span>
+							<span class="dropshadow-sm">{{ reaction.count }}</span>
 						</div>
 					</div>
 				</button>
 			</div>
 		</div>
+	</div>
 </template>

 <script lang="ts">
 import { PropType } from 'vue';
 import { IMessage } from '~/types';
 import { useGlobalStore } from '~/stores/store';
-import twemoji from 'twemoji'
+import emojiJson from '~/assets/json/emoji.json';

 export default {
 	props: {
@@ -66,23 +72,85 @@ export default {
 		showUsername: {
 			type: Boolean,
 			required: true
+		},
+		classes: {
+			type: String,
+			required: true
 		}
 	},
 	data() {
 		return {
 			user: storeToRefs(useGlobalStore()).user,
+			emojiPickerOpen: false,
 		}
 	},
 	methods: {
-		async toggleReaction(messageId: string, emoji: string) {
+		async toggleReaction(emoji: string) {
 			const route = useRoute()
-			const { message } = await $fetch(`/api/channels/${route.params.id}/messages/${messageId}/reactions/${emoji}`, { method: "POST" }) as IMessage
-			console.log(message)
-			useGlobalStore().updateMessage(messageId, message)
+			let { message } = await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/reactions/${emoji}`, { method: "POST" }) as { message: IMessage }
+
+			message.body = parseMessageBody(message.body, useGlobalStore().activeChannel)
+
+			useGlobalStore().updateMessage(this.message.id, message)
 		},
-		twemoji(emoji: string) {
-			return twemoji.parse(emoji, { base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' })
+		emojiStyles(emoji: string, width: number) {
+			const emojis = emojiJson.filter((e) => e.has_img_twitter)
+			const twemoji = emojis.find((e) => e.emoji === emoji)
+			if (twemoji === undefined || twemoji.sheet_x  === undefined || twemoji.sheet_y  === undefined) {
+				return {};
+			}
+			const sheet_x = (twemoji.sheet_y * (32 + 2)) / 2;
+			const sheet_y = (twemoji.sheet_x * (32 + 2)) / 2;
+			return {
+				background: 'url(/32.png)',
+				width: `${width + 1}px`,
+				height: `${width + 1}px`,
+				display: 'inline-block',
+				'background-position': `-${sheet_y}px -${sheet_x}px`,
+				'background-size': '1037px 1037px'
+			}
+		},
+		pickedEmoji(emoji: string) {
+			const replacementEmoji = emojiJson.find((e) => e.short_name === emoji);
+			if (!replacementEmoji?.emoji) return;
+			if (this.message.reactions?.find((e) => e.emoji.name === replacementEmoji.emoji)) return
+			this.toggleReaction(replacementEmoji.emoji)
+			this.emojiPickerOpen = false;
 		},
 	}
 }
 </script>
+
+<style>
+.message-wrapper:hover>div.action-buttons {
+	opacity: 100;
+	pointer-events: all;
+}
+
+pre.codeblock {
+	background-color: hsl(223, 6.9%, 19.8%);
+	border: 1px solid hsl(216, 7.2%, 13.5%);
+	border-radius: 0.375rem;
+	white-space: prewrap;
+	margin-top: 4px;
+	margin-bottom: 0;
+	display: flex;
+	overflow-x: scroll;
+	padding: 0.5rem;
+	line-height: 1.125rem;
+}
+
+pre.codeblock code {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+code.inline-code {
+	background-color: hsl(223, 6.9%, 19.8%);
+	padding: 0.2rem;
+	font-size: 85%;
+	border-radius: 4px;
+}
+
+</style>
--- a/components/MessagePane.vue
+++ b/components/MessagePane.vue
@@ -47,16 +47,13 @@
 					<p>No messages yet</p>
 				</div>
 				<div v-else
-					v-for="(message, i) in server.messages"
-					class="relative">
-					<div class="transition-[backdrop-filter] hover:backdrop-brightness-90 ease-[cubic-bezier(.37,.64,.59,.33)] duration-150 my-4 px-7 py-2 group"
-						:class="calculateMessageClasses(message, i)">
+					v-for="(message, i) in server.messages" class="relative message-wrapper">
 					<Message :message="message"
+						:classes="calculateMessageClasses(message, i)"
 						:showUsername="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id" />
 				</div>
 			</div>
 		</div>
-		</div>
 		<div v-if="showSearch"
 			class="absolute bottom-[calc(75px+0.5rem)] mx-4 w-[calc(100vw-88px-240px-32px)] py-3 px-4 bg-[hsl(223,6.9%,19.8%)] rounded-lg shadow-md z-5">
 			<div class="relative flex flex-col">
@@ -67,17 +64,18 @@
 				</div>
 			</div>
 		</div>
-		<div class="conversation-input w-[calc(100vw-88px-240px)] h-[75px]">
+		<div class="conversation-input w-[calc(100vw-88px-240px)] h-fit">
 			<form @keyup="checkForMentions"
 				@keypress="typing($event)"
 				@submit.prevent="sendMessage"
 				@keydown.enter.exact.prevent="sendMessage"
 				class="relative px-4 w-full pt-1.5 h-fit pb-1">
 				<div id="textbox"
-					class="px-4 rounded-md w-full h-[44px] bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[hsl(218,calc(1*4.6%),46.9%)] flex flex-row">
+					class="px-4 rounded-md w-full min-h-[44px] h-fit bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[hsl(218,calc(1*4.6%),46.9%)] flex flex-row">
 					<textarea type="text"
 						id="messageBox"
-						class="bg-transparent focus:outline-none py-2 w-full resize-none leading-relaxed"
+						class="bg-transparent focus:outline-none py-2 w-full resize-none leading-relaxed h-[44px]"
+						cols="1"
 						v-model="messageContent"
 						placeholder="Send a Message..." />
 					<input type="submit"
@@ -96,7 +94,7 @@
 								d="M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1L21 3" />
 						</svg></label>
 				</div>
-				<div class="w-full">
+				<div class="w-full h-4">
 					<p class="text-sm"
 						v-if="usersTyping.length > 0">
 						<span v-if="usersTyping.length < 4">
@@ -119,7 +117,7 @@
 <script lang="ts">
 import { Server } from 'socket.io';
 import { useGlobalStore } from '~/stores/store';
-import { IChannel, IMessage, IUser, SafeUser } from '~/types';
+import { IMessage, SafeUser } from '~/types';

 export default {
 	data() {
@@ -155,25 +153,13 @@ export default {
 			const headers = useRequestHeaders(['cookie']) as Record<string, string>;
 			if (!this.messageContent) return;

-			const message: IMessage = await $fetch(`/api/channels/sendMessage`, { method: 'post', body: { body: this.messageContent, channelId: this.server.id }, headers })
+			let message: IMessage = await $fetch(`/api/channels/sendMessage`, { method: 'post', body: { body: this.messageContent, channelId: this.server.id }, headers })

 			if (!message) return;
 			if (this.server.messages.includes(message)) return;

-			const mentions = message.body.match(/<@([a-z]|[0-9]){25}>/g);
+			message.body = parseMessageBody(message.body, useGlobalStore().activeChannel)

-			if (mentions) {
-				const participants = (this.server.DM) ? this.server.dmParticipants : this.server.server.participants;
-				if (!participants) throw new Error(`participants in channel "${this.server.id}" not found"`)
-				mentions.forEach((e: string) => {
-					if (!e) return
-					const id = e.split('<@')[1]?.split('>')[0];
-					if (!id) return;
-					const user = participants.find((e) => e.id === id)
-					if (!user) return;
-					message.body = message.body.split(e).join(`@${user.username}`)
-				});
-			}
 			this.server.messages.push(message)
 			this.messageContent = '';
 			const conversationDiv = document.getElementById('conversation-pane');
@@ -289,27 +275,15 @@ export default {
 			this.socket.removeAllListeners();

 			this.socket.on(`message-${this.server.id}`, (ev: { message: IMessage }) => {
-				const { message } = ev
+				let { message } = ev

-				const mentions = message.body.match(/<@([a-z]|[0-9]){25}>/g);
-
-				if (mentions) {
-					const participants = (this.server.DM) ? this.server.dmParticipants : this.server.server.participants;
-					if (!participants) throw new Error(`participants in channel "${this.server.id}" not found"`)
-					mentions.forEach((e: string) => {
-						if (!e) return
-						const id = e.split('<@')[1]?.split('>')[0];
-						if (!id) return;
-						const user = participants.find((e) => e.id === id)
-						if (!user) return;
-						message.body = message.body.split(e).join(`@${user.username}`)
-					});
-				}
+				message.body = parseMessageBody(message.body, useGlobalStore().activeChannel)

 				if (this.server.messages.find((e) => e.id === message.id)) {
 					// message is already in the server, replace it with the updated message
-					console.log(message.id, message)
+					console.log(message.id, message.body)
 					useGlobalStore().updateMessage(message.id, message)
+					console.log('raw', useGlobalStore().activeChannel.messages.find((e) => e.id === message.id)?.body)
 					return;
 				}

@@ -345,11 +319,11 @@ export default {
 		// resizeTextarea() {
 		// 	const textArea = document.getElementById('messageBox')
 		// 	const textBox = document.getElementById('textBox')
-		// 	var taLineHeight = 26; // This should match the line-height in the CSS
-		// 	var taHeight = textArea.scrollHeight; // Get the scroll height of the textarea
+		// 	const taLineHeight = 26; // This should match the line-height in the CSS
+		// 	const taHeight = textArea.scrollHeight; // Get the scroll height of the textarea
+		// 	if (!taHeight) taHeight = 44;
 		// 	textArea.style.height = taHeight + 'px'; // This line is optional, I included it so you can more easily count the lines in an expanded textarea
-		// 	textBox.style.height = taHeight + 'px'; 
-		// 	var numberOfLines = Math.floor(taHeight / taLineHeight);
+		// 	const numberOfLines = Math.floor(taHeight / taLineHeight);
 		// 	console.log("there are " + numberOfLines + " lines in the text area");
 		// 	console.log('a')
 		// }
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
        "@pinia/nuxt": "^0.4.6",
        "@prisma/client": "^4.8.0",
        "bcryptjs": "^2.4.3",
+        "emoji-datasource-twitter": "^14.0.0",
+        "emoji-regex": "^10.2.1",
        "nuxt": "^3.0.0",
        "pinia": "^2.0.28",
        "socket.io": "^4.5.4",
@@ -18,6 +20,7 @@
      "devDependencies": {
        "@nuxt/kit": "^3.0.0",
        "@types/bcryptjs": "^2.4.2",
+        "@types/emoji-js": "^3.5.0",
        "@types/twemoji": "^13.1.2",
        "@types/uuid": "^9.0.0",
        "@vueuse/core": "^9.10.0",
@@ -1129,6 +1132,12 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/emoji-js": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@types/emoji-js/-/emoji-js-3.5.0.tgz",
+      "integrity": "sha512-6dWe6Hyo7PR5tNEvWNAtnOeiQTLFoyPEofUc/waVJC1fkQqvJPw1j30szbzfJRehyg1/Mw82p4w714x0ImF9ZA==",
+      "dev": true
+    },
    "node_modules/@types/estree": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
@@ -2981,10 +2990,15 @@
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
      "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA=="
    },
+    "node_modules/emoji-datasource-twitter": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-datasource-twitter/-/emoji-datasource-twitter-14.0.0.tgz",
+      "integrity": "sha512-n0HDKNdUM+dtkXhNzSslo9GLFpe25S0HoP/cubuu321yEx0a3k4oLigzgnL1jyZZz8LF2Tt4Wk/4RHpABUO0yQ=="
+    },
    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.2.1.tgz",
+      "integrity": "sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA=="
    },
    "node_modules/encodeurl": {
      "version": "1.0.2",
@@ -6760,6 +6774,11 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
    "node_modules/strip-ansi": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
@@ -8735,6 +8754,12 @@
        "@types/node": "*"
      }
    },
+    "@types/emoji-js": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@types/emoji-js/-/emoji-js-3.5.0.tgz",
+      "integrity": "sha512-6dWe6Hyo7PR5tNEvWNAtnOeiQTLFoyPEofUc/waVJC1fkQqvJPw1j30szbzfJRehyg1/Mw82p4w714x0ImF9ZA==",
+      "dev": true
+    },
    "@types/estree": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
@@ -10064,10 +10089,15 @@
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
      "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA=="
    },
+    "emoji-datasource-twitter": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-datasource-twitter/-/emoji-datasource-twitter-14.0.0.tgz",
+      "integrity": "sha512-n0HDKNdUM+dtkXhNzSslo9GLFpe25S0HoP/cubuu321yEx0a3k4oLigzgnL1jyZZz8LF2Tt4Wk/4RHpABUO0yQ=="
+    },
    "emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.2.1.tgz",
+      "integrity": "sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA=="
    },
    "encodeurl": {
      "version": "1.0.2",
@@ -12643,6 +12673,13 @@
        "eastasianwidth": "^0.2.0",
        "emoji-regex": "^9.2.2",
        "strip-ansi": "^7.0.1"
+      },
+      "dependencies": {
+        "emoji-regex": {
+          "version": "9.2.2",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+          "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+        }
      }
    },
    "strip-ansi": {
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
    "@pinia/nuxt": "^0.4.6",
    "@prisma/client": "^4.8.0",
    "bcryptjs": "^2.4.3",
+    "emoji-datasource-twitter": "^14.0.0",
+    "emoji-regex": "^10.2.1",
    "nuxt": "^3.0.0",
    "pinia": "^2.0.28",
    "socket.io": "^4.5.4",
@@ -20,6 +22,7 @@
  "devDependencies": {
    "@nuxt/kit": "^3.0.0",
    "@types/bcryptjs": "^2.4.2",
+    "@types/emoji-js": "^3.5.0",
    "@types/twemoji": "^13.1.2",
    "@types/uuid": "^9.0.0",
    "@vueuse/core": "^9.10.0",
--- a/pages/channel/@me/[id].vue
+++ b/pages/channel/@me/[id].vue
@@ -1,5 +1,5 @@
 <template>
-	<MessagePane :server="server" />
+	<MessagePane />
 </template>

 <script lang="ts">
@@ -22,23 +22,8 @@ export default {
 		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?')
 		useGlobalStore().setActiveServer('dms', route.params.id);

-		function parseBody(body: string) {
-			const mentions = body.match(/<@([a-z]|[0-9]){25}>/g);
-			if (mentions) {
-				mentions.forEach((e: string) => {
-					if (!e) return
-					const id = e.split('<@')[1]?.split('>')[0];
-					if (!id) return;
-					const user = server.dmParticipants?.find((e) => e.id === id)
-					if (!user) return;
-					body = body.split(e).join(`@${user.username}`)
-				});
-			}
-			return body
-		}
-
 		server.messages?.forEach((e) => {
-			e.body = parseBody(e.body)
+			e.body = parseMessageBody(e.body, useGlobalStore().activeChannel)
 		})

 		useGlobalStore().setActiveChannel(server)
--- a/pages/channel/[id].vue
+++ b/pages/channel/[id].vue
@@ -1,5 +1,5 @@
 <template>
-	<MessagePane :server="server" />
+	<MessagePane />
 </template>

 <script lang="ts">
@@ -49,23 +49,8 @@ export default {
 		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?')
 		useGlobalStore().setActiveServer('servers', route.params.id)

-		function parseBody(body: string) {
-			const mentions = body.match(/<@([a-z]|[0-9]){25}>/g);
-			if (mentions) {
-				mentions.forEach((e: string) => {
-					if (!e) return
-					const id = e.split('<@')[1]?.split('>')[0];
-					if (!id) return;
-					const user = realServer?.participants.find((e) => e.id === id)
-					if (!user) return;
-					body = body.split(e).join(`@${user.username}`)
-				});
-			}
-			return body
-		}
-
 		server.messages?.forEach((e) => {
-			e.body = parseBody(e.body)
+			e.body = parseMessageBody(e.body, useGlobalStore().activeChannel)
 		})

 		useGlobalStore().setActiveChannel(server)
--- a/pages/test.vue
+++ b/pages/test.vue
@@ -1,21 +1,14 @@
-<script setup lang="ts">
-import { io } from 'socket.io-client'
-
-const connected = ref(false)
-
-onMounted(() => {
-  const socket = io();
-
-  socket.on('connect', () => {
-    connected.value = socket.connected
-  });
-
-  socket.on('disconnect', () => {
-    connected.value = socket.connected
-  });
-})
-</script>
-
 <template>
-  <div>Connected: {{ connected }}</div>
+  <span class="test"></span>
 </template>
+
+<style>
+.test {
+  background: url(/32.png);
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  background-position: -544px -510px;
+  background-size: 6480% 6480%;
+}
+</style>
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -18,8 +18,7 @@ model User {
  channels     Channel[]
  roles        Role[]
  createdAt    DateTime   @default(now())
-  Reaction     Reaction? @relation(fields: [reactionId], references: [id])
-  reactionId   String?
+  Reactions    Reaction[]
 }

 model Server {
--- a/public/32.png
+++ b/public/32.png
--- a/server/api/channels/[id]/messages/[messageId]/reactions/[name].post.ts
+++ b/server/api/channels/[id]/messages/[messageId]/reactions/[name].post.ts
@@ -1,6 +1,6 @@
 import { IChannel, IServer, SafeUser } from '~/types'
+import emojiRegex from 'emoji-regex'
 import { PrismaClient } from '@prisma/client'
-import { node } from 'unenv'
 const prisma = new PrismaClient()

 export default defineEventHandler(async (event) => {
@@ -12,23 +12,14 @@ export default defineEventHandler(async (event) => {
 	}

 	const emoji = decodeURIComponent(event.context.params.name)
-
-	if (emoji.length !== 2) {
+	const match = emoji.match(emojiRegex());
+	if (!match || match.length !== 1) {
 		event.node.res.statusCode = 400;
 		return {
 			message: 'reaction is not an emoji or more than one emoji.'
 		}
 	}

-	const first = emoji.charCodeAt(0);
-	const second = emoji.charCodeAt(1);
-
-	if (!((first >= 0xD800 && first <= 0xDBFF) && (second >= 0xDC00 && second <= 0xDFFF))) {
-		event.node.res.statusCode = 400;
-		return {
-			message: 'reaction is not an emoji or more than one emoji.'
-		}
-	}

 	const messageSelect = {
 		id: true,
--- a/utils/parseMessageBody.ts
+++ b/utils/parseMessageBody.ts
@@ -0,0 +1,44 @@
+import { IChannel } from "~/types";
+
+export default function parseBody(body: string, activeChannel: IChannel) {
+	body = escape(body);
+	const rules = [
+		//bold, italics and paragragh rules
+		[/\&#42;\&#42;\s?([^\n]+)\&#42;\&#42;/g, "<b>$1</b>"],
+		[/\&#42;\s?([^\n]+)\&#42;/g, "<i>$1</i>"],
+		[/\&#95;\&#95;\s?([^\n]+)\&#95;\&#95;/g, "<u>$1</u>"],
+		[/\&#126;\&#126;\s?([^\n]+)\&#126;\&#126;/g, "<s>$1</s>"],
+
+		// code lines and blocks
+		[/&#96;&#96;&#96;(.+?)&#96;&#96;&#96;/g, "<pre class='codeblock'><code>$1</code></pre>"],
+		[/(?<!&#96;)&#96;(.+?)&#96;(?!&#96;)/g, "<code class='inline-code'>$1</code>"],
+	  ];
+
+	rules.forEach(([rule, template]) => {
+		body = body.replace(rule, template);
+	})
+
+	const mentions = body.match(/<@([a-z]|[0-9]){25}>/g);
+
+	if (mentions) {
+		const participants = (activeChannel.DM) ? activeChannel.dmParticipants : activeChannel.server.participants;
+		if (!participants) throw new Error(`participants in channel "${activeChannel.id}" not found"`)
+		mentions.forEach((e: string) => {
+			if (!e) return
+			const id = e.split('<@')[1]?.split('>')[0];
+			if (!id) return;
+			const user = participants.find((e) => e.id === id)
+			if (!user) return;
+			body = body.split(e).join(`@${user.username}`)
+		});
+	}
+
+	return body
+}
+
+function escape(s: string) {
+    return s.replace(
+        /[^0-9A-Za-z ]/g,
+        c => "&#" + c.charCodeAt(0) + ";"
+    );
+}