feat: switch to remark from markdown-it (big)

* replaces old mentions with avatar and display name
* renders things directly through React
* replaces most of the markdown hacks with custom AST components
* adds a tooltip to codeblock "copy to clipboard"

package.json

@@ -73,7 +73,7 @@
         "@hcaptcha/react-hcaptcha": "^0.3.6",
         "@insertish/vite-plugin-babel-macros": "^1.0.5",
         "@preact/preset-vite": "^2.0.0",
-        "@revoltchat/ui": "1.0.69",
+        "@revoltchat/ui": "1.0.70",
         "@rollup/plugin-replace": "^2.4.2",
         "@styled-icons/boxicons-logos": "^10.38.0",
         "@styled-icons/boxicons-regular": "^10.38.0",
@@ -86,7 +86,6 @@
         "@types/lodash": "^4",
         "@types/lodash.defaultsdeep": "^4.6.6",
         "@types/lodash.isequal": "^4.5.5",
-        "@types/markdown-it": "^12.0.2",
         "@types/node": "^15.12.4",
         "@types/preact-i18n": "^2.3.0",
         "@types/prismjs": "^1.16.5",
@@ -116,8 +115,7 @@
         "lodash.defaultsdeep": "^4.6.1",
         "lodash.isequal": "^4.5.0",
         "long": "^5.2.0",
-        "markdown-it": "^12.0.6",
+        "mdast-util-to-hast": "^12.1.2",
-        "markdown-it-emoji": "^2.0.0",
         "mediasoup-client": "npm:@insertish/mediasoup-client@3.6.36-esnext",
         "mobx": "^6.6.0",
         "mobx-react-lite": "3.4.0",
@@ -135,7 +133,15 @@
         "react-router-dom": "^5.2.0",
         "react-scroll": "^1.8.2",
         "react-virtuoso": "^2.12.0",
-        "revolt.js": "6.0.3",
+        "rehype-katex": "^6.0.2",
+        "rehype-prism": "^2.1.3",
+        "rehype-react": "^7.1.1",
+        "remark-breaks": "^3.0.2",
+        "remark-gfm": "^3.0.1",
+        "remark-math": "^5.1.1",
+        "remark-parse": "^10.0.1",
+        "remark-rehype": "^10.1.0",
+        "revolt.js": "6.0.5",
         "rimraf": "^3.0.2",
         "sass": "^1.35.1",
         "semver": "^7.3.7",
@@ -147,6 +153,8 @@
         "styled-components": "^5.3.0",
         "typescript": "^4.4.2",
         "ulid": "^2.3.0",
+        "unified": "^10.1.2",
+        "unist-util-visit": "^4.1.0",
         "use-resize-observer": "^7.0.0",
         "vite-plugin-pwa": "^0.11.13",
         "workbox-precaching": "^6.1.5"

src/components/common/Emoji.tsx

@@ -1,3 +1,5 @@
+import { emojiDictionary } from "../../assets/emojis";
+
 export type EmojiPack = "mutant" | "twemoji" | "noto" | "openmoji";
 
 let EMOJI_PACK: EmojiPack = "mutant";
@@ -40,7 +42,7 @@ function toCodePoint(rune: string) {
         .join("-");
 }
 
