The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
fix some discord markdown
+16
-14
+16
-14
components/discord/markdown.tsx
+16
-14
components/discord/markdown.tsx
···
1
1
import React, { FunctionComponent } from "react";
2
-
import { ReactMarkdown } from "react-markdown/lib/react-markdown";
2
+
import ReactMarkdown from "react-markdown";
3
3
import rehypeRaw from "rehype-raw";
4
4
5
5
interface Props {
···
13
13
.replaceAll(">", ">");
14
14
15
15
const plClassName = `${mode === "DARK" ? "bg-wamellow text-neutral-200" : "bg-wamellow-100 text-neutral-800"} border border-violet-400 p-[3px] rounded-lg opacity-80 font-light`;
16
-
const emClassName = "rounded-md";
17
16
18
17
function parseDiscordMarkdown(content: string) {
19
18
return content
20
19
.replace(/__(.*?)__/g, "<u>$1</u>")
21
20
.replace(/\{(.*?)\.(.*?)\}/g, `<span className='${plClassName}'>$1 $2</span>`)
22
-
.replace(/<a?:\w{2,32}:(.*?)>/g, `<img className='${emClassName}' src="$https://cdn.discordapp.com/emojis/$1.webp?size=40&quality=lossless" />`)
23
-
.replace(/<(@|@!)\d{15,21}>/g, "<span className='bg-blurple/25 hover:bg-blurple/50 p-1 rounded-md text-neutral-100 font-light text-sx duration-200 cursor-pointer'>@User</span>")
24
-
.replace(/<(#)\d{15,21}>/g, "<span className='bg-blurple/25 hover:bg-blurple/50 p-1 rounded-md text-neutral-100 font-light text-sx duration-200 cursor-pointer'>@Channel</span>");
21
+
.replace(/<a?:\w{2,32}:(.*?)>/g, "<img alt='emoji' className='rounded-md inline' style='height: 1.375em; position: relative' src='https://cdn.discordapp.com/emojis/$1.webp?size=40&quality=lossless' />")
22
+
.replace(/<(@!?)\d{15,21}>/g, "<span className='bg-blurple/25 hover:bg-blurple/50 p-1 rounded-md dark:text-neutral-100 text-neutral-900 font-light text-sx duration-200 cursor-pointer'>@user</span>")
23
+
.replace(/<(#!?)\d{15,21}>/g, "<span className='bg-blurple/25 hover:bg-blurple/50 p-1 rounded-md dark:text-neutral-100 text-neutral-900 font-light text-sx duration-200 cursor-pointer'>@channel</span>");
25
24
}
26
25
27
26
if (!discord) return (
28
27
<ReactMarkdown
29
-
/* @ts-expect-error they broke types */
30
28
rehypePlugins={[rehypeRaw]}
31
29
allowedElements={["span", "p"]}
32
30
>
···
42
40
return (
43
41
<ReactMarkdown
44
42
className="break-words"
45
-
/* @ts-expect-error they broke types */
46
43
rehypePlugins={[rehypeRaw]}
47
44
components={{
48
45
h1: ({ ...props }) => <div className="text-3xl font-semibold" {...props} />,
···
57
54
<span className="mr-1">•</span>
58
55
<span {...props} />
59
56
</div>,
60
-
code({ inline, children, ...props }) {
61
-
if (!inline) return <div className={`${mode === "DARK" ? "bg-neutral-900" : "bg-neutral-200"} px-4 py-3 text-sm rounded-md min-w-full max-w-full my-2 break-all`}>
62
-
{children}
63
-
</div>;
57
+
// @ts-expect-error inline does exist
58
+
code: ({ inline, children, ...props }) => {
59
+
if (!inline) return (
60
+
<div className={`${mode === "DARK" ? "bg-neutral-900" : "bg-neutral-200"} px-4 py-3 text-sm rounded-md min-w-full max-w-full my-2 break-all`}>
61
+
{children}
62
+
</div>
63
+
);
64
64
65
-
return <code {...props} className={`${mode === "DARK" ? "bg-neutral-900 text-neutral-100" : "bg-neutral-200 text-neutral-900"} p-1 text-sm rounded`}>
66
-
{children}
67
-
</code>;
65
+
return (
66
+
<code {...props} className={`${mode === "DARK" ? "bg-neutral-900 text-neutral-100" : "bg-neutral-200 text-neutral-900"} p-1 text-sm rounded`}>
67
+
{children}
68
+
</code>
69
+
);
68
70
}
69
71
70
72
}}