v3: added content slugs, fixed real-time updates in client, added @mentions across the app, added new file selector and drop zone

src/components/Markdown.tsx

@@ -1,3 +1,4 @@
+import { Link } from "react-router";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
@@ -9,6 +10,11 @@ interface MarkdownProps {
 
 const REMARK_PLUGINS = [remarkGfm];
 
+// Convert bare @username (not already inside a markdown link) to clickable links
+function preprocessMentions(text: string): string {
+  return text.replace(/(?<![[(])@([\w]+)/g, "[@$1](/users/$1)");
+}
+
 export function Markdown(
   { children, className, inline = false }: MarkdownProps,
 ) {
@@ -21,14 +27,19 @@ export function Markdown(
       <ReactMarkdown
         remarkPlugins={REMARK_PLUGINS}
         components={{
-          a: ({ href, children }) => (
-            <a href={href} target="_blank" rel="noopener noreferrer">
-              {children}
-            </a>
-          ),
+          a: ({ href, children: linkChildren }) => {
+            if (href?.startsWith("/users/")) {
+              return <Link to={href}>{linkChildren}</Link>;
+            }
+            return (
+              <a href={href} target="_blank" rel="noopener noreferrer">
+                {linkChildren}
+              </a>
+            );
+          },
         }}
       >
-        {children}
+        {preprocessMentions(children)}
       </ReactMarkdown>
     </div>
   );