-function parseEmoji(emoji: string) {
+export function parseEmoji(emoji: string) {
     if (emoji.startsWith("custom:")) {
         return `https://dl.insrt.uk/projects/revolt/emotes/${emoji.substring(
             7,

src/components/markdown/Markdown.module.scss

@@ -1,220 +0,0 @@
-.markdown {
-    user-select: text;
-
-    :global(.emoji) {
-        object-fit: contain;
-
-        height: 1.25em;
-        width: 1.25em;
-        margin: 0 0.05em 0 0.1em;
-        vertical-align: -0.2em;
-    }
-
-    &[data-large-emojis="true"] :global(.emoji) {
-        width: 3rem;
-        height: 3rem;
-        margin-bottom: 0;
-        margin-top: 1px;
-        margin-right: 2px;
-        vertical-align: -0.3em;
-    }
-
-    p,
-    pre {
-        margin: 0;
-    }
-
-    a {
-        text-decoration: none;
-
-        &[data-type="mention"] {
-            padding: 0 6px;
-            flex-shrink: 0;
-            font-weight: 600;
-            display: inline-block;
-            background: var(--secondary-background);
-            border-radius: calc(var(--border-radius) * 2);
-
-            &:hover {
-                text-decoration: none;
-            }
-        }
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    ul,
-    ol,
-    blockquote {
-        margin: 0;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        &:not(:first-child) {
-            margin-top: 12px;
-        }
-    }
-
-    ul,
-    ol {
-        list-style-position: inside;
-        padding-left: 10px;
-    }
-
-    blockquote {
-        margin: 2px 0;
-        padding: 2px 0;
-        background: var(--hover);
-        border-radius: var(--border-radius);
-        border-inline-start: 4px solid var(--tertiary-background);
-
-        > * {
-            margin: 0 8px;
-        }
-    }
-
-    pre {
-        padding: 1em;
-        overflow-x: scroll;
-        border-radius: var(--border-radius);
-        background: var(--block) !important;
-    }
-
-    p > code {
-        padding: 1px 4px;
-        flex-shrink: 0;
-    }
-
-    code {
-        color: white;
-        font-size: 90%;
-        background: var(--block);
-        border-radius: var(--border-radius);
-        font-family: var(--monospace-font), monospace;
-        border-radius: 3px;
-        -webkit-box-decoration-break: clone;
-    }
-
-    input[type="checkbox"] {
-        margin-right: 4px;
-        pointer-events: none;
-    }
-
-    table {
-        border-collapse: collapse;
-
-        th,
-        td {
-            padding: 6px;
-            border: 1px solid var(--tertiary-foreground);
-        }
-    }
-
-    :global(.katex-block) {
-        overflow-x: auto;
-    }
-
-    :global(.spoiler) {
-        padding: 0 2px;
-        cursor: pointer;
-        user-select: none;
-        color: transparent;
-        background: #151515;
-        border-radius: var(--border-radius);
-
-        > * {
-            opacity: 0;
-            pointer-events: none;
-        }
-
-        &:global(.shown) {
-            cursor: auto;
-            user-select: all;
-            color: var(--foreground);
-            background: var(--secondary-background);
-
-            > * {
-                opacity: 1;
-                pointer-events: unset;
-            }
-        }
-    }
-
-    :global(.code) {
-        font-family: var(--monospace-font), monospace;
-
-        :global(.lang) {
-            width: fit-content;
-            padding-bottom: 8px;
-
-            div {
-                color: #111;
-                cursor: pointer;
-                padding: 2px 6px;
-                font-weight: 600;
-                user-select: none;
-                display: inline-block;
-                background: var(--accent);
-
-                font-size: 10px;
-                text-transform: uppercase;
-                box-shadow: 0 2px #787676;
-                border-radius: calc(var(--border-radius) / 3);
-
-                &:active {
-                    transform: translateY(1px);
-                    box-shadow: 0 1px #787676;
-                }
-            }
-        }
-    }
-
-    input[type="checkbox"] {
-        width: 0;
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    label {
-        pointer-events: none;
-    }
-
-    input[type="checkbox"] + label:before {
-        width: 12px;
-        height: 12px;
-        content: "a";
-        font-size: 10px;
-        margin-right: 6px;
-        line-height: 12px;
-        background: white;
-        position: relative;
-        display: inline-block;
-        border-radius: var(--border-radius);
-    }
-
-    input[type="checkbox"][checked="true"] + label:before {
-        content: "✓";
-        align-items: center;
-        display: inline-flex;
-        justify-content: center;
-        background: var(--accent);
-    }
-
-    input[type="checkbox"] + label {
-        line-height: 12px;
-        position: relative;
-    }
-}

src/components/markdown/Markdown.tsx

@@ -1,6 +1,6 @@
 import { Suspense, lazy } from "preact/compat";
 
-const Renderer = lazy(() => import("./Renderer"));
+const Renderer = lazy(() => import("./RemarkRenderer"));
 
 export interface MarkdownProps {
     content?: string | null;

src/components/markdown/RemarkRenderer.tsx

@@ -0,0 +1,192 @@
+import "katex/dist/katex.min.css";
+import rehypeKatex from "rehype-katex";
+import rehypePrism from "rehype-prism";
+import rehypeReact from "rehype-react";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import styled, { css } from "styled-components";
+import { unified } from "unified";
+
+import { createElement } from "preact";
+import { memo } from "preact/compat";
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import { MarkdownProps } from "./Markdown";
+import { RenderCodeblock } from "./plugins/Codeblock";
+import { RenderAnchor } from "./plugins/anchors";
+import { remarkChannels, RenderChannel } from "./plugins/channels";
+import { isOnlyEmoji, remarkEmoji, RenderEmoji } from "./plugins/emoji";
+import { remarkMention, RenderMention } from "./plugins/mentions";
+import { passThroughComponents } from "./plugins/remarkRegexComponent";
+import { remarkSpoiler, RenderSpoiler } from "./plugins/spoiler";
+import { remarkTimestamps, timestampHandler } from "./plugins/timestamps";
+import "./prism";
+
+/**
+ * Null element
+ */
+const Null: React.FC = () => null;
+
+/**
+ * Custom Markdown components
+ */
+const components = {
+    emoji: RenderEmoji,
+    mention: RenderMention,
+    spoiler: RenderSpoiler,
+    channel: RenderChannel,
+    a: RenderAnchor,
+    p: styled.p`
+        margin: 0;
+
+        > code {
+            padding: 1px 4px;
+            flex-shrink: 0;
+        }
+    `,
+    h1: styled.h1`
+        margin: 0.2em 0;
+    `,
+    h2: styled.h2`
+        margin: 0.2em 0;
+    `,
+    h3: styled.h3`
+        margin: 0.2em 0;
+    `,
+    h4: styled.h4`
+        margin: 0.2em 0;
+    `,
+    h5: styled.h5`
+        margin: 0.2em 0;
+    `,
+    h6: styled.h6`
+        margin: 0.2em 0;
+    `,
+    pre: RenderCodeblock,
+    code: styled.code`
+        color: white;
+        background: var(--block);
+
+        font-size: 90%;
+        font-family: var(--monospace-font), monospace;
+
+        border-radius: 3px;
+        box-decoration-break: clone;
+    `,
+    table: styled.table`
+        border-collapse: collapse;
+
+        th,
+        td {
+            padding: 6px;
+            border: 1px solid var(--tertiary-foreground);
+        }
+    `,
+    ul: styled.ul`
+        list-style-position: inside;
+        padding-left: 10px;
+        margin: 0.2em 0;
+    `,
+    ol: styled.ol`
+        list-style-position: inside;
+        padding-left: 10px;
+        margin: 0.2em 0;
+    `,
+    li: styled.li`
+        ${(props) =>
+            props.class === "task-list-item" &&
+            css`
+                list-style-type: none;
+            `}
+    `,
+    blockquote: styled.blockquote`
+        margin: 2px 0;
+        padding: 2px 0;
+        background: var(--hover);
+        border-radius: var(--border-radius);
+        border-inline-start: 4px solid var(--tertiary-background);
+
+        > * {
+            margin: 0 8px;
+        }
+    `,
+    // Block image elements
+    img: Null,
+    // Catch literally everything else just in case
+    video: Null,
+    figure: Null,
+    picture: Null,
+    source: Null,
+    audio: Null,
+    script: Null,
+    style: Null,
+};
+
+/**
+ * Unified Markdown renderer
+ */
+const render = unified()
+    .use(remarkParse)
+    .use(remarkBreaks)
+    .use(remarkGfm)
+    .use(remarkMath)
+    .use(remarkSpoiler)
+    .use(remarkChannels)
+    .use(remarkTimestamps)
+    .use(remarkEmoji)
+    .use(remarkMention)
+    .use(remarkRehype, {
+        handlers: {
+            ...passThroughComponents("emoji", "spoiler", "mention", "channel"),
+            timestamp: timestampHandler,
+        },
+    })
+    .use(rehypeKatex, {
+        maxSize: 10,
+        maxExpand: 0,
+        trust: false,
+        strict: false,
+        output: "html",
+        throwOnError: false,
+        errorColor: "var(--error)",
+    })
+    .use(rehypePrism)
+    // @ts-expect-error typings do not
+    // match between Preact and React
+    .use(rehypeReact, {
+        createElement,
+        Fragment,
+        components,
+    });
+
+/**
+ * Markdown parent container
+ */
+const Container = styled.div<{ largeEmoji: boolean }>`
+    .math-display {
+        overflow-x: auto;
+    }
+
+    --emoji-size: ${(props) => (props.largeEmoji ? "3em" : "1.25em")};
+`;
+
+/**
+ * Remark renderer component
+ */
+export default memo(({ content, disallowBigEmoji }: MarkdownProps) => {
+    const [Content, setContent] = useState<React.ReactElement>(null!);
+
+    useEffect(() => {
+        render.process(content!).then((file) => setContent(file.result));
+    }, [content]);
+
+    const largeEmoji = useMemo(
+        () => !disallowBigEmoji && isOnlyEmoji(content!),
+        [content, disallowBigEmoji],
+    );
+
+    return <Container largeEmoji={largeEmoji}>{Content}</Container>;
+});

src/components/markdown/Renderer.tsx

@@ -1,290 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import MarkdownKatex from "@traptitech/markdown-it-katex";
-import MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
-import "katex/dist/katex.min.css";
-import MarkdownIt from "markdown-it";
-// @ts-expect-error No typings.
-import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
-import { RE_MENTIONS } from "revolt.js";
-
-import styles from "./Markdown.module.scss";
-import { useCallback, useContext } from "preact/hooks";
-
-import { internalEmit } from "../../lib/eventEmitter";
-import { determineLink } from "../../lib/links";
-
-import { dayjs } from "../../context/Locale";
-
-import { emojiDictionary } from "../../assets/emojis";
-import { useClient } from "../../controllers/client/ClientController";
-import { modalController } from "../../controllers/modals/ModalController";
-import { generateEmoji } from "../common/Emoji";
-import { MarkdownProps } from "./Markdown";
-import Prism from "./prism";
-
-// TODO: global.d.ts file for defining globals
-declare global {
-    interface Window {
-        copycode: (element: HTMLDivElement) => void;
-    }
-}
-
-// Handler for code block copy.
-if (typeof window !== "undefined") {
-    window.copycode = function (element: HTMLDivElement) {
-        try {
-            const code = element.parentElement?.parentElement?.children[1];
-            if (code) {
-                navigator.clipboard.writeText(code.textContent?.trim() ?? "");
-            }
-        } catch (e) {}
-    };
-}
-
-export const md: MarkdownIt = MarkdownIt({
-    breaks: true,
-    linkify: true,
-    highlight: (str, lang) => {
-        const v = Prism.languages[lang];
-        if (v) {
-            const out = Prism.highlight(str, v, lang);
-            return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
-        }
-
-        return `<pre class="code"><code>${md.utils.escapeHtml(
-            str,
-        )}</code></pre>`;
-    },
-})
-    .disable("image")
-    .use(MarkdownEmoji, { defs: emojiDictionary })
-    .use(MarkdownSpoilers)
-    .use(MarkdownKatex, {
-        throwOnError: false,
-        maxExpand: 0,
-        maxSize: 10,
-        strict: false,
-        errorColor: "var(--error)",
-    });
-
-md.linkify.set({ fuzzyLink: false });
-
-// TODO: global.d.ts file for defining globals
-declare global {
-    interface Window {
-        internalHandleURL: (element: HTMLAnchorElement) => void;
-    }
-}
-
-// Include emojis.
-md.renderer.rules.emoji = function (token, idx) {
-    return generateEmoji(token[idx].content);
-};
-
-// Force line breaks.
-// https://github.com/markdown-it/markdown-it/issues/211#issuecomment-508380611
-const defaultParagraphRenderer =
-    md.renderer.rules.paragraph_open ||
-    ((tokens, idx, options, env, self) =>
-        self.renderToken(tokens, idx, options));
-
-md.renderer.rules.paragraph_open = function (tokens, idx, options, env, self) {
-    let result = "";
-    if (idx > 1) {
-        const inline = tokens[idx - 2];
-        const paragraph = tokens[idx];
-        if (
-            inline.type === "inline" &&
-            inline.map &&
-            inline.map[1] &&
-            paragraph.map &&
-            paragraph.map[0]
-        ) {
-            const diff = paragraph.map[0] - inline.map[1];
-            if (diff > 0) {
-                result = "<br>".repeat(diff);
-            }
-        }
-    }
-
-    return result + defaultParagraphRenderer(tokens, idx, options, env, self);
-};
-
-const RE_TWEMOJI = /:(\w+):/g;
-
-// ! FIXME: Move to library
-const RE_CHANNELS = /<#([A-z0-9]{26})>/g;
-
-const RE_TIME = /<t:([0-9]+):(\w)>/g;
-
-export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
-    const client = useClient();
-
-    if (typeof content === "undefined") return null;
-    if (!content || content.length === 0) return null;
-
-    // We replace the message with the mention at the time of render.
-    // We don't care if the mention changes.
-    const newContent = content
-        .replace(RE_TIME, (sub: string, ...args: unknown[]) => {
-            if (isNaN(args[0] as number)) return sub;
-            const date = dayjs.unix(args[0] as number);
-            const format = args[1] as string;
-            let final = "";
-            switch (format) {
-                case "t":
-                    final = date.format("hh:mm");
-                    break;
-                case "T":
-                    final = date.format("hh:mm:ss");
-                    break;
-                case "R":
-                    final = date.fromNow();
-                    break;
-                case "D":
-                    final = date.format("DD MMMM YYYY");
-                    break;
-                case "F":
-                    final = date.format("dddd, DD MMMM YYYY hh:mm");
-                    break;
-                default:
-                    final = date.format("DD MMMM YYYY hh:mm");
-                    break;
-            }
-            return `\`${final}\``;
-        })
-        .replace(RE_MENTIONS, (sub: string, ...args: unknown[]) => {
-            const id = args[0] as string,
-                user = client.users.get(id);
-
-            if (user) {
-                return `[@${user.username}](/@${id})`;
-            }
-
-            return sub;
-        })
-        .replace(RE_CHANNELS, (sub: string, ...args: unknown[]) => {
-            const id = args[0] as string,
-                channel = client.channels.get(id);
-
-            if (
-                channel?.channel_type === "TextChannel" ||
-                channel?.channel_type === "VoiceChannel"
-            ) {
-                return `[#${channel.name}](/server/${channel.server_id}/channel/${id})`;
-            }
-
-            return sub;
-        });
-
-    const useLargeEmojis = disallowBigEmoji
-        ? false
-        : content.replace(RE_TWEMOJI, "").trim().length === 0;
-
-    const toggle = useCallback((ev: MouseEvent) => {
-        if (ev.currentTarget) {
-            const element = ev.currentTarget as HTMLDivElement;
-            if (element.classList.contains("spoiler")) {
-                element.classList.add("shown");
-            }
-        }
-    }, []);
-
-    const handleLink = useCallback((ev: MouseEvent) => {
-        if (ev.currentTarget) {
-            const element = ev.currentTarget as HTMLAnchorElement;
-
-            if (ev.shiftKey) {
-                switch (element.dataset.type) {
-                    case "mention": {
-                        internalEmit(
-                            "MessageBox",
-                            "append",
-                            `<@${element.dataset.mentionId}>`,
-                            "mention",
-                        );
-                        ev.preventDefault();
-                        return;
-                    }
-                    case "channel_mention": {
-                        internalEmit(
-                            "MessageBox",
-                            "append",
-                            `<#${element.dataset.mentionId}>`,
-                            "channel_mention",
-                        );
-                        ev.preventDefault();
-                        return;
-                    }
-                }
-            }
-
-            if (modalController.openLink(element.href)) {
-                ev.preventDefault();
-            }
-        }
-    }, []);
-
-    return (
-        <span
-            ref={(el) => {
-                if (el) {
-                    el.querySelectorAll<HTMLDivElement>(".spoiler").forEach(
-                        (element) => {
-                            element.removeEventListener("click", toggle);
-                            element.addEventListener("click", toggle);
-                        },
-                    );
-
-                    el.querySelectorAll<HTMLAnchorElement>("a").forEach(
-                        (element) => {
-                            element.removeEventListener("click", handleLink);
-                            element.addEventListener("click", handleLink);
-                            element.removeAttribute("data-type");
-                            element.removeAttribute("data-mention-id");
-                            element.removeAttribute("target");
-
-                            const link = determineLink(element.href);
-                            switch (link.type) {
-                                case "profile": {
-                                    element.setAttribute(
-                                        "data-type",
-                                        "mention",
-                                    );
-                                    element.setAttribute(
-                                        "data-mention-id",
-                                        link.id,
-                                    );
-                                    break;
-                                }
-                                case "navigate": {
-                                    if (link.navigation_type === "channel") {
-                                        element.setAttribute(
-                                            "data-type",
-                                            "channel_mention",
-                                        );
-                                        element.setAttribute(
-                                            "data-mention-id",
-                                            link.channel_id,
-                                        );
-                                    }
-                                    break;
-                                }
-                                case "external": {
-                                    element.setAttribute("target", "_blank");
-                                    element.setAttribute("rel", "noreferrer");
-                                    break;
-                                }
-                            }
-                        },
-                    );
-                }
-            }}
-            className={styles.markdown}
-            dangerouslySetInnerHTML={{
-                __html: md.render(newContent),
-            }}
-            data-large-emojis={useLargeEmojis}
-        />
-    );
-}

