improve discord markdown & palceholder

app/(home)/page.tsx

···
 import DiscordAppBadge from "@/components/discord/app-badge";
 import DiscordChannel from "@/components/discord/channel";
 import DiscordChannelCategory from "@/components/discord/channel-category";
-import Highlight from "@/components/discord/markdown";
+import { DiscordMarkdown } from "@/components/discord/markdown";
 import DiscordMessage from "@/components/discord/message";
 import DiscordMessageEmbed from "@/components/discord/message-embed";
 import DiscordUser from "@/components/discord/user";
···
                                 <div className="bg-[#313338] h-0.5 w-full sm:w-0.5 sm:h-32 md:h-0.5 md:w-full lg:w-0.5 lg:h-32 rounded-full ml-2" />
 
                                 <DiscordMessage {...messageProps("tts voice")}>
-                                    <Highlight mode={"DARK"} text="Now talking..." />
+                                    <DiscordMarkdown mode={"DARK"} text="Now talking..." />
                                 </DiscordMessage>
                             </div>
 
···
                             style={{ backgroundColor: "rgb(43, 45, 49)" }}
                         >
                             <DiscordMessage {...messageProps()}>
-                                <Highlight mode={"DARK"} text="Hey **@everyone**, Linus Tech Tips just posted a new video!\n[youtube.com/watch?v=74Lj5cHseI8]()" />
+                                <DiscordMarkdown mode={"DARK"} text="Hey **@everyone**, Linus Tech Tips just posted a new video!\n[youtube.com/watch?v=74Lj5cHseI8](https://youtube.com/watch?v=74Lj5cHseI8)" />
                                 <DiscordMessageEmbed
                                     mode="DARK"
                                     title="Your PC Can Look Like THIS Now!"
···
                             style={{ backgroundColor: "rgb(43, 45, 49)" }}
                         >
                             <DiscordMessage {...messageProps("image")}>
-                                <Highlight mode={"DARK"} text="query: **femboy**" />
+                                <DiscordMarkdown mode={"DARK"} text="query: **femboy**" />
                                 <Image
                                     alt=""
                                     className="rounded-md shadow-md w-64 md:w-56 lg:w-72 md:w-unset max-w-md mt-2"
···
                                         <span className="text-blue-500 hover:underline cursor-pointer">#lounge</span>
                                     </div>
 
-                                    <Highlight mode={"DARK"} text="**Replied to @drijon**" />
-                                    <Highlight mode={"DARK"} text="As if someone creates a discord account being like: OH I NEED TO KNOW THE GAS PRICES. THERE IS A NICE WAY FOR IT. MEE6 PREMIUM!" />
+                                    <DiscordMarkdown mode={"DARK"} text="**Replied to @drijon**" />
+                                    <DiscordMarkdown mode={"DARK"} text="As if someone creates a discord account being like: OH I NEED TO KNOW THE GAS PRICES. THERE IS A NICE WAY FOR IT. MEE6 PREMIUM!" />
                                 </DiscordMessageEmbed>
                             </DiscordMessage>
                         </div>
···
                             style={{ backgroundColor: "rgb(43, 45, 49)" }}
                         >
                             <DiscordMessage {...messageProps()}>
-                                <Highlight mode={"DARK"} text="Welcome @mwlica to **Someone's** 👋" />
+                                <DiscordMarkdown mode={"DARK"} text="Welcome @mwlica to **Someone's** 👋" />
                                 <Image
                                     alt="example welcome card"
                                     src={WelcomePic}
···
                                     bot: false
                                 }}
                             >
-                                <Highlight mode={"DARK"} text="wm - howto" />
+                                <DiscordMarkdown mode={"DARK"} text="wm - howto" />
                             </DiscordMessage>
 
                             <DiscordMessage
···
                                     mode={"DARK"}
                                     color={0xbc7ed4}
                                 >
-                                    <Highlight mode={"DARK"} text="To create a custom command, go to [your server's dashboard](/dashboard?to=custom-commands), click on `Create`, fill in the response **content**, **embed title**, **embed description**, **embed color**, **embed images**, command **permissions** and more. When you're done you can start using the command 🎉" />
+                                    <DiscordMarkdown mode={"DARK"} text="To create a custom command, go to [your server's dashboard](/dashboard?to=custom-commands), click on `Create`, fill in the response **content**, **embed title**, **embed description**, **embed color**, **embed images**, command **permissions** and more. When you're done you can start using the command 🎉" />
                                 </DiscordMessageEmbed>
                             </DiscordMessage>
                         </div>

