The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
????????????
+13
-14
+11
-7
components/discord/markdown.tsx
+11
-7
components/discord/markdown.tsx
···
1
-
import React, { FunctionComponent } from "react";
1
+
import React from "react";
2
2
import ReactMarkdown from "react-markdown";
3
3
import rehypeRaw from "rehype-raw";
4
4
···
7
7
mode: "DARK" | "LIGHT";
8
8
discord?: boolean;
9
9
}
10
-
const Highlight: FunctionComponent<Props> = ({ text, discord = true, mode }) => {
10
+
11
+
export default function Highlight({
12
+
text,
13
+
discord = true,
14
+
mode
15
+
}: Props) {
16
+
11
17
text = text
12
18
.replaceAll("<", "<")
13
19
.replaceAll(">", ">");
···
25
31
26
32
if (!discord) return (
27
33
<ReactMarkdown
34
+
// @ts-expect-error they broke types
28
35
rehypePlugins={[rehypeRaw]}
29
36
allowedElements={["span", "p"]}
30
37
>
···
40
47
return (
41
48
<ReactMarkdown
42
49
className="break-words"
50
+
// @ts-expect-error inline does exist
43
51
rehypePlugins={[rehypeRaw]}
44
52
components={{
45
53
h1: ({ ...props }) => <div className="text-3xl font-semibold" {...props} />,
···
54
62
<span className="mr-1">•</span>
55
63
<span {...props} />
56
64
</div>,
57
-
// @ts-expect-error inline does exist
58
65
code: ({ inline, children, ...props }) => {
59
66
if (!inline) return (
60
67
<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`}>
···
75
82
</ReactMarkdown>
76
83
);
77
84
78
-
79
-
};
80
-
81
-
export default Highlight;
85
+
}
+2
-7
components/markdown.tsx
+2
-7
components/markdown.tsx
···
23
23
24
24
return (
25
25
<ReactMarkdown
26
+
// @ts-expect-error they broke types
26
27
rehypePlugins={[rehypeRaw]}
27
28
components={{
28
29
h1: (props) => (
···
91
92
</Link>
92
93
),
93
94
94
-
// @ts-expect-error isHeader does exist
95
-
table: ({ isHeader, ...props }) => <table className="mt-4 table-auto w-full divide-y-1 divide-wamellow overflow-scroll" {...props} />,
96
-
// @ts-expect-error isHeader does exist
95
+
table: (props) => <table className="mt-4 table-auto w-full divide-y-1 divide-wamellow overflow-scroll" {...props} />,
97
96
th: ({ isHeader, ...props }) => <th className=" px-2 pb-2 font-medium text-neutral-800 dark:text-neutral-200 text-left" {...props} />,
98
-
// @ts-expect-error isHeader does exist
99
97
tr: ({ isHeader, ...props }) => <tr className="divide-x-1 divide-wamellow" {...props} />,
100
-
// @ts-expect-error isHeader does exist
101
98
td: ({ isHeader, ...props }) => <td className="px-2 py-1 divide-x-8 divide-wamellow break-all" {...props} />,
102
99
103
-
// @ts-expect-error ordered does exist
104
100
ol: ({ ordered, ...props }) => (
105
101
<div className="list-decimal list-inside marker:text-neutral-300/40 my-1">
106
102
<span
···
109
105
/>
110
106
</div>
111
107
),
112
-
// @ts-expect-error ordered does exist
113
108
ul: ({ ordered, ...props }) => (
114
109
<div className="list-disc list-inside marker:text-neutral-300/40 my-1">
115
110
<span