src/components/markdown/plugins/Codeblock.tsx

@@ -0,0 +1,78 @@
+import styled from "styled-components";
+
+import { useCallback, useRef } from "preact/hooks";
+
+import { Tooltip } from "@revoltchat/ui";
+
+import { modalController } from "../../../controllers/modals/ModalController";
+
+/**
+ * Base codeblock styles
+ */
+const Base = styled.pre`
+    padding: 1em;
+    overflow-x: scroll;
+    background: var(--block);
+    border-radius: var(--border-radius);
+`;
+
+/**
+ * Copy codeblock contents button styles
+ */
+const Lang = styled.div`
+    width: fit-content;
+    padding-bottom: 8px;
+
+    a {
+        color: #111;
+        cursor: pointer;
+        padding: 2px 6px;
+        font-weight: 600;
+        user-select: none;
+        display: inline-block;
+        background: var(--accent);
+
+        font-size: 10px;
+        text-transform: uppercase;
+        box-shadow: 0 2px #787676;
+        border-radius: calc(var(--border-radius) / 3);
+
+        &:active {
+            transform: translateY(1px);
+            box-shadow: 0 1px #787676;
+        }
+    }
+`;
+
+/**
+ * Render a codeblock with copy text button
+ */
+export const RenderCodeblock: React.FC<{ class: string }> = ({
+    children,
+    ...props
+}) => {
+    const ref = useRef<HTMLPreElement>(null);
+
+    let text = "text";
+    if (props.class) {
+        text = props.class.split("-")[1];
+    }
+
+    const onCopy = useCallback(() => {
+        const text = ref.current?.querySelector("code")?.innerText;
+        text && modalController.writeText(text);
+    }, [ref]);
+
+    return (
+        <Base ref={ref}>
+            <Lang>
+                <Tooltip content="Copy to Clipboard" placement="top">
+                    {/**
+                    // @ts-expect-error Preact-React */}
+                    <a onClick={onCopy}>{text}</a>
+                </Tooltip>
+            </Lang>
+            {children}
+        </Base>
+    );
+};

