feat: support markdown formatting and rendering

Resolves #110
Goes the extra mile and supports markdown for sending code and formatted
text, almost document-like. It feels more like GitHub's comments and
text areas.

js/src/features/particles/text-particle-view.tsx

@@ -10,6 +10,10 @@ import {
 } from "@/components/link-preview-card";
 import { useParticleAttachments } from "@/hooks/use-particle-attachments";
 import { ParticleAttachments } from "@/features/particles/particle-attachments";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+import "highlight.js/styles/github-dark.css";
 
 type TextParticle = Extract<Particle, { type: "text" }>;
 
@@ -48,6 +52,70 @@ function getImmersiveTextStyle(length: number) {
   return { size: "text-2xl", weight: "font-normal" };
 }
 
+function hasMarkdownFormatting(content: string): boolean {
+  return /^#{1,6} |^\s*[-*+] |^\s*\d+\. |^```|`[^`]+`|\*\*|__|\*[^*]|_[^_]|^>/m.test(content);
+}
+
+const markdownComponents: React.ComponentProps<typeof ReactMarkdown>["components"] = {
+  h1: ({ children }) => <h1 className="mb-3 text-3xl font-bold text-white">{children}</h1>,
+  h2: ({ children }) => <h2 className="mb-2 text-2xl font-semibold text-white">{children}</h2>,
+  h3: ({ children }) => <h3 className="mb-2 text-xl font-semibold text-white">{children}</h3>,
+  h4: ({ children }) => <h4 className="mb-1 text-lg font-medium text-white">{children}</h4>,
+  h5: ({ children }) => <h5 className="mb-1 text-base font-medium text-white">{children}</h5>,
+  h6: ({ children }) => <h6 className="mb-1 text-sm font-medium text-white">{children}</h6>,
+  p: ({ children }) => <p className="mb-3 leading-relaxed text-white last:mb-0">{children}</p>,
+  strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
+  em: ({ children }) => <em className="italic text-white">{children}</em>,
+  a: ({ href, children }) => (
+    <a href={href} className="text-blue-400 underline" target="_blank" rel="noreferrer">
+      {children}
+    </a>
+  ),
+  code: ({ className, children, ...props }) => {
+    const isBlock = className?.startsWith("language-");
+    if (isBlock) {
+      return (
+        <code className={cn(className, "text-sm")} {...props}>
+          {children}
+        </code>
+      );
+    }
+    return (
+      <code className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-sm text-white" {...props}>
+        {children}
+      </code>
+    );
+  },
+  pre: ({ children }) => (
+    <pre className="mb-3 overflow-x-auto rounded-lg bg-black/40 p-4 text-sm last:mb-0">
+      {children}
+    </pre>
+  ),
+  ul: ({ children }) => <ul className="mb-3 list-disc pl-5 text-white last:mb-0">{children}</ul>,
+  ol: ({ children }) => <ol className="mb-3 list-decimal pl-5 text-white last:mb-0">{children}</ol>,
+  li: ({ children }) => <li className="mb-1 leading-relaxed">{children}</li>,
+  blockquote: ({ children }) => (
+    <blockquote className="mb-3 border-l-2 border-white/30 pl-4 italic text-white/70 last:mb-0">
+      {children}
+    </blockquote>
+  ),
+  hr: () => <hr className="my-4 border-white/10" />,
+};
+
+function MarkdownContent({ content, className }: { content: string; className?: string }) {
+  return (
+    <div className={cn("break-words overflow-hidden", className)}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeHighlight]}
+        components={markdownComponents}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
 function LinkPreviews({ entries }: { entries: LinkPreviewEntry[] }) {
   return (
     <div className="flex flex-wrap gap-3">
@@ -119,8 +187,8 @@ export function TextParticleView({
     );
   }
 
-  // Mode 2: short text, no enrichments — immersive centered display
-  if (content.length < IMMERSIVE_CHAR_LIMIT && !hasEnrichments) {
+  // Mode 2: short plain text, no enrichments — immersive centered display
+  if (content.length < IMMERSIVE_CHAR_LIMIT && !hasEnrichments && !hasMarkdownFormatting(content)) {
     const style = getImmersiveTextStyle(content.length);
     return (
       <div className="flex h-full w-full flex-col items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
@@ -137,13 +205,11 @@ export function TextParticleView({
     );
   }
 
-  // Mode 3: card layout with enrichments
+  // Mode 3: card layout
   return (
     <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
       <div className="flex max-h-full w-full max-w-2xl flex-col gap-4 overflow-y-auto rounded-2xl bg-white/10 p-5 backdrop-blur-md">
-        <p className="break-words text-base leading-relaxed text-white select-text cursor-text">
-          {content}
-        </p>
+        <MarkdownContent content={content} className="break-words select-text cursor-text" />
 
         {hasLinks && <LinkPreviews entries={linkPreviews} />}