app/dashboard/[guildId]/starboard/page.tsx

···
 import { useQuery } from "react-query";
 
 import { guildStore } from "@/common/guilds";
-import Highlight from "@/components/discord/markdown";
+import { DiscordMarkdown } from "@/components/discord/markdown";
 import DiscordMessage from "@/components/discord/message";
 import DiscordMessageEmbed from "@/components/discord/message-embed";
 import MultiSelectMenu from "@/components/inputs/multi-select-menu";
···
                     bot: true
                 }}
             >
-                <Highlight
+                <DiscordMarkdown
                     mode={"DARK"}
                     text={""}
                 />

app/dashboard/[guildId]/tts.component.tsx

···
+import { Accordion, AccordionItem } from "@nextui-org/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { useCookies } from "next-client-cookies";
+
 import { guildStore } from "@/common/guilds";
 import NumberInput from "@/components/inputs/number-input";
 import SelectMenu from "@/components/inputs/select-menu";
 import Switch from "@/components/inputs/switch";
-import { Accordion, AccordionItem } from "@nextui-org/react";
-import { useCookies } from "next-client-cookies";
-import Image from "next/image";
-import Link from "next/link";
-import { useParams } from "next/navigation";
 
 export function TTSSettings() {
     const guild = guildStore((g) => g);
···
 
             <Faq />
         </div>
-    )
+    );
 }
 
 function Faq() {
···
                 </Link>
             </AccordionItem>
         </Accordion>
-    )
+    );
 }

app/profile/spotify/page.tsx

···
 
 import { userStore } from "@/common/user";
 import Box from "@/components/box";
-import Highlight from "@/components/discord/markdown";
+import { DiscordMarkdown } from "@/components/discord/markdown";
 import DiscordMessage from "@/components/discord/message";
 import { HomeButton, ScreenMessage, SupportButton } from "@/components/screen-message";
 import { cacheOptions, getData } from "@/lib/api";
···
                             }}
                         >
 
-                            <Highlight mode={"DARK"} text={`wm play [https://open.spotify.com/track/${data.playing?.id || "4cOdK2wGLETKBW3PvgPWqT"}](#)`} />
+                            <DiscordMarkdown mode={"DARK"} text={`wm play [https://open.spotify.com/track/${data.playing?.id || "4cOdK2wGLETKBW3PvgPWqT"}](#)`} />
 
                         </DiscordMessage>
                         <DiscordMessage
···
 
                             <div className="flex items-center gap-1">
                                 <Image src="https://cdn.discordapp.com/emojis/845043307351900183.gif?size=44&quality=lossless" height={18} width={18} alt="" />
-                                <Highlight mode={"DARK"} text={`@${user.username} now playing [${data.playing?.name || "Never Gonna Give You Up"}](#) for **${data.playing?.duration || "3 minutes 33 seconds"}**`} />
+                                <DiscordMarkdown mode={"DARK"} text={`@${user.username} now playing [${data.playing?.name || "Never Gonna Give You Up"}](#) for **${data.playing?.duration || "3 minutes 33 seconds"}**`} />
                             </div>
 
                             <div className="flex flex-row gap-1.5 h-8 mt-3">
···
                             }}
                         >
 
-                            <Highlight mode={"DARK"} text="wm" />
+                            <DiscordMarkdown mode={"DARK"} text="wm" />
 
                         </DiscordMessage>
                         <DiscordMessage
···
 
                             <div className="flex items-center gap-1">
                                 <Image src="https://cdn.discordapp.com/emojis/845043307351900183.gif?size=44&quality=lossless" height={18} width={18} alt="" />
-                                <Highlight mode={"DARK"} text={`@${user.username} is playing [${data.playing?.name || "Never Gonna Give You Up"}](#) by ${data.playing?.artists || "[Rick Astley]()"}`} />
+                                <DiscordMarkdown mode={"DARK"} text={`@${user.username} is playing [${data.playing?.name || "Never Gonna Give You Up"}](#) by ${data.playing?.artists || "[Rick Astley]()"}`} />
                             </div>
 
                             <div className="flex gap-1.5 h-8 mt-3">

components/discord/markdown.css