src/components/markdown/plugins/anchors.tsx

@@ -0,0 +1,34 @@
+import { Link } from "react-router-dom";
+
+import { determineLink } from "../../../lib/links";
+
+import { modalController } from "../../../controllers/modals/ModalController";
+
+export function RenderAnchor({
+    href,
+    ...props
+}: JSX.HTMLAttributes<HTMLAnchorElement>) {
+    // Pass-through no href or if anchor
+    if (!href || href.startsWith("#")) return <a href={href} {...props} />;
+
+    // Determine type of link
+    const link = determineLink(href);
+    if (link.type === "none") return <a {...props} />;
+
+    // Render direct link if internal
+    if (link.type === "navigate") {
+        return <Link to={href} children={props.children} />;
+    }
+
+    return (
+        <a
+            {...props}
+            href={href}
+            target="_blank"
+            rel="noreferrer"
+            onClick={(ev) =>
+                modalController.openLink(href) && ev.preventDefault()
+            }
+        />
+    );
+}

src/components/markdown/plugins/channels.tsx

@@ -0,0 +1,21 @@
+import { Link } from "react-router-dom";
+
+import { clientController } from "../../../controllers/client/ClientController";
+import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
+
+export function RenderChannel({ match }: CustomComponentProps) {
+    const channel = clientController.getAvailableClient().channels.get(match)!;
+
+    return (
+        <Link
+            to={`${
+                channel.server_id ? `/server/${channel.server_id}` : ""
+            }/channel/${match}`}>{`#${channel.name}`}</Link>
+    );
+}
+
+export const remarkChannels = createComponent(
+    "channel",
+    /<#([A-z0-9]{26})>/g,
+    (match) => clientController.getAvailableClient().channels.has(match),
+);

