init

frontend/src/pages/server/channel/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import MarkdownIt from 'markdown-it'
 import {computed, onMounted, ref, watch} from 'vue';
 import {useRoute} from 'vue-router';
 import {storeToRefs} from 'pinia'; // Import crucial
@@ -19,6 +20,15 @@ const {messages, loading} = storeToRefs(messageStore);
 
 const newMessage = ref('');
 
+const md = new MarkdownIt({
+  html: false,        // Désactive le HTML pur pour la sécurité
+  linkify: true,      // Convertit automatiquement les URLs en liens
+  typographer: true,
+  breaks: true        // Convertit les retours à la ligne en <br> (comportement type chat)
+})
+const renderMarkdown = (content: string) => {
+  return md.render(content);
+};
 
 const sendMessage = async () => {
   if (!newMessage.value.trim()) return;
@@ -70,7 +80,7 @@ watch(channelId, (newChannelId) => {
           </v-list-item-title>
 
           <v-list-item-subtitle class="text-body-1 text-high-emphasis opacity-100">
-            {{ msg.content }}
+            <div class="markdown-content" v-html="renderMarkdown(msg.content)"></div>
           </v-list-item-subtitle>
         </v-list-item>
       </v-list>
@@ -78,16 +88,19 @@ watch(channelId, (newChannelId) => {
 
     <!-- Zone de saisie fixe en bas -->
     <v-sheet class="pa-4" width="100%">
-      <v-text-field
+      <v-textarea
         v-model="newMessage"
+        auto-grow
         bg-color="grey-lighten-4"
         density="compact"
         flat
         hide-details
+        max-rows="5"
         placeholder="Envoyer un message..."
         rounded="lg"
+        rows="1"
         variant="solo-filled"
-        @keyup.enter="sendMessage"
+        @keydown.enter.exact.prevent="sendMessage"
       >
         <template v-slot:prepend-inner>
           <v-btn color="grey-darken-1" density="compact" icon="mdi-plus-circle" variant="text"></v-btn>
@@ -97,12 +110,30 @@ watch(channelId, (newChannelId) => {
           <v-btn color="grey-darken-1" density="compact" icon="mdi-sticker-emoji" variant="text"></v-btn>
           <v-btn color="grey-darken-1" density="compact" icon="mdi-emoticon" variant="text"></v-btn>
         </template>
-      </v-text-field>
+      </v-textarea>
     </v-sheet>
 
   </v-container>
 </template>
 
 <style scoped>
+.markdown-content :deep(p) {
+  margin-bottom: 0; /* Évite les marges inutiles dans le chat */
+}
 
+.markdown-content :deep(code) {
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.markdown-content :deep(pre) {
+  background-color: #2d2d2d;
+  color: #ccc;
+  padding: 10px;
+  border-radius: 4px;
+  margin: 8px 0;
+  overflow-x: auto;
+}
 </style>