worked on transcripts
diff --git a/Components/Transcripts/Embed.js b/Components/Transcripts/Embed.js
index dca30b2..b163da8 100644
--- a/Components/Transcripts/Embed.js
+++ b/Components/Transcripts/Embed.js
@@ -1,15 +1,72 @@
import Styles from "../../styles/Components/transcripts.module.css"
import Image from "next/image";
-import JSDom from "jsdom";
+import Showdown from "showdown";
+import Axios from "axios";
+import { useEffect, useState } from "react";
-function embed(props) {
+const bold = /(\*\*.+\*\*)/g;
+const italic = /(\*.+\*|\_.+\_)/g;
+const emoji = /(<a?:.+:\D+>)/g;
+const user = /(<@!?\d+>)/g;
+const underline = /(\_\_.+\_\_)/g;
+const strikethrough = /(\~\~.+\~\~)/g;
+const code = /(\`.+\`)/g;
+const codeBlock = /(\`\`\`.+\`\`\`)/g;
+const spoiler = /(\`\`\`.+\`\`\`)/g;
+
+const regex = /(\*\*\*.+\*\*\*|\*\*.+\*\*|\*.+\*|\_.+\_|\_\_.+\_\_|\~\~.+\~\~|\`.+\`|\`\`\`.+\`\`\`|\`\`\`.+\`\`\`|<a?:.+:\D+>|<@!?\d+>)/g;
+
+const converter = new Showdown.Converter();
+
+async function parse(text) {
+ const splitText = text.split(regex);
+ console.log(splitText)
+ return await splitText.map( async (item, index) => {
+ if (item.match(bold)) {
+ return <b key={index}>{item.replaceAll(/\*\*/g, '')}</b>
+ }
+ if (item.match(underline)) {
+ return <u key={index}>{item.replaceAll(/\_\_/g, '')}</u>
+ }
+ if (item.match(italic)) {
+ return <i key={index}>{item.replaceAll(/\*/g, '')}</i>
+ }
+ if (item.match(code)) {
+ return <code key={index}>{item.replaceAll(/\`/g, '')}</code>
+ }
+ if (item.match(emoji)) {
+ return <Image key={index} src={`https://cdn.discord.com/emojis/${item.replaceAll(/\D/g, '')}`} width={20} height={20} alt="" />
+ }
+ if (item.match(user)) {
+ const username = (await Axios.get(`http://localhost:10000/users/${item.replaceAll(/\D/g, '')}`)).data;
+ console.log(username)
+ return <>{username}</>
+
+ }
+ return item
+ })
+
+
+}
+
+function Embed(props) {
let description = props.embed.description;
if (description) {
description = description.split("\n");
}
- return ( // added it
+ const [newDesc, setNewDesc] = useState([]);
+
+ useEffect(() => {
+ async function stuff() {
+ const parsed = await parse(props.embed.description);
+ setNewDesc(newDesc => [...newDesc, parsed]);
+ }
+ stuff();
+ })
+
+ return (
<div className={Styles.embed} style={{borderColor: props.color ?? "#F27878"}}>
{
props.embed.author ?
@@ -38,18 +95,8 @@
props.embed.description ?
<div className={Styles.embedDescription}>
{
- description.map(i => {// idk how to do make this work
- i = i
- .replaceAll(/<a?:.+:\D+>/g, (match, id) => {
- return <Image src={`https://cdn.discordapp.com/emojis/${id}.png`} alt=""/>
- })
- .replaceAll(/\*\*.+\*\*/g, (match, text) => {
- return <b>{text}</b>
- })
- .replaceAll(/\*.+\*/g, (match, text) => {
- return <i>{text}</i>
- })
- return <>{new JSDom.JSDOM(i)}<br/></> // CANT FIND A DOM PARSER THAT WORKS
+ newDesc.map((item) => {
+ return item;
})
}
</div>
@@ -59,4 +106,4 @@
)
}
-export default embed;
\ No newline at end of file
+export default Embed;