src/components/markdown/plugins/emoji.tsx

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+
+import { emojiDictionary } from "../../../assets/emojis";
+import { clientController } from "../../../controllers/client/ClientController";
+import { parseEmoji } from "../../common/Emoji";
+import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
+
+const Emoji = styled.img`
+    object-fit: contain;
+
+    height: var(--emoji-size);
+    width: var(--emoji-size);
+    margin: 0 0.05em 0 0.1em;
+    vertical-align: -0.2em;
+`;
+
+export function RenderEmoji({ match }: CustomComponentProps) {
+    return (
+        <Emoji
+            alt={match}
+            loading="lazy"
+            className="emoji"
+            draggable={false}
+            src={parseEmoji(
+                emojiDictionary[match as keyof typeof emojiDictionary],
+            )}
+        />
+    );
+}
+
+const RE_EMOJI = /:([a-zA-Z0-9_]+):/g;
+
+export const remarkEmoji = createComponent(
+    "emoji",
+    RE_EMOJI,
+    (match) =>
+        match in emojiDictionary ||
+        clientController.getAvailableClient().emojis?.has(match),
+);
+
+export function isOnlyEmoji(text: string) {
+    return text.replaceAll(RE_EMOJI, "").trim().length === 0;
+}

src/components/markdown/plugins/mentions.tsx