···
+.discord-md a {
+    @apply text-blurple hover:underline
+}
+
+.discord-md code {
+    @apply bg-neutral-900 border-[1px] border-neutral-600 p-1 text-xs rounded
+}
+
+.discord-md-light code {
+    @apply !bg-neutral-300 !border-neutral-400
+}
+
+.discord-md .d-mention {
+    @apply bg-blurple/30 hover:bg-blurple/50 py-0.5 px-1 rounded-md dark:text-neutral-100 text-neutral-900 font-light duration-200 cursor-pointer
+}
+
+.discord-md .d-emoji {
+    @apply size-5 inline
+}
+
+.discord-md .d-spoiler {
+    @apply bg-neutral-500/75 px-0.5 text-sm rounded
+}
+
+.discord-md h1 {
+    @apply text-3xl font-semibold text-white
+}
+
+.discord-md h2 {
+    @apply text-2xl font-semibold text-white
+}
+
+.discord-md h3 {
+    @apply text-xl font-semibold text-white
+}
+
+.discord-md strong {
+    @apply font-semibold
+}

components/discord/markdown.tsx

···
-"use client";
+import "./markdown.css";
 
-import React from "react";
-import { renderToString } from "react-dom/server";
-import ReactMarkdown from "react-markdown";
-import rehypeRaw from "rehype-raw";
+import md from "@odiffey/discord-markdown";
 
 import cn from "@/utils/cn";
 
