zoeissleeping/discord-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Zoe
2023-01-18 00:37:47 -06:00
parent 1cba5ea335
commit 3cdf7758eb
13 changed files with 460 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/json/emoji.json Normal file
View File

File diff suppressed because one or more lines are too long

203
components/EmojiPicker.vue Normal file
View File

@@ -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>

104
components/Message.vue
View File

@@ -1,9 +1,12 @@
<template> <template>
<div class="message-content"> <div class="absolute right-0 mr-10 -top-[20px] h-fit opacity-0 pointer-events-none action-buttons z-10"
<div :class="(emojiPickerOpen) ? 'opacity-100 pointer-events-auto' : ''">
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-[38px] top-0 w-[375px]">
<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
:opened="emojiPickerOpen" />
</div>
<div class="relative"> <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"> 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"> <button class="p-1">
<svg xmlns="http://www.w3.org/2000/svg" <svg xmlns="http://www.w3.org/2000/svg"
@@ -21,41 +24,44 @@
</div> </div>
</div> </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"> <div class="message-sender-text">
<p class="mb-1 font-semibold w-fit" <p class="mb-1 font-semibold w-fit"
v-if="showUsername"> v-if="showUsername">
{{ message.creator.username }} {{ message.creator.username }}
</p> </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>
<div v-for="invite in message.invites"> <div v-for="invite in message.invites">
<InviteCard :invite="invite" /> <InviteCard :invite="invite" />
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2 flex-wrap">
<button @click="toggleReaction(message.id, reaction.emoji.name)" <button @click="toggleReaction(reaction.emoji.name)"
v-for="reaction in message.reactions" 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="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)]' : ''"> :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" <div class="flex items-center mr-0.5 w-6 drop-shadow">
v-html="twemoji(reaction.emoji.name)"> <span :style="emojiStyles(reaction.emoji.name, 16)"></span>
</div> </div>
<div class="relative overflow-hidden ml-1.5"> <div class="relative overflow-hidden ml-1.5">
<div class="min-w-[9px] h-6" <div class="min-w-[9px] h-6"
:key="reaction.count"> :key="reaction.count">
<span>{{ reaction.count }}</span> <span class="dropshadow-sm">{{ reaction.count }}</span>
</div> </div>
</div> </div>
</button> </button>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { PropType } from 'vue'; import { PropType } from 'vue';
import { IMessage } from '~/types'; import { IMessage } from '~/types';
import { useGlobalStore } from '~/stores/store'; import { useGlobalStore } from '~/stores/store';
import twemoji from 'twemoji' import emojiJson from '~/assets/json/emoji.json';
export default { export default {
props: { props: {
@@ -66,23 +72,85 @@ export default {
showUsername: { showUsername: {
type: Boolean, type: Boolean,
required: true required: true
},
classes: {
type: String,
required: true
} }
}, },
data() { data() {
return { return {
user: storeToRefs(useGlobalStore()).user, user: storeToRefs(useGlobalStore()).user,
emojiPickerOpen: false,
} }
}, },
methods: { methods: {
async toggleReaction(messageId: string, emoji: string) { async toggleReaction(emoji: string) {
const route = useRoute() const route = useRoute()
const { message } = await $fetch(`/api/channels/${route.params.id}/messages/${messageId}/reactions/${emoji}`, { method: "POST" }) as IMessage let { message } = await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/reactions/${emoji}`, { method: "POST" }) as { message: IMessage }
console.log(message)
useGlobalStore().updateMessage(messageId, message) message.body = parseMessageBody(message.body, useGlobalStore().activeChannel)
useGlobalStore().updateMessage(this.message.id, message)
}, },
twemoji(emoji: string) { emojiStyles(emoji: string, width: number) {
return twemoji.parse(emoji, { base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' }) 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> </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>

62
components/MessagePane.vue
View File

@@ -47,16 +47,13 @@
<p>No messages yet</p> <p>No messages yet</p>
</div> </div>
<div v-else <div v-else
v-for="(message, i) in server.messages" v-for="(message, i) in server.messages" class="relative message-wrapper">
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)">
<Message :message="message" <Message :message="message"
:classes="calculateMessageClasses(message, i)"
:showUsername="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id" /> :showUsername="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id" />
</div> </div>
</div> </div>
</div> </div>
</div>
<div v-if="showSearch" <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"> 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"> <div class="relative flex flex-col">
@@ -67,17 +64,18 @@
</div> </div>
</div> </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" <form @keyup="checkForMentions"
@keypress="typing($event)" @keypress="typing($event)"
@submit.prevent="sendMessage" @submit.prevent="sendMessage"
@keydown.enter.exact.prevent="sendMessage" @keydown.enter.exact.prevent="sendMessage"
class="relative px-4 w-full pt-1.5 h-fit pb-1"> class="relative px-4 w-full pt-1.5 h-fit pb-1">
<div id="textbox" <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" <textarea type="text"
id="messageBox" 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" v-model="messageContent"
placeholder="Send a Message..." /> placeholder="Send a Message..." />
<input type="submit" <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" /> 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> </svg></label>
</div> </div>
<div class="w-full"> <div class="w-full h-4">
<p class="text-sm" <p class="text-sm"
v-if="usersTyping.length > 0"> v-if="usersTyping.length > 0">
<span v-if="usersTyping.length < 4"> <span v-if="usersTyping.length < 4">
@@ -119,7 +117,7 @@
<script lang="ts"> <script lang="ts">
import { Server } from 'socket.io'; import { Server } from 'socket.io';
import { useGlobalStore } from '~/stores/store'; import { useGlobalStore } from '~/stores/store';
import { IChannel, IMessage, IUser, SafeUser } from '~/types'; import { IMessage, SafeUser } from '~/types';
export default { export default {
data() { data() {
@@ -155,25 +153,13 @@ export default {
const headers = useRequestHeaders(['cookie']) as Record<string, string>; const headers = useRequestHeaders(['cookie']) as Record<string, string>;
if (!this.messageContent) return; 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 (!message) return;
if (this.server.messages.includes(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.server.messages.push(message)
this.messageContent = ''; this.messageContent = '';
const conversationDiv = document.getElementById('conversation-pane'); const conversationDiv = document.getElementById('conversation-pane');
@@ -289,27 +275,15 @@ export default {
this.socket.removeAllListeners(); this.socket.removeAllListeners();
this.socket.on(`message-${this.server.id}`, (ev: { message: IMessage }) => { 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); 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}`)
});
}
if (this.server.messages.find((e) => e.id === message.id)) { if (this.server.messages.find((e) => e.id === message.id)) {
// message is already in the server, replace it with the updated message // 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) useGlobalStore().updateMessage(message.id, message)
console.log('raw', useGlobalStore().activeChannel.messages.find((e) => e.id === message.id)?.body)
return; return;
} }
@@ -345,11 +319,11 @@ export default {
// resizeTextarea() { // resizeTextarea() {
// const textArea = document.getElementById('messageBox') // const textArea = document.getElementById('messageBox')
// const textBox = document.getElementById('textBox') // const textBox = document.getElementById('textBox')
// var taLineHeight = 26; // This should match the line-height in the CSS // const taLineHeight = 26; // This should match the line-height in the CSS
// var taHeight = textArea.scrollHeight; // Get the scroll height of the textarea // 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 // 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'; // const numberOfLines = Math.floor(taHeight / taLineHeight);
// var numberOfLines = Math.floor(taHeight / taLineHeight);
// console.log("there are " + numberOfLines + " lines in the text area"); // console.log("there are " + numberOfLines + " lines in the text area");
// console.log('a') // console.log('a')
// } // }

49
package-lock.json generated
View File

@@ -8,6 +8,8 @@
"@pinia/nuxt": "^0.4.6", "@pinia/nuxt": "^0.4.6",
"@prisma/client": "^4.8.0", "@prisma/client": "^4.8.0",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"emoji-datasource-twitter": "^14.0.0",
"emoji-regex": "^10.2.1",
"nuxt": "^3.0.0", "nuxt": "^3.0.0",
"pinia": "^2.0.28", "pinia": "^2.0.28",
"socket.io": "^4.5.4", "socket.io": "^4.5.4",
@@ -18,6 +20,7 @@
"devDependencies": { "devDependencies": {
"@nuxt/kit": "^3.0.0", "@nuxt/kit": "^3.0.0",
"@types/bcryptjs": "^2.4.2", "@types/bcryptjs": "^2.4.2",
"@types/emoji-js": "^3.5.0",
"@types/twemoji": "^13.1.2", "@types/twemoji": "^13.1.2",
"@types/uuid": "^9.0.0", "@types/uuid": "^9.0.0",
"@vueuse/core": "^9.10.0", "@vueuse/core": "^9.10.0",
@@ -1129,6 +1132,12 @@
"@types/node": "*" "@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": { "node_modules/@types/estree": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz", "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", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
"integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==" "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": { "node_modules/emoji-regex": {
"version": "9.2.2", "version": "10.2.1",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.2.1.tgz",
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==" "integrity": "sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA=="
}, },
"node_modules/encodeurl": { "node_modules/encodeurl": {
"version": "1.0.2", "version": "1.0.2",
@@ -6760,6 +6774,11 @@
"url": "https://github.com/sponsors/sindresorhus" "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": { "node_modules/strip-ansi": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
@@ -8735,6 +8754,12 @@
"@types/node": "*" "@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": { "@types/estree": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz", "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", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
"integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==" "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": { "emoji-regex": {
"version": "9.2.2", "version": "10.2.1",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.2.1.tgz",
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==" "integrity": "sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA=="
}, },
"encodeurl": { "encodeurl": {
"version": "1.0.2", "version": "1.0.2",
@@ -12643,6 +12673,13 @@
"eastasianwidth": "^0.2.0", "eastasianwidth": "^0.2.0",
"emoji-regex": "^9.2.2", "emoji-regex": "^9.2.2",
"strip-ansi": "^7.0.1" "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": { "strip-ansi": {

3
package.json
View File

@@ -10,6 +10,8 @@
"@pinia/nuxt": "^0.4.6", "@pinia/nuxt": "^0.4.6",
"@prisma/client": "^4.8.0", "@prisma/client": "^4.8.0",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"emoji-datasource-twitter": "^14.0.0",
"emoji-regex": "^10.2.1",
"nuxt": "^3.0.0", "nuxt": "^3.0.0",
"pinia": "^2.0.28", "pinia": "^2.0.28",
"socket.io": "^4.5.4", "socket.io": "^4.5.4",
@@ -20,6 +22,7 @@
"devDependencies": { "devDependencies": {
"@nuxt/kit": "^3.0.0", "@nuxt/kit": "^3.0.0",
"@types/bcryptjs": "^2.4.2", "@types/bcryptjs": "^2.4.2",
"@types/emoji-js": "^3.5.0",
"@types/twemoji": "^13.1.2", "@types/twemoji": "^13.1.2",
"@types/uuid": "^9.0.0", "@types/uuid": "^9.0.0",
"@vueuse/core": "^9.10.0", "@vueuse/core": "^9.10.0",

19
pages/channel/@me/[id].vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<MessagePane :server="server" /> <MessagePane />
</template> </template>
<script lang="ts"> <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?') 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); 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) => { server.messages?.forEach((e) => {
e.body = parseBody(e.body) e.body = parseMessageBody(e.body, useGlobalStore().activeChannel)
}) })
useGlobalStore().setActiveChannel(server) useGlobalStore().setActiveChannel(server)

19
pages/channel/[id].vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<MessagePane :server="server" /> <MessagePane />
</template> </template>
<script lang="ts"> <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?') 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) 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) => { server.messages?.forEach((e) => {
e.body = parseBody(e.body) e.body = parseMessageBody(e.body, useGlobalStore().activeChannel)
}) })
useGlobalStore().setActiveChannel(server) useGlobalStore().setActiveChannel(server)

31
pages/test.vue
View File

@@ -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> <template>
<div>Connected: {{ connected }}</div> <span class="test"></span>
</template> </template>
<style>
.test {
background: url(/32.png);
width: 16px;
height: 16px;
display: inline-block;
background-position: -544px -510px;
background-size: 6480% 6480%;
}
</style>

3
prisma/schema.prisma
View File

@@ -18,8 +18,7 @@ model User {
channels Channel[] channels Channel[]
roles Role[] roles Role[]
createdAt DateTime @default(now()) createdAt DateTime @default(now())
Reaction Reaction? @relation(fields: [reactionId], references: [id]) Reactions Reaction[]
reactionId String?
} }
model Server { model Server {

BIN
public/32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 MiB

15
server/api/channels/[id]/messages/[messageId]/reactions/[name].post.ts
View File

@@ -1,6 +1,6 @@
import { IChannel, IServer, SafeUser } from '~/types' import { IChannel, IServer, SafeUser } from '~/types'
import emojiRegex from 'emoji-regex'
import { PrismaClient } from '@prisma/client' import { PrismaClient } from '@prisma/client'
import { node } from 'unenv'
const prisma = new PrismaClient() const prisma = new PrismaClient()
export default defineEventHandler(async (event) => { export default defineEventHandler(async (event) => {
@@ -12,23 +12,14 @@ export default defineEventHandler(async (event) => {
} }
const emoji = decodeURIComponent(event.context.params.name) const emoji = decodeURIComponent(event.context.params.name)
const match = emoji.match(emojiRegex());
if (emoji.length !== 2) { if (!match || match.length !== 1) {
event.node.res.statusCode = 400; event.node.res.statusCode = 400;
return { return {
message: 'reaction is not an emoji or more than one emoji.' 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 = { const messageSelect = {
id: true, id: true,

44
utils/parseMessageBody.ts Normal file
View File

@@ -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) + ";"
);
}