@@ -0,0 +1,42 @@
+import { RE_MENTIONS } from "revolt.js";
+import styled from "styled-components";
+
+import { clientController } from "../../../controllers/client/ClientController";
+import UserShort from "../../common/user/UserShort";
+import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
+
+const Mention = styled.a`
+    gap: 4px;
+    padding: 0 6px;
+    flex-shrink: 0;
+    align-items: center;
+    display: inline-flex;
+
+    font-weight: 600;
+    background: var(--secondary-background);
+    border-radius: calc(var(--border-radius) * 2);
+
+    &:hover {
+        text-decoration: none;
+    }
+
+    svg {
+        width: 1em;
+        height: 1em;
+    }
+`;
+
+export function RenderMention({ match }: CustomComponentProps) {
+    return (
+        <Mention>
+            <UserShort
+                showServerIdentity
+                user={clientController.getAvailableClient().users.get(match)}
+            />
+        </Mention>
+    );
+}
+
+export const remarkMention = createComponent("mention", RE_MENTIONS, (match) =>
+    clientController.getAvailableClient().users.has(match),
+);

src/components/markdown/plugins/remarkRegexComponent.ts

@@ -0,0 +1,108 @@
+import type { Handler } from "mdast-util-to-hast";
+import type { Plugin } from "unified";
+import { visit } from "unist-util-visit";
+
+/**
+ * Props given to custom components
+ */
+export interface CustomComponentProps {
+    type: string;
+    match: string;
+    arg1: string;
+}
+
+/**
+ * Create a new custom component matched by a given RegExp
+ * @param type hast node type
+ * @param regex Regex to match (must have one capture group)
+ * @returns Unified Plugin
+ */
+export function createComponent(
+    type: string,
+    regex: RegExp,
+    validator?: (match: string) => boolean,
+): Plugin {
+    /**
+     * Plugin which transforms a given RegExp into a custom component with given name.
+     */
+    return () => {
+        return (tree) => {
+            visit(
+                tree,
+                "text",
+                (
+                    node: { value: string },
+                    index: number,
+                    parent: { children: any[] },
+                ) => {
+                    const result = [];
+                    let start = 0;
+
+                    regex.lastIndex = 0;
+
+                    let match = regex.exec(node.value);
+
+                    while (match) {
+                        if (!validator || validator(match[1])) {
+                            const position = match.index;
+
+                            if (start !== position) {
+                                result.push({
+                                    type: "text",
+                                    value: node.value.slice(start, position),
+                                });
+                            }
+
+                            result.push({
+                                type,
+                                match: match[1],
+                                arg1: match[2],
+                            });
+                            start = position + match[0].length;
+                        }
+
+                        match = regex.exec(node.value);
+                    }
+
+                    if (
+                        result.length > 0 &&
+                        parent &&
+                        typeof index === "number"
+                    ) {
+                        if (start < node.value.length) {
+                            result.push({
+                                type: "text",
+                                value: node.value.slice(start),
+                            });
+                        }
+
+                        parent.children.splice(index, 1, ...result);
+                        return index + result.length;
+                    }
+                },
+            );
+        };
+    };
+}
+
+/**
+ * Pass-through a component as-is from remark to rehype
+ * @param name Tag name
+ * @returns Handler
+ */
+export const passThroughRehype: (name: string) => Handler =
+    (name: string) => (h, node) =>
+        h(node, name, node);
+
+/**
+ * Pass-through multiple components at once
+ * @param keys Tags
+ * @returns Handlers
+ */
+export const passThroughComponents = (...keys: string[]) => {
+    const obj: Record<string, Handler> = {};
+    for (const key of keys) {
+        obj[key] = passThroughRehype(key);
+    }
+    return obj;
+};