-import Channel from "../markdown/channel";
-import Emoji from "../markdown/emoji";
-import User from "../markdown/user";
-
-interface Props {
-    text: string;
-    mode: "DARK" | "LIGHT";
-    discord?: boolean;
-}
-
-export default function Highlight({
+export function DiscordMarkdown({
     text,
     mode,
-    discord = true
-}: Props) {
-
-    function parseDiscordMarkdown(content: string) {
-        return content
-            .replace(/<(?!(?:[@#]|a:|:))/g, "&lt;")
-            .replaceAll("\\n", "\n\n")
-            .replace(/__(.*?)__/g, "<u>$1</u>")
-            .replace(/\{(\w*?)\.(\w*?)\}|{ping}/g, (match) => {
-                return renderToString(
-                    <span
-                        className={cn(
-                            mode === "DARK" ? "bg-wamellow text-neutral-200" : "bg-wamellow-100 text-neutral-800",
-                            "border-1 border-violet-400 px-[3px] rounded-md font-light"
-                        )}
-                    >
-                        {match.slice(1, -1)}
-                    </span>
-                );
-            })
-            .replace(/<a?:\w{2,32}:\d{15,21}>/g, (match) => {
-                const emojiId = match.match(/\d{15,21}/)?.[0]!;
-
-                return renderToString(<Emoji emojiId={emojiId} />);
-            })
-            .replace(/<(@[!&]?)\d{15,21}>/g, (match) => {
-                return renderToString(<User username={match.includes("&") ? "some-role" : "some-user"} />);
-            })
-            .replace(/<(#!?)\d{15,21}>/g, () => {
-                return renderToString(<Channel name="some-channel" />);
-            });
-    }
-
-    if (!discord) return (
-        <ReactMarkdown
-            // @ts-expect-error they broke types
-            rehypePlugins={[rehypeRaw]}
-            allowedElements={["span", "p"]}
-        >
-            {parseDiscordMarkdown(text
-                .replaceAll("*", "\\*")
-                .replaceAll("_", "\\_")
-                .replaceAll("~", "\\~")
-                .replaceAll("`", "\\`")
-            )}
-        </ReactMarkdown>
-    );
+    embed = true
+}: {
+    text: string;
+    mode: "DARK" | "LIGHT";
+    embed?: boolean;
+}) {
+    const sanitizedHtml = text
+        .replaceAll("\\n", "\n")
+        .trim();
 
     return (
-        <ReactMarkdown
-            className="break-words"
-            // @ts-expect-error inline does exist
-            rehypePlugins={[rehypeRaw]}
-            components={{
-                h1: (props) => <div className="text-3xl font-semibold" {...props} />,
-                h2: (props) => <div className="text-2xl font-semibold" {...props} />,
-                h3: (props) => <div className="text-xl font-semibold" {...props} />,
-                strong: (props) => <span className="font-semibold" {...props} />,
-                i: (props) => <span className="italic" {...props} />,
-                a: (props) => <a className="text-blue-600 hover:underline underline-blue-500" {...props} />,
-                del: (props) => <span className="line-through" {...props} />,
-                ins: (props) => <span className="underline" {...props} />,
-                li: (props) => (
-                    <div>
-                        <span className="mr-1">•</span>
-                        <span {...props} />
-                    </div>
-                ),
-                code: ({ inline, children, ...props }) => {
-                    if (!inline) return (
-                        <div
-                            className={cn(
-                                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"
-                            )}
-                        >
-                            {children}
-                        </div>
-                    );
-
-                    return (
-                        <code
-                            {...props}
-                            className={cn(
-                                mode === "DARK" ? "bg-neutral-900 text-neutral-100" : "bg-neutral-200 text-neutral-900",
-                                "p-1 text-sm rounded"
-                            )}
-                        >
-                            {children}
-                        </code>
-                    );
-                },
-                p: (props) => <p className="mb-4" {...props} />
-            }}
-        >
-            {parseDiscordMarkdown(text)}
-        </ReactMarkdown>
+        <div
+            className={cn("discord-md", mode === "LIGHT" && "discord-md-light")}
+            dangerouslySetInnerHTML={{ __html: md.toHTML(sanitizedHtml, { embed }) }}
+        />
     );
-
 }

components/discord/message-embed.tsx

···
 
 import cn from "@/utils/cn";
 
-import Highlight from "./markdown";
+import { DiscordMarkdown } from "./markdown";
 
 interface Props {
     children: React.ReactNode;
···
                         >
                             {/* eslint-disable-next-line @next/next/no-img-element */}
                             {author.icon_url && <img src={author.icon_url} alt="" className="rounded-full h-6 w-6" />}
-                            <Highlight
+                            <DiscordMarkdown
                                 mode={mode}
                                 text={author.text}
-                                discord={false}
+                                embed={true}
                             />
                         </div>
                     }
···
                                 "font-semibold text-lg mb-2"
                             )}
                         >
-                            <Highlight
+                            <DiscordMarkdown
                                 mode={mode}
                                 text={title}
-                                discord={false}
+                                embed={true}
                             />
                         </div>
                     }
···
                 </div>
 
                 {/* eslint-disable-next-line @next/next/no-img-element */}
-                {thumbnail && <img src={thumbnail} alt="" className="ml-auto h-20 w-20 rounded-md" />}
+                {thumbnail && <img src={replaceTemplatesToUrl(thumbnail)} alt="" className="ml-auto h-20 w-20 rounded-md" />}
             </div>
 
             {/* eslint-disable-next-line @next/next/no-img-element */}
-            {image && <img src={image} alt="" className="ml-auto rounded-md h-full w-full mt-4" />}
+            {image && <img src={replaceTemplatesToUrl(image)} alt="" className="ml-auto rounded-md h-full w-full mt-4" />}
 
             {footer?.text &&
                 <div className="flex gap-1 items-center mt-3">
                     {/* eslint-disable-next-line @next/next/no-img-element */}
                     {footer.icon_url && <img src={footer.icon_url} alt="" className="rounded-full h-5 w-5" />}
                     <span className="text-xs">
-                        <Highlight mode={mode} text={footer.text} discord={false} />
+                        <DiscordMarkdown
+                            mode={mode}
+                            text={footer.text}
+                            embed={true}
+                        />
                     </span>
                 </div>
             }
 
         </div>
     );
+}
+
+function replaceTemplatesToUrl(input: string) {
+    if (/^{(user|guild|creator)\.(icon|avatar)}$/.test(input)) return "https://cdn.discordapp.com/embed/avatars/0.png";
+    if (/^{video\.thumbnail}/.test(input)) return "/_next/image?url=/notifications-thumbnail-placeholder.webp&w=384&q=75";
+
+    if (!input.startsWith("http")) return;
+    return input;
 }

components/embed-creator.tsx

···
 import { GuildEmbed } from "@/typings";
 import cn from "@/utils/cn";
 
-import Highlight from "./discord/markdown";
+import { DiscordMarkdown } from "./discord/markdown";
 import DiscordMessage from "./discord/message";
 import DiscordMessageEmbed from "./discord/message-embed";
 import DumbColorInput from "./inputs/dumb-color-input";
···
                                         bot: true
                                     }}
                                 >
-                                    <Highlight
+                                    <DiscordMarkdown
                                         mode={mode}
                                         text={content || ""}
                                     />
···
                                         image={JSON.parse(embed).image}
                                         footer={JSON.parse(embedfooter)}
                                     >
-                                        {JSON.parse(embed).description && <Highlight mode={mode} text={JSON.parse(embed).description} />}
+                                        {JSON.parse(embed).description && <DiscordMarkdown mode={mode} text={JSON.parse(embed).description} />}
                                         {showMessageAttachmentComponentInEmbed && messageAttachmentComponent}
                                     </DiscordMessageEmbed>
 

