feat: Markdown Support

TODO.md

@@ -7,7 +7,7 @@ A more complex version of this list is available [here](https://trello.com/b/kJw
 - [ ] Documentation
 - [ ] Emoji picker
 - [ ] Images/Attatchments support
-- [ ] Markdown Support
+- [X] Markdown Support
 - [ ] Profile photos
 - [ ] Reactive channels list
 - [ ] Show characters before message gets cut off in textarea

package.json

@@ -19,6 +19,8 @@
     "@eslint/js": "^9.18.0",
     "@sveltejs/kit": "^2.16.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/markdown-it": "^14.1.2",
     "autoprefixer": "^10.4.20",
     "bits-ui": "^0.22.0",
     "clsx": "^2.1.1",
@@ -26,6 +28,7 @@
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-svelte": "^2.46.1",
     "globals": "^15.14.0",
+    "markdown-it": "^14.1.0",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.11",

src/lib/components/message.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { type TypeMessage } from '$lib/types';
   import escapeHTML from '$lib/functions/escapeHTML';
+  import Prose from '$lib/components/prose.svelte';
+  import renderMarkdown from '$lib/functions/renderMarkdown';
   const { message, imageSrc, user }: TypeMessage = $props();
 </script>
 
@@ -12,7 +14,7 @@
   </div>
   <div class="w-full">
     <p class="inline-size-full break-words font-bold">{user}</p>
-    <pre class="inline-size-full text-wrap break-words font-sans">{@html escapeHTML(message)}</pre>
+    <Prose class="inline-size-full text-wrap break-words font-sans">{@html renderMarkdown(escapeHTML(message))}</Prose>
   </div>
 </div>
 

src/lib/components/prose.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children: Snippet;
+    class: string;
+  }
+
+  const { children, class: className = '' }: Props = $props();
+</script>
+
+<div class={className + ' prose prose-stone dark:prose-invert prose-blue'}>{@render children()}</div>

src/lib/functions/renderMarkdown.ts

@@ -0,0 +1,12 @@
+import markdownit from 'markdown-it';
+
+export default function renderMarkdown(input: string): string {
+  const md = markdownit({
+    html: false,
+    linkify: true,
+    typographer: true,
+    breaks: true,
+  }).disable(['image', 'table']);
+
+  return md.render(input);
+}

tailwind.config.ts

@@ -1,5 +1,6 @@
 import { fontFamily } from 'tailwindcss/defaultTheme';
 import type { Config } from 'tailwindcss';
+import typography from '@tailwindcss/typography';
 
 const config: Config = {
   darkMode: ['class'],
@@ -59,6 +60,7 @@ const config: Config = {
       },
     },
   },
+  plugins: [typography],
 };
 
 export default config;