src/components/markdown/plugins/spoiler.tsx

@@ -0,0 +1,45 @@
+import styled, { css } from "styled-components";
+
+import { useState } from "preact/hooks";
+
+import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
+
+const Spoiler = styled.span<{ shown: boolean }>`
+    padding: 0 2px;
+    cursor: pointer;
+    user-select: none;
+    color: transparent;
+    background: #151515;
+    border-radius: var(--border-radius);
+
+    > * {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    ${(props) =>
+        props.shown &&
+        css`
+            cursor: auto;
+            user-select: all;
+            color: var(--foreground);
+            background: var(--secondary-background);
+
+            > * {
+                opacity: 1;
+                pointer-events: unset;
+            }
+        `}
+`;
+
+export function RenderSpoiler({ match }: CustomComponentProps) {
+    const [shown, setShown] = useState(false);
+
+    return (
+        <Spoiler shown={shown} onClick={() => setShown(true)}>
+            {match}
+        </Spoiler>
+    );
+}
+
+export const remarkSpoiler = createComponent("spoiler", /!!([^!]+)!!/g);

src/components/markdown/plugins/timestamps.ts

@@ -0,0 +1,39 @@
+import type { Handler } from "mdast-util-to-hast";
+
+import { dayjs } from "../../../context/Locale";
+
+import { createComponent } from "./remarkRegexComponent";
+
+export const timestampHandler: Handler = (h, { match, arg1 }) => {
+    if (isNaN(match)) return { type: "text", value: match };
+    const date = dayjs.unix(match);
+
+    let value = "";
+    switch (arg1) {
+        case "t":
+            value = date.format("hh:mm");
+            break;
+        case "T":
+            value = date.format("hh:mm:ss");
+            break;
+        case "R":
+            value = date.fromNow();
+            break;
+        case "D":
+            value = date.format("DD MMMM YYYY");
+            break;
+        case "F":
+            value = date.format("dddd, DD MMMM YYYY hh:mm");
+            break;
+        default:
+            value = date.format("DD MMMM YYYY hh:mm");
+            break;
+    }
+
+    return h(null, "code", {}, [{ type: "text", value }]);
+};
+
+export const remarkTimestamps = createComponent(
+    "timestamp",
+    /<t:([0-9]+)(?::(\w))?>/g,
+);