components/markdown/index.tsx

···
         return content
             .replace(/__(.*?)__/g, "<u>$1</u>")
             .replace(/<a?:\w{2,32}:\d{15,21}>/g, (match) => {
-                const emojiId = match.match(/\d{15,21}/)?.[0]!;
+                const emojiId = match.match(/\d{15,21}/)?.[0] as string;
 
                 return renderToString(<Emoji emojiId={emojiId} />);
             })
···
                 return renderToString(<Channel name="some-channel" />);
             })
             .replace(/<t:\d{1,10}:[Rf]?>/g, (match) => {
-                const timestamp = match.match(/\d{1,10}/)?.[0]!;
+                const timestamp = match.match(/\d{1,10}/)?.[0] as string;
                 const format = match.match(/:\w*?>/)?.[0] || "f";
 
                 return renderToString(
···
                 },
 
                 ol: ({ ordered, ...props }) => <ol className="list-decimal list-inside space-y-1 marker:text-neutral-300/40 my-1" {...props} />,
-                ul: ({ ordered, ...props }) => <ul className="list-disc list-inside space-y-1 marker:text-neutral-300/40 my-1" {...props} />
+                ul: ({ ordered, ...props }) => <ul className="list-disc list-inside space-y-1 marker:text-neutral-300/40 my-1" {...props} />,
+                p: (props) => <span {...props} />
 
             }}
         >

package.json

···
     "@discordjs/collection": "^2.1.0",
     "@discordjs/rest": "^2.2.0",
     "@nextui-org/react": "^2.4.6",
+    "@odiffey/discord-markdown": "^3.1.2",
     "autoprefixer": "^10.4.19",
     "clsx": "^2.1.1",
     "discord-api-types": "^0.37.93",

pnpm-lock.yaml

···
       '@nextui-org/react':
         specifier: ^2.4.6
         version: 2.4.6(@types/react@18.3.3)(framer-motion@11.3.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.7)
+      '@odiffey/discord-markdown':
+        specifier: ^3.1.2
+        version: 3.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.40)
···
 
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
+  '@khanacademy/perseus-core@1.5.0':
+    resolution: {integrity: sha512-QR9tGBr8nAUFuARSbzgzL6ZkyjDur0Cz9tgQREjC0L+Sug5aj0DHuK86lhosZAbtgAzitX3KVRAsOMbKqU2fYg==}
+
+  '@khanacademy/simple-markdown@0.12.1':
+    resolution: {integrity: sha512-GnrK+mxULyO58pWjPQSU1bVUd892teNIzf7stdBB9mucFDXk2TiplPD9BJDUZ10uGfliyDVKlvwV3BIjHPhL5g==}
+    peerDependencies:
+      react: 16.14.0
+      react-dom: 16.14.0
 
   '@next/env@14.2.5':
     resolution: {integrity: sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==}
···
 
   '@octokit/types@13.5.0':
     resolution: {integrity: sha512-HdqWTf5Z3qwDVlzCrP8UJquMwunpDiMPt5er+QjGzL4hqr/vBVY/MauQgS1xWxCDT1oMx1EULyqxncdCY/NVSQ==}
+
+  '@odiffey/discord-markdown@3.1.2':
+    resolution: {integrity: sha512-V+lVkoMhiNVEyLJ4ezmvigHU91SwiACc13jcBDosfkUbcLK82YXG+L6Dkzuaw7EY34Gh4HGO6+n8ZtwEF1WZJQ==}
 
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
···
 
   hastscript@8.0.0:
     resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
+
+  highlight.js@11.10.0:
+    resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
+    engines: {node: '>=12.0.0'}
 
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
···
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@khanacademy/perseus-core@1.5.0': {}
+
+  '@khanacademy/simple-markdown@0.12.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@khanacademy/perseus-core': 1.5.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@next/env@14.2.5': {}
 
   '@next/eslint-plugin-next@14.2.5':
···
   '@octokit/types@13.5.0':
     dependencies:
       '@octokit/openapi-types': 22.2.0
+
+  '@odiffey/discord-markdown@3.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@khanacademy/simple-markdown': 0.12.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      highlight.js: 11.10.0
+    transitivePeerDependencies:
+      - react
+      - react-dom
 
   '@pkgjs/parseargs@0.11.0':
     optional: true
···
       hast-util-parse-selector: 4.0.0
       property-information: 6.5.0
       space-separated-tokens: 2.0.2
+
+  highlight.js@11.10.0: {}
 
   html-void-elements@3.0.0: {}