src/controllers/modals/ModalController.tsx

@@ -210,10 +210,6 @@ class ModalControllerExtended extends ModalController<Modal> {
         const settings = getApplicationState().settings;
 
         switch (link.type) {
-            case "profile": {
-                this.push({ type: "user_profile", user_id: link.id });
-                break;
-            }
             case "navigate": {
                 history.push(link.path);
                 break;

src/lib/links.ts

@@ -1,11 +1,7 @@
 type LinkType =
-    | { type: "profile"; id: string }
-    | { type: "navigate"; path: string; navigation_type?: null }
     | {
           type: "navigate";
           path: string;
-          navigation_type: "channel";
-          channel_id: string;
       }
     | { type: "external"; href: string; url: URL }
     | { type: "none" };
@@ -17,9 +13,6 @@ const ALLOWED_ORIGINS = [
     "local.revolt.chat",
 ];
 
-const CHANNEL_PATH_RE =
-    /^\/server\/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}\/channel\/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}$/;
-
 export function determineLink(href?: string): LinkType {
     let internal,
         url: URL | null = null;
@@ -30,29 +23,12 @@ export function determineLink(href?: string): LinkType {
 
             if (ALLOWED_ORIGINS.includes(url.hostname)) {
                 const path = url.pathname;
-                if (path.startsWith("/@")) {
+                return { type: "navigate", path };
-                    const id = path.substr(2);
-                    if (/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}/.test(id)) {
-                        return { type: "profile", id };
-                    }
-                } else {
-                    if (CHANNEL_PATH_RE.test(path)) {
-                        return {
-                            type: "navigate",
-                            path,
-                            navigation_type: "channel",
-                            channel_id: path.slice(43),
-                        };
-                    }
-                    return { type: "navigate", path };
-                }
-
-                internal = true;
             }
         } catch (err) {}
 
         if (!internal && url) {
-            if (url.protocol !== "javascript") {
+            if (!url.protocol.startsWith("javascript")) {
                 return { type: "external", href, url };
             }
         }